/* ─── TOKENS ─── */
@property --font-scale {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}
:root {
  --font-scale: 1;
  transition: --font-scale .25s ease;
}
:root[data-theme="dark"] {
  --bg-app:     #0a0a0f;
  --bg-sidebar: #111118;
  --bg-section: #18181f;
  --bg-card:    #1e1e2a;
  --bg-hover:   #2a2a3a;
  --accent:     #7c6dfa;
  --accent2:    #c084fc;
  --text:       #e8e8f0;
  --text2:      #6b6b80;
  --active-bg:  #1e1b4b;
  --tag-bg:     rgba(124,109,250,.15);
  --border:     rgba(124,109,250,.13);
  --input-bg:   #18181f;
  --shadow:     rgba(0,0,0,.5);
}
:root[data-theme="light"] {
  --bg-app:     #f7f5ff;
  --bg-sidebar: #ffffff;
  --bg-section: #fcfbff;
  --bg-card:    #ffffff;
  --bg-hover:   #f3f0ff;
  --accent:     #7c6dfa;
  --accent2:    #c084fc;
  --text:       #1f2340;
  --text2:      #6b7280;
  --active-bg:  #ede9fe;
  --tag-bg:     rgba(124,109,250,.12);
  --border:     rgba(124,109,250,.15);
  --input-bg:   #f3f0ff;
  --shadow:     rgba(100,80,200,.1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;font-family:'Inter',sans-serif;font-size:calc(13px * var(--font-scale));background:var(--bg-app);color:var(--text);overflow:hidden;transition:background .25s,color .25s;}

.app{display:flex;height:100vh;}

/* ─── SIDEBAR ─── */
.sidebar{width:200px;min-width:174px;background:var(--bg-sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;transition:background .25s,width .25s cubic-bezier(.2,.8,.4,1),min-width .25s;overflow:hidden;}
.sidebar.collapsed{width:0;min-width:0;border-right:none;}
.sb-top{display:flex;align-items:center;gap:8px;padding:10px 10px 9px;border-bottom:1px solid var(--border);min-height:44px;}
.logo-wrap{display:flex;align-items:center;gap:7px;flex:1;min-width:0;}
.logo-box{width:26px;height:26px;border-radius:7px;flex-shrink:0;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:calc(13px * var(--font-scale));} .logo-img{height:32px;width:auto;object-fit:contain;flex-shrink:0;}

/* ACHIEVEMENT BADGE — sits next to the AI logo, ring fills as eggs are found */
.ach-badge{position:relative;width:28px;height:28px;flex-shrink:0;border:none;background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:transform .15s;}
.ach-badge:hover{transform:scale(1.08);}
.ach-badge:active{transform:scale(.95);}
.ach-badge-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);}
.ach-badge-ring-bg{fill:none;stroke:var(--border);stroke-width:2.5;}
.ach-badge-ring-fg{fill:none;stroke:url(#achRingGrad);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:97.4;stroke-dashoffset:97.4;transition:stroke-dashoffset .4s cubic-bezier(.2,.8,.4,1);}
.ach-grad-stop-1{stop-color:var(--accent);}
.ach-grad-stop-2{stop-color:var(--accent2);}
.ach-badge-glyph{font-size:13px;line-height:1;filter:drop-shadow(0 0 4px rgba(0,0,0,.25));}
.ach-badge.ach-complete .ach-badge-glyph{animation:achPulse 1.8s ease-in-out infinite;}
@keyframes achPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.15);}}

.ach-list{max-height:360px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;margin-bottom:16px;}
.ach-item{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--border);}
.ach-item:last-child{border-bottom:none;}
.ach-item-icon{width:36px;height:36px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:17px;background:var(--tag-bg);}
.ach-item.unlocked .ach-item-icon{background:linear-gradient(135deg,var(--accent),var(--accent2));}
.ach-item.locked .ach-item-icon{opacity:.55;filter:grayscale(1);}
.ach-item-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.ach-item-title{font-size:calc(13px * var(--font-scale));font-weight:600;color:var(--text);}
.ach-item.locked .ach-item-title{color:var(--text2);}
.ach-item-desc{font-size:calc(11.5px * var(--font-scale));color:var(--text2);line-height:1.35;}
.ach-progress{font-size:calc(11.5px * var(--font-scale));color:var(--text2);text-align:center;margin:-8px 0 14px;}
.logo-name{font-weight:600;font-size:calc(13px * var(--font-scale));color:var(--text);white-space:nowrap;}
.sb-icons{display:flex;gap:2px;flex-shrink:0;}
.ico{width:26px;height:26px;border-radius:6px;background:transparent;border:none;cursor:pointer;color:var(--text2);display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;}
.ico:hover{background:var(--bg-hover);color:var(--text);}
.ico svg{display:block;}

.new-btn{margin:8px 8px 6px;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;cursor:pointer;color:#fff;font-family:'Inter',sans-serif;font-size:calc(12.5px * var(--font-scale));font-weight:500;box-shadow:0 2px 14px rgba(124,109,250,.3);transition:opacity .15s,transform .12s;width:calc(100% - 16px);}
.new-btn:hover{opacity:.9;transform:translateY(-1px);}
.new-btn:active{transform:translateY(0);}

.sb-search{margin:0 8px 6px;display:flex;align-items:center;gap:7px;padding:6px 10px;border-radius:8px;background:var(--bg-card);border:1px solid var(--border);transition:border-color .2s;}
.sb-search:focus-within{border-color:var(--accent);}
.sb-search svg{color:var(--text2);flex-shrink:0;}
.sb-search input{border:none;background:transparent;outline:none;color:var(--text);font-family:'Inter',sans-serif;font-size:calc(12px * var(--font-scale));width:100%;}
.sb-search input::placeholder{color:var(--text2);}

.sb-list{flex:1;overflow-y:auto;padding:2px 8px 4px;}
.sb-list::-webkit-scrollbar{width:2px;}
.sb-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px;}

