:root{
  --app-bg:#f2f4f7;
  --app-paper:#ffffff;
  --app-text:#0d1b2a;
  --app-muted:#5b6a7b;
  --app-accent:#ff6a3d;
  --app-accent-strong:#e84f20;
  --app-accent-2:#0f9b8e;
  --app-border:rgba(13,27,42,0.08);
  --app-shadow:0 14px 40px rgba(13,27,42,0.08);
  --app-top-bg:rgba(247,249,252,0.92);
  --app-top-border:rgba(13,27,42,0.06);
  --app-small-btn-bg:#ffffff;
  --app-small-btn-text:#142436;
  --app-small-btn-border:rgba(13,27,42,0.14);
  --app-small-btn-hover-bg:#fff7f3;
  --app-small-btn-hover-border:rgba(255,106,61,0.45);
  --app-input-bg:#ffffff;
  --app-input-border:rgba(13,27,42,0.15);
  --app-input-focus-border:rgba(15,155,142,0.6);
  --app-input-focus-ring:rgba(15,155,142,0.18);
  --app-chat-item-bg:#f4f8ff;
  --app-chat-item-border:rgba(15,155,142,0.22);
  --app-notice-bg:#ecfdf8;
  --app-notice-border:#95f0e2;
  --app-notice-text:#0c4d45;
  --app-error-bg:#fff3f2;
  --app-error-border:#fec8c0;
  --app-error-text:#9f1f0f;
  --app-bg-glow-a:rgba(255,106,61,0.22);
  --app-bg-glow-b:rgba(15,155,142,0.18);
}

html[data-theme='light']{
  --app-bg:#f2f6fb;
  --app-paper:#ffffff;
  --app-text:#0f172a;
  --app-muted:#516076;
  --app-accent:#2f6df6;
  --app-accent-strong:#2455dd;
  --app-accent-2:#0ea5a0;
  --app-border:rgba(15,23,42,0.09);
  --app-shadow:0 14px 38px rgba(15,23,42,0.08);
  --app-top-bg:rgba(248,251,255,0.92);
  --app-top-border:rgba(15,23,42,0.08);
  --app-small-btn-bg:#ffffff;
  --app-small-btn-text:#12243a;
  --app-small-btn-border:rgba(15,23,42,0.16);
  --app-small-btn-hover-bg:#f2f7ff;
  --app-small-btn-hover-border:rgba(47,109,246,0.45);
  --app-input-bg:#ffffff;
  --app-input-border:rgba(15,23,42,0.15);
  --app-input-focus-border:rgba(47,109,246,0.62);
  --app-input-focus-ring:rgba(47,109,246,0.18);
  --app-chat-item-bg:#f0f7ff;
  --app-chat-item-border:rgba(47,109,246,0.2);
  --app-notice-bg:#ecfdf8;
  --app-notice-border:#91f0e1;
  --app-notice-text:#0d5a4f;
  --app-error-bg:#fff2f1;
  --app-error-border:#ffc4bc;
  --app-error-text:#9f1f0f;
  --app-bg-glow-a:rgba(47,109,246,0.2);
  --app-bg-glow-b:rgba(14,165,160,0.16);
}

html[data-theme='medium']{
  --app-bg:#f2f6fb;
  --app-paper:#ffffff;
  --app-text:#0f172a;
  --app-muted:#516076;
  --app-accent:#2f6df6;
  --app-accent-strong:#2455dd;
  --app-accent-2:#0ea5a0;
  --app-border:rgba(15,23,42,0.09);
  --app-shadow:0 14px 38px rgba(15,23,42,0.08);
  --app-top-bg:rgba(248,251,255,0.92);
  --app-top-border:rgba(15,23,42,0.08);
  --app-small-btn-bg:#ffffff;
  --app-small-btn-text:#12243a;
  --app-small-btn-border:rgba(15,23,42,0.16);
  --app-small-btn-hover-bg:#f2f7ff;
  --app-small-btn-hover-border:rgba(47,109,246,0.45);
  --app-input-bg:#ffffff;
  --app-input-border:rgba(15,23,42,0.15);
  --app-input-focus-border:rgba(47,109,246,0.62);
  --app-input-focus-ring:rgba(47,109,246,0.18);
  --app-chat-item-bg:#f0f7ff;
  --app-chat-item-border:rgba(47,109,246,0.2);
  --app-notice-bg:#ecfdf8;
  --app-notice-border:#91f0e1;
  --app-notice-text:#0d5a4f;
  --app-error-bg:#fff2f1;
  --app-error-border:#ffc4bc;
  --app-error-text:#9f1f0f;
  --app-bg-glow-a:rgba(47,109,246,0.2);
  --app-bg-glow-b:rgba(14,165,160,0.16);
}

