*{box-sizing:border-box}

:root{
  color-scheme:light dark;
  --font-scale:1;
  --bg:#e8f3f5;
  --bg-2:#eef4df;
  --panel:rgba(255,255,255,.76);
  --panel-strong:#fff;
  --panel-soft:rgba(255,255,255,.58);
  --text:#17212b;
  --muted:#75818b;
  --line:rgba(98,124,142,.18);
  --accent:#3f8efc;
  --accent-strong:#2e7ce7;
  --accent-soft:#e8f2ff;
  --bot-bubble:#fff;
  --user-bubble:#d9fdd3;
  --quick-bg:#f3f8fb;
  --quick-border:#d3e1ea;
  --sidebar-bg:rgba(255,255,255,.60);
  --composer-bg:rgba(255,255,255,.96);
  --dialog-bg:#fff;
  --menu-bg:rgba(255,255,255,.96);
  --menu-hover:#eef6fb;
  --backdrop:rgba(20,32,42,.38);
  --shadow:0 18px 60px rgba(31,55,76,.16);
  --bubble-shadow:0 4px 14px rgba(23,40,55,.08);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#101820;
    --bg-2:#17232b;
    --panel:rgba(28,42,52,.82);
    --panel-strong:#1f2c35;
    --panel-soft:rgba(27,41,51,.68);
    --text:#eef4f7;
    --muted:#9fb0ba;
    --line:rgba(180,203,216,.12);
    --accent:#62a8ff;
    --accent-strong:#4b98f7;
    --accent-soft:#203a55;
    --bot-bubble:#1f2b34;
    --user-bubble:#275a45;
    --quick-bg:#263a47;
    --quick-border:#345064;
    --sidebar-bg:rgba(18,29,37,.82);
    --composer-bg:rgba(25,38,47,.985);
    --dialog-bg:#1d2932;
    --menu-bg:rgba(29,43,53,.98);
    --menu-hover:#263b49;
    --backdrop:rgba(0,0,0,.52);
    --shadow:0 18px 60px rgba(0,0,0,.28);
    --bubble-shadow:0 4px 14px rgba(0,0,0,.18);
  }
}

html,body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
}

body{
  min-height:100vh;
  min-height:100dvh;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 20% 10%,rgba(109,204,173,.25),transparent 34%),
    radial-gradient(circle at 80% 0%,rgba(246,224,119,.22),transparent 30%),
    linear-gradient(160deg,var(--bg),var(--bg-2));
}

@media (prefers-color-scheme:dark){
  body{
    background:
      radial-gradient(circle at 16% 8%,rgba(68,146,126,.15),transparent 32%),
      radial-gradient(circle at 84% 0%,rgba(93,115,75,.12),transparent 28%),
      linear-gradient(160deg,var(--bg),var(--bg-2));
  }
}

button,input{font:inherit}
button{cursor:pointer}

.app-shell{
  width:100%;
  height:100vh;
  height:100dvh;
  min-height:0;
  display:flex;
  flex-direction:column;
}

.topbar{
  flex:0 0 auto;
  min-height:64px;
  padding:calc(8px + var(--safe-top)) 12px 8px;
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  position:relative;
  z-index:30;
}

.bot-head{
  min-width:0;
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
}

.bot-head-copy{min-width:0}

