/* ═══ AI Image Generator — main styles ═══ */
:root{
  --bg:#ffffff;
  --bg-soft:#f7f7f8;
  --bg-sidebar:#f0f0f0;
  --bg-elev:#ffffff;
  --border:#ececec;
  --border-strong:#e0e0e0;
  --text:#1a1a1a;
  --text-muted:#6b6b6b;
  --text-faint:#9a9a9a;
  --accent:#10a37f;
  --accent-hover:#0e8f6d;
  --danger:#ef4444;
  
  /* Adaptive radii */
  --radius:24px;
  --radius-sm:16px;
  
  --overlay-bg:rgba(255,255,255,0.6);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.03);
  --shadow-lg:0 4px 12px rgba(0,0,0,0.05);
  --sidebar-w:320px;
  --sidebar-w-collapsed:64px;
  --composer-max:960px;
  --msg-max:720px;
  --btn-sm:48px;
  --btn-lg:64px;
  --font-base:16px;
  --font-lg:32px;
  --font-sm:14px;
  
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.dark{
  --bg:#0f0f0f;--bg-soft:#1a1a1a;--bg-sidebar:#171717;--bg-elev:#1f1f1f;
  --border:#2a2a2a;--border-strong:#3a3a3a;--text:#ededed;--text-muted:#999;
  --text-faint:#666;--accent:#10a37f;--accent-hover:#1cb892;
  --overlay-bg:rgba(0,0,0,0.5);
  --shadow:0 2px 10px rgba(0,0,0,0.3);--shadow-lg:0 8px 32px rgba(0,0,0,0.5);
}


*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);font-size:var(--font-base);line-height:1.5}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;-webkit-tap-highlight-color:transparent}
input,textarea,select{font:inherit;color:inherit;outline:none}

/* Remove arrows from all number inputs */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* ═══ App layout ═══ */
.app{
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden;
}

/* ═══ Main ═══ */
.main{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100dvh;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
}

/* ═══ UI TOKENS — two groups ═══ */
/* Interactive: border + elevated bg, hover changes border */
/* Display: soft bg, no border, no hover */

/* ─── Interactive round (circles) ─── */
.icon-btn, .composer-btn, .img-action, .chat-item-action, .toggle-vis, .lightbox-close{
  width:var(--btn-sm);height:var(--btn-sm);border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-elev);border:1px solid var(--border);
  color:var(--text-muted);
  transition:color 0.15s,border-color 0.15s,background 0.15s;
}
.icon-btn:hover:not(:disabled), .composer-btn:hover:not(:disabled), .img-action:hover, .chat-item-action:hover, .toggle-vis:hover{
  color:var(--text);border-color:var(--border-strong);background:var(--bg-soft);
}
.icon-btn:disabled, .composer-btn:disabled{
  opacity:0.35;cursor:not-allowed;
}
.lightbox-close{position:absolute;top:16px;right:16px;z-index:101}
.lightbox-close:hover{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.3)}