html[data-theme='dark']{
  --app-bg:#0b1220;
  --app-paper:#111c2f;
  --app-text:#e6edf7;
  --app-muted:#9fb0c7;
  --app-accent:#22d3ee;
  --app-accent-strong:#0ea5e9;
  --app-accent-2:#34d399;
  --app-border:rgba(148,163,184,0.28);
  --app-shadow:0 16px 42px rgba(2,6,23,0.52);
  --app-top-bg:rgba(11,18,32,0.9);
  --app-top-border:rgba(148,163,184,0.26);
  --app-small-btn-bg:#0f1b30;
  --app-small-btn-text:#e4edf8;
  --app-small-btn-border:rgba(148,163,184,0.35);
  --app-small-btn-hover-bg:#12233d;
  --app-small-btn-hover-border:rgba(34,211,238,0.48);
  --app-input-bg:#0f1b30;
  --app-input-border:rgba(148,163,184,0.34);
  --app-input-focus-border:rgba(34,211,238,0.75);
  --app-input-focus-ring:rgba(34,211,238,0.2);
  --app-chat-item-bg:#0f2038;
  --app-chat-item-border:rgba(34,211,238,0.32);
  --app-notice-bg:#0f2b2a;
  --app-notice-border:#1f7a70;
  --app-notice-text:#aaf4e9;
  --app-error-bg:#2e1718;
  --app-error-border:#8e2f33;
  --app-error-text:#ffd0d2;
  --app-bg-glow-a:rgba(34,211,238,0.18);
  --app-bg-glow-b:rgba(14,165,233,0.14);
}

html.app-shell,
html.app-shell body{
  background:
    radial-gradient(800px 300px at 10% -10%, var(--app-bg-glow-a), transparent 45%),
    radial-gradient(900px 340px at 95% 0%, var(--app-bg-glow-b), transparent 42%),
    linear-gradient(180deg,#f7f9fc 0%,var(--app-bg) 100%);
  color:var(--app-text);
}

html.app-shell body{
  font-family:"Manrope","Avenir Next","Trebuchet MS",sans-serif;
  min-height:100vh;
  padding-bottom:22px;
}

html.app-shell .top{
  position:sticky;
  top:0;
  z-index:35;
  padding:12px 14px;
  background:var(--app-top-bg);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--app-top-border);
  gap:10px;
  align-items:flex-start;
  flex-direction:column;
}

html.app-shell .top h1{
  margin:0;
  font-size:22px;
  letter-spacing:0.01em;
}

html.app-shell .top > div{
  width:100%;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px !important;
  padding-bottom:2px;
}

html.app-shell .top > div > span{
  grid-column:1/-1;
}

html.app-shell .top > div > a.btn,
html.app-shell .top > div > a.btn.small,
html.app-shell .top > div > form,
html.app-shell .top > div > form .btn{
  width:100%;
}

html.app-shell .top > div > form{
  margin:0;
}

html.app-shell .top > div > a.btn,
html.app-shell .top > div > a.btn.small,
html.app-shell .top > div > form .btn{
  justify-content:flex-start;
}

