/* ─── UX Components layer — overlays, banners, onboarding and feature modal ── */

/* ── GLOBAL SEARCH PALETTE ──────────────────────────────────────────────── */
.gs-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.62);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  animation: gsIn .12s cubic-bezier(.22,.6,.36,1) both;
}
@keyframes gsIn {
  from { opacity:0; }
  to   { opacity:1; }
}
.gs-panel {
  width: min(620px, 92vw);
  background: #1e1a16;
  border: 1px solid rgba(248,189,36,.28);
  border-radius: 14px;
  box-shadow: 0 32px 80px rgba(0,0,0,.72);
  overflow: hidden;
  animation: gsPanelIn .14s cubic-bezier(.22,.6,.36,1) both;
}
@keyframes gsPanelIn {
  from { transform: translateY(-12px) scale(.97); opacity:0; }
  to   { transform: none; opacity:1; }
}
.gs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.gs-icon {
  color: #a8a29a;
  font-size: 18px;
  flex: 0 0 auto;
}
.gs-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #f3ece0;
  font-size: 15px;
  font-family: inherit;
  caret-color: var(--gold);
}
.gs-input::placeholder { color: #6e6660; }
.gs-esc {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 5px;
  font-size: 10px;
  color: #7a736c;
  background: rgba(255,255,255,.04);
}
.gs-results {
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.gs-section {
  padding: 6px 8px 4px;
}
.gs-section > span {
  display: block;
  padding: 6px 8px 4px;
  color: #6e6660;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.gs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #d7cec6;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background .1s;
}
.gs-item:hover,
.gs-item.is-active {
  background: rgba(248,189,36,.1);
  color: #fff5df;
}
.gs-item-icon {
  flex: 0 0 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  font-size: 13px;
}
.gs-item-text {
  display: grid;
  gap: 1px;
}
.gs-item-text b { font-weight: 700; color: #f3ece0; }
.gs-item-text small { color: #7a736c; font-size: 11px; }
.gs-empty {
  padding: 28px 16px;
  text-align: center;
  color: #6e6660;
  font-size: 13px;
}
.gs-empty em { color: #a8a29a; font-style: normal; }

/* ── PLAN LIMIT BANNER ──────────────────────────────────────────────────── */
.plan-limit-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  animation: uxScreenEnter .2s cubic-bezier(.22,.6,.36,1) both;
}
.plan-limit-banner.warn {
  background: rgba(248,189,36,.08);
  border-bottom: 1px solid rgba(248,189,36,.22);
  color: #f8c553;
}
.plan-limit-banner.critical {
  background: rgba(220,50,40,.1);
  border-bottom: 1px solid rgba(220,50,40,.3);
  color: #f87171;
}
.plan-limit-banner .mini-button {
  flex: 0 0 auto;
  white-space: nowrap;
}
#planLimitBanner:empty { display: none; }

/* ── ONBOARDING CHECKLIST ───────────────────────────────────────────────── */
.onboarding-card {
  background: linear-gradient(135deg, rgba(248,189,36,.07), rgba(248,189,36,.02));
  border: 1px solid rgba(248,189,36,.24);
  border-radius: 12px;
  padding: 18px 20px;
  display: grid;
  gap: 14px;
  margin-bottom: 2px;
}
.onboarding-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.onboarding-header strong {
  color: #f3ece0;
  font-size: 14px;
}
.onboarding-header span {
  display: block;
  color: #8a8077;
  font-size: 12px;
  margin-top: 2px;
}
.onboarding-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}
.onboarding-bar {
  width: 120px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
  flex: 0 0 auto;
}
.onboarding-bar span {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--gold);
  transition: width .5s cubic-bezier(.22,.6,.36,1);
}
.onboarding-steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.onboarding-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  font-size: 13px;
  color: #c7beb5;
  position: relative;
}
.onboarding-step.done {
  border-color: rgba(40,211,104,.22);
  background: rgba(40,211,104,.04);
  color: #8acea8;
}
.onboarding-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.18);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 900;
  color: transparent;
  transition: all .25s;
}
.onboarding-step.done .onboarding-check {
  background: var(--green);
  border-color: var(--green);
  color: #031108;
}
.onboarding-step-action {
  margin-left: auto;
  flex: 0 0 auto;
}

