/* Vchat Core 0.30.0 — Notifications, workspace and connections stabilization */
.vchat-frontend-app,
.vchat-frontend-app *{box-sizing:border-box}

/* Notification center: always overlay, never part of the page flow. */
.vchat-notification-backdrop{
  position:fixed!important;inset:0!important;z-index:2147483500!important;
  display:block!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  background:rgba(20,18,43,.42)!important;backdrop-filter:blur(5px);transition:opacity .22s ease,visibility .22s ease;
}
.vchat-notification-backdrop.is-open{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.vchat-notification-drawer{
  position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;
  z-index:2147483600!important;width:min(430px,100vw)!important;height:100dvh!important;
  display:flex!important;flex-direction:column!important;overflow:hidden!important;
  transform:translateX(105%)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  border:0!important;border-left:1px solid #e4e0f2!important;border-radius:0!important;
  background:#fbfaff!important;box-shadow:-28px 0 90px rgba(28,23,65,.24)!important;
  transition:transform .25s ease,opacity .2s ease,visibility .2s ease!important;
}
.vchat-notification-drawer.is-open{transform:translateX(0)!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.vchat-notification-drawer>header{
  flex:0 0 auto!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;
  min-height:92px!important;padding:22px 22px 18px!important;border-bottom:1px solid #e6e2f2!important;background:#fff!important;
}
.vchat-notification-drawer>header small{display:block!important;margin-bottom:4px!important;color:#817d94!important;font-size:11px!important;font-weight:700!important}
.vchat-notification-drawer>header strong{display:block!important;color:#201d3d!important;font-size:25px!important;line-height:1.1!important;letter-spacing:-.6px!important}
.vchat-notification-drawer>header button{
  flex:0 0 42px!important;width:42px!important;height:42px!important;display:grid!important;place-items:center!important;
  margin:0!important;padding:0!important;border:1px solid #e4e0f2!important;border-radius:14px!important;background:#f2f0fa!important;
  color:#55479a!important;font-size:22px!important;line-height:1!important;cursor:pointer!important;
}
#vchat-notification-list{flex:1 1 auto!important;min-height:0!important;overflow:auto!important;padding:14px!important;background:#f8f7fc!important}
.vchat-notification-row{
  width:100%!important;display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;align-items:start!important;gap:12px!important;
  margin:0 0 10px!important;padding:14px!important;border:1px solid #e3dff0!important;border-radius:17px!important;background:#fff!important;
  color:#24203f!important;text-align:left!important;box-shadow:0 8px 24px rgba(40,34,78,.045)!important;cursor:pointer!important;
}
.vchat-notification-row.is-unread{border-color:#cfc6ef!important;background:#f3f0ff!important;box-shadow:0 10px 28px rgba(85,71,154,.09)!important}
.vchat-notification-row>span{width:42px!important;height:42px!important;display:grid!important;place-items:center!important;border-radius:13px!important;background:#5b4aa9!important;color:#fff!important;font-size:12px!important;font-weight:900!important}
.vchat-notification-row>div{min-width:0!important}
.vchat-notification-row strong{display:block!important;color:#342d6a!important;font-size:13px!important;line-height:1.35!important;overflow-wrap:anywhere!important}
.vchat-notification-row p{margin:5px 0!important;color:#67637a!important;font-size:12px!important;line-height:1.45!important;overflow-wrap:anywhere!important}
.vchat-notification-row small{display:block!important;color:#9a96a8!important;font-size:10px!important;line-height:1.4!important}
html.vchat-notifications-open{overflow:hidden!important}

/* Workspace settings */
.vchat-app-section[data-vchat-panel="settings"],
.vchat-app-section[data-vchat-panel="connections"]{padding:30px!important;background:#f6f5fb!important}
.vchat-app-section[data-vchat-panel="settings"] .vchat-page-heading,
.vchat-app-section[data-vchat-panel="connections"] .vchat-page-heading{max-width:980px!important;margin:0 0 24px!important}
.vchat-app-section[data-vchat-panel="settings"] .vchat-page-heading h1,
.vchat-app-section[data-vchat-panel="connections"] .vchat-page-heading h1{margin:10px 0 7px!important;color:#1f1b3b!important;font-size:40px!important;line-height:1.04!important;letter-spacing:-1.8px!important}
.vchat-app-section[data-vchat-panel="settings"] .vchat-page-heading p,
.vchat-app-section[data-vchat-panel="connections"] .vchat-page-heading p{max-width:740px!important;color:#747087!important;font-size:14px!important;line-height:1.55!important}
.vchat-settings-layout{display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(350px,.65fr)!important;gap:18px!important;align-items:start!important}
.vchat-settings-layout>.vchat-app-card{min-width:0!important;margin:0!important;padding:22px!important;border:1px solid #dfdbea!important;border-radius:22px!important;background:#fff!important;box-shadow:0 14px 40px rgba(38,32,72,.055)!important}
.vchat-settings-layout>.vchat-app-card:first-child{grid-row:span 2!important}
.vchat-card-heading{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:16px!important;margin:0 0 20px!important;padding:0 0 16px!important;border-bottom:1px solid #ece9f5!important}
.vchat-card-heading small{display:block!important;margin-bottom:4px!important;color:#858097!important;font-size:10px!important;font-weight:750!important}
.vchat-card-heading h2{margin:0!important;color:#211d3e!important;font-size:22px!important;line-height:1.15!important;letter-spacing:-.5px!important}
.vchat-card-heading>span,.vchat-card-heading>button{flex:0 0 auto!important;max-width:45%!important;padding:7px 10px!important;border:1px solid #e5e1f1!important;border-radius:999px!important;background:#f3f1fb!important;color:#6555a5!important;font-size:9px!important;font-weight:800!important;white-space:nowrap!important}
.vchat-settings-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:15px!important}
.vchat-settings-grid label{display:flex!important;min-width:0!important;flex-direction:column!important;gap:7px!important;color:#292541!important;font-size:11px!important;font-weight:780!important;line-height:1.3!important}
.vchat-settings-grid input,.vchat-settings-grid select,.vchat-settings-grid textarea{
  width:100%!important;min-width:0!important;min-height:46px!important;margin:0!important;padding:12px 14px!important;
  border:1px solid #dcd7ec!important;border-radius:13px!important;background:#faf9fd!important;color:#28233f!important;
  font:inherit!important;font-size:13px!important;font-weight:550!important;line-height:1.35!important;box-shadow:none!important;outline:none!important;
}
.vchat-settings-grid textarea{min-height:94px!important;resize:vertical!important}
.vchat-settings-grid input:focus,.vchat-settings-grid select:focus,.vchat-settings-grid textarea:focus{border-color:#7b69c6!important;background:#fff!important;box-shadow:0 0 0 3px rgba(101,84,184,.12)!important}
.vchat-settings-layout .vchat-primary-button{margin-top:18px!important;min-height:44px!important;padding:11px 16px!important;border:0!important;border-radius:13px!important;background:#5a49a3!important;color:#fff!important;font-size:11px!important;font-weight:850!important}
.vchat-sound-settings-card{display:block!important}
.vchat-preference-list{margin:0!important;border:1px solid #e5e1f0!important;border-radius:16px!important;overflow:hidden!important;background:#faf9fd!important}
.vchat-preference-list label{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;padding:15px!important;color:#28233f!important}
.vchat-preference-list label>span{min-width:0!important}
.vchat-preference-list strong,.vchat-preference-list small{display:block!important}
.vchat-preference-list strong{font-size:12px!important;line-height:1.3!important}
.vchat-preference-list small{margin-top:4px!important;color:#7b768a!important;font-size:10px!important;line-height:1.4!important}
.vchat-preference-list input[type="checkbox"]{flex:0 0 22px!important;width:22px!important;height:22px!important;margin:0!important;accent-color:#5a49a3!important}
.vchat-sound-settings-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:13px!important;margin:14px 0!important}
.vchat-sound-settings-grid.is-single{grid-template-columns:1fr!important}
.vchat-sound-settings-grid>label{display:block!important;min-width:0!important;padding:14px!important;border:1px solid #e5e1f0!important;border-radius:16px!important;background:#fff!important}
.vchat-sound-settings-grid>label>span{display:block!important;margin-bottom:9px!important;color:#2a2544!important;font-size:11px!important;font-weight:800!important}
.vchat-sound-settings-grid>label>div{display:grid!important;grid-template-columns:minmax(0,1fr) 42px!important;gap:8px!important}
.vchat-sound-settings-grid select{width:100%!important;min-width:0!important;height:42px!important;margin:0!important;padding:0 12px!important;border:1px solid #dcd7ec!important;border-radius:12px!important;background:#faf9fd!important;color:#2a2544!important;font-size:11px!important;font-weight:700!important}
.vchat-sound-settings-grid button{width:42px!important;height:42px!important;display:grid!important;place-items:center!important;margin:0!important;padding:0!important;border:1px solid #dcd7ec!important;border-radius:12px!important;background:#f2effb!important;color:#5a49a3!important;font-size:14px!important}
.vchat-sound-settings-grid small{display:block!important;margin-top:8px!important;color:#7d788c!important;font-size:9px!important;line-height:1.45!important}
.vchat-preference-list-secondary{margin-top:14px!important}
.vchat-preference-list-secondary label+label{border-top:1px solid #e8e4f2!important}
.vchat-system-health dl{margin:0!important}
.vchat-system-health dl>div{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:15px!important;padding:13px 0!important;border-bottom:1px solid #ece9f5!important}
.vchat-system-health dt{color:#777287!important;font-size:11px!important}.vchat-system-health dd{margin:0!important;color:#292441!important;font-size:12px!important;font-weight:850!important}

/* Connections and Widget Studio */
.vchat-connections-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important;margin-bottom:18px!important}
.vchat-connections-grid article{display:grid!important;grid-template-columns:46px minmax(0,1fr) auto!important;align-items:center!important;gap:12px!important;min-width:0!important;min-height:88px!important;padding:15px!important;border:1px solid #dfdbea!important;border-radius:19px!important;background:#fff!important;box-shadow:0 12px 32px rgba(38,32,72,.045)!important}
.vchat-connections-grid article>span{width:46px!important;height:46px!important;display:grid!important;place-items:center!important;border-radius:14px!important;background:#f1eff9!important;color:#5a49a3!important;font-size:10px!important;font-weight:900!important}
.vchat-connections-grid article>div{min-width:0!important}.vchat-connections-grid article strong{display:block!important;color:#25213f!important;font-size:12px!important;line-height:1.25!important}.vchat-connections-grid article small{display:block!important;margin-top:4px!important;color:#7d788d!important;font-size:9px!important;line-height:1.35!important;overflow-wrap:anywhere!important}
.vchat-connections-grid article button,.vchat-connections-grid article em{justify-self:end!important;margin:0!important;padding:8px 10px!important;border:1px solid #ded9ed!important;border-radius:11px!important;background:#fff!important;color:#5a49a3!important;font-size:9px!important;font-style:normal!important;font-weight:850!important;white-space:nowrap!important}
.vchat-connections-grid article.is-featured{border-color:#d1c8f1!important;background:linear-gradient(135deg,#fff,#f1edff)!important}.vchat-connections-grid article.is-featured em{border-color:#ccebd7!important;background:#eaf8ef!important;color:#31845a!important}
.vchat-widget-studio{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr)!important;gap:18px!important;align-items:start!important}
.vchat-widget-studio>.vchat-app-card{min-width:0!important;margin:0!important;padding:22px!important;border:1px solid #dfdbea!important;border-radius:22px!important;background:#fff!important;box-shadow:0 14px 40px rgba(38,32,72,.055)!important}
.vchat-widget-settings-card .vchat-field-full{grid-column:1/-1!important}
.vchat-inline-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:9px!important;margin-top:18px!important;padding-top:16px!important;border-top:1px solid #ece9f5!important}
.vchat-inline-actions button{min-height:42px!important;margin:0!important;padding:10px 14px!important;border:1px solid #ddd8ec!important;border-radius:12px!important;background:#fff!important;color:#5a49a3!important;font-size:10px!important;font-weight:850!important}
.vchat-inline-actions button.primary{border-color:#5a49a3!important;background:#5a49a3!important;color:#fff!important}
.vchat-widget-preview-canvas{position:relative!important;min-height:480px!important;display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;padding:22px!important;overflow:hidden!important;border:1px solid #e2deee!important;border-radius:20px!important;background:radial-gradient(circle at 80% 20%,rgba(117,96,203,.13),transparent 32%),#f8f7fc!important}
.vchat-mini-widget{width:min(320px,100%)!important;overflow:hidden!important;border:1px solid #ded9ec!important;border-radius:19px!important;background:#fff!important;box-shadow:0 20px 60px rgba(38,32,72,.16)!important}

@media(max-width:1180px){
  .vchat-connections-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .vchat-widget-studio{grid-template-columns:1fr!important}
  .vchat-widget-preview-canvas{min-height:390px!important}
  .vchat-settings-layout{grid-template-columns:1fr!important}
  .vchat-settings-layout>.vchat-app-card:first-child{grid-row:auto!important}
}
@media(max-width:700px){
  .vchat-app-section[data-vchat-panel="settings"],.vchat-app-section[data-vchat-panel="connections"]{padding:20px 14px 42px!important}
  .vchat-app-section[data-vchat-panel="settings"] .vchat-page-heading h1,.vchat-app-section[data-vchat-panel="connections"] .vchat-page-heading h1{font-size:32px!important;letter-spacing:-1.2px!important}
  .vchat-settings-grid,.vchat-sound-settings-grid,.vchat-connections-grid{grid-template-columns:1fr!important}
  .vchat-settings-layout>.vchat-app-card,.vchat-widget-studio>.vchat-app-card{padding:17px!important;border-radius:19px!important}
  .vchat-card-heading{gap:10px!important}.vchat-card-heading h2{font-size:20px!important}.vchat-card-heading>span,.vchat-card-heading>button{max-width:48%!important}
  .vchat-widget-preview-canvas{min-height:360px!important;padding:14px!important}
  .vchat-notification-drawer{width:100vw!important;height:100dvh!important;border-left:0!important;border-radius:0!important}
  .vchat-notification-drawer>header{padding-top:max(18px,env(safe-area-inset-top))!important}
  #vchat-notification-list{padding:12px 12px calc(18px + env(safe-area-inset-bottom))!important}
}