.avatar,.brand-logo{
  flex:0 0 auto;
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:800;
  letter-spacing:.04em;
  background:linear-gradient(145deg,#3f8efc,#57c6d8);
  box-shadow:0 7px 20px rgba(63,142,252,.25);
}

.bot-name{
  font-size:calc(17px * var(--font-scale));
  font-weight:750;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.bot-status{
  margin-top:2px;
  font-size:calc(13px * var(--font-scale));
  color:var(--muted);
}

.icon-btn,.send{
  flex:0 0 auto;
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:transparent;
  color:var(--text);
  font-size:calc(22px * var(--font-scale));
}

.icon-btn:hover{background:var(--panel-soft)}
.sidebar-toggle{display:none}

.sidebar-backdrop{
  display:none;
  border:0;
  margin:0;
  padding:0;
  background:rgba(5,12,18,.34);
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
}


.layout{
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
}

.sidebar{
  min-height:0;
  min-width:0;
  padding:20px;
  border-right:1px solid var(--line);
  background:var(--sidebar-bg);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  display:flex;
  flex-direction:column;
  gap:24px;
  overflow:auto;
}

.brand{display:flex;align-items:center;gap:12px;padding:6px}
.brand strong{display:block;font-size:calc(17px * var(--font-scale))}
.brand span{display:block;margin-top:3px;font-size:calc(13px * var(--font-scale));color:var(--muted)}

.menu{display:grid;gap:6px}

.menu button{
  border:0;
  background:transparent;
  padding:12px 13px;
  border-radius:14px;
  display:flex;
  align-items:center;
  gap:11px;
  text-align:left;
  color:var(--text);
}

.menu button:hover{background:var(--panel-soft)}

.sidebar-note{
  margin-top:auto;
  padding:15px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel-soft);
  font-size:calc(13px * var(--font-scale));
  line-height:1.45;
}

.sidebar-note strong,.sidebar-note span{display:block}
.sidebar-note span{margin:4px 0 8px;color:var(--muted)}
.sidebar-note a{color:var(--accent);font-weight:700;text-decoration:none}

.chat{
  min-width:0;
  min-height:0;
  height:100%;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  overflow:hidden;
  position:relative;
}


.hero-badge{
  display:inline-flex;
  padding:5px 8px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:calc(10px * var(--font-scale));
  font-weight:800;
  letter-spacing:.09em;
}

.intro-message{
  margin-top:0;
}

.intro-bubble{
  width:auto;
  max-width:min(600px,86%);
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
}

.intro-bubble h1{
  margin:7px 0 5px;
  font-size:clamp(calc(22px * var(--font-scale)),2.7vw,calc(30px * var(--font-scale)));
  line-height:1.07;
}

.intro-bubble p{
  margin:0;
  color:var(--muted);
  font-size:clamp(calc(13px * var(--font-scale)),1.25vw,calc(14.5px * var(--font-scale)));
  line-height:1.38;
}



.messages{
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:12px 16px 34px;
  scroll-padding-bottom:28px;
  scroll-behavior:smooth;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.message{
  width:min(760px,100%);
  margin:0 auto 10px;
  display:flex;
}

.message.user{justify-content:flex-end}

.bubble{
  max-width:min(580px,82%);
  padding:10px 13px;
  border-radius:18px;
  background:var(--bot-bubble);
  color:var(--text);
  box-shadow:var(--bubble-shadow);
  line-height:1.48;
  white-space:normal;
  overflow-wrap:anywhere;
}

.user .bubble{
  background:var(--user-bubble);
  border-bottom-right-radius:6px;
  white-space:pre-wrap;
}

.bot .bubble{border-bottom-left-radius:6px}

.meta{
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:calc(11px * var(--font-scale));
  text-align:right;
}

.quick-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.quick{
  border:1px solid var(--quick-border);
  background:var(--quick-bg);
  color:var(--accent);
  border-radius:999px;
  padding:8px 11px;
  font-weight:700;
  font-size:calc(13px * var(--font-scale));
}

.quick:hover{filter:brightness(.98)}

.result-grid{display:grid;gap:8px;margin-top:8px}

.result-row{
  display:grid;
  grid-template-columns:minmax(120px,.45fr) 1fr;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid var(--line);
}

.result-row:last-child{border-bottom:0}
.result-key{color:var(--muted);font-size:calc(13px * var(--font-scale))}
.result-value{font-weight:650;overflow-wrap:anywhere}
.code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}

.composer-wrap{
  width:min(780px,calc(100% - 24px));
  margin:0 auto calc(10px + var(--safe-bottom));
  position:relative;
  z-index:20;
}

.composer{
  width:100%;
  min-height:60px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:26px;
  background:var(--composer-bg);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 10px 28px rgba(28,52,70,.13);
  display:grid;
  grid-template-columns:auto minmax(0,1fr) 44px;
  align-items:center;
  gap:6px;
}

.actions-btn{
  min-width:92px;
  height:42px;
  padding:0 13px;
  border:0;
  border-radius:18px;
  background:var(--accent);
  color:#fff;
  font-weight:750;
}

.actions-btn:hover{background:var(--accent-strong)}
.actions-narrow{display:none}

.composer input{
  width:100%;
  min-width:0;
  height:44px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  padding:0 8px;
  font-size:calc(16px * var(--font-scale));
}

.composer input::placeholder{color:var(--muted)}

.send{
  background:var(--accent);
  color:#fff;
  font-size:calc(18px * var(--font-scale));
}

.send:hover{background:var(--accent-strong)}

.command-menu{
  position:absolute;
  left:0;
  right:0;
  bottom:calc(100% + 8px);
  max-height:min(390px,50vh);
  overflow:auto;
  padding:8px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--menu-bg);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.command-menu[hidden]{display:none}

.command-menu-head{
  padding:7px 10px 9px;
  color:var(--muted);
  font-size:calc(12px * var(--font-scale));
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.command-item{
  width:100%;
  border:0;
  border-radius:14px;
  background:transparent;
  color:var(--text);
  padding:10px;
  display:flex;
  gap:11px;
  align-items:center;
  text-align:left;
}

.command-item:hover,.command-item.is-active{background:var(--menu-hover)}

.command-icon{
  width:34px;
  height:34px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--accent-soft);
}

.command-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.command-copy strong{font-size:calc(14px * var(--font-scale))}
.command-copy small{font-size:calc(12px * var(--font-scale));color:var(--muted)}
.command-empty{padding:14px;color:var(--muted);font-size:calc(13px * var(--font-scale))}

.typing{display:inline-flex;gap:4px;align-items:center}
.typing i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--muted);
  animation:blink 1.2s infinite ease-in-out;
}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}

@keyframes blink{
  0%,80%,100%{opacity:.25;transform:translateY(0)}
  40%{opacity:1;transform:translateY(-2px)}
}

dialog{
  max-width:none;
  max-height:none;
  border:0;
  padding:0;
  background:transparent;
  color:var(--text);
}

dialog::backdrop{
  background:var(--backdrop);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

.dialog-card{
  width:min(460px,calc(100vw - 28px));
  padding:24px;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--dialog-bg);
  color:var(--text);
  box-shadow:var(--shadow);
  position:relative;
}

.dialog-card h2{margin:0 44px 14px 0}

.dialog-close{
  position:absolute;
  right:10px;
  top:10px;
  width:40px;
  height:40px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:transparent;
  color:var(--text);
  font-size:calc(26px * var(--font-scale));
  line-height:1;
}

.dialog-close:hover{background:var(--panel-soft)}
.muted{color:var(--muted);font-size:calc(13px * var(--font-scale))}

.legacy-gate{
  min-height:100%;
  place-items:center;
  padding:24px;
  background:#f2f2f2;
  font-family:Arial,sans-serif;
  color:#111;
}

.legacy-card{
  max-width:620px;
  background:#fff;
  border:3px solid #111;
  padding:26px;
  text-align:center;
}