/* ── SESSION HEALTH BADGE ───────────────────────────────────────────────── */
.session-error-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  background: rgba(220,50,40,.14);
  border: 1px solid rgba(220,50,40,.3);
  color: #f87171;
  margin-left: 6px;
  vertical-align: middle;
}
.metric-card .warn small { color: #f8c553; }

/* ── FEATURE PREVIEW MODAL ───────────────────────────────────────────────── */
.feature-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 24px;
  animation: fmBackdropIn .18s ease both;
}
@keyframes fmBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.feature-modal {
  width: min(560px, 100%);
  display: grid;
  gap: 20px;
  padding: 32px;
  border: 1px solid rgba(248,189,36,.38);
  border-radius: 16px;
  background:
    radial-gradient(circle at 90% 5%, rgba(248,189,36,.14), transparent 32%),
    linear-gradient(180deg, rgba(20,18,12,.98), rgba(6,5,3,.99));
  box-shadow: 0 32px 80px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
  animation: fmIn .2s cubic-bezier(.22,.6,.36,1) both;
}
@keyframes fmIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.feature-modal-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(248,189,36,.32);
  background: rgba(248,189,36,.1);
  color: var(--gold);
  font-size: 26px;
}
.feature-modal-header { display: grid; gap: 6px; }
.feature-modal-header h3 {
  margin: 0;
  color: #fff8e5;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.feature-modal-header p {
  margin: 0;
  color: #8a8077;
  font-size: 14px;
  line-height: 1.55;
}
.feature-modal-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.feature-modal-bullets li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #c8bfad;
  font-size: 14px;
  line-height: 1.5;
}
.feature-modal-bullets li::before {
  content: '✓';
  color: var(--green);
  font-weight: 900;
  font-size: 12px;
  margin-top: 2px;
  flex-shrink: 0;
}
.feature-modal-footer {
  display: flex;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.07);
}

/* ── RESPONSIVE SURFACES ────────────────────────────────────────────────────
   These rules are intentionally last: reference sheets contain desktop-first
   dimensions, while the dashboard is also rendered inside compact webviews. */