/* ─── Interactive pill (selects, inputs, buttons) ─── */
select, .param-input, .model-btn, .currency-pill, .theme-pill, .rate-pill, .btn-danger, .input-wrap input{
  height:var(--btn-sm);border-radius:var(--btn-sm);
  background:var(--bg-elev);border:1px solid var(--border);
  color:var(--text);font-size:var(--font-sm);font-weight:500;
  transition:border-color 0.15s,background 0.15s,color 0.15s;
}
select{appearance:none;cursor:pointer;text-align-last:center;padding:0 16px;min-width:var(--btn-sm);width:auto}
select:hover,.param-input:hover,.model-btn:hover,.currency-pill:hover,.theme-pill:hover,.rate-pill:hover,.btn-danger:hover{border-color:var(--border-strong)}
select:focus,.param-input:focus,.rate-pill:focus,.input-wrap input:focus{border-color:var(--text-muted)}
.param-input{padding:0 16px;width:72px;text-align:center}
.model-btn{display:inline-flex;align-items:center;gap:6px;padding:0 16px;min-width:var(--btn-sm);justify-content:center;cursor:pointer}
.currency-pill{flex:1;padding:0 8px;text-align:center;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.theme-pill{flex:1;padding:0 8px;text-align:center;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.rate-pill{width:60px;padding:0;text-align:center}
.btn-danger{width:100%;padding:0 16px;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.input-wrap input{width:100%;padding:0 48px 0 16px;font-size:var(--font-base);font-weight:500}

.currency-pill.active,.theme-pill.active{background:var(--accent);border-color:var(--accent);color:#fff}
.model-btn.active{background:var(--text);color:var(--bg);border-color:var(--text)}

/* ─── Display pill (chips, cost — not clickable) ─── */
.msg-params span, .msg-footer span, .est-cost{
  height:var(--btn-sm);border-radius:var(--btn-sm);
  background:var(--bg-soft);border:none;
  color:var(--text-muted);font-size:var(--font-sm);font-weight:500;
  padding:0 16px;min-width:var(--btn-sm);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  white-space:nowrap;
}
.est-cost{background:var(--text);color:var(--bg);letter-spacing:-0.1px;align-self:center}

/* ═══ Chat Area ═══ */
.chat{
  flex:1;
  overflow:visible;
  padding-top: 0;
  padding-bottom: 24px;
  padding-left: max(16px, calc((100% - var(--composer-max)) / 2));
  padding-right: max(16px, calc((100% - var(--composer-max)) / 2));
  width:100%;
}
.main::-webkit-scrollbar{width:6px}
.main::-webkit-scrollbar-thumb{background:var(--text-faint);border-radius:6px}
.main::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

.welcome{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;color:var(--text-muted)}
.welcome-logo{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text);margin-bottom:24px;background:var(--bg-soft)}
.welcome h1{font-size:var(--font-lg);font-weight:600;color:var(--text);margin-bottom:8px}
.welcome p{font-size:var(--font-base);margin-bottom:24px}
.create-chat-cta{display:inline-flex;align-items:center;gap:8px;padding:0 32px;height:var(--btn-lg);border-radius:32px;background:var(--text);color:var(--bg);font-size:var(--font-base);font-weight:500;transition:opacity 0.15s}
.create-chat-cta:hover{opacity:0.9}

/* ═══ Messages ═══ */
.message{max-width:90%;padding:8px;animation:msgIn 0.25s ease;display:flex;flex-direction:column}
.msg-user{align-self:flex-end;margin-left:auto}
.msg-assistant{align-self:flex-start;margin-right:auto}
@keyframes msgIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.msg-body{min-width:0;display:inline-flex;flex-direction:column;align-items:stretch}
.msg-bubble{font-size:var(--font-base);line-height:1.6;white-space:pre-wrap;word-break:break-word;display:inline-block;max-width:100%}
.msg-user .msg-bubble{background:var(--bg-soft);color:var(--text);padding:12px 20px;border-radius:var(--radius);text-align:right;min-height:var(--btn-sm);display:flex;align-items:center;justify-content:flex-end}
.msg-assistant .msg-bubble{color:var(--text);max-width:100%}
.msg-footer-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:12px}
.msg-params{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}
.msg-footer{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-left:auto}
.msg-body>.msg-footer{width:100%}
.msg-footer-row .msg-actions{display:flex;gap:8px;flex-shrink:0}
.msg-ref-strip{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px 0}
.msg-user .msg-ref-strip{justify-content:flex-end}
.msg-ref-thumb{position:relative;width:var(--btn-sm);height:var(--btn-sm);border-radius:50%;overflow:hidden;cursor:pointer;flex-shrink:0;background:var(--bg-soft);transition:opacity 0.2s}
.msg-ref-thumb:hover{opacity:0.75}
.msg-ref-thumb img{width:100%;height:100%;object-fit:cover;transition:opacity 0.4s ease}
.msg-ref-thumb.loading img{opacity:0}
.msg-ref-thumb.error{background:var(--danger);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700}
.msg-error{display:flex;align-items:flex-start;gap:8px;border:1px solid color-mix(in srgb,var(--danger) 25%,transparent);background:color-mix(in srgb,var(--danger) 5%,transparent);border-radius:var(--radius);padding:16px 20px;font-size:var(--font-base);color:var(--danger)}

/* ═══ Images ═══ */
.msg-images{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.msg-img-row{display:flex;align-items:flex-start;gap:8px}
.msg-img-wrap{position:relative;overflow:hidden;border-radius:var(--radius);cursor:pointer;background:var(--bg-soft);width:100%}
.msg-img-wrap img{width:100%;height:100%;display:block;object-fit:cover;transition:transform 0.3s ease,opacity 0.4s ease}
.msg-img-wrap.loading img{opacity:0}
.msg-img-wrap.loaded:hover img{transform:scale(1.02)}
.img-actions{display:flex;gap:8px;margin-left:8px;flex-shrink:0}

/* ═══ Skeleton shimmer ═══ */
@keyframes shimmer-wave{0%{background-position:-200% 0}100%{background-position:200% 0}}
.shimmer{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(105deg,transparent 0%,transparent 30%,color-mix(in srgb,var(--text-faint) 12%,transparent) 50%,transparent 70%,transparent 100%);background-size:200% 100%;background-repeat:no-repeat;animation:shimmer-wave 1.8s ease-in-out infinite}
.skeleton-card{width:100%;border-radius:var(--radius);overflow:hidden;position:relative;z-index:0;background:var(--bg-soft)}
.ref-skeleton{width:var(--btn-sm);height:var(--btn-sm);border-radius:50%;background:var(--bg-soft);overflow:hidden;position:relative;flex-shrink:0}
.msg-img-wrap.loaded .shimmer,.ref-thumb.loaded .shimmer,.msg-ref-thumb.loaded .shimmer{opacity:0;transition:opacity 0.4s ease}

/* ═══ Floating Composer ═══ */
.composer-wrap{
  position:sticky;
  bottom:0;
  left:0;
  width:100%;
  padding:0 max(16px, calc((100% - var(--composer-max)) / 2)) calc(16px + env(safe-area-inset-bottom, 0));
  z-index:10;
}
.composer-wrap:has(.expanded) {
  z-index: 30;
}
.composer-wrap {
  /* Gradient background so chat doesn't clash */
  background: linear-gradient(to top, var(--bg) 60%, transparent 100%);
  pointer-events: none;
}
.composer-wrap > * {
  pointer-events: auto;
}

/* ═══ Reference Strip ═══ */
.ref-strip{display:flex;flex-wrap:wrap;gap:8px;padding:8px;}
.ref-strip:empty{display:none;}
.ref-thumb, .ref-skeleton{position:relative;flex-shrink:0;width:var(--btn-sm);height:var(--btn-sm);border-radius:50%;overflow:hidden;background:var(--bg-soft)}
.ref-thumb{cursor:pointer;}
.ref-thumb img{width:100%;height:100%;object-fit:cover;transition:opacity 0.35s ease}
.ref-thumb.loading img{opacity:0}
.ref-thumb .ref-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.2s;z-index:3;color:#fff}
.ref-thumb:hover .ref-overlay{opacity:1}
.ref-thumb.error{background:var(--danger)}
.ref-thumb.error .ref-error-icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}

.composer{
  display:flex;
  flex-direction:column;
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:32px;
  padding:8px;
  box-shadow:var(--shadow-lg);
  transition:border-color 0.15s;
  overflow:hidden;
  min-height:var(--btn-lg);
}
.composer-main{
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}
.ref-options{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
}
.composer:not(.expanded) .ref-options{
  display: none;
}
.composer.expanded .composer-main {
  display: none;
}
.composer:focus-within{border-color:var(--text-muted)}
#prompt{flex:1;border:none;resize:none;background:transparent;font-size:var(--font-base);line-height:1.5;max-height:200px;min-height:48px;padding:12px 0;color:var(--text);box-sizing:border-box}
#prompt::placeholder{color:var(--text-faint)}
#prompt::-webkit-scrollbar{display:none}
#prompt{scrollbar-width:none}
.composer-send{width:var(--btn-sm);height:var(--btn-sm);border-radius:50%;background:var(--text);color:var(--bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity 0.15s,background 0.15s;border:none}
.composer-send:not(:disabled):hover{background:var(--text-muted)}
.composer-send:disabled{opacity:0.35;cursor:not-allowed}

/* ═══ Params bar ═══ */
.params-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px;margin:0}
.param-group{display:flex;align-items:center}

[data-param]{display:none}
[data-param].show{display:flex}

/* ═══ Overlay ═══ */
.overlay{position:fixed;inset:0;z-index:24;background:var(--overlay-bg);backdrop-filter:blur(4px);opacity:1;transition:opacity 0.4s ease}
.overlay.hidden{opacity:0;pointer-events:none}

/* ═══ Settings fields ═══ */
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.field label{font-size:var(--font-sm);font-weight:500;color:var(--text-muted)}
.input-wrap{position:relative;display:flex;align-items:center}
.toggle-vis{position:absolute;right:8px;width:32px;height:32px;border-radius:50%}
.balance-info{background:var(--bg-soft);border:none;border-radius:var(--btn-sm);padding:0 16px;display:flex;align-items:center;justify-content:space-between;height:var(--btn-sm)}
.balance-value{font-size:var(--font-base);font-weight:600;color:var(--text);letter-spacing:-0.2px;min-width:36px;display:inline-block;text-align:right}
.balance-value.loading{color:transparent;min-width:60px;height:20px;border-radius:4px;background:var(--bg-soft);position:relative;overflow:hidden}
.balance-value.loading::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--text-faint) 15%,transparent) 50%,transparent 100%);animation:shimmer-wave 1.6s ease-in-out infinite}
.currency-pills{display:flex;gap:8px;align-items:center}
.theme-pills{display:flex;gap:8px}