.chat-item{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:8px;font-size:calc(12px * var(--font-scale));color:var(--text2);cursor:pointer;transition:background .13s,color .13s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:1px;}
.chat-item:hover{background:var(--bg-hover);color:var(--text);}
.chat-item.active{background:var(--active-bg);color:var(--text);}
[data-theme="light"] .chat-item.active{color:var(--accent);}
.ci-icon{flex-shrink:0;font-size:calc(13px * var(--font-scale));}
.ci-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ci-del{background:none;border:none;cursor:pointer;color:var(--text2);font-size:calc(14px * var(--font-scale));line-height:1;padding:0 2px;opacity:0;transition:opacity .13s,color .13s;flex-shrink:0;}
.chat-item:hover .ci-del{opacity:1;}
.ci-del:hover{color:#ef4444;}

/* ── DELETED CHATS (trash) MODAL ─────────────────────────── */
.trash-hint{color:var(--text2);font-size:calc(12px * var(--font-scale));line-height:1.5;margin:0 0 14px;}
.trash-list{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;flex-direction:column;gap:4px;margin-bottom:16px;}
.trash-list::-webkit-scrollbar{width:2px;}
.trash-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px;}
/* .modal.trash-modal (two classes) beats the plain .modal rule's
   overflow-y:auto so the OUTER modal no longer scrolls as a whole —
   only .trash-list above does, keeping header/hint/actions fixed in place. */
.modal.trash-modal{display:flex;flex-direction:column;overflow:hidden;height:min(600px, calc(100dvh - 48px));}
.trash-modal .modal-header,.trash-modal .trash-hint,.trash-modal .modal-actions{flex-shrink:0;}
/* .chat-item (base class) sets white-space:nowrap + overflow:hidden for
   its normal single-line rows — trash rows stack 3 lines of text inside
   .trash-item-info, so that clipped each row's height and made adjacent
   rows visually overlap. Reset it here; the name/date lines each still
   truncate individually via their own overflow/ellipsis rules below. */