.side-nav {
  background:
    radial-gradient(circle at 50% 78%, rgba(248,189,36,.08), transparent 28%),
    linear-gradient(180deg, #050505, #0a0907 58%, #020202);
  background-image:
    radial-gradient(circle at 50% 78%, rgba(248,189,36,.08), transparent 28%),
    linear-gradient(180deg, #050505, #0a0907 58%, #020202) !important;
}
.side-nav::before,
.side-nav::after {
  display:none !important;
  background-image:none !important;
}
.side-nav .plan-card {
  background:linear-gradient(180deg, rgba(248,189,36,.14), rgba(10,9,7,.96));
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
body.sidebar-collapsed .side-nav {
  background:linear-gradient(180deg, #080807, #0d0c0a 52%, #070706);
}
.reference-screen > .screen-actions {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}

.onboarding-card {
  container-type:inline-size;
  min-width:0;
}
.onboarding-step {
  min-width:0;
  display:grid;
  grid-template-columns:20px minmax(0,1fr) auto;
  align-items:center;
}
.onboarding-step > span:nth-child(2) {
  min-width:0;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.onboarding-step-action {
  min-width:0;
  max-width:100%;
  margin-left:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.reference-dashboard .onboarding-steps {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr)) !important;
}
@media (max-width:1320px) {
  .reference-dashboard .onboarding-steps {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@container (max-width:1120px) {
  .reference-dashboard .onboarding-steps {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@container (max-width:660px) {
  .reference-dashboard .onboarding-steps {
    grid-template-columns:1fr !important;
  }
  .onboarding-step {
    grid-template-columns:20px minmax(0,1fr);
    align-items:start;
  }
  .onboarding-step-action {
    grid-column:2;
    justify-self:start;
    margin-top:4px;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
}

.reference-dashboard .panel {
  container-type:inline-size;
}
.reference-dashboard {
  container-type:inline-size;
}
.reference-dashboard .state-banner {
  min-width:0;
  flex-wrap:wrap;
}
.reference-dashboard .state-banner > span {
  min-width:0;
  flex:1 1 240px;
  overflow-wrap:anywhere;
}
.reference-dashboard .state-banner > button {
  flex:0 0 auto;
  margin-left:auto;
}
@container (max-width:720px) {
  .reference-dashboard .state-banner > span {
    flex-basis:100%;
  }
  .reference-dashboard .state-banner > button {
    margin-left:0;
  }
}
.reference-dashboard .donut-layout,
.reference-dashboard .legend,
.reference-dashboard .legend-row {
  min-width:0;
}
.reference-dashboard .legend-row > * {
  min-width:0;
}
@media (max-width:1100px) {
  .reference-dashboard .donut-layout {
    grid-template-columns:minmax(0,1fr);
  }
  .reference-dashboard .donut {
    width:min(220px,100%);
    height:auto;
    aspect-ratio:1;
  }
}
@container (max-width:620px) {
  .donut-layout {
    grid-template-columns:minmax(0,1fr);
  }
  .donut {
    width:min(220px,100%);
    height:auto;
    aspect-ratio:1;
  }
}

.admin-finance-screen > .screen-actions {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto auto !important;
  align-items:center;
  justify-content:stretch;
}
.admin-finance-screen .admin-finance-search {
  width:100%;
  min-width:0;
}
.admin-finance-screen > .screen-actions > button {
  min-width:0;
}

/* The generic <=1320px rule collapses every settings grid to one column
   based on the viewport, even when the workspace still has room for two
   cards. Keep the finance summary readable instead of four tall empty rows. */
.admin-finance-summary {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px;
}
.admin-finance-summary .plan-card-option {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:76px;
  padding:14px 16px;
}
.admin-finance-summary .plan-price {
  text-align:right;
  overflow-wrap:anywhere;
}
@media (min-width:1600px) {
  .admin-finance-summary {
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}
@media (max-width:680px) {
  .admin-finance-summary {
    grid-template-columns:1fr !important;
  }
}

.reference-proxies {
  container-type:inline-size;
}
.reference-proxies .proxy-left-stack {
  container-type:inline-size;
}
.reference-proxies .proxy-toolbar {
  min-width:0;
}
.reference-proxies .proxy-import-dock {
  min-width:0;
  grid-template-columns:minmax(0,1fr) minmax(180px,240px);
  grid-template-areas:
    "title title"
    "text text"
    "controls submit";
  align-items:end;
}
.reference-proxies .proxy-import-dock > h3 { grid-area:title; }
.reference-proxies .proxy-import-dock > textarea {
  grid-area:text;
  width:100%;
  min-height:84px;
}
.reference-proxies .proxy-import-controls { grid-area:controls; }
.reference-proxies .proxy-import-dock > button {
  grid-area:submit;
  align-self:end;
}
.reference-proxies .proxy-import-dock > * {
  min-width:0;
}
.reference-proxies .proxy-import-controls {
  min-width:0;
}
.reference-proxies .proxy-import-controls label,
.reference-proxies .proxy-import-controls input,
.reference-proxies .proxy-import-controls select {
  min-width:0;
  max-width:100%;
}
.reference-proxies .proxy-import-dock > button {
  width:100%;
  min-width:0;
}

@container (max-width:860px) {
  .reference-proxies .proxy-toolbar {
    grid-template-columns:repeat(3,minmax(0,1fr)) auto;
  }
  .reference-proxies .proxy-toolbar .proxy-search {
    grid-column:1 / -1;
  }
}
@container (max-width:680px) {
  .reference-proxies .proxy-toolbar {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .reference-proxies .proxy-toolbar .proxy-search {
    grid-column:1 / -1;
  }
  .reference-proxies .proxy-toolbar .filter-button {
    grid-column:1 / -1;
  }
  .reference-proxies .proxy-import-dock {
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "title"
      "text"
      "controls"
      "submit";
  }
}

.activity-panel {
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
body:not(.activity-open) .activity-panel {
  display:none;
}
body.activity-open .activity-panel {
  display:flex;
}
.activity-header {
  flex:0 0 auto;
}
.activity-panel #actionResult {
  flex:0 0 auto;
  overflow:auto;
  overflow-wrap:anywhere;
}
.activity-list {
  min-height:0;
  flex:1 1 auto;
  overflow:auto;
  overscroll-behavior:contain;
  align-content:start;
  grid-auto-rows:max-content;
}
.activity-item {
  min-width:0;
  padding-right:56px;
}
.activity-item p {
  overflow-wrap:anywhere;
}

/* Notifications are a floating popover. They must not steal a grid column or
   resize the workspace when opened. */
body.activity-open .app-shell {
  grid-template-columns:250px minmax(0,1fr) 0 !important;
}
body.sidebar-collapsed.activity-open .app-shell {
  grid-template-columns:86px minmax(0,1fr) 0 !important;
}
.activity-panel,
body.activity-open .activity-panel {
  position:fixed;
  top:68px;
  right:18px;
  z-index:1000;
  width:min(380px,calc(100vw - 36px));
  height:min(680px,calc(100vh - 86px));
  max-width:calc(100vw - 36px);
  max-height:calc(100vh - 86px);
  min-height:0;
  border:1px solid rgba(248,189,36,.3);
  border-radius:14px;
  box-shadow:0 22px 60px rgba(0,0,0,.62), 0 0 0 1px rgba(0,0,0,.35);
}
body.sidebar-collapsed .collapse-button {
  display:flex;
  width:100%;
  min-height:42px;
  padding:8px;
  align-items:center;
  justify-content:center;
  font-size:0;
}
body.sidebar-collapsed .collapse-button::after {
  content:'›';
  color:var(--gold-2);
  font-size:22px;
  line-height:1;
}

@media (max-width:760px) {
  .reference-screen > .screen-actions,
  .admin-finance-screen > .screen-actions {
    grid-template-columns:1fr !important;
    align-items:stretch;
  }
  .reference-screen > .screen-actions > button,
  .admin-finance-screen > .screen-actions > button {
    width:100%;
  }
  .admin-finance-screen .admin-finance-search {
    width:100%;
  }
  .reference-proxies .proxy-import-dock,
  .reference-proxies .proxy-import-controls {
    grid-template-columns:1fr;
  }
  .reference-proxies .proxy-import-controls {
    display:grid;
  }
  .reference-proxies .proxy-import-dry {
    justify-items:start;
    text-align:left;
  }
  .reference-fingerprint-operator .fingerprint-header-actions {
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .reference-fingerprint-operator .fingerprint-header-actions button:last-child {
    grid-column:1 / -1;
  }
}

/* On compact Linux webviews the activity panel is a drawer. Keeping it as a
   grid column leaves the workspace with only a few pixels and clips every
   card behind the notification rail. */
@media (max-width:980px) {
  /* app-reference-shared.css is loaded after the legacy responsive sheet;
     keep the compact navigation contract in this final UX layer so the
     desktop 228px rail cannot squeeze the workspace in small webviews. */
  .app-shell,
  body.activity-open .app-shell {
    grid-template-columns:minmax(0,1fr) !important;
  }
  .side-nav {
    min-height:auto;
    display:block;
    border-right:0;
    border-bottom:1px solid rgba(248,189,36,.22);
    padding:12px 14px 14px;
  }
  .brand-block {
    margin-bottom:12px;
  }
  .nav-list {
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }
  .nav-item {
    justify-content:center;
    text-align:center;
    min-width:0;
  }
  .nav-item span {
    display:none;
  }
  .plan-card,
  .help-button,
  .collapse-button {
    display:none;
  }
  body.activity-open .app-shell {
    grid-template-columns:minmax(0,1fr);
  }
  .app-shell,
  body.activity-open .app-shell,
  body.sidebar-collapsed.activity-open .app-shell {
    grid-template-columns:minmax(0,1fr) !important;
  }
  .activity-panel,
  body.activity-open .activity-panel {
    top:58px;
    right:12px;
    width:min(380px,calc(100vw - 24px));
    max-width:calc(100vw - 24px);
    height:min(680px,calc(100vh - 70px));
    max-height:calc(100vh - 70px);
    border-radius:12px;
  }
  body.activity-open .workspace {
    min-width:0;
  }
}

@media (max-width:620px) {
  .side-nav {
    padding-inline:10px;
  }
  .nav-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.activity-open .activity-panel {
    width:100vw;
  }
}