/* ═══ Popups ═══ */
.popup{position:fixed;z-index:50;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:8px;min-width:220px;}
@keyframes popInRef{from{opacity:0;transform:translate(-50%, 8px)}to{opacity:1;transform:translate(-50%, 0)}}
.popup.hidden{display:none}
.model-list{display:flex;flex-direction:column;gap:0;padding:0;overflow-y:auto;flex:1}
#refPopup{position:fixed;bottom:140px;left:50%;transform:translateX(-50%);min-width:220px;display:flex;flex-direction:column;gap:4px;animation:popInRef 0.2s ease}

.popup-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;
  height:var(--btn-sm);
  cursor:pointer;
  border-radius:var(--radius-sm);
  font-size:var(--font-base);
  font-weight:500;
  color:var(--text);
  background:transparent;
  border:none;
  transition:background 0.15s;
  width:100%;
}


/* ═══ Lightbox ═══ */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,0.88);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;opacity:0;transition:opacity 0.25s ease}
.lightbox.show{opacity:1}
.lightbox img{max-width:100%;max-height:100%;box-shadow:0 8px 60px rgba(0,0,0,0.5);cursor:default;transform:scale(0.96);transition:transform 0.25s ease}
.lightbox.show img{transform:scale(1)}

/* ═══ Drag-over ═══ */
.composer-wrap.drag-over .composer{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}