.trash-item{cursor:default;align-items:center;padding-top:10px;padding-bottom:10px;border-bottom:1px solid var(--border);white-space:normal;overflow:visible;text-overflow:clip;}
.trash-item:last-child{border-bottom:none;}
.trash-item-info{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;gap:3px;}
.trash-item-info .ci-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.trash-item-dates{font-size:calc(10.5px * var(--font-scale));color:var(--text2);opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.trash-item .ci-del,
.trash-item .trash-restore-btn{opacity:1;background:none;border:none;cursor:pointer;color:var(--text2);line-height:1;padding:2px 4px;flex-shrink:0;border-radius:5px;transition:background .13s,color .13s;}
.trash-restore-btn{font-size:calc(14px * var(--font-scale));}
.trash-item .ci-del{font-size:calc(14px * var(--font-scale));}
.trash-restore-btn:hover{color:var(--accent);background:var(--bg-hover);}
.trash-item .ci-del:hover{color:#ef4444;background:var(--bg-hover);}
.trash-empty-state{color:var(--text2);font-size:calc(12.5px * var(--font-scale));text-align:center;padding:28px 10px;}
#emptyTrashBtn:disabled{opacity:.4;cursor:not-allowed;}

.token-section{padding:4px 12px 8px;}
.token-section + .token-section{padding-top:0;}
.token-bar-wrap{height:3px;background:var(--bg-hover);border-radius:99px;overflow:hidden;margin-bottom:4px;}
.token-bar{height:100%;border-radius:99px;background:var(--accent);transition:width .4s,background .4s;}
.token-bar.image-bar{background:#8b5cf6;}
.token-label{font-size:calc(10px * var(--font-scale));color:var(--text2);text-align:center;}

.sb-footer{padding:8px 10px;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px;cursor:pointer;border-radius:8px;margin:2px 4px 4px;transition:background .13s;}
.sb-footer:hover{background:var(--bg-hover);}
.avatar{width:28px;height:28px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:calc(10px * var(--font-scale));font-weight:700;color:#fff;}
.user-name{font-size:calc(12px * var(--font-scale));font-weight:500;color:var(--text);}
.user-plan{font-size:calc(11px * var(--font-scale));color:var(--text2);}
.sb-footer svg{margin-left:auto;color:var(--text2);}

/* ─── MAIN ─── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;}
.mood-bg{position:absolute;left:0;right:0;bottom:0;width:100%;height:min(52%,460px);min-height:260px;z-index:0;pointer-events:none;opacity:1;transition:opacity .6s ease;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.4) 22%,#000 46%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.4) 22%,#000 46%);}
[data-theme="light"] .mood-bg{opacity:.9;}
.main>.chat-area,.main>.img-prev,.main>.input-wrap{position:relative;z-index:1;}
.main>.topbar{position:relative;z-index:20;}
.topbar,.input-wrap{background:transparent;}

.char-glow{position:absolute;top:6%;left:50%;transform:translateX(-50%);width:360px;height:360px;max-width:70vw;border-radius:50%;filter:blur(46px);opacity:.55;transition:background .6s ease;}
.char-wrap{position:relative;width:min(320px,58vw);aspect-ratio:4/5;margin-bottom:-36px;transform-origin:bottom center;animation:charBob 4.2s ease-in-out infinite;pointer-events:auto;}
/* Instant swap, no crossfade: the outgoing emotion image disappears the exact
   same instant the incoming one appears — no fade/blur/scale animation between
   them, per explicit request. (The .char-wrap bob/tilt/nod breathing motion
   below is unrelated and untouched — this is only about the photos themselves.) */
.char-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom center;opacity:0;z-index:1;}
.char-layer.active{opacity:1;z-index:2;}
@keyframes charBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.char-wrap[data-state="thinking"]{animation:charTilt 2.6s ease-in-out infinite;}
@keyframes charTilt{0%,100%{transform:rotate(0deg) translateY(0)}50%{transform:rotate(-2.5deg) translateY(-4px)}}
.char-wrap[data-state="speaking"]{animation:charNod 1.05s ease-in-out infinite;}
@keyframes charNod{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.015)}}

/* Used briefly whenever we swap between charBob/charTilt/charNod (e.g. speaking → idle).
   Swapping the running keyframe animation makes the browser jump straight to the new
   animation's 0% frame — if the old one was mid-cycle (almost always), that's an abrupt,
   jarring snap. character.js freezes the current transform as an inline style, adds this
   class, then clears the inline style so THIS transition eases it back to rest before the
   next keyframe animation takes over — no more jump. */
.char-wrap.wrap-settling{transition:transform .4s cubic-bezier(.22,.61,.36,1);}
@media (prefers-reduced-motion: reduce){.char-wrap,.char-wrap[data-state]{animation:none !important;}.char-wrap.wrap-settling{transition:none;}}
.char-glow.char-tap{animation:charGlowTap .25s ease-out;}
@keyframes charGlowTap{0%{opacity:.55;}45%{opacity:.85;}100%{opacity:.55;}}
@media (max-width:640px){.char-wrap{width:min(240px,52vw);margin-bottom:-24px;}.char-glow{width:240px;top:4%;}}

.gender-toggle{display:flex;gap:8px;}
.gender-btn{flex:1;padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:var(--bg-section);color:var(--text);font-family:'Inter',sans-serif;font-size:calc(12px * var(--font-scale));font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s;}
.gender-btn.active{border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;}
.gender-btn:disabled{opacity:.35;cursor:not-allowed;}
.icon-dd-wrap{position:relative;}
.icon-dd-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border-radius:9px;background:var(--bg-section);border:1px solid var(--border);color:var(--text);font-family:'Inter',sans-serif;font-size:calc(13px * var(--font-scale));cursor:pointer;text-align:left;transition:border-color .18s,box-shadow .18s;}
.icon-dd-btn:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--tag-bg);}
.icon-dd-btn svg{flex-shrink:0;color:#6b6b80;}
.icon-dd{position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:284px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:5px;box-shadow:0 12px 40px var(--shadow);opacity:0;pointer-events:none;transform:translateY(-4px) scale(.98);transition:opacity .15s,transform .15s;z-index:200;}
.icon-dd::-webkit-scrollbar{width:0;height:0;display:none;}
.icon-dd.open{opacity:1;pointer-events:all;transform:none;}
.icon-dd-item{padding:8px 10px;border-radius:7px;cursor:pointer;font-size:calc(12.5px * var(--font-scale));color:var(--text2);transition:background .13s,color .13s;}
.icon-dd-item:hover{background:var(--bg-hover);color:var(--text);}
.icon-dd-item.sel{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;}

.topbar{display:flex;align-items:center;gap:10px;padding:0 16px;height:44px;min-height:44px;border-bottom:1px solid var(--border);background:var(--bg-app);}
.tb-menu{background:transparent;border:none;cursor:pointer;color:var(--text2);display:flex;align-items:center;padding:4px;transition:color .13s;}
.tb-menu:hover{color:var(--text);}
.tb-center{flex:1;min-width:0;}
.tb-title{font-weight:600;font-size:calc(13px * var(--font-scale));color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tb-sub{font-size:calc(11px * var(--font-scale));color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tb-right{display:flex;align-items:center;gap:6px;margin-left:auto;}

.pers-btn{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:8px;background:transparent;border:none;cursor:pointer;color:var(--text2);font-family:'Inter',sans-serif;font-size:calc(12px * var(--font-scale));transition:background .13s,color .13s;min-width:120px;justify-content:flex-start;}
.pers-btn:hover{background:var(--bg-hover);color:var(--text);}
.pers-btn svg{flex-shrink:0;}

.speak-toggle-btn{font-size:calc(13px * var(--font-scale));border:1px solid var(--border);border-radius:7px;width:30px;height:30px;}
.speak-toggle-btn.on{border-color:var(--accent);background:var(--tag-bg);}

.theme-btn{width:30px;height:30px;border-radius:7px;background:transparent;border:1px solid var(--border);cursor:pointer;color:var(--text2);display:flex;align-items:center;justify-content:center;font-size:calc(13px * var(--font-scale));transition:all .15s;font-family:'Inter',sans-serif;}
.theme-btn:hover{background:var(--bg-hover);color:var(--text);border-color:var(--accent);}

.pers-dd{position:absolute;top:calc(100% + 6px);right:0;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:5px;min-width:200px;box-shadow:0 12px 40px var(--shadow);opacity:0;pointer-events:none;transform:translateY(-4px) scale(.98);transition:opacity .15s,transform .15s;z-index:200;}
.pers-dd.open{opacity:1;pointer-events:all;transform:none;}
.dd-item{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:7px;cursor:pointer;font-size:calc(12.5px * var(--font-scale));color:var(--text2);transition:background .13s,color .13s;}
.dd-item:hover{background:var(--bg-hover);color:var(--text);}
.dd-item.sel{color:var(--accent);}
.dd-item-custom{cursor:default;}
.dd-item-custom .dd-left{cursor:pointer;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dd-item-custom .dd-left:hover{color:var(--text);}
.dd-custom-actions{display:none;align-items:center;gap:2px;margin-right:4px;}
.dd-item-custom:hover .dd-custom-actions{display:flex;}
.dd-act-btn{background:none;border:none;cursor:pointer;font-size:calc(11px * var(--font-scale));padding:2px 4px;border-radius:4px;line-height:1;transition:background .12s;color:var(--text2);}
.dd-act-btn:hover{background:var(--bg-section);}
.dd-locked-badge{font-size:calc(11px * var(--font-scale));margin-right:4px;opacity:.55;flex-shrink:0;}
.dd-item-plan-locked .dd-left{opacity:.5;}
.dd-plan-locked-badge{opacity:.85;}
.dd-del-btn:hover{background:rgba(248,113,113,.15);color:#f87171;}.dd-left{display:flex;align-items:center;gap:8px;}
.dd-sep{height:1px;background:var(--border);margin:4px 0;}
.dd-add{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;cursor:pointer;font-size:calc(12.5px * var(--font-scale));color:var(--accent);transition:background .13s;}
.dd-add:hover{background:var(--tag-bg);}

/* ─── CHAT AREA ─── */
.chat-area{flex:1;overflow-y:auto;display:flex;flex-direction:column;scroll-behavior:smooth;padding-top:12px;padding-bottom:8px;pointer-events:none;}
.message,.empty-state{pointer-events:auto;}
/* NOTE: we intentionally do NOT rely on padding-bottom to reserve space for
   the character — browsers clip/ignore trailing padding on a *scrolling*
   flex container once content overflows, so it silently has no effect once
   the message list is long. A real generated box (::after) is a genuine
   flex item and is always counted in scrollHeight, so it actually works. */
.chat-area::after{content:"";display:block;flex-shrink:0;width:100%;height:var(--char-space,380px);pointer-events:none;}
.chat-area:empty::after,.chat-area:has(.empty-state:not([style*="display: none"]))::after{height:0;}
.chat-area::-webkit-scrollbar{width:3px;}
.chat-area::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px;}
.scroll-bottom-btn{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:5;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);color:var(--text);cursor:pointer;box-shadow:0 6px 18px var(--shadow);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;}
.scroll-bottom-btn.show{opacity:1;pointer-events:auto;}
.scroll-bottom-btn:hover{background:var(--bg-hover);transform:translateX(-50%) translateY(-2px);}

.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;text-align:center;}
.big-orb{width:56px;height:56px;border-radius:50%;background:conic-gradient(from 0deg,var(--accent),var(--accent2),var(--accent));margin-bottom:18px;box-shadow:0 0 0 10px var(--tag-bg);animation:spin 8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.empty-state h2{font-weight:600;font-size:calc(18px * var(--font-scale));color:var(--text);margin-bottom:6px;}
.empty-state p{font-size:calc(12.5px * var(--font-scale));color:var(--text2);max-width:320px;line-height:1.6;}

.message{display:flex;gap:10px;animation:fu .28s cubic-bezier(.2,.8,.4,1) both;padding:0 20px;margin-bottom:10px;}
@keyframes fu{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.message.user{flex-direction:row-reverse;}
.message .avatar{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:calc(11px * var(--font-scale));font-weight:700;margin-top:2px;}
.message.user .avatar{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 2px 10px rgba(124,109,250,.35);}
.message.ai .avatar{background:var(--bg-card);border:1px solid var(--border);color:var(--accent);font-size:calc(13px * var(--font-scale));}
.message .bubble{max-width:80%;min-width:0;padding:10px 15px;font-size:calc(14.3px * var(--font-scale));line-height:1.65;position:relative;overflow-wrap:anywhere;word-break:normal;hyphens:none;overflow:hidden;}.message .bubble.has-img{padding:0;}.message .bubble.has-img .bubble-text{padding:8px 12px;}
.message.user .bubble{word-break:normal;overflow-wrap:anywhere;hyphens:none;min-width:120px;}
.user-text{white-space:pre-wrap;display:block;}
.message.ai .bubble{word-break:break-word;}
.message.user .bubble{background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 100%);color:#fff;border-radius:18px 18px 4px 18px;box-shadow:0 4px 18px rgba(124,109,250,.35),0 1px 4px rgba(0,0,0,.2);}
.message.ai .bubble{background:var(--bg-card);border:1px solid var(--border);color:var(--text);border-radius:18px 18px 18px 4px;box-shadow:0 2px 12px var(--shadow);max-width:80%;}
em.action{font-style:italic;color:var(--accent2);opacity:.9;}
.message.user .msg-wrap{display:flex;flex-direction:column;align-items:flex-end;flex:1 !important;min-width:0;}
.message.ai .msg-wrap{display:flex;flex-direction:column;align-items:flex-start;flex:1 !important;min-width:0;}
.msg-meta{display:flex;align-items:center;gap:6px;margin-top:4px;padding:0 4px;}
.message.user .msg-meta{justify-content:flex-end;}
.msg-time{font-size:calc(10px * var(--font-scale));color:var(--text2);}

.ai-name{font-size:calc(11px * var(--font-scale));font-weight:600;color:var(--accent);margin-bottom:5px;}
.ai-bubble-row{display:flex;align-items:flex-start;gap:8px;}
.ai-content{flex:1;min-width:0;}
#streamContent{white-space:pre-wrap;}
.ai-bubble-actions{display:flex;flex-direction:column;gap:4px;flex-shrink:0;opacity:0;transition:opacity .15s;}
.message.ai:hover .ai-bubble-actions{opacity:1;}
.speak-btn{background:none;border:1px solid var(--border);border-radius:6px;cursor:pointer;font-size:calc(12px * var(--font-scale));padding:3px 6px;color:var(--text2);transition:background .13s,border-color .13s;}
.speak-btn:hover{background:var(--bg-hover);border-color:var(--accent);}

.message.typing .bubble{display:flex;flex-direction:column;align-items:flex-start;padding:10px 15px;}
.message.typing .typing-dots{padding:2px 0;}
.typing-dots{display:flex;gap:3px;align-items:center;}
.typing-dots span{width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block;animation:dot .8s infinite;}
.typing-dots span:nth-child(2){animation-delay:.15s;}
.typing-dots span:nth-child(3){animation-delay:.3s;}
@keyframes dot{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}

.ai-content p{margin:0 0 6px;} .ai-content p:last-child{margin:0;}
.ai-content h1,.ai-content h2,.ai-content h3{margin:8px 0 4px;font-weight:600;}
.ai-content h1{font-size:calc(16px * var(--font-scale));} .ai-content h2{font-size:calc(15px * var(--font-scale));} .ai-content h3{font-size:calc(14px * var(--font-scale));}
.ai-content code{background:var(--tag-bg);border-radius:4px;padding:1px 5px;font-family:monospace;font-size:calc(12px * var(--font-scale));}
.ai-content pre{background:var(--bg-app);border:1px solid var(--border);border-radius:8px;padding:12px 12px 34px 12px;overflow-x:auto;margin:8px 0;}
.ai-content pre code{background:none;padding:0;font-size:calc(12px * var(--font-scale));}
.ai-content ul,.ai-content ol{padding-left:18px;margin:4px 0;} .ai-content li{margin-bottom:2px;}
.ai-content table{border-collapse:collapse;width:100%;font-size:calc(12px * var(--font-scale));margin:8px 0;}
.ai-content th,.ai-content td{border:1px solid var(--border);padding:5px 9px;text-align:left;}
.ai-content th{background:var(--bg-hover);font-weight:600;}
.ai-content a{color:var(--accent);text-decoration:underline;}
.ai-content blockquote{border-left:3px solid var(--accent);padding-left:10px;color:var(--text2);margin:6px 0;}
.ai-content hr{border:none;border-top:1px solid var(--border);margin:8px 0;}
.ai-content del{text-decoration:line-through;color:var(--text2);}
.bubble.err{color:#f87171;background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);}

.chat-img{width:100%;max-width:260px;border-radius:14px;object-fit:contain;display:block;margin-bottom:6px;cursor:zoom-in;height:auto;}
.gen-img{max-width:280px;border-radius:12px;display:block;margin:8px auto 0 auto;cursor:pointer;transition:opacity .2s;height:auto;object-fit:contain;}
.gen-img:hover{opacity:.88;}
.img-loading{display:flex;align-items:center;gap:8px;font-size:calc(12px * var(--font-scale));color:var(--text2);padding:8px 0;}

/* Pulsing image generation placeholder */
@keyframes img-pulse-breathe {
  0%,100% { opacity:.5; transform:scale(1); }
  50%      { opacity:1;  transform:scale(1.05); }
}
@keyframes img-shimmer-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
@keyframes img-border-pulse {
  0%,100% { border-color: rgba(124,109,250,.2); box-shadow: 0 0 0 0 rgba(124,109,250,0); }
  50%     { border-color: rgba(124,109,250,.6); box-shadow: 0 0 16px 2px rgba(124,109,250,.15); }
}
.img-pulse-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 180px;
  border-radius: 14px;
  margin-top: 10px;
  background: #1a1828;
  border: 1.5px solid rgba(124,109,250,.2);
  position: relative;
  overflow: hidden;
  animation: img-border-pulse 2s ease-in-out infinite;
}
.img-pulse-placeholder::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(124,109,250,.25) 50%, transparent 100%);
  animation: img-shimmer-slide 1.6s ease-in-out infinite;
}
.img-pulse-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
  animation: img-pulse-breathe 2s ease-in-out infinite;
}
.img-pulse-icon { font-size: 28px; }
.img-pulse-text { font-size: 12px; color: #9994c0; letter-spacing: .03em; }
.chat-file-card{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;background:var(--bg-hover);border:1px solid var(--border);margin-bottom:6px;max-width:230px;}
.cfc-icon{font-size:calc(18px * var(--font-scale));}
.cfc-info{min-width:0;}
.cfc-name{font-size:calc(11.5px * var(--font-scale));font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;}
.cfc-type{font-size:calc(10px * var(--font-scale));color:var(--text2);}

/* ─── FILE PREVIEW ─── */
.img-prev{display:none;flex-wrap:wrap;gap:6px;padding:6px 16px 0;}
.img-prev.show{display:flex;}
.thumb{position:relative;width:56px;height:56px;border-radius:8px;overflow:hidden;border:1px solid var(--border);flex-shrink:0;}
.thumb img{width:100%;height:100%;object-fit:cover;}
.thumb button{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,.6);border:none;color:#fff;font-size:calc(11px * var(--font-scale));cursor:pointer;display:flex;align-items:center;justify-content:center;}
.file-card{display:flex;align-items:center;gap:7px;padding:6px 10px;border-radius:8px;background:var(--bg-card);border:1px solid var(--border);max-width:180px;}
.fc-icon{font-size:calc(18px * var(--font-scale));flex-shrink:0;}
.fc-info{min-width:0;}
.fc-name{font-size:calc(11px * var(--font-scale));font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px;}
.fc-size{font-size:calc(10px * var(--font-scale));color:var(--text2);}
.fc-del{background:none;border:none;cursor:pointer;color:var(--text2);font-size:calc(14px * var(--font-scale));padding:0 2px;margin-left:auto;flex-shrink:0;}
.fc-del:hover{color:#ef4444;}

/* ─── INPUT ─── */
.input-wrap{padding:10px 16px 12px;border-top:1px solid var(--border);background:var(--bg-app);}
.input-box{background:var(--bg-section);border:1px solid var(--border);border-radius:12px;transition:border-color .18s,box-shadow .18s;overflow:hidden;}
.input-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--tag-bg);}
.input-inner{display:flex;align-items:center;gap:4px;padding:0 10px;min-height:44px;}
.chat-ta{flex:1;border:none;background:transparent;outline:none;resize:none;font-family:'Inter',sans-serif;font-size:calc(13px * var(--font-scale));color:var(--text);line-height:1.55;min-height:20px;max-height:110px;padding:12px 0;align-self:stretch;display:flex;align-items:center;}
.chat-ta::placeholder{color:var(--text2);}
.inp-actions{display:flex;align-items:center;gap:3px;flex-shrink:0;}
.inp-ico{width:28px;height:28px;border-radius:7px;background:transparent;border:none;cursor:pointer;color:var(--text2);display:flex;align-items:center;justify-content:center;transition:background .13s,color .13s;}
.inp-ico:hover{background:var(--bg-hover);color:var(--text);}
.send-btn{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;transition:opacity .13s,transform .1s;box-shadow:0 2px 10px rgba(124,109,250,.35);}
.send-btn:hover{opacity:.85;transform:scale(1.05);}
.send-btn:active{transform:scale(.95);}
.input-hint{font-size:calc(10.5px * var(--font-scale));color:var(--text2);text-align:center;padding-top:5px;}

/* ─── OVERLAYS ─── */
.drop-overlay{position:fixed;inset:0;background:rgba(124,109,250,.18);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;font-size:calc(22px * var(--font-scale));font-weight:700;color:var(--accent);letter-spacing:.08em;z-index:9999;opacity:0;pointer-events:none;transition:opacity .15s;}
.drop-overlay.on{opacity:1;pointer-events:all;}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:300;backdrop-filter:blur(2px);}
.overlay.on{display:block;}