/* Force consistent menu alignment in app mode for all pages (including compact popup menus). */
html.app-shell .top .top-menu-grid,
html.app-shell .top .top-menu-grid.top-menu-grid-compact,
html.app-shell .top .top-menu-grid.top-menu-grid-popup-compact{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  width:100% !important;
}
html.app-shell .top .top-menu-grid > span{
  grid-column:1/-1 !important;
}
html.app-shell .top .top-menu-grid > a.btn,
html.app-shell .top .top-menu-grid > a.btn.small,
html.app-shell .top .top-menu-grid > button.btn,
html.app-shell .top .top-menu-grid > button.btn.small,
html.app-shell .top .top-menu-grid > form,
html.app-shell .top .top-menu-grid > form .btn{
  width:100% !important;
  max-width:none !important;
  flex:1 1 auto !important;
}
html.app-shell .top .top-menu-grid > form{
  margin:0 !important;
}
html.app-shell .top .top-menu-grid > a.btn,
html.app-shell .top .top-menu-grid > a.btn.small,
html.app-shell .top .top-menu-grid > button.btn,
html.app-shell .top .top-menu-grid > button.btn.small,
html.app-shell .top .top-menu-grid > form .btn{
  justify-content:flex-start !important;
}

/* Keep all top menu buttons identical across app-shell pages (same as start menu). */
html.app-shell .top > a.btn,
html.app-shell .top > a.btn.small,
html.app-shell .top > button.btn,
html.app-shell .top > button.btn.small,
html.app-shell .top > form .btn,
html.app-shell .top > div:not(.top-title-row) > a.btn,
html.app-shell .top > div:not(.top-title-row) > a.btn.small,
html.app-shell .top > div:not(.top-title-row) > button.btn,
html.app-shell .top > div:not(.top-title-row) > button.btn.small,
html.app-shell .top > div:not(.top-title-row) > form .btn,
html.app-shell .top .top-menu-grid > a.btn,
html.app-shell .top .top-menu-grid > a.btn.small,
html.app-shell .top .top-menu-grid > button.btn,
html.app-shell .top .top-menu-grid > button.btn.small,
html.app-shell .top .top-menu-grid > form .btn{
  border-radius:999px !important;
  background:linear-gradient(135deg,#38bdf8 0%,#0ea5e9 100%) !important;
  color:#fff !important;
  border:1px solid #0ea5e9 !important;
  box-shadow:0 10px 24px rgba(14,165,233,.28) !important;
  font-size:13px !important;
  min-height:34px;
  padding:8px 12px !important;
  justify-content:flex-start !important;
}
html.app-shell .top > a.btn:hover,
html.app-shell .top > a.btn.small:hover,
html.app-shell .top > button.btn:hover,
html.app-shell .top > button.btn.small:hover,
html.app-shell .top > form .btn:hover,
html.app-shell .top > div:not(.top-title-row) > a.btn:hover,
html.app-shell .top > div:not(.top-title-row) > a.btn.small:hover,
html.app-shell .top > div:not(.top-title-row) > button.btn:hover,
html.app-shell .top > div:not(.top-title-row) > button.btn.small:hover,
html.app-shell .top > div:not(.top-title-row) > form .btn:hover,
html.app-shell .top .top-menu-grid > a.btn:hover,
html.app-shell .top .top-menu-grid > a.btn.small:hover,
html.app-shell .top .top-menu-grid > button.btn:hover,
html.app-shell .top .top-menu-grid > button.btn.small:hover,
html.app-shell .top .top-menu-grid > form .btn:hover{
  background:linear-gradient(135deg,#22d3ee 0%,#0284c7 100%) !important;
  border-color:#0284c7 !important;
  box-shadow:0 14px 30px rgba(2,132,199,.3) !important;
}

html.app-shell .btn,
html.app-shell button.btn{
  border-radius:12px;
  background:linear-gradient(135deg,var(--app-accent),var(--app-accent-strong));
  box-shadow:0 10px 24px rgba(232,79,32,0.28);
  color:#fff;
  font-weight:700;
  border:none;
}

html.app-shell .btn.small{
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;
  line-height:1;
  box-shadow:0 10px 24px rgba(14,165,233,0.28);
  background:linear-gradient(135deg,#38bdf8 0%,#0ea5e9 100%);
  color:#fff;
  border:1px solid #0ea5e9;
  white-space:nowrap;
}

html.app-shell .btn.small:hover,
html.app-shell .btn.small:active{
  background:linear-gradient(135deg,#22d3ee 0%,#0284c7 100%);
  border-color:#0284c7;
}

html.app-shell main,
html.app-shell .formwrap,
html.app-shell .cards-wrap{
  padding:12px !important;
}

html.app-shell .cards-wrap{
  background:transparent;
}

html.app-shell .grid{
  grid-template-columns:1fr;
  gap:12px;
  padding:0;
}

html.app-shell .card,
html.app-shell .panel,
html.app-shell .chat-window,
html.app-shell .input-card,
html.app-shell .stat,
html.app-shell .metric,
html.app-shell table,
html.app-shell .login-box,
html.app-shell .call-box,
html.app-shell .box,
html.app-shell .quick-respond{
  border-radius:16px !important;
  border:1px solid var(--app-border) !important;
  background:var(--app-paper) !important;
  box-shadow:var(--app-shadow) !important;
}

html.app-shell .card::before{
  display:none;
}

html.app-shell .type{
  font-size:18px;
  font-weight:800;
}

html.app-shell .desc,
html.app-shell .meta,
html.app-shell .muted,
html.app-shell .status,
html.app-shell .mutedline,
html.app-shell .chat-meta{
  color:var(--app-muted) !important;
}

html.app-shell .layout,
html.app-shell .queue-layout,
html.app-shell .chat-layout,
html.app-shell .stats,
html.app-shell .metrics,
html.app-shell .row,
html.app-shell .field-row{
  grid-template-columns:1fr !important;
  display:grid !important;
  gap:12px !important;
}

html.app-shell .actions,
html.app-shell .voice-panel,
html.app-shell #chat-inputs,
html.app-shell .install-actions{
  display:flex !important;
  flex-wrap:wrap;
  gap:10px;
}

html.app-shell #chat-inputs input,
html.app-shell #chat-inputs button,
html.app-shell .actions .btn,
html.app-shell .voice-panel .btn,
html.app-shell .install-actions .btn{
  flex:1 1 170px;
}

html.app-shell input,
html.app-shell textarea,
html.app-shell select{
  border-radius:12px !important;
  border:1px solid var(--app-input-border) !important;
  background:var(--app-input-bg) !important;
  padding:11px 12px !important;
  color:var(--app-text);
  font-size:15px;
}

html.app-shell input:focus,
html.app-shell textarea:focus,
html.app-shell select:focus{
  outline:none;
  border-color:var(--app-input-focus-border) !important;
  box-shadow:0 0 0 3px var(--app-input-focus-ring);
}

html.app-shell #chat-log{
  gap:10px;
}

html.app-shell #chat-log li{
  background:var(--app-chat-item-bg) !important;
  border:1px solid var(--app-chat-item-border);
  border-radius:12px;
}

html.app-shell .notice{
  background:var(--app-notice-bg) !important;
  border:1px solid var(--app-notice-border) !important;
  color:var(--app-notice-text) !important;
}

html.app-shell .error{
  background:var(--app-error-bg) !important;
  border:1px solid var(--app-error-border) !important;
  color:var(--app-error-text) !important;
}

html.app-shell pre{
  white-space:pre-wrap;
  word-break:break-word;
}

@media (min-width: 860px){
  html.app-shell .top{
    padding:14px 18px;
  }

  html.app-shell .top > div{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  html.app-shell .grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  html.app-shell .queue-layout,
  html.app-shell .layout{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (min-width: 700px) and (hover: hover) and (pointer: fine){
  html.app-shell .top{
    max-height:64px;
    overflow:hidden;
    transition:max-height .24s ease, box-shadow .2s ease, background-color .2s ease;
  }

  html.app-shell .top > div{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(-8px);
    transition:max-height .24s ease, opacity .2s ease, transform .2s ease;
    padding-bottom:0;
  }

  html.app-shell .top:hover,
  html.app-shell .top:focus-within{
    max-height:420px;
    box-shadow:0 14px 30px rgba(13,27,42,0.12);
  }

  html.app-shell .top:hover > div,
  html.app-shell .top:focus-within > div{
    max-height:340px;
    opacity:1;
    transform:translateY(0);
    padding-bottom:2px;
  }
}