.legacy-card h1{font-size:clamp(calc(30px * var(--font-scale)),7vw,calc(58px * var(--font-scale)));line-height:1;margin:12px 0}
.legacy-face{font-size:calc(70px * var(--font-scale))}
.legacy-button{display:inline-block;background:#111;color:#fff;text-decoration:none;padding:13px 18px;font-weight:bold}
.legacy-small{font-size:calc(12px * var(--font-scale))}

html.legacy #legacy-gate{display:grid!important}
html.legacy #app{display:none!important}

@media (max-width:820px), ((max-height:600px) and (pointer:coarse)){
  .layout{grid-template-columns:minmax(0,1fr)}
  .sidebar-toggle{display:grid}

  .sidebar{
    position:fixed;
    z-index:40;
    top:calc(64px + var(--safe-top));
    bottom:0;
    left:0;
    width:min(320px,88vw);
    transform:translateX(-105%);
    transition:transform .22s ease;
    box-shadow:20px 0 50px rgba(20,40,55,.20);
  }

  .sidebar.open{transform:translateX(0)}

  .sidebar-backdrop:not([hidden]){
    display:block;
    position:fixed;
    z-index:35;
    top:calc(64px + var(--safe-top));
    right:0;
    bottom:0;
    left:0;
  }

  .intro-message{
    margin-top:4px;
  }

  .messages{padding-left:10px;padding-right:10px}
  .bubble{max-width:88%}

  .composer-wrap{
    width:calc(100% - 20px);
    margin-bottom:calc(8px + var(--safe-bottom));
  }
}

@media (max-width:520px){
  .topbar{gap:8px;padding-left:8px;padding-right:8px}
  .avatar{width:40px;height:40px}
  .bot-name{font-size:calc(16px * var(--font-scale))}

  .intro-bubble{
    max-width:88%;
    padding:11px 12px;
    border-radius:16px;
  }

  .intro-bubble .hero-badge{
    padding:4px 7px;
    font-size:calc(9.5px * var(--font-scale));
  }

  .intro-bubble h1{
    margin:6px 0 4px;
    font-size:calc(20px * var(--font-scale));
    line-height:1.06;
  }

  .intro-bubble p{
    font-size:calc(12.75px * var(--font-scale));
    line-height:1.34;
  }

  .intro-message + .message.bot .bubble{
    max-width:84%;
  }

  .result-row{
    grid-template-columns:1fr;
    gap:3px;
  }

  .actions-btn{
    min-width:44px;
    width:44px;
    padding:0;
    border-radius:50%;
  }

  .actions-wide{display:none}
  .actions-narrow{display:inline}

  .composer{
    grid-template-columns:44px minmax(0,1fr) 44px;
  }

  .command-menu{
    max-height:44vh;
    border-radius:18px;
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}


@media (max-height:600px) and (orientation:landscape) and (pointer:coarse){
  .topbar{
    min-height:54px;
    padding-top:calc(5px + var(--safe-top));
    padding-bottom:5px;
  }

  .avatar{
    width:36px;
    height:36px;
  }

  .bot-name{
    font-size:calc(15px * var(--font-scale));
  }

  .bot-status{
    font-size:calc(11px * var(--font-scale));
  }

  .sidebar{
    top:calc(54px + var(--safe-top));
    width:min(300px,82vw);
  }

  .intro-bubble{
    max-width:78%;
    padding:8px 11px;
    border-radius:14px;
  }

  .intro-bubble .hero-badge{
    padding:3px 6px;
    font-size:calc(8.5px * var(--font-scale));
  }

  .intro-bubble h1{
    margin:4px 0 3px;
    font-size:calc(18px * var(--font-scale));
    line-height:1.04;
  }

  .intro-bubble p{
    font-size:calc(11.5px * var(--font-scale));
    line-height:1.25;
  }

  .intro-message + .message.bot .bubble{
    max-width:72%;
    padding:9px 11px;
  }

  .messages{
    padding-top:8px;
    padding-bottom:20px;
    scroll-padding-bottom:18px;
  }

  .composer-wrap{
    width:calc(100% - 14px);
    margin-bottom:calc(5px + var(--safe-bottom));
  }

  .composer{
    min-height:52px;
    padding:5px;
    border-radius:22px;
    grid-template-columns:40px minmax(0,1fr) 40px;
    gap:4px;
  }

  .composer input{
    height:40px;
    /* iOS Safari auto-zooms focused inputs below 16px. */
    font-size:max(16px, calc(15px * var(--font-scale)));
  }

  .actions-btn{
    min-width:40px;
    width:40px;
    height:40px;
    padding:0;
    border-radius:50%;
  }

  .actions-wide{
    display:none;
  }

  .actions-narrow{
    display:inline;
  }

  .send{
    width:40px;
    height:40px;
  }

  .command-menu{
    max-height:58vh;
    border-radius:16px;
  }

  .result-row{
    padding-top:6px;
    padding-bottom:6px;
  }

  .sidebar{
    scrollbar-width:thin;
  }

  .sidebar::-webkit-scrollbar{
    width:5px;
  }

  .sidebar::-webkit-scrollbar-thumb{
    background:var(--line);
    border-radius:999px;
  }
}


.site-preview{
  margin-top:12px;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:var(--panel-soft);
}

.site-shot{
  display:block;
  width:100%;
  max-height:440px;
  object-fit:cover;
  object-position:top;
  background:var(--panel-strong);
}

.site-shot-caption{
  padding:9px 11px;
  color:var(--muted);
  font-size:calc(11px * var(--font-scale));
  line-height:1.35;
}

@media (max-width:520px){
  .site-preview{
    border-radius:14px;
  }

  .site-shot{
    max-height:320px;
  }
}

@media (max-height:600px) and (orientation:landscape) and (pointer:coarse){
  .site-shot{
    max-height:180px;
  }
}


.install-app-btn{
  width:100%;
  border:1px solid var(--line);
  background:var(--panel-soft);
  color:var(--text);
  border-radius:16px;
  padding:12px 13px;
  display:flex;
  align-items:center;
  gap:11px;
  text-align:left;
}

.install-app-btn:hover{
  background:var(--menu-hover);
}

.install-app-btn span:first-child{
  font-size:calc(20px * var(--font-scale));
}

.install-app-btn strong,
.install-app-btn small{
  display:block;
}

.install-app-btn small{
  margin-top:2px;
  color:var(--muted);
  font-size:calc(12px * var(--font-scale));
}


/* Compact the initial greeting and intro cards */
.intro-message + .message.bot .bubble{
  max-width:min(520px,78%);
  padding:11px 13px;
}

.intro-message + .message.bot .quick-row{
  margin-top:9px;
}

.intro-message + .message.bot{
  margin-bottom:8px;
}


/* Telegram-like reply keyboard / command panel */
.reply-menu{
  margin-top:8px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--composer-bg);
  box-shadow:0 12px 34px rgba(20,40,55,.16);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.reply-menu[hidden]{display:none}

.reply-action{
  min-width:0;
  min-height:48px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  background:var(--panel-soft);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  text-align:left;
}

.reply-action:hover,
.reply-action:focus-visible{
  background:var(--menu-hover);
}

.reply-action span{font-size:calc(17px * var(--font-scale));flex:0 0 auto}
.reply-action strong{
  min-width:0;
  font-size:calc(13px * var(--font-scale));
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.reply-action-wide{grid-column:1/-1}

.composer-wrap.reply-open{
  margin-bottom:calc(8px + var(--safe-bottom));
}

.composer-wrap.reply-open .actions-btn{
  background:var(--accent-strong);
}

@media (max-width:520px){
  .reply-menu{
    margin-top:7px;
    padding:7px;
    gap:7px;
    border-radius:18px;
  }
  .reply-action{
    min-height:44px;
    padding:9px 10px;
    border-radius:13px;
  }
  .reply-action strong{font-size:calc(12.5px * var(--font-scale))}
}

@media (max-height:600px) and (orientation:landscape) and (pointer:coarse){
  .reply-menu{
    max-height:48vh;
    overflow:auto;
    grid-template-columns:repeat(3,minmax(0,1fr));
    padding:6px;
    gap:6px;
  }
  .reply-action,
  .reply-action-wide{
    grid-column:auto;
    min-height:40px;
    padding:7px 9px;
  }
  .reply-action strong{font-size:calc(11.5px * var(--font-scale))}
}


/* v7.5: expanded Telegram-like reply keyboard */
.reply-menu{
  max-height:min(440px,46vh);
  overflow:auto;
  overscroll-behavior:contain;
}

.reply-primary{
  background:var(--accent-soft);
}

@media (min-width:700px){
  .reply-menu{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .reply-action-wide{
    grid-column:auto;
  }
  .reply-primary{
    grid-column:1/-1;
  }
}

@media (max-width:520px){
  .reply-menu{
    max-height:42vh;
  }
}

@media (max-height:600px) and (orientation:landscape) and (pointer:coarse){
  .reply-menu{
    max-height:43vh;
  }
  .reply-primary{
    grid-column:1/-1;
  }
}


/* v7.7 settings */
.more-wrap{position:relative;flex:0 0 auto}
.more-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:210px;
  padding:7px;
  background:var(--menu-bg);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  z-index:80;
}
.more-menu[hidden]{display:none}
.more-menu button,.more-menu a{
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:var(--text);
  text-decoration:none;
  text-align:left;
}
.more-menu button:hover,.more-menu a:hover{background:var(--menu-hover)}

.settings-card{width:min(560px,calc(100vw - 24px))}
.setting-section{padding:14px 0;border-top:1px solid var(--line)}
.setting-section:first-of-type{border-top:0;padding-top:4px}
.setting-title{font-weight:800;margin-bottom:8px}
.settings-hint{margin:6px 0 0;color:var(--muted);font-size:calc(12px * var(--font-scale))}
.theme-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.theme-choice{
  min-height:72px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel-soft);
  color:var(--text);
}
.theme-choice span{font-weight:700;font-size:calc(12px * var(--font-scale))}
.theme-choice.active{outline:2px solid var(--accent);background:var(--accent-soft)}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
#fontScaleValue{font-weight:800;color:var(--accent)}
.font-slider{width:100%;margin:12px 0 4px;accent-color:var(--accent)}
.font-scale-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:calc(11px * var(--font-scale))}
.font-preview{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--bot-bubble);box-shadow:var(--bubble-shadow)}
.settings-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.settings-done{background:var(--accent-soft)!important;color:var(--accent-strong)!important}