/* ═══ Spinner ═══ */
@keyframes spin{to{transform:rotate(360deg)}}
.spinner-anim{animation:spin 0.8s linear infinite}

/* ═══ Hidden ═══ */
.hidden{display:none !important}



/* ═══════════════════════════════════════════════════════════
   RESPONSIVE DESIGN
   ═══════════════════════════════════════════════════════════ */

/* ─── Tablet / small desktop (≤1024px) ─── */
@media(max-width:1024px){
  :root{
    --sidebar-w:280px;
  }

}

/* ─── Tablet portrait (≤768px) ─── */
@media(max-width:768px){
  :root{
    --sidebar-w:280px;
    --font-lg:28px;
    --font-base:15px;
    --font-sm:13px;
    --radius:20px;
    --radius-sm:14px;
  }

  .chat{
    padding-top: 64px;
    padding-bottom: 24px;
    padding-left: max(12px, calc((100% - var(--composer-max)) / 2));
    padding-right: max(12px, calc((100% - var(--composer-max)) / 2));
  }
  .composer-wrap{
    padding-left: max(12px, calc((100% - var(--composer-max)) / 2));
    padding-right: max(12px, calc((100% - var(--composer-max)) / 2));
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
  }
  

  .msg-user .msg-bubble{padding:12px 16px;border-radius:var(--radius)}
  .welcome-logo{width:72px;height:72px}
  .welcome h1{font-size:var(--font-lg)}
  .welcome p{font-size:var(--font-base)}
  .params-bar{gap:6px;padding:6px}
  .composer{border-radius:28px;padding:6px;min-height:auto}
  #prompt{padding:10px 0;min-height:44px}
  .composer-send{width:44px;height:44px}
  .composer-btn{width:44px;height:44px}
  .lightbox{padding:16px}
  .lightbox-close{top:8px;right:8px}
  #refPopup{bottom:120px;left:50%;transform:translateX(-50%)}
}

