/* MONARCH AI V23 — 48 theme system: 16 colour systems × Glass / Glossy / Metallic */
:root{--main-a:#08020f;--main-b:#34104d;--main-c:#8f2dff;--main-d:#d66bff;--theme-glow:rgba(166,64,255,.46);--text:#fff;--muted:#aaa4b2;--line:rgba(255,255,255,.14);--keyboard-offset:0px;--app-h:100dvh;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#030304;color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0}button:disabled{opacity:.5;cursor:not-allowed}textarea{resize:none}img{max-width:100%;display:block}
.monarch-app{width:100%;height:var(--app-h);min-height:100%;overflow:hidden;position:relative;background:radial-gradient(circle at 50% -15%,color-mix(in srgb,var(--main-d) 16%,transparent),transparent 35%),linear-gradient(145deg,#000,var(--main-a) 38%,var(--main-b) 72%,#000);color:var(--text)}
.monarch-app::before{content:"";position:absolute;inset:-20%;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.06) 48%,transparent 58%),radial-gradient(circle at 78% 25%,var(--theme-glow),transparent 28%);mix-blend-mode:screen;opacity:.75;animation:sweep 13s linear infinite}
/* Finish engine. The same colour system gets a different material treatment. */
.monarch-app[data-theme$="-glass"]{--finish-blur:24px;--finish-alpha:.20;--finish-border:rgba(255,255,255,.22);--finish-shadow:0 18px 55px rgba(0,0,0,.34);--finish-filter:blur(24px) saturate(135%)}
.monarch-app[data-theme$="-glossy"]{--finish-blur:14px;--finish-alpha:.38;--finish-border:rgba(255,255,255,.32);--finish-shadow:0 18px 50px rgba(0,0,0,.44);--finish-filter:blur(14px) saturate(155%)}
.monarch-app[data-theme$="-metallic"]{--finish-blur:7px;--finish-alpha:.52;--finish-border:rgba(255,255,255,.4);--finish-shadow:0 20px 58px rgba(0,0,0,.52);--finish-filter:blur(7px) saturate(125%)}
.auth-pending .auth-card{visibility:hidden}.auth-screen{position:absolute;z-index:50;inset:0;display:grid;place-items:center;padding:28px var(--safe-right) calc(28px + var(--safe-bottom)) var(--safe-left);overflow:auto;background:radial-gradient(circle at 50% 28%,rgba(255,0,30,.15),transparent 25%),linear-gradient(145deg,#000,#07090a 48%,#100204)}
.auth-atmosphere{position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,20,35,.09) 50%,transparent 64%);animation:authSweep 7s ease-in-out infinite}.auth-card{width:min(440px,calc(100vw - 34px));padding:30px 26px 26px;border:1px solid rgba(255,45,55,.45);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(15,10,12,.76) 45%,rgba(0,0,0,.86));box-shadow:0 30px 90px rgba(0,0,0,.72),0 0 45px rgba(255,0,30,.12),inset 0 1px 0 rgba(255,255,255,.2);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);text-align:center;position:relative;overflow:hidden}.auth-emblem-wrap{width:108px;height:108px;margin:0 auto 16px;border-radius:30px;padding:10px;background:linear-gradient(145deg,#4a0006,#090909 48%,#360004);box-shadow:0 0 35px rgba(255,0,25,.26),inset 0 1px 1px rgba(255,255,255,.18)}.auth-emblem{width:100%;height:100%;object-fit:cover;border-radius:22px}.auth-brand{font-weight:900;letter-spacing:.16em;font-size:20px}.auth-tagline{font-size:10px;letter-spacing:.3em;color:#ff6872;margin-top:5px}.auth-card h1{font-size:27px;margin:24px 0 9px}.auth-subtitle{color:#bbb5b7;line-height:1.5;margin:0 auto 20px;max-width:340px;font-size:14px}.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:#777}.auth-divider::before,.auth-divider::after{content:"";height:1px;background:rgba(255,255,255,.12);flex:1}.email-auth-form{display:grid;gap:8px;text-align:left}.email-auth-form label{font-size:12px;color:#bbb;margin-top:3px}.email-auth-form input{width:100%;height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.13);background:rgba(0,0,0,.4);color:#fff;padding:0 13px;outline:none}.email-auth-form input:focus{border-color:#ff4654;box-shadow:0 0 0 3px rgba(255,50,70,.12)}.auth-primary{width:100%;min-height:50px;border-radius:14px;color:#fff;font-weight:800;background:linear-gradient(145deg,#303236,#0a0a0b);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}.auth-switch{background:none;color:#ff7982;margin-top:15px}.auth-message{min-height:20px;color:#ff8a92;font-size:13px;margin:12px 0 0}.auth-note{font-size:11px;color:#777;margin:16px 0 0}.confirm-password-row[hidden]{display:none!important}
.main-app{height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;position:relative;z-index:1;min-width:0}.monarch-header{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:calc(10px + var(--safe-top)) max(14px,var(--safe-right)) 10px max(14px,var(--safe-left));border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(0,0,0,.86),rgba(0,0,0,.45));backdrop-filter:var(--finish-filter);-webkit-backdrop-filter:var(--finish-filter)}.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand-icon{width:43px;height:43px;border-radius:12px;overflow:hidden;border:1px solid var(--finish-border);box-shadow:0 0 18px var(--theme-glow)}.brand-icon img{width:100%;height:100%;object-fit:cover}.brand-text h1{font-size:17px;letter-spacing:.12em;margin:0;font-weight:900}.brand-text span{font-size:9px;letter-spacing:.25em;color:var(--muted)}.header-actions{display:flex;align-items:center;gap:9px}.header-status{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--muted)}.status-dot{width:8px;height:8px;border-radius:50%;background:#777;box-shadow:0 0 8px #777}.status-dot.online{background:#45ff9b;box-shadow:0 0 12px #45ff9b}.status-dot.offline{background:#ff4655;box-shadow:0 0 10px #ff4655}.header-button,.close-button{width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(0,0,0,.4));color:var(--text);border:1px solid var(--finish-border);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);font-size:25px}.monarch-welcome{text-align:center;padding:20px 18px 12px;transition:.28s ease;opacity:1;transform:translateY(0)}.monarch-welcome.has-chat{opacity:0;transform:translateY(-18px);height:0;padding:0;overflow:hidden}.welcome-symbol{width:72px;height:72px;margin:0 auto 9px;border-radius:20px;overflow:hidden;border:1px solid var(--finish-border);box-shadow:0 0 30px var(--theme-glow)}.welcome-symbol img{width:100%;height:100%;object-fit:cover}.monarch-welcome h2{margin:0;font-size:24px}.monarch-welcome p{margin:6px auto 0;color:var(--muted);font-size:13px;max-width:600px;line-height:1.45}.chat-container{min-height:0;overflow:hidden;position:relative}.chat{height:100%;overflow-y:auto;overflow-x:hidden;padding:8px max(14px,var(--safe-right)) 20px max(14px,var(--safe-left));scroll-behavior:smooth;overscroll-behavior:contain}.message{width:100%;display:flex;margin:12px 0;min-width:0}.message.user{justify-content:flex-end}.message.user .bubble{max-width:min(78%,620px)}.message.monarch{display:block;width:100%;padding:4px 0 10px}.message.monarch .message-content{max-width:min(900px,100%);padding:0;background:transparent;border:0;box-shadow:none}.message.user .bubble{padding:11px 14px;border-radius:18px 18px 5px 18px;color:#fff;border:1px solid var(--finish-border);box-shadow:var(--finish-shadow),inset 0 1px 1px rgba(255,255,255,.45);background:linear-gradient(145deg,var(--theme-d),var(--theme-c) 28%,var(--theme-b) 68%,var(--theme-a));position:relative;overflow:hidden}.message.user .bubble::after,.input-wrapper::after,.topic::after,.header-button::after{content:"";position:absolute;inset:-70%;background:linear-gradient(110deg,transparent 43%,rgba(255,255,255,.25) 50%,transparent 57%);transform:translateX(-20%);animation:shine 7s linear infinite;pointer-events:none}.monarch-app[data-theme$="-glass"] .message.user .bubble{background:linear-gradient(145deg,color-mix(in srgb,var(--theme-d) 34%,transparent),color-mix(in srgb,var(--theme-c) 22%,transparent));backdrop-filter:blur(var(--finish-blur));-webkit-backdrop-filter:blur(var(--finish-blur))}.monarch-app[data-theme$="-glossy"] .message.user .bubble{background:linear-gradient(135deg,var(--theme-d),var(--theme-c) 24%,var(--theme-b) 55%,var(--theme-d) 73%,var(--theme-a))}.monarch-app[data-theme$="-metallic"] .message.user .bubble{background:linear-gradient(110deg,var(--theme-a),var(--theme-c) 18%,#fff 25%,var(--theme-d) 31%,var(--theme-b) 48%,var(--theme-c) 68%,#fff 76%,var(--theme-a));background-size:220% 100%;animation:metalMove 9s linear infinite}.message-content{font-size:15px;line-height:1.62;overflow-wrap:anywhere}.message-content p{margin:0 0 10px}.message-content p:last-child{margin-bottom:0}.message-content code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;padding:2px 5px;border-radius:5px;background:rgba(255,255,255,.08)}.message-content pre{margin:10px 0;padding:13px;border-radius:12px;overflow:auto;background:rgba(0,0,0,.5);border:1px solid var(--line)}.message-content pre code{padding:0;background:none}.message-image{display:block;max-width:360px;max-height:330px;width:auto;height:auto;border-radius:14px;margin-bottom:8px;object-fit:contain;border:1px solid rgba(255,255,255,.25)}.thinking-message{display:flex;align-items:center;gap:8px;padding:5px max(16px,var(--safe-right)) calc(8px + var(--safe-bottom) + var(--keyboard-offset)) max(16px,var(--safe-left));color:var(--muted);font-size:12px}.thinking-dot{width:7px;height:7px;border-radius:50%;background:var(--theme-c);box-shadow:0 0 12px var(--theme-glow);animation:pulse 1s infinite}.thinking-dots{display:flex;gap:3px}.thinking-dots i{width:4px;height:4px;border-radius:50%;background:var(--theme-d);animation:dot 1s infinite}.thinking-dots i:nth-child(2){animation-delay:.15s}.thinking-dots i:nth-child(3){animation-delay:.3s}.quick-topics{display:flex;gap:8px;overflow-x:auto;padding:7px max(14px,var(--safe-right)) 9px max(14px,var(--safe-left));scrollbar-width:none}.quick-topics::-webkit-scrollbar{display:none}.topic{white-space:nowrap;padding:8px 11px;border-radius:999px;color:var(--text);background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(0,0,0,.42));border:1px solid var(--finish-border);font-size:11px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);position:relative;overflow:hidden}.input-area{position:relative;z-index:25;padding:7px max(14px,var(--safe-right)) calc(8px + var(--safe-bottom) + var(--keyboard-offset)) max(14px,var(--safe-left));background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.82));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.input-wrapper{position:relative;display:flex;align-items:flex-end;gap:6px;padding:6px;border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(0,0,0,.56));border:1px solid var(--finish-border);box-shadow:var(--finish-shadow),inset 0 1px 0 rgba(255,255,255,.14);overflow:hidden}.input-wrapper>*{position:relative;z-index:1}#userInput{flex:1;min-width:0;max-height:122px;min-height:38px;border:0;outline:0;background:transparent;color:var(--text);padding:9px 8px;line-height:1.4;overflow-y:auto}.input-actions{display:flex;gap:5px}.voice-button,.send-button{width:38px;height:38px;min-width:38px;min-height:38px;border-radius:12px;color:#fff;background:linear-gradient(145deg,var(--theme-d),var(--theme-c) 28%,var(--theme-b) 72%,var(--theme-a));border:1px solid var(--finish-border);box-shadow:inset 0 1px 1px rgba(255,255,255,.35);position:relative;overflow:hidden}.voice-button.active{box-shadow:0 0 18px var(--theme-glow),inset 0 1px 1px rgba(255,255,255,.35)}.attachment-preview{padding:6px 0}.attachment-card{display:flex;align-items:center;gap:10px;max-width:700px;margin:auto;padding:8px;border:1px solid var(--finish-border);border-radius:14px;background:rgba(0,0,0,.4);backdrop-filter:blur(12px)}.attachment-card img{width:52px;height:52px;object-fit:cover;border-radius:10px}.attachment-card strong,.attachment-card small{display:block}.attachment-card strong{font-size:12px;max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment-card small{font-size:10px;color:var(--muted);margin-top:3px}.attachment-card button{margin-left:auto;width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.08);color:var(--text)}.rate-limit-banner{position:relative;z-index:30;margin:0 auto;padding:8px 14px;text-align:center;font-size:11px;color:#ffd5d9;background:rgba(100,0,12,.72);border-top:1px solid rgba(255,70,90,.25);border-bottom:1px solid rgba(255,70,90,.25)}.monarch-footer{text-align:center;color:var(--muted);font-size:8px;letter-spacing:.18em;padding:3px 10px calc(3px + var(--safe-bottom));opacity:.65}
.settings-backdrop{position:absolute;z-index:70;inset:0;background:rgba(0,0,0,.58);backdrop-filter:blur(4px)}.settings-panel{position:absolute;z-index:80;right:0;top:0;height:100%;width:min(430px,94vw);overflow-y:auto;padding:calc(15px + var(--safe-top)) max(16px,var(--safe-right)) calc(18px + var(--safe-bottom)) max(16px,var(--safe-left));background:linear-gradient(145deg,var(--main-b),#050506 72%);border-left:1px solid var(--finish-border);box-shadow:-30px 0 80px rgba(0,0,0,.5)}.settings-header{display:flex;align-items:center;justify-content:space-between}.settings-header h2{margin:0;font-size:19px}.settings-section{padding:17px 0;border-bottom:1px solid var(--line)}.settings-section h3{font-size:13px;margin:0 0 12px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:15px}.setting-row strong,.profile-info strong{display:block;font-size:13px}.setting-row small,.profile-info small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.settings-description,.settings-version{color:var(--muted);font-size:11px;line-height:1.45}.settings-input{width:100%;margin:8px 0 14px;padding:10px 12px;border-radius:10px;color:var(--text);background:rgba(0,0,0,.35);border:1px solid var(--line)}.switch{position:relative;width:48px;height:28px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;inset:0;border-radius:20px;background:#333;border:1px solid var(--line)}.slider::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.2s}.switch input:checked+.slider{background:linear-gradient(145deg,var(--theme-d),var(--theme-c))}.switch input:checked+.slider::before{transform:translateX(20px)}.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.theme-option{display:flex;align-items:center;gap:9px;text-align:left;padding:9px;border-radius:11px;color:var(--text);background:rgba(255,255,255,.045);border:1px solid transparent;font-size:10px;min-height:52px}.theme-option.active{border-color:var(--theme-d);box-shadow:0 0 15px var(--theme-glow)}.theme-option strong,.theme-option small{display:block}.theme-option small{color:var(--muted);margin-top:2px}.theme-preview{width:38px;height:26px;border-radius:8px;flex:0 0 auto;border:1px solid rgba(255,255,255,.3);background:linear-gradient(145deg,var(--preview-a),var(--preview-b));position:relative;overflow:hidden}.theme-preview.glass{box-shadow:inset 0 1px 5px rgba(255,255,255,.45);backdrop-filter:blur(5px)}.theme-preview.glossy{background:linear-gradient(135deg,var(--preview-a),#fff,var(--preview-b));background-size:180% 180%}.theme-preview.metallic{background:linear-gradient(110deg,var(--preview-b),#fff,var(--preview-a),#fff,var(--preview-b));background-size:220% 100%}.theme-preview.purple-black{--preview-a:#9b38ff;--preview-b:#08010f}.theme-preview.blue-green{--preview-a:#22b8ff;--preview-b:#08d986}.theme-preview.black-white{--preview-a:#111;--preview-b:#fff}.theme-preview.orange-yellow{--preview-a:#ff6b00;--preview-b:#ffe24a}.theme-preview.metallic-yellow{--preview-a:#b99300;--preview-b:#fff06a}.theme-preview.metallic-pink{--preview-a:#ff2f91;--preview-b:#ffbfdc}.theme-preview.metallic-gray{--preview-a:#5b6570;--preview-b:#e8edf1}.theme-preview.red-blue{--preview-a:#f21d34;--preview-b:#299bff}.theme-preview.red-white{--preview-a:#e71b2d;--preview-b:#fff}.theme-preview.metallic-white{--preview-a:#777f89;--preview-b:#fff}.theme-preview.sky-blue{--preview-a:#2db9ff;--preview-b:#d5f6ff}.theme-preview.blue-yellow{--preview-a:#147dff;--preview-b:#ffe13b}.theme-preview.lemon{--preview-a:#a8d91d;--preview-b:#efff6c}.theme-preview.gold-black{--preview-a:#ffd35a;--preview-b:#080808}.theme-preview.green-black{--preview-a:#18e98b;--preview-b:#080808}.theme-preview.lilac{--preview-a:#d99dff;--preview-b:#70448b}.profile-card{display:flex;align-items:center;gap:11px;padding:11px;border-radius:13px;background:rgba(255,255,255,.045);border:1px solid var(--line);margin-bottom:10px}.profile-avatar{width:40px;height:40px;border-radius:11px;overflow:hidden;border:1px solid var(--line)}.profile-avatar img{width:100%;height:100%;object-fit:cover}.danger-button,.settings-button{width:100%;min-height:43px;border-radius:12px;color:var(--text);background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(0,0,0,.45));border:1px solid var(--line);margin-top:7px}.danger-button{color:#ff8c96;border-color:rgba(255,70,85,.3)}.settings-version{text-align:center;margin:0}.hidden,[hidden]{display:none!important}
@keyframes pulse{50%{transform:scale(1.4);opacity:.6}}@keyframes dot{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-3px);opacity:1}}@keyframes authSweep{50%{transform:translateX(5%)}}@keyframes sweep{to{transform:translateX(8%)}}@keyframes shine{to{transform:translateX(35%)}}@keyframes metalMove{to{background-position:-220% 0}}
@media(min-width:800px){.monarch-header{padding-left:24px;padding-right:24px}.monarch-welcome{padding-top:26px}.chat{padding-left:clamp(30px,7vw,120px);padding-right:clamp(30px,7vw,120px)}.input-area{padding-left:clamp(30px,7vw,120px);padding-right:clamp(30px,7vw,120px)}.quick-topics{justify-content:center}.input-wrapper{max-width:980px;margin:auto}.attachment-preview{padding-left:clamp(30px,7vw,120px);padding-right:clamp(30px,7vw,120px)}}
@media(max-width:520px){.brand-text span{display:none}.brand-text h1{font-size:14px}.header-status{font-size:8px}.monarch-welcome{padding-top:12px}.monarch-welcome h2{font-size:20px}.monarch-welcome p{font-size:12px}.message.user .bubble{max-width:88%}.message-content{font-size:14px}.theme-grid{grid-template-columns:1fr}.auth-card{padding:24px 19px}.auth-card h1{font-size:23px}.message-image{max-width:260px;max-height:260px}.attachment-card strong{max-width:48vw}}
@media(max-width:380px){.input-actions{gap:3px}.voice-button,.send-button{width:35px;height:35px;min-width:35px;font-size:14px}.send-button{font-size:17px}}
@media(orientation:landscape) and (max-height:520px){.monarch-welcome{padding:8px}.welcome-symbol{display:none}.monarch-welcome p{display:none}.monarch-footer{display:none}.auth-card{padding:16px;max-height:94dvh;overflow:auto}.auth-emblem-wrap{width:68px;height:68px;margin-bottom:8px}.auth-card h1{margin:10px 0 6px;font-size:21px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* =========================================================
   MONARCH AI — RESPONSIVE DISPLAY ENGINE V24.1
   Targets: compact phones → large phones → tablets → laptops → desktops
   Safe-area, dynamic viewport, keyboard, landscape and foldable friendly.
========================================================= */
:root{
  --monarch-content-max: 1180px;
  --monarch-chat-max: 980px;
  --monarch-side-pad: clamp(12px, 2.4vw, 32px);
  --monarch-control: clamp(36px, 4.2vw, 44px);
  --monarch-text: clamp(14px, 1.1vw, 16px);
  --monarch-title: clamp(20px, 2.2vw, 30px);
  --monarch-radius: clamp(14px, 1.8vw, 22px);
}

html{
  width:100%;
  min-width:320px;
  min-height:100%;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  min-width:320px;
  min-height:100%;
  overscroll-behavior:none;
}

button,
input,
textarea,
select{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.monarch-app{
  width:100vw;
  width:100dvw;
  min-width:320px;
  height:var(--app-h, 100dvh);
  min-height:100dvh;
  max-width:100%;
  overflow:hidden;
  isolation:isolate;
}

.main-app{
  width:100%;
  min-width:0;
  min-height:0;
  height:100%;
  grid-template-rows:auto auto auto minmax(0,1fr) auto auto;
}

.monarch-header,
.monarch-welcome,
.quick-topics,
.input-area,
.monarch-footer{
  width:100%;
  min-width:0;
}

.monarch-header{
  min-height:calc(54px + var(--safe-top));
  padding-inline:var(--monarch-side-pad);
}

.brand,
.brand-text,
.header-actions{
  min-width:0;
}

.brand-text h1,
.brand-text span,
.header-status{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.header-button,
.close-button,
.voice-button,
.send-button{
  flex:0 0 var(--monarch-control);
  width:var(--monarch-control);
  height:var(--monarch-control);
  min-width:var(--monarch-control);
  min-height:var(--monarch-control);
}

.monarch-welcome{
  width:min(100%, var(--monarch-content-max));
  margin-inline:auto;
  padding-inline:var(--monarch-side-pad);
}

.monarch-welcome h2{font-size:var(--monarch-title)}
.monarch-welcome p{max-width:min(680px,100%)}

.welcome-symbol{
  width:clamp(56px, 9vw, 84px);
  height:clamp(56px, 9vw, 84px);
}

.chat-container{
  width:100%;
  min-width:0;
}

.chat{
  width:100%;
  max-width:var(--monarch-content-max);
  margin-inline:auto;
  padding-inline:max(var(--monarch-side-pad), env(safe-area-inset-left)) max(var(--monarch-side-pad), env(safe-area-inset-right));
  padding-bottom:clamp(18px,3vh,34px);
  scrollbar-gutter:stable;
}

.message{
  max-width:var(--monarch-chat-max);
  margin-inline:auto;
}

.message.user .bubble{
  max-width:min(78%, 680px);
  font-size:var(--monarch-text);
}

.message.monarch .message-content{
  width:100%;
  max-width:var(--monarch-chat-max);
  font-size:var(--monarch-text);
}

.message-content pre,
.message-content code{
  max-width:100%;
}

.message-content pre{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.message-image{
  max-width:min(100%, 420px);
  max-height:min(46dvh, 420px);
}

.quick-topics{
  max-width:var(--monarch-content-max);
  margin-inline:auto;
  padding-inline:var(--monarch-side-pad);
}

.input-area{
  padding-inline:max(var(--monarch-side-pad), env(safe-area-inset-left)) max(var(--monarch-side-pad), env(safe-area-inset-right));
}

.input-wrapper{
  width:100%;
  max-width:var(--monarch-chat-max);
  margin-inline:auto;
}

#userInput{
  font-size:16px; /* prevents iOS Safari zoom on focus */
}

.attachment-preview{
  width:100%;
  max-width:var(--monarch-chat-max);
  margin-inline:auto;
  padding-inline:0;
}

.attachment-card{
  width:100%;
  max-width:100%;
}

.settings-panel{
  width:min(430px, 100vw);
  max-width:100%;
  padding-left:max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.settings-input,
.email-auth-form input,
.auth-primary,
.settings-button,
.danger-button{
  min-height:44px;
}

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

.auth-screen{
  width:100%;
  min-width:320px;
  min-height:100%;
  padding-left:max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
}

.auth-card{
  width:min(440px, calc(100vw - 32px));
  max-width:440px;
  max-height:calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom));
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

/* Compact phones: 320–479px */
@media (max-width:479px){
  .monarch-header{gap:8px;padding-top:calc(7px + var(--safe-top));padding-bottom:7px}
  .brand{gap:7px}
  .brand-icon{width:38px;height:38px;border-radius:10px}
  .brand-text h1{font-size:13px;letter-spacing:.10em}
  .header-actions{gap:5px}
  .header-status{font-size:7px;letter-spacing:.08em}
  .header-button{font-size:21px}
  .monarch-welcome{padding-top:9px;padding-bottom:7px}
  .monarch-welcome p{font-size:11px;line-height:1.35}
  .quick-topics{padding-top:5px;padding-bottom:7px}
  .topic{font-size:10px;padding:7px 9px}
  .chat{padding-top:4px}
  .message{margin:9px 0}
  .message.user .bubble{max-width:91%;padding:10px 12px;border-radius:16px 16px 5px 16px}
  .message-content{font-size:14px;line-height:1.55}
  .input-wrapper{border-radius:15px;padding:5px}
  #userInput{min-height:36px;padding:8px 7px}
  .input-actions{gap:3px}
  .voice-button,.send-button{border-radius:10px}
  .settings-panel{width:100vw}
  .theme-grid{grid-template-columns:1fr}
  .auth-card{padding:22px 17px 20px;border-radius:22px}
  .auth-emblem-wrap{width:88px;height:88px;border-radius:24px}
  .auth-card h1{font-size:22px}
}

/* Very small landscape phones */
@media (max-height:500px) and (orientation:landscape){
  .monarch-header{min-height:46px}
  .brand-icon{width:34px;height:34px}
  .monarch-welcome{padding:5px 12px}
  .welcome-symbol{display:none}
  .monarch-welcome p{display:none}
  .quick-topics{padding-block:4px}
  .input-area{padding-top:4px}
  .monarch-footer{display:none}
  .settings-panel{padding-top:calc(8px + var(--safe-top))}
  .auth-screen{align-items:start}
  .auth-card{margin-block:8px;max-height:calc(100dvh - 16px)}
  .auth-emblem-wrap{width:58px;height:58px;margin-bottom:5px}
  .auth-card h1{margin:8px 0 5px;font-size:19px}
}

/* Tablets: portrait and landscape */
@media (min-width:600px) and (max-width:1199px){
  .monarch-header{padding-inline:clamp(18px,4vw,42px)}
  .chat,
  .quick-topics,
  .input-area,
  .attachment-preview{padding-inline:clamp(24px,6vw,72px)}
  .message.user .bubble{max-width:min(72%,700px)}
  .settings-panel{width:min(440px,76vw)}
  .theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Laptops and desktops */
@media (min-width:1200px){
  .monarch-header{padding-inline:max(30px, calc((100vw - 1280px)/2))}
  .chat,
  .quick-topics,
  .input-area,
  .attachment-preview{padding-inline:max(30px, calc((100vw - 1180px)/2))}
  .message.user .bubble{max-width:680px}
  .settings-panel{width:430px}
}

/* Large monitors: avoid excessive line lengths */
@media (min-width:1600px){
  .chat,
  .quick-topics,
  .input-area,
  .attachment-preview{max-width:1280px}
  .message.monarch .message-content{max-width:980px}
}

/* Foldable / dual-screen-safe gutters where supported */
@supports (padding: env(viewport-segment-left 0 0)){
  .monarch-header,
  .chat,
  .quick-topics,
  .input-area{
    padding-left:max(var(--monarch-side-pad), env(viewport-segment-left 0 0));
    padding-right:max(var(--monarch-side-pad), env(viewport-segment-right 0 0));
  }
}

/* Avoid accidental horizontal overflow from long model IDs or code */
#modelSelect,
#modelDescription,
.settings-description,
.profile-info,
.settings-section{
  min-width:0;
  overflow-wrap:anywhere;
}

/* Touch devices get comfortable hit targets; mouse/trackpad keeps compact controls. */
@media (pointer:coarse){
  .header-button,
  .close-button,
  .voice-button,
  .send-button{min-width:42px;min-height:42px}
  .topic,.theme-option,.settings-button,.danger-button{min-height:44px}
}

/* High-density displays: keep borders and text crisp. */
@media (min-resolution:2dppx){
  .monarch-header,
  .settings-panel,
  .input-wrapper,
  .auth-card{border-width:.5px}
}


/* =========================================================
   V24.2 RESPONSIVE QUICK TOPICS + COMPOSER FIX
   Keep the topic strip compact like the original layout.
   It adapts to width without creating a large background/border area.
========================================================= */
.quick-topics{
  width:100%;
  max-width:none;
  min-width:0;
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  margin:0;
  padding:5px max(10px, env(safe-area-inset-left)) 2px max(10px, env(safe-area-inset-right));
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.quick-topics::-webkit-scrollbar{display:none}
.topic{
  flex:0 0 auto;
  width:auto;
  max-width:none;
  min-height:34px;
  padding:6px 10px;
  border-radius:999px;
  white-space:nowrap;
  line-height:1.15;
  font-size:11px;
}

/* The composer stays compact and centered without a stretched frame. */
.input-area{
  width:100%;
  min-width:0;
  padding-top:1px;
  padding-bottom:max(7px, calc(7px + var(--safe-bottom) + var(--keyboard-offset)));
}
.input-wrapper{
  width:100%;
  max-width:var(--monarch-chat-max);
  margin-inline:auto;
}

@media (max-width:479px){
  .quick-topics{
    gap:6px;
    padding-top:3px;
    padding-bottom:1px;
  }
  .topic{
    min-height:32px;
    padding:6px 9px;
    font-size:10px;
  }
}

@media (max-width:380px){
  .quick-topics{
    gap:5px;
    padding-inline:8px;
  }
  .topic{
    min-height:30px;
    padding:5px 8px;
    font-size:10px;
  }
}

@media (min-width:600px){
  .quick-topics{
    justify-content:center;
    padding-inline:16px;
  }
}