/* Explicit theme overrides. Appended after system media rules. */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#e8f3f5;--bg-2:#eef4df;--panel:rgba(255,255,255,.76);--panel-strong:#fff;
  --panel-soft:rgba(255,255,255,.58);--text:#17212b;--muted:#75818b;--line:rgba(98,124,142,.18);
  --accent:#3f8efc;--accent-strong:#2e7ce7;--accent-soft:#e8f2ff;--bot-bubble:#fff;--user-bubble:#d9fdd3;
  --quick-bg:#f3f8fb;--quick-border:#d3e1ea;--sidebar-bg:rgba(255,255,255,.60);--composer-bg:rgba(255,255,255,.96);
  --dialog-bg:#fff;--menu-bg:rgba(255,255,255,.96);--menu-hover:#eef6fb;--backdrop:rgba(20,32,42,.38);
  --shadow:0 18px 60px rgba(31,55,76,.16);--bubble-shadow:0 4px 14px rgba(23,40,55,.08);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#101820;--bg-2:#17232b;--panel:rgba(28,42,52,.82);--panel-strong:#1f2c35;
  --panel-soft:rgba(27,41,51,.68);--text:#eef4f7;--muted:#9fb0ba;--line:rgba(180,203,216,.12);
  --accent:#62a8ff;--accent-strong:#4b98f7;--accent-soft:#203a55;--bot-bubble:#1f2b34;--user-bubble:#275a45;
  --quick-bg:#263a47;--quick-border:#345064;--sidebar-bg:rgba(18,29,37,.82);--composer-bg:rgba(25,38,47,.985);
  --dialog-bg:#1d2932;--menu-bg:rgba(29,43,53,.98);--menu-hover:#263b49;--backdrop:rgba(0,0,0,.52);
  --shadow:0 18px 60px rgba(0,0,0,.28);--bubble-shadow:0 4px 14px rgba(0,0,0,.18);
}
:root[data-theme="amoled"]{
  color-scheme:dark;
  --bg:#000;--bg-2:#000;--panel:#050505;--panel-strong:#080808;--panel-soft:#0b0b0b;
  --text:#f4f4f4;--muted:#999;--line:rgba(255,255,255,.13);--accent:#62a8ff;--accent-strong:#78b4ff;
  --accent-soft:#102844;--bot-bubble:#111;--user-bubble:#17452f;--quick-bg:#101010;--quick-border:#292929;
  --sidebar-bg:#050505;--composer-bg:#070707;--dialog-bg:#090909;--menu-bg:#090909;--menu-hover:#161616;
  --backdrop:rgba(0,0,0,.72);--shadow:0 18px 60px rgba(0,0,0,.65);--bubble-shadow:none;
}
:root[data-theme="amoled"] body{background:#000!important}
:root[data-theme="light"] body{
  background:radial-gradient(circle at 20% 10%,rgba(109,204,173,.25),transparent 34%),radial-gradient(circle at 80% 0%,rgba(246,224,119,.22),transparent 30%),linear-gradient(160deg,var(--bg),var(--bg-2))!important;
}
:root[data-theme="dark"] body{
  background:radial-gradient(circle at 16% 8%,rgba(68,146,126,.15),transparent 32%),radial-gradient(circle at 84% 0%,rgba(93,115,75,.12),transparent 28%),linear-gradient(160deg,var(--bg),var(--bg-2))!important;
}
@media(max-width:520px){.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.theme-choice{min-height:60px}}


/* v7.8: страховка для браузеров без нативного <dialog>.
   Если JS не запустился, dialog не должен висеть как обычный блок. */
dialog:not([open]) {
  display: none !important;
}


/* v7.9: old engines sometimes render unknown <dialog> as a normal block. */
dialog { display:none; }
dialog[open] { display:block; }


/* v7.9.4 — iOS focus zoom guard.
   Do not disable user pinch-zoom; only keep focused form controls >=16px. */
@media (max-width:820px), ((max-height:600px) and (pointer:coarse)){
  input[type="text"],
  input[type="search"],
  input[type="url"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select{
    font-size:max(16px, calc(16px * var(--font-scale)));
  }
}


/* v7.9.5 — iOS PWA install instructions */
.install-help-card{
  width:min(520px,calc(100vw - 24px));
}
.install-help-card p{
  margin:8px 0 14px;
}
.install-steps{
  margin:12px 0 14px 1.25em;
  padding:0;
}
.install-steps li{
  margin:10px 0;
  line-height:1.45;
}
.share-glyph{
  display:inline-block;
  font-weight:800;
  font-size:1.15em;
  transform:translateY(-1px);
}


/* v7.9.5: HTML hidden must win over install button display rules. */
.install-app-btn[hidden]{
  display:none !important;
}


/* v7.9.8 — mobile drawer polish / iOS viewport fix */
@media (max-width:820px), ((max-height:600px) and (pointer:coarse)){
  /* Header already contains IM + Аймонду, so sidebar begins with commands. */
  .sidebar{
    padding-top:12px;
    padding-bottom:calc(20px + var(--safe-bottom));

    /* Old Safari-style 100vh fallback first, dynamic viewport second. */
    height:calc(100vh - (64px + var(--safe-top)));
    height:calc(100dvh - (64px + var(--safe-top)));
    bottom:auto;
  }

  /* Cover the ENTIRE visual viewport. Topbar remains visible because it has z-index:30. */
  .sidebar-backdrop:not([hidden]){
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100vw;
    height:100vh;
    height:100dvh;
  }

  /* Never let the root page expose a white strip behind the drawer/safe-area. */
  html,body,.app-shell{
    background-color:var(--bg);
  }
}

@media (max-height:600px) and (orientation:landscape) and (pointer:coarse){
  .sidebar{
    height:calc(100vh - (54px + var(--safe-top)));
    height:calc(100dvh - (54px + var(--safe-top)));
  }
}


/* v7.9.9 — iOS standalone polish */

/* On phones the header already owns identity/navigation.
   The old-browser note is useful on desktop, but in the drawer it looks
   like an orphaned rounded slab at the bottom of the viewport. */
@media (max-width:820px), ((max-height:600px) and (pointer:coarse)){
  .sidebar-note{
    display:none;
  }

  .sidebar .install-app-btn{
    flex:0 0 auto;
    margin-top:4px;
    margin-bottom:0;
  }
}

/* Installed PWA: use the real screen edges rather than relying only on
   100vh/100dvh, which can leave a dead strip on iOS standalone. */
@media (display-mode: standalone){
  html,
  body{
    width:100%;
    height:100%;
    min-height:100%;
    overflow:hidden;
    background:var(--bg);
  }

  .app-shell{
    position:fixed;
    inset:0;
    width:auto;
    height:auto;
    min-height:0;
  }

  /* Keep the composer above the home indicator, but do not double-count
     a large bottom area. */
  .composer-wrap,
  .composer-wrap.reply-open{
    margin-bottom:max(6px, var(--safe-bottom));
  }

  /* It is already installed: this control is never useful here. */
  .install-app-btn{
    display:none !important;
  }

  .sidebar{
    padding-bottom:max(12px, var(--safe-bottom));
  }
}

/* JS adds this class too, including iOS standalone where media-query
   reporting can occasionally be late during startup. */
html.standalone-mode,
html.standalone-mode body{
  height:100%;
  min-height:100%;
  overflow:hidden;
}

html.standalone-mode .app-shell{
  position:fixed;
  inset:0;
  width:auto;
  height:auto;
}

html.standalone-mode .composer-wrap,
html.standalone-mode .composer-wrap.reply-open{
  margin-bottom:max(6px, var(--safe-bottom));
}

html.standalone-mode .install-app-btn{
  display:none !important;
}


/* ==================================================================
   Аймонду 8 — Messenger Shell
   ================================================================== */

[hidden]{display:none!important}

/* Splash / preloader */
.app-splash{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  color:var(--text);
  opacity:1;
  transition:opacity .24s ease,visibility .24s ease;
}
.splash-mark{
  width:86px;
  height:86px;
  border-radius:28px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,var(--accent),#57c6d8);
  color:#fff;
  font-size:31px;
  font-weight:900;
  letter-spacing:-.03em;
  box-shadow:0 18px 50px rgba(63,142,252,.24);
}
.splash-name{
  margin-top:18px;
  font-size:22px;
  font-weight:850;
}
.splash-note{
  margin-top:9px;
  color:var(--muted);
  font-size:13px;
  opacity:0;
  transition:opacity .2s ease;
}
.app-splash.splash-slow .splash-note{opacity:1}
.app-splash.splash-hide{opacity:0;visibility:hidden}

/* v8 removes old sidebar from normal UI, but it stays in DOM for fallback JS. */
.v8-shell .sidebar,
.v8-shell .sidebar-backdrop,
.v8-shell .sidebar-toggle{
  display:none!important;
}

.v8-shell .layout{
  grid-template-columns:minmax(0,1fr);
  min-height:0;
}

.v8-back{
  font-size:38px;
  line-height:1;
  font-weight:300;
}

.v8-panel{
  min-width:0;
  min-height:0;
  overflow:hidden;
}

.v8-scroll{
  height:100%;
  overflow:auto;
  padding:22px max(20px,calc((100vw - 980px)/2)) 28px;
  scrollbar-width:thin;
}

.v8-page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

.v8-page-head h1{
  margin:0;
  font-size:clamp(calc(30px * var(--font-scale)),5vw,calc(42px * var(--font-scale)));
  line-height:1.05;
  letter-spacing:-.025em;
}

.v8-page-head p{
  margin:7px 0 0;
  color:var(--muted);
  font-size:calc(14px * var(--font-scale));
}

.v8-round-action{
  width:48px;
  height:48px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--accent);
  color:#fff;
  font-size:28px;
  box-shadow:0 8px 24px rgba(63,142,252,.24);
}

.v8-search{
  min-height:48px;
  border-radius:16px;
  padding:0 15px;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--panel-soft);
  border:1px solid var(--line);
  margin-bottom:16px;
}
.v8-search span{color:var(--muted);font-size:22px}
.v8-search input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:max(16px,calc(15px * var(--font-scale)));
}