/* ─── MODAL ─── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:500;opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(4px);overflow:hidden;padding:24px 0;}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:18px;padding:28px 28px 24px;width:340px;max-width:calc(100vw - 32px);box-shadow:0 24px 64px var(--shadow);transform:translateY(12px) scale(.97);transition:transform .22s cubic-bezier(.2,.8,.4,1);margin:auto;max-height:calc(100dvh - 48px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
/* The "Add personality" modal shouldn't scroll as a whole — only its icon
   dropdown (.icon-dd) should, so the rest of the form stays fully visible
   and the scrollable list doesn't get clipped by the modal's own overflow. */
#persModal .modal{overflow:visible;max-height:none;}
.modal::-webkit-scrollbar{width:2px;}
.modal::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px;}
.modal-overlay.open .modal{transform:none;}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;position:sticky;top:-28px;background:var(--bg-card);padding-top:28px;margin-top:-28px;z-index:2;}
.modal-title{font-size:calc(15px * var(--font-scale));font-weight:600;color:var(--text);}
.modal-close{width:28px;height:28px;border-radius:7px;background:transparent;border:none;cursor:pointer;color:var(--text2);display:flex;align-items:center;justify-content:center;transition:background .13s,color .13s;}
.modal-close:hover{background:var(--bg-hover);color:var(--text);}
.avatar-section{display:flex;align-items:center;gap:16px;margin-bottom:22px;}
.modal-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:calc(18px * var(--font-scale));font-weight:700;color:#fff;box-shadow:0 4px 16px rgba(124,109,250,.35);cursor:pointer;flex-shrink:0;transition:opacity .15s;}
.modal-avatar:hover{opacity:.85;}
.avatar-hint{font-size:calc(11.5px * var(--font-scale));color:var(--text2);line-height:1.6;flex:1;min-width:0;}
.avatar-hint strong{display:block;font-size:calc(13px * var(--font-scale));color:var(--text);margin-bottom:2px;}
.swatch-row{display:flex;gap:7px;margin-top:8px;}
.swatch{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .13s,border-color .13s;flex-shrink:0;}
.swatch:hover{transform:scale(1.15);}
.swatch.active{border-color:var(--text);}
.swatch-photo{display:flex;align-items:center;justify-content:center;background:transparent;border:1.5px dashed #666;color:#999;}
.swatch-photo:hover{border-color:var(--text2,#aaa);color:var(--text2,#aaa);}
.remove-photo-btn{background:none;border:none;cursor:pointer;color:var(--accent);font-family:'Inter',sans-serif;font-size:calc(11px * var(--font-scale));font-weight:600;padding:0;margin-top:6px;text-decoration:underline;}
.avatar-crop-frame{position:relative;width:260px;height:260px;max-width:100%;margin:0 auto 16px;border-radius:50%;overflow:hidden;background:var(--bg-section);border:1px solid var(--border);cursor:grab;touch-action:none;}
.avatar-crop-frame.dragging{cursor:grabbing;}
.avatar-crop-frame img{position:absolute;left:0;top:0;user-select:none;-webkit-user-drag:none;pointer-events:none;}
.avatar-crop-zoom-row{display:flex;align-items:center;gap:10px;color:var(--text2);margin-bottom:10px;}
.avatar-crop-zoom-row input[type="range"]{-webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:99px;background:var(--bg-section);border:1px solid var(--border);accent-color:var(--accent);cursor:pointer;outline:none;}
.avatar-crop-zoom-row input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.35);}
.avatar-crop-zoom-row input[type="range"]::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.35);}
.avatar-crop-hint{color:var(--text2);font-size:calc(11.5px * var(--font-scale));text-align:center;margin:0 0 16px;}
.fontsize-row{display:flex;align-items:center;gap:10px;}
.fontsize-slider-wrap{position:relative;flex:1;display:flex;align-items:center;padding-top:24px;}
.fontsize-slider-wrap input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:var(--bg-section);border:1px solid var(--border);accent-color:var(--accent);cursor:pointer;outline:none;box-shadow:none;}
.fontsize-slider-wrap input[type="range"]:focus{outline:none;box-shadow:none;}
.fontsize-slider-wrap input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;margin-top:0;box-shadow:0 1px 4px rgba(0,0,0,.35);}
.fontsize-slider-wrap input[type="range"]::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.35);}
.fontsize-slider-wrap input[type="range"]::-moz-range-track{background:transparent;border:none;}
.fontsize-value{position:absolute;top:0;left:0;transform:translate(-50%,-4px) scale(.9);font-size:11px;font-weight:600;color:#fff;background:var(--accent);padding:3px 8px;border-radius:6px;white-space:nowrap;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .15s ease,transform .15s ease;pointer-events:none;box-shadow:0 2px 8px rgba(124,109,250,.35);}
.fontsize-value::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:var(--accent);}
.fontsize-value.visible{opacity:1;transform:translate(-50%,0) scale(1);}
.fontsize-labels{display:flex;justify-content:space-between;gap:6px;margin-top:6px;}
.fontsize-preset-btn{flex:1;background:var(--bg-section);border:1px solid var(--border);border-radius:7px;color:var(--text2);font-family:'Inter',sans-serif;font-size:calc(10px * var(--font-scale));font-weight:500;padding:5px 4px;cursor:pointer;text-align:center;transition:background .15s,border-color .15s,color .15s;}
.fontsize-preset-btn:hover{background:var(--bg-hover);color:var(--text);}
.fontsize-preset-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:calc(11.5px * var(--font-scale));font-weight:500;color:var(--text2);margin-bottom:5px;letter-spacing:.03em;text-transform:uppercase;}
.field input:not([type="range"]),.field select{width:100%;padding:9px 12px;border-radius:9px;background:var(--bg-section);border:1px solid var(--border);color:var(--text);font-family:'Inter',sans-serif;font-size:calc(13px * var(--font-scale));outline:none;transition:border-color .18s,box-shadow .18s;appearance:none;}
.field input:not([type="range"]):focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--tag-bg);}
.field input:read-only,.pers-desc-textarea:read-only{opacity:.65;cursor:default;}
.pers-desc-textarea{width:100%;padding:9px 12px;border-radius:9px;background:var(--bg-section);border:1px solid var(--border);color:var(--text);font-family:'Inter',sans-serif;font-size:calc(13px * var(--font-scale));line-height:1.45;outline:none;transition:border-color .18s,box-shadow .18s;resize:vertical;white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;min-height:60px;max-height:160px;overflow-y:auto;}
.pers-desc-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--tag-bg);}
.field select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b6b80' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;}

