/* Imara Studio Phase 22 — app-wide overlay, palette and component polish */
:root{
  --im-overlay:rgba(17,24,39,.58);
  --im-overlay-soft:rgba(17,24,39,.46);
  --im-popover-bg:#ffffff;
  --im-popover-border:#dfe4ec;
  --im-popover-text:#182230;
  --im-popover-muted:#667085;
  --im-popover-active:#f0eaff;
  --im-popover-active-border:#d7c7ff;
  --im-icon-bg:#f4f1ff;
  --im-icon-text:#6941c6;
}

/* Correct topbar text and credits across all pages. */
.studio-topbar{
  background:rgba(255,255,255,.94)!important;
  border-bottom:1px solid var(--im-border)!important;
  box-shadow:0 1px 0 rgba(16,24,40,.02)!important;
}
.studio-topbar .topbar-title strong{
  color:#182230!important;
}
.studio-topbar .topbar-title span{
  color:#667085!important;
}
.topbar-command,
.topbar-icon,
.profile-chip,
.topbar-credits{
  background:#fff!important;
  color:#182230!important;
  border:1px solid #dfe4ec!important;
  box-shadow:0 2px 5px rgba(16,24,40,.06)!important;
}
.topbar-command:hover,
.topbar-icon:hover,
.profile-chip:hover,
.topbar-credits:hover{
  border-color:#c8b5ff!important;
  background:#fbfaff!important;
}
.topbar-credits strong{
  display:inline!important;
  color:#182230!important;
  opacity:1!important;
  visibility:visible!important;
  font-weight:850!important;
}
.topbar-credits span{
  color:#475467!important;
}
.topbar-icon .notification-dot,
.topbar-icon .notification-count{
  color:#fff!important;
}

/* Shared overlays: less muddy, cleaner focus. */
.create-command-modal,
.command-palette,
.template-preview-modal,
.media-preview-drawer,
.fullscreen-review{
  isolation:isolate;
}
.create-command-modal::before,
.command-palette::before,
.template-preview-modal::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--im-overlay-soft);
  backdrop-filter:blur(4px);
  pointer-events:none;
}
.command-palette-backdrop,
.create-command-backdrop,
.template-preview-backdrop,
.preview-drawer-backdrop{
  background:transparent!important;
  backdrop-filter:none!important;
}

/* All popovers and dialog panels use the same trustworthy surface. */
.command-palette-panel,
.create-command-panel,
.notification-panel,
.workspace-switcher-menu,
.profile-menu,
.template-preview-modal section,
.preview-drawer-panel{
  background:var(--im-popover-bg)!important;
  color:var(--im-popover-text)!important;
  border:1px solid var(--im-popover-border)!important;
  box-shadow:0 30px 90px rgba(16,24,40,.22)!important;
}
.command-palette-panel,
.create-command-panel{
  position:relative;
  z-index:2;
}