.utility-list{
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--panel);
  box-shadow:var(--bubble-shadow);
}

.utility-item{
  position:relative;
  width:100%;
  min-height:82px;
  border:0;
  border-bottom:1px solid var(--line);
  padding:12px 16px;
  display:grid;
  grid-template-columns:54px minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  background:transparent;
  color:var(--text);
  text-align:left;
}
.utility-item:last-child{border-bottom:0}
.utility-item:hover{background:var(--panel-soft)}
.utility-item.featured{background:linear-gradient(90deg,var(--accent-soft),transparent 75%)}

.utility-icon{
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:25px;
  background:var(--panel-soft);
}
.utility-blue{background:rgba(62,145,255,.16)}
.utility-cyan{background:rgba(64,196,213,.17)}
.utility-violet{background:rgba(139,101,255,.16)}
.utility-orange{background:rgba(255,163,66,.17)}
.utility-yellow{background:rgba(255,196,35,.18)}
.utility-green{background:rgba(58,190,105,.17)}
.utility-gray{background:rgba(120,132,145,.13)}
.utility-cloud{background:rgba(142,183,213,.17)}

.utility-copy{min-width:0}
.utility-copy strong{
  display:block;
  font-size:calc(17px * var(--font-scale));
  line-height:1.2;
}
.utility-copy small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  line-height:1.28;
  font-size:calc(13px * var(--font-scale));
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.utility-chevron{
  color:var(--muted);
  font-size:30px;
  font-weight:300;
}
.utility-badge{
  padding:6px 9px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-size:11px;
  font-weight:800;
}