/* ─── Phone (≤480px) ─── */
@media(max-width:480px){
  :root{
    --font-lg:24px;
    --font-base:14px;
    --font-sm:12px;
    --btn-sm:44px;
    --btn-lg:56px;
    --radius:16px;
    --radius-sm:12px;
  }
  

  .chat{
    padding-top: calc(64px + env(safe-area-inset-top,0));
    padding-bottom: 24px;
    padding-left: 8px;
    padding-right: 8px;
  }
  .composer-wrap{
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
  }
  
  .message{padding:4px}
  .msg-user .msg-bubble{padding:10px 14px;border-radius:var(--radius)}
  
  .welcome{padding:0 16px}
  .welcome-logo{width:64px;height:64px;margin-bottom:16px}
  .welcome h1{margin-bottom:4px}
  .create-chat-cta{height:var(--btn-lg);padding:0 24px;}
  
  .composer{border-radius:28px;padding:6px;min-height:auto}
  #prompt{padding:10px 0;min-height:44px;max-height:150px}
  
  .params-bar{gap:4px;padding:4px;flex-wrap:wrap;}
  
  select,.param-input,.model-btn{height:44px;padding:0 12px;min-width:44px}
  .param-input{width:64px}
  .rate-pill{ width:48px;height:44px}
  .est-cost{height:44px;padding:0 12px}
  .msg-params span,.msg-footer span{height:44px;padding:0 12px}
  
  .icon-btn,.composer-btn,.img-action,.chat-item-action,.toggle-vis,.lightbox-close{width:44px;height:44px}
  
  .msg-img-row{flex-direction:column;gap:6px}
  .msg-img-wrap{flex:none;width:100%}
  .img-actions{margin-left:0;flex-direction:row;justify-content:flex-start}
  .msg-footer-row{flex-wrap:nowrap;gap:6px;overflow-x:auto}
  .msg-actions{gap:4px}
  .lightbox{padding:8px}
  .lightbox-close{top:4px;right:4px;width:44px;height:44px}
  
  #refPopup{bottom:100px;left:8px;right:8px;transform:none;min-width:0}
  .popup{min-width:0;left:8px;right:8px}
  
  .ref-strip{padding:4px;gap:4px}
  .ref-thumb, .ref-skeleton, .msg-ref-thumb{width:44px;height:44px}
  .msg-ref-strip{gap:4px}
  
  .field{margin-bottom:12px}
  .balance-info{height:44px;padding:0 12px}
  .currency-pill,.theme-pill{height:44px;}
  .input-wrap input{height:44px;font-size:16px}
  .toggle-vis{width:32px;height:32px}
  .btn-danger{height:44px;}

  .skeleton-card{min-height:150px}
}

/* ─── Small phone (≤360px) ─── */
@media(max-width:360px){
  :root{--font-lg:22px;--font-base:14px;--btn-lg:52px}
  .composer{border-radius:24px;padding:4px}
  #prompt{padding:8px 0;min-height:40px;max-height:120px}
  .composer-send{width:40px;height:40px}
  .composer-btn{width:40px;height:40px}
  select,.param-input,.model-btn{padding:0 10px;font-size:16px}
  .est-cost{padding:0 10px}
  .msg-params span,.msg-footer span{padding:0 10px}
  .welcome-logo{width:56px;height:56px}
  .skeleton-card{min-height:120px}
}


/* ═══════════════════════════════════════════════════════════
   TOP PANEL & MODALS
   ═══════════════════════════════════════════════════════════ */

/* ─── Top Panel ─── */
.top-panel-wrap {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  padding: calc(16px + env(safe-area-inset-top, 0)) max(16px, calc((100% - var(--composer-max)) / 2)) 16px;
  z-index: 10;
  background: linear-gradient(to bottom, var(--bg) 60%, transparent 100%);
  pointer-events: none;
}
.top-panel-wrap:has(.expanded) {
  z-index: 30;
}
.top-panel-wrap > * {
  pointer-events: auto;
}

.top-panel-anchor {
  position: relative;
  height: 64px;
  width: 100%;
}
.top-panel {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  align-items: flex-start;
  padding: 8px; /* same as composer */
  max-height: 64px; /* 48px + 16px padding */
  overflow: hidden;
}

.top-panel.expanded {
  max-height: calc(100dvh - 120px);
}

.top-panel-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.top-panel-right {
  flex-shrink: 0;
  margin-left: 8px;
  display: flex;
  align-items: center;
  height: 48px;
}
.top-panel-right.hidden {
  display: none !important;
}


/* ─── Unified List Items (Chats, Models) ─── */
.circle-btn,
.chat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  height: 48px;
  border-radius: 24px;
  background: transparent;
  color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  cursor: pointer;
  width: 100%;
  position: relative;
  overflow: hidden;
  border: none;
}
.chat-item.active {
  color: var(--text);
}