/* Command palette */
.command-palette{
  padding:clamp(14px,5vh,54px) 14px;
  overflow:auto;
}
.command-palette-panel{
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto;
  width:min(760px,calc(100vw - 28px))!important;
  max-height:min(620px,calc(100vh - 40px))!important;
  margin:0 auto!important;
  border-radius:24px!important;
  overflow:hidden!important;
}
.command-search{
  position:sticky;
  top:0;
  z-index:3;
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:10px!important;
  min-height:78px;
  padding:14px 16px!important;
  background:#fff!important;
  border-bottom:1px solid var(--im-popover-border)!important;
}
.command-search>span:first-child{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:var(--im-icon-bg);
  color:var(--im-icon-text)!important;
  font-size:16px;
}
.command-search input{
  min-width:0;
  min-height:50px!important;
  margin:0!important;
  padding:0 14px!important;
  background:#fff!important;
  color:#182230!important;
  border:1px solid #cfd6e1!important;
  border-radius:13px!important;
  font-size:17px!important;
  box-shadow:none!important;
}
.command-search input::placeholder{
  color:#7b8495!important;
}
.command-search input:focus{
  border-color:#8061d6!important;
  box-shadow:0 0 0 4px rgba(105,65,198,.14)!important;
}
.command-search kbd{
  min-width:38px;
  color:#667085!important;
  background:#f8f9fb!important;
  border:1px solid #e1e5ec!important;
  border-radius:8px;
  padding:6px 8px;
  text-align:center;
  font-weight:750;
}
.command-results{
  min-height:0;
  max-height:none!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  padding:10px 12px 14px!important;
  background:#fff;
  scrollbar-width:thin;
  scrollbar-color:#b4bac5 transparent;
}
.command-results::-webkit-scrollbar{
  width:7px;
}
.command-results::-webkit-scrollbar-track{
  background:transparent;
}
.command-results::-webkit-scrollbar-thumb{
  background:#b4bac5;
  border-radius:99px;
}
.command-group-label{
  display:flex;
  align-items:center;
  min-height:30px;
  padding:10px 10px 5px;
  color:#697386!important;
  font-size:11px;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.command-results a{
  position:relative;
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) auto!important;
  align-items:center;
  gap:13px!important;
  min-height:70px;
  padding:11px 13px!important;
  margin:2px 0;
  color:#182230!important;
  background:#fff!important;
  border:1px solid transparent!important;
  border-radius:14px!important;
}
.command-results a:hover,
.command-results a.is-selected{
  background:var(--im-popover-active)!important;
  border-color:var(--im-popover-active-border)!important;
}
.command-results a.is-selected::before{
  content:"";
  position:absolute;
  left:-1px;
  top:12px;
  bottom:12px;
  width:4px;
  border-radius:0 5px 5px 0;
  background:#6941c6;
}
.command-results a>span{
  display:grid!important;
  place-items:center!important;
  width:42px!important;
  height:42px!important;
  border-radius:12px!important;
  background:var(--im-icon-bg)!important;
  color:var(--im-icon-text)!important;
  border:1px solid #e3d9ff!important;
  font-size:17px!important;
  font-weight:900!important;
}
.command-results a:hover>span,
.command-results a.is-selected>span{
  color:#fff!important;
  background:#6941c6!important;
  border-color:#6941c6!important;
}
.command-results strong{
  display:block;
  color:#182230!important;
  font-size:15px!important;
  font-weight:850!important;
}
.command-results small{
  display:block;
  margin-top:3px!important;
  color:#667085!important;
  font-size:13px!important;
}
.command-results kbd{
  color:#667085!important;
  background:#f8f9fb!important;
  border:1px solid #e1e5ec!important;
  border-radius:7px;
  padding:4px 7px;
  font-size:10px!important;
  font-weight:750;
}
.command-footer{
  position:sticky;
  bottom:0;
  z-index:3;
  display:flex!important;
  align-items:center;
  flex-wrap:wrap;
  gap:18px!important;
  min-height:46px;
  padding:10px 16px!important;
  color:#667085!important;
  background:#fbfcfe!important;
  border-top:1px solid var(--im-popover-border)!important;
  font-size:11px!important;
}
.command-footer kbd{
  color:#475467!important;
  background:#fff!important;
  border:1px solid #dfe4ec!important;
  border-radius:6px;
  padding:3px 6px;
}

/* Quick-create modal */
.create-command-panel{
  width:min(620px,calc(100vw - 28px))!important;
  max-height:min(620px,calc(100vh - 34px))!important;
  border-radius:24px!important;
  overflow:auto!important;
  scrollbar-width:thin;
}
.create-command-panel :is(h2,h3,strong){
  color:#182230!important;
}
.create-command-panel :is(p,small){
  color:#667085!important;
}
.create-command-panel a,
.create-command-panel button{
  border-radius:13px!important;
}

/* Notification, workspace and profile popovers */
.notification-panel,
.workspace-switcher-menu,
.profile-menu{
  border-radius:16px!important;
  overflow:hidden;
}
.notification-panel :is(h2,h3,strong),
.workspace-switcher-menu :is(h2,h3,strong),
.profile-menu :is(h2,h3,strong){
  color:#182230!important;
}
.notification-panel :is(p,small,span),
.workspace-switcher-menu :is(p,small,span),
.profile-menu :is(p,small,span){
  color:#667085!important;
}
.notification-panel a,
.workspace-switcher-menu button,
.profile-menu a{
  color:#344054!important;
}
.notification-panel a:hover,
.workspace-switcher-menu button:hover,
.profile-menu a:hover{
  background:#f6f2ff!important;
  color:#4f299f!important;
}

/* Dialog headers and buttons */
:is(.command-palette-panel,.create-command-panel,.notification-panel,.workspace-switcher-menu,.profile-menu,.template-preview-modal section) button{
  color:#344054;
}
:is(.command-palette-panel,.create-command-panel,.notification-panel,.workspace-switcher-menu,.profile-menu,.template-preview-modal section) button:focus-visible{
  box-shadow:0 0 0 4px rgba(105,65,198,.16)!important;
}

/* Avoid washed-out disabled controls. */
body:has(.studio-sidebar) :is(button,a,input,select,textarea):disabled,
body:has(.studio-sidebar) [aria-disabled="true"]{
  opacity:.58!important;
}

/* Mobile dialog behaviour */
@media(max-width:700px){
  .command-palette{
    padding:10px;
  }
  .command-palette-panel{
    max-height:calc(100dvh - 20px)!important;
    border-radius:18px!important;
  }
  .command-search{
    min-height:68px;
    padding:10px!important;
  }
  .command-search kbd{
    display:none;
  }
  .command-results{
    padding-inline:8px!important;
  }
  .command-results a{
    min-height:64px;
    padding:9px 10px!important;
  }
  .command-footer{
    gap:12px!important;
  }
}