.v8-empty{
  margin:28px auto;
  text-align:center;
  color:var(--muted);
}

/* Bottom navigation */
.v8-bottom-nav{
  flex:0 0 auto;
  min-height:70px;
  padding:7px 12px calc(7px + var(--safe-bottom));
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
  border-top:1px solid var(--line);
  background:var(--composer-bg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  z-index:32;
}
.v8-bottom-nav button{
  border:0;
  border-radius:13px;
  background:transparent;
  color:var(--muted);
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
}
.v8-bottom-nav button span{font-size:22px}
.v8-bottom-nav button strong{font-size:11px}
.v8-bottom-nav button.active{color:var(--accent)}
.v8-bottom-nav button.active span{transform:translateY(-1px)}

/* Tool chat */
.tool-welcome-message{margin-top:12px}
.tool-welcome{
  max-width:min(560px,84%);
}
.tool-welcome-icon{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background:var(--accent-soft);
  font-size:24px;
  margin-bottom:9px;
}
.tool-welcome p{
  margin:7px 0 0;
  color:var(--muted);
  line-height:1.4;
}

/* History */
.v8-text-action{
  border:0;
  background:transparent;
  color:var(--accent);
  font-weight:750;
  padding:8px;
}
.history-list{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--panel);
}
.history-item{
  width:100%;
  min-height:70px;
  padding:11px 15px;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:var(--text);
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  text-align:left;
}
.history-item:last-child{border-bottom:0}
.history-item:hover{background:var(--panel-soft)}
.history-icon{
  width:42px;height:42px;border-radius:13px;
  background:var(--panel-soft);
  display:grid;place-items:center;font-size:20px;
}
.history-copy{min-width:0}
.history-copy strong{display:block}
.history-copy small{
  display:block;margin-top:4px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.history-item time{
  color:var(--muted);
  font-size:11px;
}

/* Settings */
.settings-page{padding-bottom:34px}
.settings-page-card,
.settings-list-card{
  max-width:820px;
  margin:0 auto 16px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--panel);
  box-shadow:var(--bubble-shadow);
}
.settings-label{
  margin-bottom:12px;
  color:var(--muted);
  font-size:11px;
  font-weight:850;
  letter-spacing:.08em;
}

