/* Velmin 5.16 — one responsive layout for desktop + phone */
html,body{height:100%;overflow:hidden}
.shell{height:100dvh}
.side{overflow-y:auto;min-height:0;overscroll-behavior:contain}
.main{min-height:0;grid-template-rows:auto minmax(0,1fr)}
.top{height:60px;padding:0 clamp(14px,3vw,32px)}
.viewport{min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.lang-quick{display:flex;align-items:center;gap:8px;margin:10px 0 2px;padding:8px 10px;border:1px solid rgba(232,215,165,.16);border-radius:12px;background:#0d1213;color:#cfd5d1}
.lang-quick select{flex:1;min-width:0;background:transparent;color:inherit;border:0;outline:0;font-size:12px}
.lang-quick select option{background:#101617;color:#eee}
/* welcome state vs conversation state */
#chat.has-chat .classic-hero,#chat.has-chat .energy-wallet,#chat.has-chat .quick-head,#chat.has-chat .quick-grid,#chat.has-chat .classic-footnote{display:none}
#chat{display:flex;flex-direction:column;min-height:100%}
#chat .chat-stack{flex:1;align-content:start}
.classic-composer-wrap{position:sticky;bottom:0;z-index:20;width:100%;margin:auto auto 0;padding:14px 0 calc(8px + env(safe-area-inset-bottom));background:linear-gradient(transparent,#080c0d 26%)}
.classic-composer textarea{font-size:16px}
.chat-modebar{flex-wrap:nowrap;overflow-x:auto;justify-content:center;scrollbar-width:none;opacity:1}
.chat-modebar::-webkit-scrollbar{display:none}
.mode-pill{white-space:nowrap;font-size:12px;padding:9px 13px}
.mode-pill.active{color:#161611;background:#e7d8ad;border-color:#e7d8ad}
.msg{max-width:min(86%,720px)}
[data-theme=midnight] body,[data-theme=midnight] .main{background:#05070f}
[data-theme=graphite] body,[data-theme=graphite] .main{background:#111214}
.compact .viewport{padding-top:22px;padding-bottom:22px}.compact .msg{padding:10px 13px}
@media(max-width:820px){
  .shell{display:block}
  .main{height:100dvh;grid-template-rows:auto minmax(0,1fr) auto}
  .top{order:1;height:52px}.viewport{order:2;padding:18px 14px 12px}
  .mobilebar{order:3;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-top:1px solid rgba(232,215,165,.14);border-bottom:0;background:#070a0b}
  .mobilebar::-webkit-scrollbar{display:none}
  .mobilebar button{flex:0 0 auto;min-height:40px}
  .mobilebar .lang-quick{flex:0 0 120px;margin:0;padding:4px 8px;border-radius:999px}
  .classic-composer-wrap{padding:10px 0 6px}
  .chat-modebar{justify-content:flex-start;margin-top:6px}
  .msg{max-width:92%}
  .pet-orbit{bottom:150px;right:12px;width:50px;height:50px;font-size:26px}
  .settings-page .setting{flex-wrap:wrap}
}
@media(min-width:821px){.mobilebar{display:none}}

/* modes live inside the chat composer */
.classic-composer{display:flex;flex-wrap:wrap;align-items:flex-end}
.composer-modes{flex:0 0 100%;width:100%;margin:0 0 6px;padding:2px 2px 8px;justify-content:flex-start;border-bottom:1px solid rgba(232,215,165,.10);gap:6px}
.composer-modes .mode-pill{font-size:12px;padding:8px 12px}
.classic-composer textarea{flex:1 1 0;min-width:0}
.composer-meta{display:none}
@media(max-width:820px){
  .classic-composer{display:grid!important;grid-template-columns:40px minmax(0,1fr) 46px!important}
  .composer-modes{grid-column:1/-1;grid-row:1}
  .classic-composer .composer-plus,.classic-composer textarea,.classic-composer .send{grid-row:2!important}
}

/* 5.18.1 — mobile polish */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,select,input,textarea,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media(max-width:820px){
  /* iOS zooms the page when a focused field is under 16px */
  input,select,textarea{font-size:16px!important}
  /* the composer is sticky now, so the old 112px "fixed composer" gap is dead space */
  .viewport{padding-bottom:calc(20px + env(safe-area-inset-bottom))!important}
  .settings-page{padding-bottom:calc(28px + env(safe-area-inset-bottom))!important}
  /* comfortable touch targets */
  .mode-pill,.cost-chip,.mini-btn{min-height:38px}
  .classic-composer .composer-plus,.classic-composer .send{min-width:44px;min-height:44px}
  .composer-modes{margin-right:-2px;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .v-modal{align-items:end;padding:0}.v-card{width:100%;border-radius:20px 20px 0 0;max-height:92dvh}
  .auth-tabs{width:100%}.auth-tabs button{flex:1}
  .quest-head .week{order:3}
  .msg-tools button{padding:8px 11px}
}
@media(max-width:380px){
  .classic-hero h1 strong{font-size:34px}.classic-hero h1 em{font-size:30px}
  .mobilebar button{padding:8px 9px;font-size:12px}
}
@media(hover:none){.msg-tools{gap:6px}}