/* ─── Password show/hide toggle ─── */
.pwd-field-wrap{position:relative;width:100%;}
.pwd-field-wrap input{padding-right:40px !important;}
.pwd-toggle-btn{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:none;background:transparent;color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:color .13s,background .13s;padding:0;}
.pwd-toggle-btn:hover{color:var(--text);background:var(--bg-hover);}
.pwd-toggle-btn svg{width:16px;height:16px;pointer-events:none;}
.plan-row{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;border-radius:10px;background:var(--bg-section);border:1px solid var(--border);margin-bottom:14px;}
.plan-info{display:flex;flex-direction:column;gap:2px;}
.plan-name{font-size:calc(13px * var(--font-scale));font-weight:500;color:var(--text);}
.plan-desc{font-size:calc(11px * var(--font-scale));color:var(--text2);}
.plan-expiry{font-size:calc(11px * var(--font-scale));color:var(--accent);}
.plan-expiry.plan-expiry-soon{color:#f59e0b;}
.plan-card-expiry{font-size:calc(11.5px * var(--font-scale));color:var(--text2);margin-top:6px;}
.upgrade-btn{padding:5px 12px;border-radius:7px;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;cursor:pointer;color:#fff;font-family:'Inter',sans-serif;font-size:calc(11.5px * var(--font-scale));font-weight:500;box-shadow:0 2px 8px rgba(124,109,250,.3);transition:opacity .13s;white-space:nowrap;}
.upgrade-btn:hover{opacity:.85;}
.plan-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end;}

/* Plans / pricing modal */
.plans-modal{max-width:960px;width:100%;}
.token-limit-modal{max-width:380px;width:100%;text-align:center;}
.token-limit-body{padding:4px 4px 20px;}
.token-limit-icon{font-size:calc(34px * var(--font-scale));line-height:1;margin-bottom:12px;}
.token-limit-body p{margin:0;color:var(--text);font-size:calc(14px * var(--font-scale));line-height:1.5;}
.token-limit-reset{margin-top:10px !important;color:var(--text2) !important;font-size:calc(12.5px * var(--font-scale)) !important;}
.token-limit-actions{display:flex;flex-direction:column;gap:8px;}
.token-limit-actions .upgrade-btn{width:100%;padding:11px;font-size:calc(13.5px * var(--font-scale));border-radius:10px;}
.token-limit-actions .btn-sec{width:100%;}
.plans-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px;}
@media (max-width:900px){.plans-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.plans-grid{grid-template-columns:1fr;}}
.plan-card{position:relative;background:var(--bg-section);border:1px solid var(--border);border-radius:14px;padding:18px 16px;display:flex;flex-direction:column;gap:10px;transition:border-color .2s,transform .2s;}
.plan-card:hover{border-color:#7c6dfa88;}
.plan-card-featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 8px 24px rgba(124,109,250,.25);}
.plan-card-current{opacity:.85;}
.plan-card-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:calc(10px * var(--font-scale));font-weight:700;letter-spacing:.03em;padding:3px 10px;border-radius:20px;white-space:nowrap;}
.plan-card-name{font-size:calc(15px * var(--font-scale));font-weight:700;color:var(--text);text-align:center;margin-top:4px;}
.plan-card-price{font-size:calc(17px * var(--font-scale));font-weight:700;text-align:center;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.plan-card-features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;flex:1;}
.plan-card-features li{font-size:calc(12px * var(--font-scale));color:var(--text2);padding-left:16px;position:relative;}
.plan-card-features li::before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:700;}
.plan-card-btn{margin-top:auto;padding:9px 12px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;cursor:pointer;color:#fff;font-family:'Inter',sans-serif;font-size:calc(12.5px * var(--font-scale));font-weight:600;transition:opacity .13s;}
.plan-card-btn:hover{opacity:.85;}
.plan-card-btn-current{background:var(--bg-section);border:1px solid var(--border);color:var(--text-muted);cursor:default;}
.plan-card-btn-sec{background:transparent;border:1px solid var(--border);color:var(--text2);}
.plan-card-btn-sec:hover{background:var(--bg-section);opacity:1;}
.modal-actions{display:flex;gap:8px;margin-top:6px;}
.btn-sec{flex:1;padding:9px;border-radius:9px;background:var(--bg-hover);border:none;cursor:pointer;color:var(--text2);font-family:'Inter',sans-serif;font-size:calc(13px * var(--font-scale));font-weight:500;transition:background .13s,color .13s;}
.btn-sec:hover{background:var(--bg-section);color:var(--text);}
.btn-pri{flex:2;padding:9px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;cursor:pointer;color:#fff;font-family:'Inter',sans-serif;font-size:calc(13px * var(--font-scale));font-weight:500;box-shadow:0 2px 10px rgba(124,109,250,.3);transition:opacity .13s;}
.btn-pri:hover{opacity:.88;}
.btn-danger{flex:2;padding:9px;border-radius:9px;background:linear-gradient(135deg,#ef4444,#dc2626);border:none;cursor:pointer;color:#fff;font-family:'Inter',sans-serif;font-size:calc(13px * var(--font-scale));font-weight:500;box-shadow:0 2px 10px rgba(239,68,68,.3);transition:opacity .13s;}
.btn-danger:hover{opacity:.88;}
.btn-danger:disabled{opacity:.5;cursor:default;}
.pers-preview{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:10px;background:var(--tag-bg);border:1px solid var(--border);margin-bottom:14px;}
.pers-preview-icon{font-size:calc(18px * var(--font-scale));}
.pers-preview-name{font-size:calc(13px * var(--font-scale));font-weight:500;color:var(--accent);}

/* ─── TOAST ─── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg-card);border:1px solid var(--border);padding:9px 18px;border-radius:99px;font-size:calc(12.5px * var(--font-scale));color:var(--text);box-shadow:0 8px 24px var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:999;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ─── MOBILE ─── */
@media (max-width:640px) {
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:400;transform:translateX(-100%);transition:transform .25s cubic-bezier(.2,.8,.4,1);width:240px;min-width:240px;}
  .sidebar.open{transform:translateX(0);}
  html,body{height:100dvh;height:var(--app-height,100dvh);overflow:hidden;}
  .main{height:100dvh;height:var(--app-height,100dvh);display:flex;flex-direction:column;}
  .topbar{padding:0 10px;height:48px;min-height:48px;}
  .chat-area{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 0 6px;}
  .chat-area:empty,.chat-area:has(.empty-state:not([style*="display: none"])){padding-bottom:6px;}
  .message{padding:0 10px;margin-bottom:8px;}
  .message .bubble{max-width:80%;font-size:calc(15.4px * var(--font-scale));}
  .empty-state{padding:20px;}
  .empty-state h2{font-size:calc(20px * var(--font-scale));}
  .empty-state p{font-size:calc(14px * var(--font-scale));}
  .input-wrap{padding:8px 10px;padding-bottom:calc(8px + env(safe-area-inset-bottom));}
  .chat-ta{font-size:calc(16px * var(--font-scale));}
  .input-hint{display:none;}
  .modal{width:calc(100vw - 24px);padding:20px;max-height:calc(100dvh - 48px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
}

/* ── Image lightbox (fullscreen photo viewer) ────────────── */
.img-lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:900;opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(4px);}
.img-lightbox-overlay.open{opacity:1;pointer-events:all;}
.img-lightbox-content{position:relative;max-width:92vw;max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:14px;}
.img-lightbox-img{max-width:92vw;max-height:74vh;border-radius:14px;box-shadow:0 24px 64px rgba(0,0,0,.5);object-fit:contain;}
.img-lightbox-actions{display:flex;gap:10px;}
.img-lightbox-btn{display:flex;align-items:center;gap:6px;padding:10px 18px;border-radius:10px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);cursor:pointer;font-size:calc(14px * var(--font-scale));font-weight:600;transition:background .13s;}
.img-lightbox-btn:hover{background:var(--bg-hover);}
.img-lightbox-close{position:absolute;top:-44px;right:0;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);border:none;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .13s;}
.img-lightbox-close:hover{background:rgba(255,255,255,.22);}

/* ── Copy-code button on code blocks ──────────────────────── */
.code-block{position:relative;margin:8px 0;}
.copy-code-btn{position:absolute;bottom:6px;right:6px;padding:4px 10px;font-size:12px;border-radius:6px;border:1px solid var(--border);background:var(--bg-card);color:var(--text2);cursor:pointer;opacity:.85;transition:opacity .13s,background .13s;z-index:2;}
.copy-code-btn:hover{opacity:1;background:var(--bg-hover);}

/* ── Touch devices: hover-only action buttons must stay visible ──
   .ci-del, .ai-bubble-actions and .dd-custom-actions are normally
   revealed by :hover, which never fires on phones/tablets (no mouse).
   (hover:none) and (pointer:coarse) reliably detect touch-primary
   devices — unlike a max-width query, which would also catch a
   desktop browser window that's just been resized narrow. */
@media (hover:none) and (pointer:coarse){
  .ci-del{opacity:1;}
  .ai-bubble-actions{opacity:1;}
  .dd-custom-actions{display:flex;}
}