.v8-font-control{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
}
.v8-font-control input{width:100%;accent-color:var(--accent)}
.font-a.small{font-size:17px}
.font-a.large{font-size:33px;font-weight:800}
.settings-value{
  margin-top:6px;
  text-align:center;
  color:var(--accent);
  font-size:12px;
  font-weight:800;
}

.v8-segment{
  padding:3px;
  border-radius:14px;
  background:var(--panel-soft);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.v8-segment button{
  border:0;
  min-height:42px;
  border-radius:11px;
  background:transparent;
  color:var(--muted);
  font-weight:750;
}
.v8-segment button.active{
  background:var(--panel-strong);
  color:var(--accent);
  box-shadow:0 3px 12px rgba(20,40,55,.10);
}

.theme-live-preview{
  min-height:190px;
  border-radius:18px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  justify-content:center;
  background:
    radial-gradient(circle at 20% 20%,rgba(70,165,255,.22),transparent 36%),
    radial-gradient(circle at 85% 60%,rgba(89,208,174,.18),transparent 34%),
    var(--bg);
  border:1px solid var(--line);
}
.preview-bubble{
  width:max-content;
  max-width:82%;
  padding:11px 13px;
  border-radius:16px;
  box-shadow:var(--bubble-shadow);
}
.bot-preview{background:var(--bot-bubble)}
.user-preview{background:var(--user-bubble);align-self:flex-end}

.skin-scroller{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:145px;
  gap:12px;
  margin-top:14px;
  overflow-x:auto;
  padding-bottom:5px;
  scroll-snap-type:x proximity;
}
.skin-card{
  border:2px solid transparent;
  border-radius:16px;
  padding:5px;
  background:transparent;
  color:var(--muted);
  scroll-snap-align:start;
}
.skin-card.active{
  border-color:var(--accent);
  color:var(--accent);
}
.skin-card>span{
  height:92px;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  padding:12px;
  overflow:hidden;
}
.skin-card i,.skin-card b{
  display:block;height:22px;border-radius:12px;background:#fff;
}
.skin-card b{width:72%;align-self:flex-end}
.skin-card strong{display:block;margin:7px 2px 2px;font-size:12px}
.skin-cosmos>span{background:linear-gradient(145deg,#91d6ff,#82e1cf)}
.skin-cosmos b{background:#cffff6}
.skin-forest>span{background:linear-gradient(145deg,#d8edc2,#8fd4a7)}
.skin-forest b{background:#cbffb1}
.skin-neon>span{background:linear-gradient(145deg,#7655ff,#ef759d)}
.skin-neon b{background:#dce0ff}
.skin-simple>span{background:#e9ecef}
.skin-simple b{background:#168cf0}

.settings-list-card{padding:0;overflow:hidden}
.settings-list-card button,
.settings-list-card a{
  width:100%;
  min-height:70px;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:var(--text);
  padding:12px 16px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  text-align:left;
  text-decoration:none;
}
.settings-list-card>*:last-child{border-bottom:0}
.settings-list-card span strong,
.settings-list-card span small{display:block}
.settings-list-card span small{margin-top:3px;color:var(--muted)}
.settings-list-card>b{font-size:27px;color:var(--muted);font-weight:300}

/* Extra visual themes */
:root[data-skin="cosmos"] body{
  background:
    radial-gradient(circle at 15% 10%,rgba(72,168,255,.20),transparent 34%),
    radial-gradient(circle at 84% 4%,rgba(91,210,167,.17),transparent 30%),
    linear-gradient(160deg,var(--bg),var(--bg-2))!important;
}
:root[data-skin="forest"]{
  --accent:#3da36a;
  --accent-strong:#318b59;
  --accent-soft:rgba(61,163,106,.15);
}
:root[data-skin="forest"] body{
  background:
    radial-gradient(circle at 12% 12%,rgba(119,187,102,.26),transparent 34%),
    radial-gradient(circle at 85% 9%,rgba(209,222,132,.22),transparent 31%),
    linear-gradient(160deg,var(--bg),var(--bg-2))!important;
}
:root[data-skin="neon"]{
  --accent:#7459ff;
  --accent-strong:#6548f0;
  --accent-soft:rgba(116,89,255,.16);
}
:root[data-skin="neon"] body{
  background:
    radial-gradient(circle at 10% 8%,rgba(103,86,255,.28),transparent 32%),
    radial-gradient(circle at 88% 18%,rgba(236,93,155,.21),transparent 32%),
    linear-gradient(160deg,var(--bg),var(--bg-2))!important;
}
:root[data-skin="simple"] body{
  background:var(--bg)!important;
}

/* Mobile three-dot actions as bottom sheet */
@media(max-width:820px){
  body.more-open::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:74;
    background:rgba(0,0,0,.34);
  }

  .more-menu{
    position:fixed!important;
    z-index:90!important;
    left:10px!important;
    right:10px!important;
    top:auto!important;
    bottom:calc(10px + var(--safe-bottom))!important;
    width:auto!important;
    border-radius:22px!important;
    padding:8px!important;
  }

  .more-menu button,.more-menu a{
    min-height:54px!important;
    font-size:16px;
  }
}

@media(max-width:620px){
  .topbar{
    min-height:64px;
  }

  .v8-scroll{
    padding:18px 12px 24px;
  }

  .v8-page-head h1{
    font-size:calc(32px * var(--font-scale));
  }

  .utility-list{
    border-left:0;
    border-right:0;
    border-radius:18px;
  }

  .utility-item{
    min-height:78px;
    padding-left:12px;
    padding-right:12px;
    grid-template-columns:50px minmax(0,1fr) auto;
  }

  .utility-icon{width:48px;height:48px}

  .v8-segment{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:3px;
  }

  .v8-bottom-nav{
    min-height:66px;
  }

  .settings-page-card,
  .settings-list-card{
    border-radius:18px;
  }
}

@media(min-width:821px){
  .v8-bottom-nav{
    padding-left:max(20px,calc((100vw - 620px)/2));
    padding-right:max(20px,calc((100vw - 620px)/2));
  }

  .utility-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .utility-item{
    border-right:1px solid var(--line);
  }

  .utility-item:nth-child(even){border-right:0}
}

/* Installed v8 PWA */
@media(display-mode:standalone){
  .v8-bottom-nav{
    padding-bottom:max(8px,var(--safe-bottom));
  }
}



/* ==============================================================
   v8.0.1 — mobile actions bottom sheet stacking-context fix
   ============================================================== */

.actions-sheet-head{
  display:none;
}

@media(max-width:820px){
  /* Dim everything. The menu is portaled to <body>, so it can sit above this. */
  body.more-open::before{
    z-index:1000!important;
  }

  body > .more-menu{
    z-index:1010!important;
  }

  body > .more-menu[hidden]{
    display:none!important;
  }

  body > .more-menu{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:calc(10px + var(--safe-bottom))!important;
    top:auto!important;
    width:auto!important;
    max-height:min(72dvh,620px);
    overflow:auto;
    padding:7px 8px 10px!important;
    border-radius:24px!important;
    background:var(--dialog-bg)!important;
    border:1px solid var(--line)!important;
    box-shadow:0 24px 80px rgba(0,0,0,.34)!important;
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
  }

  body > .more-menu .actions-sheet-head{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:3px 10px 10px;
  }

  body > .more-menu .actions-sheet-head strong{
    width:100%;
    padding:3px 5px 1px;
    font-size:14px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.06em;
  }

  .actions-sheet-handle{
    width:38px;
    height:5px;
    border-radius:999px;
    background:var(--muted);
    opacity:.45;
    margin-bottom:8px;
  }

  body > .more-menu button,
  body > .more-menu a{
    min-height:56px!important;
    border-radius:14px!important;
    padding:11px 14px!important;
    font-size:16px!important;
    font-weight:700;
  }

  body > .more-menu button:active,
  body > .more-menu a:active{
    background:var(--menu-hover)!important;
  }
}


/* ==============================================================
   v8.0.2 — adaptive navigation cleanup
   ============================================================== */

/* v8 never uses the old drawer trigger. */
.v8-shell .sidebar-toggle{
  display:none!important;
}

/* MOBILE / TABLET
   Primary navigation = bottom tabs. No sidebar / burger duplication. */
@media(max-width:820px){
  .v8-shell .sidebar,
  .v8-shell .sidebar-backdrop{
    display:none!important;
  }

  .v8-shell .layout{
    grid-template-columns:minmax(0,1fr)!important;
  }

  .desktop-v8-only{
    display:none!important;
  }

  .v8-back:not([hidden]){
    display:grid!important;
  }
}

/* DESKTOP
   Primary navigation = permanent left sidebar.
   Bottom tabs disappear completely. */
@media(min-width:821px){
  .v8-shell .layout{
    grid-template-columns:280px minmax(0,1fr)!important;
  }

  .v8-shell .sidebar{
    display:flex!important;
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    width:auto!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    z-index:1!important;
    box-shadow:none!important;
  }

  .v8-shell .sidebar-backdrop{
    display:none!important;
  }

  .v8-bottom-nav{
    display:none!important;
  }

  .v8-back{
    display:none!important;
  }

  .desktop-v8-only{
    display:flex!important;
  }

  .sidebar-divider{
    height:1px;
    flex:0 0 auto;
    margin:8px 12px;
    background:var(--line);
  }

  .side-item.active{
    background:var(--accent-soft)!important;
    color:var(--accent)!important;
  }

  .side-item.active span:last-child{
    font-weight:800;
  }

  /* Keep History / Settings near the bottom like desktop messenger nav. */
  .sidebar-divider.desktop-v8-only{
    margin-top:auto;
  }

  .sidebar-note{
    margin-top:8px!important;
  }
}

/* At very wide widths, the desktop sidebar gets a little more breathing room. */
@media(min-width:1180px){
  .v8-shell .layout{
    grid-template-columns:300px minmax(0,1fr)!important;
  }
}