/* Hide actions in collapsed state */
.top-panel:not(.expanded) .chat-item-action {
  display: none;
}

.circle-icon,
.chat-item-icon {
  width: var(--btn-sm);
  height: var(--btn-sm);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.new-chat-circle .circle-icon { background: var(--text); color: var(--bg); }
.new-chat-circle:hover .circle-icon { background: var(--text-muted); }
.chat-item-icon { font-size: 16px; font-weight: 600; color: #fff; }
@keyframes auraFlow {
  0% {
    background-position: 0% 50%;
    transform: scale(1) rotate(0deg);
  }
  50% {
    background-position: 100% 50%;
    transform: scale(1.15) rotate(15deg);
  }
  100% {
    background-position: 0% 50%;
    transform: scale(1) rotate(0deg);
  }
}

.model-icon-img {
  width: 100%;
  height: 100%;
  background-color: var(--text);
  -webkit-mask: url('../img/ChatGPT.svg') no-repeat center / contain;
  mask: url('../img/ChatGPT.svg') no-repeat center / contain;
  display: block;
}

.model-icon-animated {
  width: 100%;
  height: 100%;
  -webkit-mask: url('../img/ChatGPT.svg') no-repeat center / contain;
  mask: url('../img/ChatGPT.svg') no-repeat center / contain;
  display: block;
  position: relative;
  overflow: hidden;
}

.model-icon-animated::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    115deg,
    #3b82f6,
    #a855f7,
    #ff8a65,
    #3b82f6,
    #a855f7
  );
  background-size: 300% 300%;
  animation: auraFlow 6s ease-in-out infinite;
}

.btn-active-style {
  background: var(--text) !important;
  color: var(--bg) !important;
}

.circle-label,
.chat-item-label {
  font-size: var(--font-base);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.circle-label { flex: 1; text-align: left; }
.chat-item-text { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; }

.chat-item-action {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  transition: background 0.15s, color 0.15s;
  border: none;
  background: var(--bg-soft);
}
.chat-item-action:hover { background: var(--bg-elev); color: var(--danger); }

/* ─── Expandable Panel Views ─── */
.chat-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: hidden;
  flex: 1;
}
.top-panel.expanded .chat-list {
  overflow-y: auto;
}

.panel-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
.panel-header {
  display: flex;
  align-items: center;
  height: 48px;
  flex-shrink: 0;
  padding-left: 56px; /* 48px icon + 8px gap */
}
.panel-title {
  font-size: var(--font-base);
  font-weight: 600;
}
.settings-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 0;
}
.model-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 0;
}

/* Hide right panel when expanded, and hide headers when a menu is active */
.top-panel.expanded .top-panel-right,
.panel-view:not(.hidden) .panel-header {
  display: none !important;
}

/* ─── Responsive Adjustments ─── */
@media(max-width: 1024px) {
  .top-panel-anchor { height: 56px; }
  .top-panel {
    padding: 6px;
    max-height: 56px;
  }
  .top-panel-right, .circle-btn, .chat-item, .panel-header {
    height: 44px;
  }
  .panel-header {
    padding-left: 52px;
  }
  .circle-icon, .chat-item-icon, .chat-item-action {
    width: 44px;
    height: 44px;
  }
}
@media(max-width: 768px) {
  .top-panel-wrap {
    padding: calc(12px + env(safe-area-inset-top, 0)) max(12px, calc((100% - var(--composer-max)) / 2)) 12px;
  }
}
@media(max-width: 480px) {
  .top-panel-wrap {
    padding: calc(8px + env(safe-area-inset-top, 0)) max(8px, calc((100% - var(--composer-max)) / 2)) 8px;
  }
}
@media(max-width: 360px) {
  .top-panel-anchor { height: 48px; }
  .top-panel {
    padding: 4px;
    max-height: 48px;
  }
  .top-panel-right, .circle-btn, .chat-item, .panel-header {
    height: 40px;
  }
  .panel-header {
    padding-left: 48px;
  }
  .circle-icon, .chat-item-icon, .chat-item-action {
    width: 40px;
    height: 40px;
  }
}


/* ═══════════════════════════════════════════════════════════ */
/* Toast Notifications */
/* ═══════════════════════════════════════════════════════════ */

.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
  pointer-events: auto;
}

.toast-error .toast-icon { color: #ef4444; }
.toast-success .toast-icon { color: #10a37f; }
.toast-info .toast-icon { color: var(--accent); }