:root {
  --bg:#1f2328;
  --text:#fff;
  --muted:#aaa;
  --panel:#111;
  --line:#272727;
  --code-bg:#0f172a;
  --code-border:#243041;
  --code-inner-bg:#0b1220;
  --code-header-bg:#111a2d;
  --code-text:#cccccc;
  --code-comment:#6a9955;
  --code-comment-doc:#608b4e;
  --code-keyword:#569cd6;
  --code-string:#c4947c;
  --code-number:#b5cea8;
  --code-title:#dcdcaa;
  --code-variable:#9cdcfe;
  --code-type:#4ec9b0;
  --code-constant:#4fc1ff;
  --code-operator:#cccccc;
  --code-regexp:#d16969;
  --code-invalid:#f44747;
  --code-decorator:#c586c0;
  --code-namespace:#4ec9b0;
  --code-selector:#d4bc84;
  --code-tag:#649cd6;
  --code-attribute:#9cdcfe;
  --code-warning:#d7ba7d;
  --code-font:"Cascadia Code","Consolas","SFMono-Regular",Menlo,Monaco,"Courier New",monospace;
  --card-bg:#141414;
  --card-border:#252525;
  --input-bg:#111;
  --input-border:#444;
  --bubble-user:#1b1b1b;
  --bubble-assist:#121212;
  --composer-bg:#000;
  --composer-shell-bg:#0d0d0d;
  --menu-bg:#1a1a1a;
  --menu-border:#2c2c2c;
  --ai-line:#f5f5f5;
  --sidebar-width:250px;
  --navbar-height:0px;
  --composer-offset:0px;
  --send-btn-bg:#fff;
  --send-btn-color:#000;
  --auth-card-bg:#111111;
  --auth-card-border:#1f1f1f;
  --auth-card-shadow:0 26px 48px rgba(0,0,0,.55);
  --auth-button-bg:#dcdfe6;
  --auth-button-color:#111;
  --link-color:#c7ced8;
  --link-color-hover:#e2e8f0;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --scrollbar-size:4px;
  --scrollbar-track:transparent;
  --scrollbar-thumb:rgba(255,255,255,.35);
  --scrollbar-thumb-hover:rgba(255,255,255,.55);
  --motion-fast:150ms;
  --motion-mid:220ms;
  --motion-slow:320ms;
  --easing-smooth:cubic-bezier(.2,.8,.2,1);
}
body[data-theme="light"] {
  --bg:#f8fafc;
  --text:#1f2933;
  --muted:#5f6369;
  --panel:#f1f5f9;
  --line:#dfe3eb;
  --code-bg:#eef4fb;
  --code-border:#d7e1ee;
  --code-inner-bg:#f6f9fd;
  --code-header-bg:#ecf2f9;
  --code-text:#1f2933;
  --code-comment:#2f6f2f;
  --code-comment-doc:#2f6a27;
  --code-keyword:#1f6ac7;
  --code-string:#a3533a;
  --code-number:#5b8a45;
  --code-title:#b59f32;
  --code-variable:#1f73c6;
  --code-type:#2aa892;
  --code-constant:#1c9bff;
  --code-operator:#0f172a;
  --code-regexp:#c24b4b;
  --code-invalid:#f44747;
  --code-decorator:#a957c2;
  --code-namespace:#4ec9b0;
  --code-selector:#b58c2a;
  --code-tag:#2f7bcf;
  --code-attribute:#2e88d8;
  --code-warning:#b8862d;
  --code-font:"Cascadia Code","Consolas","SFMono-Regular",Menlo,Monaco,"Courier New",monospace;
  --card-bg:#ffffff;
  --card-border:#dcdfe6;
  --input-bg:#ffffff;
  --input-border:#cdd5df;
  --bubble-user:#f9fafb;
  --bubble-assist:#d7dee8;
  --composer-bg:#f8fafc;
  --composer-shell-bg:#ffffff;
  --menu-bg:#ffffff;
  --menu-border:#d8dde3;
  --ai-line:#1f2933;
  --send-btn-bg:#0f172a;
  --send-btn-color:#ffffff;
  --auth-card-bg:#ffffff;
  --auth-card-border:#e2e8f0;
  --auth-card-shadow:0 28px 55px rgba(15,23,42,.15);
  --scrollbar-thumb:rgba(15,23,42,.25);
  --scrollbar-thumb-hover:rgba(15,23,42,.4);
  --link-color:#2a2a2a;
  --link-color-hover:#1a1a1a;
}
* { box-sizing: border-box; }
*{
  scrollbar-width:thin;
  scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);
}
*::-webkit-scrollbar{
  width:var(--scrollbar-size);
  height:var(--scrollbar-size);
}
*::-webkit-scrollbar-track{
  background:var(--scrollbar-track);
}
*::-webkit-scrollbar-thumb{
  background:var(--scrollbar-thumb);
  border-radius:999px;
}
*::-webkit-scrollbar-thumb:hover{
  background:var(--scrollbar-thumb-hover);
}
*::-webkit-scrollbar-button{
  display:none;
  width:0;
  height:0;
  background:transparent;
}
*::-webkit-scrollbar-button:single-button{
  display:none;
  width:0;
  height:0;
}
html, body { height:100%; overflow:hidden; margin:0; background:var(--bg); color:var(--text); font-family:'Inter',system-ui,sans-serif; }
a,
button,
input,
select,
textarea{
  transition:
    color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-mid) var(--easing-smooth),
    transform var(--motion-fast) ease,
    opacity var(--motion-fast) ease;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation:none !important;
    transition:none !important;
  }
}
a, a:visited{
  color:var(--link-color);
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:var(--link-color);
}
a:hover, a:focus{
  color:var(--link-color-hover);
  text-decoration-color:var(--link-color-hover);
}
body[data-theme="light"] button:not(:disabled):not([disabled]):hover,
body[data-theme="light"] input[type="button"]:not(:disabled):not([disabled]):hover,
body[data-theme="light"] input[type="submit"]:not(:disabled):not([disabled]):hover,
body[data-theme="light"] input[type="reset"]:not(:disabled):not([disabled]):hover{
  filter:brightness(.97);
}
body:not([data-theme="light"]) button:not(:disabled):not([disabled]):hover,
body:not([data-theme="light"]) input[type="button"]:not(:disabled):not([disabled]):hover,
body:not([data-theme="light"]) input[type="submit"]:not(:disabled):not([disabled]):hover,
body:not([data-theme="light"]) input[type="reset"]:not(:disabled):not([disabled]):hover{
  filter:brightness(1.07);
}
ion-icon{
  width:1em;
  height:1em;
  display:inline-block;
}
@keyframes uiSpin{
  to{ transform:rotate(360deg); }
}
.ui-loading-inline{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
}
.ui-spinner{
  width:.95rem;
  height:.95rem;
  border-radius:50%;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-bottom-color:transparent;
  animation:uiSpin .68s linear infinite;
  flex:0 0 auto;
  opacity:.85;
}
.ui-spinner.sm{
  width:.8rem;
  height:.8rem;
  border-width:1.8px;
}
button.is-loading{
  pointer-events:none;
  opacity:.9;
}

/* Top navbar */
.navbar {
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:40;
  background:#0b0b0f;
  height:var(--navbar-height);
  padding:0 1.5rem;
  display:flex;
  align-items:center;
}
.hamburger-btn{
  background:none;
  border:none;
  color:#fff;
  font-size:1.2rem;
  margin-right:1rem;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:.2rem;
  cursor:pointer;
}
.hamburger-btn span{
  width:18px;
  height:2px;
  background:currentColor;
  display:block;
}
.nav-settings{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  position:relative;
}
.nav-auth-login{
  background:#dfe2ec;
  border:1px solid rgba(255,255,255,.25);
  color:#0f172a !important;
  font-weight:600;
  padding:.35rem .95rem;
  border-radius:999px;
}
.nav-auth-login:hover{
  background:#f4f5f9;
  color:#000 !important;
}
.nav-auth-signup{
  background:#141821;
  border:1px solid rgba(255,255,255,.2);
  color:#fff !important;
  font-weight:600;
  padding:.35rem 1rem;
  border-radius:999px;
}
.guest-notice{
  position:fixed;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  background:#0f172a;
  color:#e2e8f0;
  border:1px solid rgba(148,163,184,.35);
  padding:.45rem .9rem;
  border-radius:999px;
  font-size:.82rem;
  font-weight:600;
  z-index:1500;
  box-shadow:0 10px 18px rgba(0,0,0,.25);
  letter-spacing:.02em;
  display:flex;
  align-items:center;
  gap:.35rem;
}
.guest-notice a{
  color:inherit;
  text-decoration:underline;
  font-weight:700;
}
body[data-theme="light"] .guest-notice{
  background:#f1f5f9;
  color:#0f172a;
  border-color:rgba(148,163,184,.6);
}
body[data-theme="light"] .guest-notice a{
  color:#0f172a;
}
.guest-create-wrap{
  position:relative;
}
body[data-guest="true"] .guest-create-wrap button[disabled]{
  opacity:.45;
  cursor:not-allowed;
}
body[data-theme="light"] .nav-auth-signup{
  background:#111827;
  color:#fff !important;
}
.settings-btn{
  border:1px solid rgba(255,255,255,.08);
  background:#1b1d24;
  color:#fff;
  width:42px;
  height:42px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  transition:background .15s ease, border .15s ease;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
}
.settings-btn:hover{ background:#242732; border-color:rgba(255,255,255,.15); }
.settings-btn ion-icon{ font-size:1.35rem; transform:translateY(8px); }
.settings-btn:focus-visible{
  outline:2px solid #666;
  outline-offset:2px;
}
.settings-menu{
  position:absolute;
  bottom:calc(100% + 12px);
  right:-60px;
  width:260px;
  background:#0b0b0b;
  border:1px solid #222;
  border-radius:16px;
  padding:.7rem;
  padding-bottom:calc(.7rem + var(--safe-bottom));
  box-shadow:0 18px 34px rgba(0,0,0,.6);
  display:flex;
  flex-direction:column;
  gap:.55rem;
  z-index:1200;
  overflow:visible;
}
.image-preview-modal{
  position:fixed;
  inset:0;
  z-index:5000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(2,6,23,.76);
  backdrop-filter:blur(3px);
}
.image-preview-modal[hidden]{
  display:none;
}
.image-preview-modal img{
  max-width:min(96vw, 1280px);
  max-height:92vh;
  width:auto;
  height:auto;
  border-radius:12px;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  background:#fff;
}
.image-preview-close{
  position:absolute;
  top:18px;
  right:18px;
  width:36px;
  height:36px;
  border:0;
  border-radius:999px;
  background:rgba(15,23,42,.86);
  color:#fff;
  font-size:1.35rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.chat-image,
.chat-image img,
.attachment-chip img,
.attachment-chip.file-chip,
.inline-file-chip--clickable{
  cursor:pointer;
}
.search-menu{
  position:absolute;
  bottom:calc(100% + 12px);
  right:-140px;
  width:360px;
  max-width:calc(100vw - 32px);
  background:#0b0b0b;
  border:1px solid #222;
  border-radius:18px;
  padding:.75rem;
  box-shadow:0 18px 34px rgba(0,0,0,.6);
  display:flex;
  flex-direction:column;
  gap:.6rem;
  z-index:1200;
}
.search-menu[hidden]{ display:none !important; }
.search-menu-header{
  display:flex;
  align-items:center;
  gap:.5rem;
}
.search-menu-input{
  flex:1 1 auto;
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  padding:.5rem .65rem;
  background:#121212;
  color:#f8fafc;
  font-size:.95rem;
}
.search-menu-input::placeholder{
  color:#9aa3b2;
}
.search-menu-close{
  display:none;
}
.search-results{
  max-height:52vh;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.search-result{
  border:none;
  background:#111111;
  color:#f8fafc;
  text-align:left;
  padding:.6rem .65rem;
  border-radius:12px;
  cursor:pointer;
  transition:background .15s ease;
}
.search-result:hover{
  background:#1b1b1b;
}
.search-result-title{
  font-size:.9rem;
  font-weight:600;
  margin-bottom:.2rem;
  display:flex;
  align-items:baseline;
  gap:.4rem;
  min-width:0;
}
.search-result-title-text{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.search-result-type{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#94a3b8;
}
.search-result-snippet{
  font-size:.85rem;
  color:#d1d5db;
}
.search-result-snippet mark{
  background:rgba(59,130,246,.18);
  color:#e2e8f0;
  font-weight:700;
  padding:0;
}
.search-empty{
  color:#9aa3b2;
  font-size:.85rem;
  padding:.35rem .25rem;
}
body[data-theme="light"] .search-menu{
  background:#f8fafc;
  border-color:#e2e8f0;
}
body[data-theme="light"] .search-menu-input{
  background:#ffffff;
  color:#0f172a;
  border-color:#e2e8f0;
}
body[data-theme="light"] .search-result{
  background:#e2e8f0;
  color:#0f172a;
}
body[data-theme="light"] .search-result:hover{
  background:#d8e0ea;
}
body[data-theme="light"] .search-result-snippet{
  color:#475569;
}
body[data-theme="light"] .search-result-type{
  color:#94a3b8;
}
body[data-theme="light"] .search-result-snippet mark{
  background:transparent;
  color:#0f172a;
  font-weight:700;
}
.settings-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.02);
  z-index:700;
}
.settings-menu[hidden]{ display:none !important; }
.settings-menu-heading{
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#9a9a9a;
}
.message-jump-highlight .bubble,
.message-jump-highlight .ai-block{
  box-shadow:inset 0 0 0 2px rgba(59,130,246,.9);
  border-radius:12px;
  transition:box-shadow .3s ease;
}
.settings-menu-user{
border:none;
border-radius:0;
padding:0;
background:transparent;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:.35rem;
}
.friends-panel{
border:none;
border-radius:0;
padding:.75rem .75rem;
width:100%;
margin-top:.5rem;
}
.friends-search{
width:100%;
border:1px solid rgba(255,255,255,.15);
border-radius:999px;
padding:.16rem .65rem;
background:#0f1118;
color:#f8fafc;
margin-bottom:.12rem;
font-size:.9rem;
}
.friends-search::placeholder{
font-size:.8rem;
color:#9aa3b2;
}
.friends-add-row{
display:flex;
gap:.25rem;
width:100%;
margin-bottom:0;
align-items:stretch;
}
.friends-add-btn{
border:none;
background:#374151;
color:#f8fafc;
padding:0 .46rem;
border-radius:999px;
font-weight:600;
cursor:pointer;
font-size:.78rem;
min-width:50px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.friends-add-btn:disabled{
opacity:.6;
cursor:not-allowed;
}
.friends-feedback{
font-size:.85rem;
margin:0 0 .5rem;
color:#38bdf8;
}
.friends-feedback.error{
color:#f87171;
}
.friends-heading{
margin-left:0;
}
.notifications-empty{
margin:.25rem 0 .6rem;
color:#94a3b8;
text-align:left;
}
.notifications-list{
list-style:none;
padding:0;
margin:.2rem 0 .6rem;
display:flex;
flex-direction:column;
gap:.35rem;
align-items:stretch;
width:100%;
flex:1 1 auto;
min-height:0;
max-height:420px;
overflow-y:auto;
overscroll-behavior:contain;
padding-right:.15rem;
}
.notification-item{
font-size:.88rem;
color:#e2e8f0;
text-align:left;
width:100%;
padding:.45rem .55rem;
border-radius:10px;
border:1px solid rgba(148,163,184,.18);
background:rgba(15,23,42,.7);
box-shadow:0 6px 16px rgba(15,23,42,.25);
line-height:1.35;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:.5rem;
}
.notification-item-text{
flex:1 1 auto;
min-width:0;
overflow-wrap:anywhere;
display:flex;
flex-direction:column;
gap:.18rem;
}
.notification-item-message{
display:block;
}
.notification-item-time{
display:block;
font-size:.72rem;
color:#94a3b8;
line-height:1.1;
}
.notification-clear-btn{
border:none;
background:transparent;
color:#94a3b8;
width:18px;
height:18px;
padding:0;
border-radius:999px;
font-size:.92rem;
line-height:1;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
flex:0 0 auto;
}
.notification-clear-btn:hover{
color:#e2e8f0;
background:rgba(148,163,184,.15);
}
.notification-item.accepted{
color:#22c55e;
border-color:rgba(34,197,94,.35);
background:rgba(34,197,94,.08);
}
.notification-item.declined{
color:#f87171;
border-color:rgba(248,113,113,.35);
background:rgba(248,113,113,.08);
}
body[data-theme="light"] .notification-item{
color:#0f172a;
background:transparent;
border-color:rgba(148,163,184,.35);
box-shadow:none;
}
body[data-theme="light"] .notification-clear-btn{
color:#64748b;
}
body[data-theme="light"] .notification-clear-btn:hover{
color:#0f172a;
background:rgba(148,163,184,.2);
}
body[data-theme="light"] .notification-item-time{
color:#64748b;
}
.file-input-row{
display:flex;
align-items:center;
gap:.6rem;
padding:.45rem .7rem;
border-radius:14px;
border:1px solid var(--input-border);
background:var(--input-bg);
min-height:56px;
}
.file-input-native{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
.file-input-btn{
background:#1f2937;
color:#f8fafc;
border-radius:10px;
padding:.35rem .9rem;
font-weight:600;
font-size:.82rem;
cursor:pointer;
border:1px solid rgba(148,163,184,.25);
line-height:1.1;
align-self:center;
display:inline-flex;
align-items:center;
}
.file-input-name{
font-size:.85rem;
color:#94a3b8;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
flex:1 1 auto;
}
body[data-theme="light"] .file-input-row{
background:#fff;
border-color:#d1d5db;
}
body[data-theme="light"] .file-input-btn{
background:#f1f5f9;
color:#0f172a;
border-color:#cbd5f5;
}
body[data-theme="light"] .file-input-name{
color:#6b7280;
}
.pending-empty-message{
margin-top:.85rem;
margin-left:.8rem;
}
body[data-theme="light"] .notification-item.accepted{
color:#15803d;
}
body[data-theme="light"] .notification-item.declined{
color:#b91c1c;
}
.debate-invite-toast-host{
position:fixed;
right:20px;
top:20px;
z-index:9999;
display:flex;
flex-direction:column;
gap:.75rem;
pointer-events:none;
}
.debate-invite-toast{
  pointer-events:auto;
  background:#0f172a;
  border:1px solid rgba(148,163,184,.25);
border-radius:16px;
padding:.9rem 1rem;
min-width:240px;
max-width:320px;
color:#f8fafc;
box-shadow:0 18px 40px rgba(15,23,42,.35);
  display:flex;
  align-items:center;
  gap:.75rem;
  animation:toastSlideIn var(--motion-mid) var(--easing-smooth);
}
.debate-invite-text{
font-size:.9rem;
line-height:1.35;
flex:1;
}
.debate-invite-body{
display:flex;
flex-direction:column;
gap:.08rem;
min-width:0;
flex:1;
}
.debate-invite-title{
font-size:.88rem;
font-weight:700;
line-height:1.25;
color:inherit;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.debate-invite-subtext{
font-size:.78rem;
line-height:1.2;
opacity:.82;
}
.debate-invite-avatar{
width:34px;
height:34px;
border-radius:999px;
border:1px solid rgba(148,163,184,.35);
background:rgba(148,163,184,.18);
color:#f8fafc;
flex:0 0 auto;
display:flex;
align-items:center;
justify-content:center;
font-size:.82rem;
font-weight:700;
overflow:hidden;
}
.debate-invite-avatar img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.debate-invite-toast.toast-join{
border-color:rgba(59,130,246,.45);
}
.debate-invite-toast.toast-leave{
border-color:rgba(148,163,184,.32);
}
.debate-invite-actions{
display:flex;
gap:.35rem;
}
.debate-invite-btn{
width:28px;
height:28px;
border-radius:999px;
border:none;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:.95rem;
font-weight:700;
cursor:pointer;
}
.debate-invite-btn.accept{
background:#15803d;
color:#f8fafc;
}
.debate-invite-btn.decline{
background:#991b1b;
color:#f8fafc;
}
body[data-theme="light"] .debate-invite-toast{
background:#ffffff;
border-color:#e2e8f0;
color:#0f172a;
box-shadow:0 18px 36px rgba(15,23,42,.12);
}
body[data-theme="light"] .debate-invite-avatar{
border-color:#cbd5e1;
background:#eef2ff;
color:#1e293b;
}
body[data-theme="light"] .debate-invite-toast.toast-join{
border-color:rgba(37,99,235,.28);
}
body[data-theme="light"] .debate-invite-toast.toast-leave{
border-color:rgba(148,163,184,.42);
}
body[data-theme="light"] .debate-invite-btn.decline{
background:#991b1b;
color:#f8fafc;
}
.friends-list{
display:flex;
flex-direction:column;
gap:.6rem;
max-height:220px;
overflow-y:auto;
}
.friend-item{
display:flex;
align-items:center;
gap:.45rem;
margin-left:0;
position:relative;
}
.friend-item.pending-row{
gap:.35rem;
}
.friend-item.pending-row .friend-name{
flex:1;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.friend-item.pending-row .friend-name.friend-name-compact{
font-size:.9rem;
}
.friend-item.pending-row .friend-actions{
margin-left:auto;
flex-shrink:0;
display:flex;
gap:.35rem;
}
.friend-item .friend-avatar{
width:36px;
height:36px;
border-radius:50%;
border:2px solid rgba(255,255,255,.12);
background:#1b1d24;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
font-weight:600;
flex-shrink:0;
}
.friend-item .friend-avatar img{
width:100%;
height:100%;
object-fit:cover;
}
.friend-name{
font-size:.9rem;
color:#1f2933;
}
body:not([data-theme="light"]) .friend-name{
color:#e5e7eb;
}
.friend-name.friend-name-compact{
font-size:.78rem;
}
.friend-note{
font-size:.8rem;
color:#475569;
}
body:not([data-theme="light"]) .friend-note{
color:#9aa3b2;
}
.friend-menu-btn{
margin-left:auto;
background:none;
border:none;
color:#475569;
cursor:pointer;
padding:0 .35rem;
font-size:1.1rem;
line-height:1;
display:inline-flex;
align-items:center;
justify-content:center;
min-width:28px;
min-height:28px;
}
body:not([data-theme="light"]) .friend-menu-btn{
color:#94a3b8;
}
.friend-action-menu{
position:fixed;
min-width:110px;
background:var(--menu-bg);
color:var(--text);
border:1px solid var(--menu-border);
border-radius:10px;
box-shadow:0 12px 30px rgba(0,0,0,.35);
padding:.25rem 0;
z-index:9999;
}
.friend-action-menu[hidden]{ display:none; }
.friend-action-menu button{
width:100%;
background:transparent;
border:none;
padding:.45rem .75rem;
text-align:left;
font-weight:600;
cursor:pointer;
font-size:.9rem;
}
.friend-action-menu button:hover{
background:rgba(255,255,255,.08);
}
.friend-action-menu button.danger{
color:#b91c1c;
}
body[data-theme="light"] .friend-action-menu{
box-shadow:0 12px 30px rgba(15,23,42,.15);
}
body[data-theme="light"] .friend-action-menu button:hover{
background:rgba(0,0,0,.05);
}
.removed-friends-panel{
margin-top:.85rem;
}
.removed-toggle{
width:100%;
background:transparent;
border:none;
border-radius:0;
padding:.16rem .1rem;
color:#dbeafe;
display:flex;
align-items:center;
justify-content:space-between;
cursor:pointer;
font-weight:700;
font-size:.85rem;
}
.removed-toggle:hover{
color:#fff;
}
.removed-list{
margin-top:.35rem;
border:none;
border-radius:10px;
padding:.25rem 0 0;
}
.removed-item .friend-name{
color:#e5e7eb;
font-size:.9rem;
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
flex:1 1 auto;
min-width:0;
}
.removed-row{
display:flex;
align-items:center;
gap:.5rem;
min-width:0;
width:100%;
}
.removed-actions{
margin-left:auto;
flex:0 0 auto;
}
.removed-content{
flex:1 1 auto;
min-width:0;
}
.removed-status{
display:inline-block;
font-size:.68rem;
color:#cbd5e1;
background:rgba(255,255,255,.08);
border-radius:8px;
padding:.14rem .45rem;
text-transform:capitalize;
line-height:1.15;
}
.removed-item{
padding-bottom:.55rem;
margin-bottom:.55rem;
border-bottom:1px solid var(--line);
}
.removed-item:last-child{
border-bottom:none;
margin-bottom:0;
padding-bottom:0;
}
.removed-add-btn{
border:none;
background:#374151;
color:#f8fafc;
font-weight:700;
border-radius:999px;
padding:.22rem .72rem;
cursor:pointer;
transition:background .15s ease, transform .15s ease;
font-size:.8rem;
line-height:1.1;
min-width:78px;
white-space:nowrap;
}
.removed-add-btn:hover{
background:#2c3542;
transform:translateY(-1px);
}
.friend-confirm-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.6);
display:flex;
align-items:center;
justify-content:center;
z-index:10000;
padding:1rem;
backdrop-filter:blur(6px);
}
.friend-confirm-overlay[hidden]{ display:none; }
.friend-confirm-card{
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
border-radius:14px;
padding:1rem 1.1rem .9rem;
width:min(340px, 100%);
box-shadow:0 18px 45px rgba(0,0,0,.35);
}
body:not([data-theme="light"]) .friend-confirm-card{
background:#121212;
border-color:#1f1f1f;
color:#e5e7eb;
box-shadow:0 18px 45px rgba(0,0,0,.6);
}
.friend-confirm-body{
margin:0 0 .9rem;
color:#1f2937;
font-size:.95rem;
}
body:not([data-theme="light"]) .friend-confirm-body{
color:#cbd5e1;
}
.friend-confirm-actions{
display:flex;
justify-content:flex-end;
gap:.5rem;
}
.friend-confirm-btn{
border-radius:999px;
padding:.4rem 1rem;
font-weight:700;
cursor:pointer;
border:1px solid transparent;
}
.friend-confirm-btn.secondary{
background:#ffffff;
color:#0f172a;
border:1px solid #cbd5e1;
}
body:not([data-theme="light"]) .friend-confirm-btn.secondary{
background:#1f1f1f;
color:#e5e7eb;
border-color:#334155;
}
.friend-confirm-btn.danger{
background:#ef4444;
color:#0b0b0f;
border-color:#ef4444;
}
.friend-confirm-btn.secondary:hover,
.friend-confirm-btn.secondary:focus-visible{
background:#e2e8f0;
color:#0f172a;
border-color:#94a3b8;
}
body:not([data-theme="light"]) .friend-confirm-btn.secondary:hover,
body:not([data-theme="light"]) .friend-confirm-btn.secondary:focus-visible{
background:#2b2b2b;
color:#f8fafc;
border-color:#475569;
}
.friend-confirm-btn.danger:hover,
.friend-confirm-btn.danger:focus-visible{
background:#dc2626;
color:#fff;
border-color:#dc2626;
box-shadow:0 8px 18px rgba(220,38,38,.24);
transform:translateY(-1px);
}
.friend-actions{
margin-left:auto;
display:flex;
align-items:center;
gap:.3rem;
}
.friend-action-btn{
width:28px;
height:28px;
border-radius:50%;
border:none;
background:#374151;
color:#f8fafc;
font-weight:700;
font-size:.8rem;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
}
.friend-action-btn:disabled{
opacity:.5;
cursor:not-allowed;
}
.friend-decline-btn{
background:#991b1b;
}
.friend-accept-btn{
background:#15803d;
}
.settings-profile-avatar{
  width:70px;
  height:70px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.12);
  background:#0f172a;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  font-weight:600;
  font-size:1.2rem;
  color:#fff;
}
.settings-profile-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.settings-profile-edit-btn{
  border:none;
  border-radius:999px;
  padding:.4rem 1rem;
  font-weight:600;
  background:#2563eb;
  color:#fff;
  cursor:pointer;
  margin-top:.2rem;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.settings-profile-edit-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(37,99,235,.3);
  opacity:.95;
}
.settings-menu-username{ font-weight:600; color:#fff; }
.settings-menu-email{ font-size:.82rem; color:#8c8c8c; }
.settings-profile-form{
  display:flex;
  flex-direction:column;
  gap:.95rem;
}
.profile-avatar-uploader{
  display:flex;
  align-items:center;
  gap:1rem;
}
.profile-avatar-preview{
  width:96px;
  height:96px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.18);
  background:var(--card-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  transition:border .2s ease, box-shadow .2s ease, transform .2s ease;
}
.profile-avatar-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.profile-avatar-preview .fallback{
  font-weight:600;
  font-size:1.3rem;
  color:#f8fafc;
  letter-spacing:.02em;
}
.profile-avatar-preview .avatar-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.58);
  color:#fff;
  font-size:1.35rem;
  opacity:0;
  transform:scale(.92);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.profile-avatar-preview:hover,
.profile-avatar-preview:focus-visible{
  border-color:#94a3b8;
  box-shadow:0 0 0 3px rgba(148,163,184,.32);
  outline:none;
}
.profile-avatar-preview:hover .avatar-overlay,
.profile-avatar-preview:focus-visible .avatar-overlay{
  opacity:1;
  transform:scale(1);
}
.profile-avatar-help{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  font-size:.85rem;
  color:var(--muted);
  max-width:220px;
}
.avatar-cropper{
  margin-top:.75rem;
}
.avatar-cropper[hidden]{ display:none; }
.avatar-cropper-frame{
  width:180px;
  height:180px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  background:#0f172a;
  overflow:hidden;
  position:relative;
  cursor:grab;
}
.avatar-cropper-frame:active{ cursor:grabbing; }
.avatar-cropper-frame img{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  transform-origin:center;
  user-select:none;
  -webkit-user-drag:none;
}
.avatar-cropper-controls{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-top:.55rem;
  font-size:.85rem;
  color:var(--muted);
  width:100%;
}
.avatar-cropper-controls input[type="range"]{
  flex:1;
  min-width:0;
}
.profile-avatar-help strong{
  color:var(--text);
  font-size:.92rem;
}
.profile-avatar-error{
  font-size:.8rem;
  color:#f87171;
  margin-top:.35rem;
}
.profile-form-error{
  font-size:.9rem;
  color:#f87171;
  margin-top:.35rem;
}
.account-settings-success{
  font-size:.9rem;
  color:#16a34a;
  margin-top:.35rem;
}
body:not([data-theme="light"]) .account-settings-success{
  color:#4ade80;
}
.account-settings-section{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.account-settings-divider{
  border-top:1px solid rgba(148,163,184,.28);
  margin:.65rem 0;
}
.account-settings-section-title{
  margin:0;
  font-size:.92rem;
  font-weight:600;
  color:#475569;
}
body:not([data-theme="light"]) .account-settings-section-title{
  color:#cbd5e1;
}
.account-settings-inline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.65rem .85rem;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(248,250,252,.7);
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body:not([data-theme="light"]) .account-settings-inline{
  background:#0f172a;
  border-color:#1f2937;
}
.account-settings-value{
  font-weight:600;
  color:#0f172a;
  font-size:.95rem;
  word-break:break-all;
}
body:not([data-theme="light"]) .account-settings-value{
  color:#e2e8f0;
}
.account-settings-inline .modal-btn{
  padding:.35rem .9rem;
  font-size:.85rem;
}
.account-settings-modal .modal-body-text{
  color:#64748b;
  font-size:.92rem;
}
body:not([data-theme="light"]) .account-settings-modal .modal-body-text{
  color:#94a3b8;
}
.account-settings-modal .account-settings-section label{
  margin-top:.4rem;
  font-size:.92rem;
  color:#475569;
}
body:not([data-theme="light"]) .account-settings-modal .account-settings-section label{
  color:#cbd5e1;
}
.account-settings-modal .account-settings-section .form-control{
  border-radius:14px;
  border:1px solid rgba(148,163,184,.4);
  box-shadow:none;
}
body:not([data-theme="light"]) .account-settings-modal .account-settings-section .form-control{
  border-color:#334155;
  background:#0f172a;
  color:#e2e8f0;
}
.account-settings-modal .modal-actions{
  margin-top:.6rem;
}
.account-settings-modal .modal-close-btn{
  border-radius:10px;
  color:#475569;
  transition:background .2s ease, color .2s ease;
}
.account-settings-modal .modal-close-btn:hover{
  background:#e2e8f0;
  color:#0f172a;
}
body:not([data-theme="light"]) .account-settings-modal .modal-close-btn{
  color:#cbd5e1;
}
body:not([data-theme="light"]) .account-settings-modal .modal-close-btn:hover{
  background:#334155;
  color:#f8fafc;
}
.account-settings-modal .modal-actions .modal-btn{
  padding:.45rem 1.1rem;
}
.account-settings-modal .modal-btn{
  background:rgba(148,163,184,.24);
  color:#0f172a;
  transition:background .2s ease, color .2s ease;
}
.account-settings-modal .modal-btn:hover{
  background:#e2e8f0;
  color:#0f172a;
}
body:not([data-theme="light"]) .account-settings-modal .modal-btn{
  background:#1f2937;
  color:#e2e8f0;
}
body:not([data-theme="light"]) .account-settings-modal .modal-btn:hover{
  background:#334155;
  color:#f8fafc;
}
.account-settings-modal .modal-btn.danger{
  background:#dc2626;
  color:#fff;
}
.account-settings-modal .modal-btn.danger:hover{
  background:#ef4444;
  color:#fff;
}
#deleteAccountOpen{
  background:#dc2626 !important;
  color:#fff !important;
  border-color:#dc2626 !important;
}
#deleteAccountOpen:hover,
#deleteAccountOpen:focus-visible{
  background:#b91c1c !important;
  color:#fff !important;
  border-color:#b91c1c !important;
  box-shadow:0 8px 18px rgba(185,28,28,.28);
  transform:translateY(-1px);
}
.delete-account-modal{
  width:min(560px, calc(100% - 40px));
  padding:1.05rem 1.05rem 1rem;
}
.delete-account-step{
  display:flex;
  flex-direction:column;
  gap:.72rem;
}
.delete-account-modal h3{
  font-size:1.55rem;
  font-weight:800;
  letter-spacing:-.01em;
  margin:0;
  line-height:1.18;
}
.delete-account-modal .modal-body-text{
  color:#cbd5e1;
  font-size:1.02rem;
  line-height:1.5;
  margin:0;
}
.delete-account-danger-note{
  border:1px solid rgba(239,68,68,.35);
  background:linear-gradient(180deg, rgba(239,68,68,.18), rgba(239,68,68,.08));
  border-radius:14px;
  padding:.75rem .85rem;
  color:#fecaca;
  font-weight:600;
  font-size:.9rem;
}
.delete-account-question{
  margin:.15rem 0 0;
  font-size:1.08rem;
  font-weight:700;
  color:#f8fafc;
}
.delete-reason-list{
  display:flex;
  flex-direction:column;
  gap:.58rem;
  margin-top:0;
}
.delete-reason-option{
  display:block;
  margin:0;
  cursor:pointer;
}
.delete-reason-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.delete-reason-copy{
  display:flex;
  align-items:center;
  width:100%;
  border:1px solid rgba(148,163,184,.3);
  background:rgba(15,23,42,.46);
  color:#e2e8f0;
  border-radius:14px;
  padding:.74rem .86rem;
  font-size:1rem;
  font-weight:600;
  transition:border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.delete-reason-option:hover .delete-reason-copy{
  border-color:rgba(96,165,250,.65);
  background:rgba(30,41,59,.76);
  transform:translateY(-1px);
}
.delete-reason-option input:checked + .delete-reason-copy{
  border-color:rgba(239,68,68,.8);
  background:rgba(127,29,29,.5);
  box-shadow:0 0 0 2px rgba(239,68,68,.2);
  color:#fff;
}
.delete-reason-other{
  margin-left:.2rem;
  margin-top:.12rem;
}
.delete-account-form{
  display:flex;
  flex-direction:column;
  gap:.72rem;
}
.delete-account-form-title{
  margin:0;
  font-size:1.35rem;
  font-weight:800;
  color:#f8fafc;
}
.delete-account-form-helper{
  margin:0;
  color:#cbd5e1;
  line-height:1.45;
}
body[data-theme="light"] .delete-account-modal .modal-body-text{
  color:#475569;
}
body[data-theme="light"] .delete-account-danger-note{
  border-color:rgba(220,38,38,.26);
  background:linear-gradient(180deg, rgba(254,226,226,.92), rgba(254,242,242,.84));
  color:#991b1b;
}
body[data-theme="light"] .delete-account-question{
  color:#0f172a;
}
body[data-theme="light"] .delete-reason-copy{
  border-color:#dbe4f0;
  background:#fff;
  color:#0f172a;
}
body[data-theme="light"] .delete-reason-option:hover .delete-reason-copy{
  border-color:#93c5fd;
  background:#eff6ff;
}
body[data-theme="light"] .delete-reason-option input:checked + .delete-reason-copy{
  border-color:#ef4444;
  background:#fff1f2;
  box-shadow:0 0 0 2px rgba(239,68,68,.12);
  color:#7f1d1d;
}
body[data-theme="light"] .delete-account-form-title{
  color:#0f172a;
}
body[data-theme="light"] .delete-account-form-helper{
  color:#475569;
}
body[data-theme="light"] .profile-avatar-error{ color:#b91c1c; }
body[data-theme="light"] .profile-avatar-preview{
  border-color:rgba(15,23,42,.12);
  background:#e2e8f0;
}
body[data-theme="light"] .profile-avatar-preview .fallback{
  color:#0f172a;
}
body[data-theme="light"] .profile-avatar-preview:hover,
body[data-theme="light"] .profile-avatar-preview:focus-visible{
  border-color:#4f46e5;
  box-shadow:0 0 0 3px rgba(79,70,229,.22);
}
.usage-panel .usage-close,
.chat-modal .modal-close-btn,
.sidebar-close-btn,
.snippet-toast .snippet-toast-close{
  background:transparent;
  border:none;
  color:#9aa3b2;
  font-size:0;
  width:24px;
  height:24px;
  border-radius:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  line-height:0;
  padding:0;
  flex:0 0 auto;
  position:relative;
}
.usage-panel .usage-close::before,
.chat-modal .modal-close-btn::before,
.sidebar-close-btn::before,
.snippet-toast .snippet-toast-close::before{
  content:"×";
  font-size:1.35rem;
  font-weight:700;
  line-height:1;
  transform:none;
  display:block;
}
.usage-panel .usage-close:hover,
.chat-modal .modal-close-btn:hover,
.sidebar-close-btn:hover,
.snippet-toast .snippet-toast-close:hover{
  background:transparent;
  color:#f8fafc;
}
.usage-panel .usage-close:focus-visible,
.chat-modal .modal-close-btn:focus-visible,
.sidebar-close-btn:focus-visible,
.snippet-toast .snippet-toast-close:focus-visible{
  outline:none;
  box-shadow:none;
}
.usage-panel .usage-clear{
  background:transparent;
  border:none;
  color:#f87171;
  padding:.22rem .45rem;
  border-radius:8px;
  font-size:.72rem;
  font-weight:600;
  cursor:pointer;
  line-height:1;
  transition:background .15s ease, color .15s ease;
}
.usage-panel .usage-clear:hover{
  background:rgba(248,113,113,.14);
  color:#fca5a5;
}
body[data-theme="light"] .usage-panel .usage-clear{
  color:#dc2626;
}
body[data-theme="light"] .usage-panel .usage-clear:hover{
  background:rgba(220,38,38,.12);
  color:#b91c1c;
}
.settings-upgrade-link{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid #2d2d2d;
  border-radius:12px;
  padding:.52rem .7rem;
  color:#f8fafc;
  background:#1a1a1a;
  text-decoration:none;
  font-weight:600;
  transition:border .15s ease, background .15s ease, color .15s ease;
}
.settings-upgrade-link:visited{
  color:inherit;
}
.settings-upgrade-link.usage-trigger{
  background:#1a1a1a;
  border-color:#2d2d2d;
  color:#f8fafc;
}
.settings-upgrade-link + .settings-upgrade-link{
  margin-top:.4rem;
}
.settings-upgrade-link + form{ margin-top:.4rem; }
form + .settings-upgrade-link{ margin-top:.4rem; }
form + form{ margin-top:.4rem; }
.settings-upgrade-link + .notifications-toggle-wrap{ margin-top:.4rem; }
.notifications-toggle-wrap + .settings-upgrade-link{ margin-top:.4rem; }
.notifications-toggle-wrap .settings-alert-dot + .settings-upgrade-link{ margin-top:.4rem; }
.settings-upgrade-link ion-icon{ font-size:1.1rem; }
.settings-upgrade-link:hover{
  border-color:#3a3a3a;
  background:#242424;
  color:#f8fafc;
}
.settings-feedback-link:hover{
  border-color:#3a3a3a;
  background:#242424;
  color:#f8fafc;
}
.settings-feedback-link:hover ion-icon{
  color:#f8fafc;
}
.usage-panel{
  position:fixed;
  top:16px;
  left:16px;
  width:min(360px, calc(100vw - 32px));
  max-width:calc(100vw - 32px);
  max-height:calc(100dvh - 32px);
  background:#0b0b0b;
  border:1px solid #222;
  border-radius:16px;
  box-shadow:0 18px 34px rgba(0,0,0,.6);
  display:flex;
  flex-direction:column;
  z-index:1200;
  overflow:auto;
  padding:.75rem;
  padding-bottom:calc(.75rem + var(--safe-bottom));
  gap:.55rem;
}
.usage-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.55rem;
  padding:0 0 .45rem;
  border-bottom:1px solid rgba(148,163,184,.2);
  min-height:28px;
}
.usage-panel-title{
  margin:0;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#9aa3b2;
}
#usageMenu{
  width:min(300px, calc(100vw - 32px));
  gap:.4rem;
}
#friendsMenu{
  width:min(320px, calc(100vw - 32px));
  gap:.5rem;
}
#notificationsMenu{
  gap:.45rem;
  max-height:min(540px, calc(100dvh - 32px));
  overflow:hidden;
}
#personalizationMenu{
  gap:.45rem;
}
body[data-theme="light"] .usage-panel{
  background:#fff;
  border-color:#dfe5f3;
  color:#111;
}
.usage-panel[hidden]{ display:none !important; }
.usage-panel .usage-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  grid-template-areas:
    "label metric"
    "reset reset";
  align-items:start;
  font-size:.88rem;
  border:1px solid var(--line);
  border-radius:12px;
  padding:.7rem .75rem;
  background:var(--bg);
  gap:.18rem .8rem;
}
.usage-panel .usage-row > div:first-child{
  grid-area:label;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:.06rem;
}
.usage-panel .usage-row > div:first-child strong{
  font-size:1.02rem;
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.01em;
}
.usage-panel .usage-row > div:first-child small{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin-top:0;
}
.usage-panel .usage-metric{
  grid-area:metric;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  text-align:left;
  min-width:88px;
  padding:.28rem .58rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(148,163,184,.10);
  font-weight:700;
  line-height:1.15;
  white-space:nowrap;
}
.usage-panel small{
  color:var(--muted);
  font-size:.75rem;
  display:block;
  margin-top:.1rem;
}
.usage-panel .usage-row .usage-metric small{
  display:none;
}
.usage-panel .usage-row .usage-reset{
  grid-area:reset;
  margin-top:.18rem;
  padding-top:.38rem;
  border-top:1px dashed var(--line);
  font-size:.78rem;
  color:var(--muted);
  text-align:left;
  letter-spacing:.01em;
}
.usage-panel ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.usage-panel .settings-anytext{
  margin:0 0 .45rem;
  line-height:1.25;
}
.usage-panel .friends-panel{
  padding:.65rem .7rem;
  margin-top:0;
  border:none;
  border-radius:12px;
  background:rgba(15,23,42,.22);
}
.usage-panel .friends-add-row{
  margin-bottom:.2rem;
}
.usage-panel .friends-feedback{
  margin:0;
}
body[data-theme="light"] .usage-panel .friends-panel{
  background:rgba(148,163,184,.12);
}
body[data-theme="light"] .usage-panel-header{
  border-bottom-color:rgba(148,163,184,.35);
}
body[data-theme="light"] .usage-panel-title{
  color:#64748b;
}
body[data-theme="light"] .usage-panel .usage-close,
body[data-theme="light"] .chat-modal .modal-close-btn,
body[data-theme="light"] .sidebar-close-btn,
body[data-theme="light"] .snippet-toast .snippet-toast-close{
  color:#0f172a;
  background:transparent;
}
body[data-theme="light"] .usage-panel .usage-close:hover,
body[data-theme="light"] .chat-modal .modal-close-btn:hover,
body[data-theme="light"] .sidebar-close-btn:hover,
body[data-theme="light"] .snippet-toast .snippet-toast-close:hover{
  background:transparent;
  color:#111827;
}
body[data-theme="light"] .usage-panel .usage-metric{
  background:rgba(37,99,235,.08);
  border-color:rgba(148,163,184,.45);
  color:#0f172a;
}
#notificationsMenu .pending-empty-message{
  text-align:left;
  margin-left:0;
  padding-left:0;
}
.images-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(90px, 1fr));
  gap:.5rem;
  width:100%;
}
.images-grid .image-card{
  position:relative;
  width:100%;
  padding-bottom:100%;
  border-radius:8px;
  overflow:hidden;
  background:var(--bg);
  border:1px solid var(--line);
  cursor:pointer;
}
.images-grid .image-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.images-grid .image-card:hover{
  border-color:#4f46e5;
  box-shadow:0 8px 16px rgba(0,0,0,.25);
}
#personalizationMenu{
  text-align:left;
}
#personalizationMenu .personalization-body{
  margin-top:0;
}
#personalizationMenu label[for="customInstructionsField"]{
  margin:0 0 .35rem;
  display:block;
  font-size:.92rem;
  font-weight:700;
}
#personalizationMenu #customInstructionsField{
  margin-bottom:.45rem;
  min-height:120px;
  resize:vertical;
  border-radius:14px;
  padding:.7rem .8rem;
  line-height:1.42;
  font-size:.95rem;
  border:1px solid rgba(148,163,184,.35);
  background:#0f172a;
  color:#e5e7eb;
}
#personalizationMenu #customInstructionsField::placeholder{
  color:#94a3b8;
}
#personalizationMenu #customInstructionsField:focus{
  border-color:#93c5fd;
  box-shadow:0 0 0 3px rgba(147,197,253,.22);
  outline:none;
}
.custom-instructions-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  margin-top:.15rem;
}
.custom-instructions-note{
  margin:0;
  font-size:.8rem;
  color:#94a3b8;
}
.custom-instructions-count{
  margin:0;
  font-size:.8rem;
  font-weight:700;
  color:#cbd5e1;
  letter-spacing:.02em;
}
.custom-instructions-count.limit{
  color:#fca5a5;
}
.usage-panel ul li{
  font-size:.85rem;
  color:var(--muted);
}
.settings-customization{
  border:1px solid #1d1d1d;
  border-radius:12px;
  padding:.5rem .6rem;
  background:#101010;
  display:flex;
  flex-direction:column;
  gap:.45rem;
}
.settings-customization-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid #222;
  border-radius:10px;
  padding:.4rem .6rem;
  color:#e6e6e6;
  cursor:pointer;
  transition:border .15s ease, background .15s ease;
  background:#121212;
}
.settings-customization-option ion-icon{
  font-size:1.1rem;
}
.settings-anytext{ font-size:.85rem; color:#a0a0a0; }
.settings-customization-option:hover{
  border-color:#444;
  background:#151515;
}
.settings-customization-option.active{
  border-color:#fff;
  background:#1f1f1f;
}
body[data-theme="light"] .settings-menu{
  background:#ffffff;
  border-color:#d9dde6;
  box-shadow:0 18px 34px rgba(15,23,42,.18);
}
body[data-theme="light"] .settings-customization-option{
  color:#0f172a;
  border-color:#d5dae5;
  background:#f7f9fc;
}
body[data-theme="light"] .settings-customization-option:hover{
  border-color:#94a3b8;
  background:#e2e8f0;
}
body[data-theme="light"] .settings-customization-option.active{
  border-color:#0f172a;
  background:#dbeafe;
}
body[data-theme="light"] #personalizationMenu #customInstructionsField{
  background:#ffffff;
  color:#0f172a;
  border-color:#cbd5e1;
}
body[data-theme="light"] #personalizationMenu #customInstructionsField::placeholder{
  color:#64748b;
}
body[data-theme="light"] #personalizationMenu #customInstructionsField:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(96,165,250,.24);
}
body[data-theme="light"] .custom-instructions-note{
  color:#64748b;
}
body[data-theme="light"] .custom-instructions-count{
  color:#334155;
}

body[data-theme="light"] .chat-menu {
  box-shadow:0 6px 20px rgba(15,23,42,.15);
}
body[data-theme="light"] .chat-menu button,
body[data-theme="light"] .chat-menu form button{
  color:#1f2933;
}
body[data-theme="light"] .chat-menu button:hover,
body[data-theme="light"] .chat-menu form button:hover{
  background:#edf2f7;
  color:#0f172a;
}
body[data-theme="light"] .hover-menu button:hover{
  background:#edf2f7;
  color:#0f172a;
}
body[data-theme="light"] .chat-menu .chat-delete-btn:hover,
body[data-theme="light"] .chat-menu .chat-delete-btn:focus-visible{
  background:rgba(239,68,68,.2);
  color:#b91c1c;
}
body[data-theme="light"] .hover-menu .chat-delete-btn:hover,
body[data-theme="light"] .hover-menu .chat-delete-btn:focus-visible{
  background:rgba(239,68,68,.2);
  color:#b91c1c;
}

body[data-theme="light"] .chat-item small { color:#4b5563; }
body[data-theme="light"] .navbar{
  background:#d4d8e1 !important;
  border-bottom-color:#c4c8d2;
}
body[data-theme="light"] .navbar .navbar-brand,
body[data-theme="light"] .navbar .text-white,
body[data-theme="light"] .nav-settings span{
  color:#0f172a !important;
}
body[data-theme="light"] .settings-btn{
  border-color:#9ca3b5;
  background:#c4c8d2;
  color:#0f172a;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
body[data-theme="light"] .settings-btn:hover{
  background:#b6bac4;
  border-color:#7b8294;
}
body[data-theme="light"] .settings-btn ion-icon{ color:#0f172a; font-size:1.35rem; }
body[data-theme="light"] .settings-menu-heading{ color:#475569; }
body[data-theme="light"] .settings-upgrade-link{
  border-color:#d8dee9;
  color:#111;
  background:#fff;
}
body[data-theme="light"] .settings-upgrade-link:hover{
  border-color:#94a3b8;
  background:rgba(148,163,184,.15);
  color:#111;
}
body[data-theme="light"] .settings-feedback-link:hover{
  border-color:#94a3b8;
  background:rgba(148,163,184,.15);
  color:#0f172a;
}
body[data-theme="light"] .settings-feedback-link:hover ion-icon{
  color:#0f172a;
}
body[data-theme="light"] .settings-menu-user{
  background:transparent;
  border-color:transparent;
  color:#1f2933;
}
body[data-theme="light"] .settings-profile-avatar{
  background:#dbeafe;
  border-color:rgba(15,23,42,.18);
  color:#0f172a;
}
body[data-theme="light"] .settings-profile-edit-btn{
  background:#111827;
  color:#fff;
}
body[data-theme="light"] .settings-profile-edit-btn:hover{
  box-shadow:0 10px 20px rgba(15,23,42,.25);
}
body[data-theme="light"] .settings-menu-username{ color:#111; }
body[data-theme="light"] .settings-menu-email{ color:#475569; }
body[data-theme="light"] .settings-customization{
  background:#f8fafc;
  border-color:#d2d6e0;
}
body[data-theme="light"] .removed-toggle{
  color:#0f172a;
}
body[data-theme="light"] .removed-toggle:hover{
  color:#111827;
}
body[data-theme="light"] .removed-item .friend-name{
  color:#111827;
}
body[data-theme="light"] .removed-status{
  color:#334155;
  background:#e2e8f0;
}
body[data-theme="light"] .removed-add-btn{
  background:#374151;
  color:#f8fafc;
}
body[data-theme="light"] .removed-add-btn:hover{
  background:#2c3542;
}
body[data-theme="light"] #sidebar .chat-menu-toggle{
  color:#000;
}
body[data-theme="light"] #sidebar .chat-menu-toggle span{
  background:#000;
}
body[data-theme="light"] #sidebar .chat-menu-toggle:hover,
body[data-theme="light"] #sidebar .chat-menu-toggle:focus-visible{
  background:rgba(15,23,42,.08);
  color:#111827;
}
body[data-theme="light"] #sidebar{
  background:var(--panel);
  border-right:1px solid #cbd5f5;
}
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(3px);
  z-index:2200;
  opacity:0;
  animation:fadeIn var(--motion-mid) ease forwards;
}
.chat-modal{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  border-radius:24px;
  padding:1.2rem;
  width:min(420px, calc(100% - 40px));
  box-shadow:0 30px 80px rgba(15,23,42,.45);
  z-index:2210;
  border:1px solid rgba(15,23,42,.08);
  font-family:'Inter',system-ui,sans-serif;
  opacity:0;
  transform:translate(-50%,-50%) scale(.97);
  animation:modalIn var(--motion-mid) var(--easing-smooth) forwards;
}
.chat-modal.ui-closing{
  animation:modalOut var(--motion-fast) ease forwards;
}
.modal-backdrop.ui-closing{
  animation:fadeOut var(--motion-fast) ease forwards;
}
.settings-menu,
.search-menu,
.chat-menu,
.hover-menu,
.friend-action-menu,
.chat-add-menu,
.chat-members-menu,
.member-action-menu,
.plus-menu,
.model-menu,
.size-menu{
  transform-origin:top right;
  will-change:transform, opacity;
}
.settings-menu:not([hidden]),
.search-menu:not([hidden]),
.chat-menu:not([hidden]),
.hover-menu:not([hidden]),
.friend-action-menu:not([hidden]),
.chat-add-menu:not([hidden]),
.chat-members-menu:not([hidden]),
.member-action-menu:not([hidden]),
.plus-menu:not([hidden]),
.model-menu:not([hidden]),
.size-menu:not([hidden]){
  animation:menuPop var(--motion-fast) var(--easing-smooth);
}
#messages .row-user,
#messages .row-assist{
  animation:rowIn var(--motion-mid) var(--easing-smooth);
}
@keyframes fadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes fadeOut{
  from{ opacity:1; }
  to{ opacity:0; }
}
@keyframes modalIn{
  from{ opacity:0; transform:translate(-50%,-50%) scale(.97); }
  to{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}
@keyframes modalOut{
  from{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  to{ opacity:0; transform:translate(-50%,-50%) scale(.98); }
}
@keyframes menuPop{
  from{ opacity:0; transform:translateY(-6px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes toastSlideIn{
  from{ opacity:0; transform:translateY(-10px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes rowIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}
.chat-modal .modal-close-btn{
  position:absolute;
  top:10px;
  right:10px;
}
body:not([data-theme="light"]) .chat-modal{
  background:#121212;
  border-color:#1f1f1f;
  color:#e5e7eb;
  box-shadow:0 30px 80px rgba(0,0,0,.65);
}
.chat-modal h3{
  font-size:1.05rem;
  margin:0;
}
.chat-modal .modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.65rem;
  margin:0 0 .7rem;
  padding:0 0 .55rem;
  border-bottom:1px solid rgba(148,163,184,.26);
}
.chat-modal .modal-head h3{
  font-size:1rem;
  font-weight:700;
  margin:0;
}
.chat-modal .modal-head .modal-close-btn{
  position:static;
  flex:0 0 auto;
}
body:not([data-theme="light"]) .chat-modal .modal-head{
  border-bottom-color:rgba(148,163,184,.22);
}
.chat-modal form{ margin:0; }
.chat-modal label{
  margin-top:.6rem;
  margin-bottom:.25rem;
  display:block;
  font-weight:600;
  color:#4b5563;
}
body:not([data-theme="light"]) .chat-modal label{
  color:#cbd5e1;
}
.chat-modal input.form-control{
  border-radius:16px;
  padding:.6rem 1rem;
  border:1px solid rgba(37,99,235,.4);
  box-shadow:inset 0 0 0 1px rgba(37,99,235,.25);
}
.chat-modal select.form-control,
.chat-modal textarea.form-control{
  border-radius:16px;
  padding:.6rem 1rem;
  border:1px solid rgba(37,99,235,.4);
  box-shadow:inset 0 0 0 1px rgba(37,99,235,.25);
  width:100%;
}
.chat-modal select.form-control{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:10px 6px;
  padding-right:2.25rem;
}
.chat-modal textarea.form-control{
  min-height:120px;
  resize:vertical;
}
body:not([data-theme="light"]) .chat-modal input.form-control{
  background:var(--input-bg);
  color:var(--text);
  border-color:#334155;
  box-shadow:none;
}
body:not([data-theme="light"]) .chat-modal select.form-control,
body:not([data-theme="light"]) .chat-modal textarea.form-control{
  background:var(--input-bg);
  color:var(--text);
  border-color:#334155;
  box-shadow:none;
}
.chat-modal .modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:.55rem;
  margin-top:.9rem;
}
#feedbackModal{
  max-width:520px;
}
#feedbackModal .feedback-file-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  border:1px dashed rgba(148,163,184,.6);
  border-radius:14px;
  padding:.6rem .7rem;
  background:rgba(248,250,252,.65);
}
#feedbackModal .feedback-file-meta{
  min-width:0;
  display:flex;
  align-items:center;
  gap:.45rem;
  color:#64748b;
  font-size:.9rem;
  overflow:hidden;
}
#feedbackModal .feedback-file-meta ion-icon{
  font-size:1.05rem;
  flex:0 0 auto;
}
#feedbackModal .feedback-file-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:block;
}
#feedbackModal .feedback-file-btn{
  border-radius:999px;
  padding:.38rem .92rem;
  margin:0;
  font-weight:700;
  font-size:.84rem;
  white-space:nowrap;
  background:#1f2937;
  color:#f8fafc;
  border:1px solid rgba(148,163,184,.25);
}
body:not([data-theme="light"]) #feedbackModal .feedback-file-card{
  background:rgba(15,23,42,.35);
  border-color:rgba(148,163,184,.45);
}
body:not([data-theme="light"]) #feedbackModal .feedback-file-meta{
  color:#94a3b8;
}
body[data-theme="light"] #feedbackModal .feedback-file-card{
  background:#f8fafc;
  border-color:#cbd5e1;
}
body[data-theme="light"] #feedbackModal .feedback-file-meta{
  color:#64748b;
}
body[data-theme="light"] #feedbackModal .feedback-file-btn{
  background:#0f172a;
  color:#fff;
  border-color:#0f172a;
}
.chat-modal .modal-body-text{
  margin:0;
  color:inherit;
  line-height:1.5;
}
.guest-limit-modal{
  width:min(580px, calc(100% - 34px));
  padding:1.38rem 1.48rem 1.22rem;
}
.guest-limit-head{
  display:flex;
  align-items:center;
  gap:.72rem;
  margin:0 0 .72rem;
}
.guest-limit-icon{
  width:30px;
  height:30px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background:#dbeafe;
  color:#1d4ed8;
  box-shadow:inset 0 0 0 1px rgba(37,99,235,.2);
  padding:0;
}
.guest-limit-icon ion-icon{
  font-size:1.1rem;
  line-height:1;
  display:block;
  transform:none;
}
.guest-limit-title{
  margin:0;
  font-size:1.14rem;
  font-weight:780;
  letter-spacing:.005em;
  line-height:1.34;
  color:#0f172a;
  max-width:42ch;
}
.guest-limit-modal .guest-limit-body{
  margin:0;
  font-size:.96rem;
  line-height:1.62;
  color:#334155;
  max-width:66ch;
}
.guest-limit-modal .guest-limit-body + .guest-limit-body{
  margin-top:.62rem;
}
.guest-limit-modal .guest-limit-body a{
  font-weight:700;
  text-underline-offset:2px;
}
.guest-limit-modal #guestChatLimitText{
  display:flex;
  flex-direction:column;
  gap:.62rem;
}
.guest-limit-modal #guestChatLimitText p{
  margin:0;
}
.guest-limit-modal .modal-actions{
  margin-top:1.08rem;
  justify-content:flex-end;
  gap:.62rem;
  flex-wrap:wrap;
}
.guest-limit-modal .modal-btn{
  min-height:42px;
  padding:.5rem 1.12rem;
  font-size:.93rem;
}
.guest-limit-modal .modal-btn.primary{
  font-weight:700;
}
body:not([data-theme="light"]) .guest-limit-icon{
  background:rgba(37,99,235,.22);
  color:#93c5fd;
  box-shadow:inset 0 0 0 1px rgba(147,197,253,.2);
}
body:not([data-theme="light"]) .guest-limit-title{
  color:#f3f4f6;
}
body:not([data-theme="light"]) .guest-limit-modal .guest-limit-body{
  color:#cbd5e1;
}
@media (max-width: 640px){
  .guest-limit-modal{
    width:min(520px, calc(100% - 16px));
    padding:1.04rem .98rem 1rem;
    border-radius:18px;
  }
  .guest-limit-title{
    font-size:1.01rem;
    max-width:none;
  }
  .guest-limit-modal .guest-limit-body{
    max-width:none;
    font-size:.93rem;
    line-height:1.56;
  }
  .guest-limit-modal .modal-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:.5rem;
  }
  .guest-limit-modal .modal-actions .modal-btn{
    width:100%;
    min-height:46px;
    min-width:0;
    white-space:normal;
    line-height:1.2;
  }
}
.chat-modal .feedback-status{
  margin-top:.6rem;
  font-size:.9rem;
  color:#0f766e;
  border-radius:10px;
  padding:.45rem .6rem;
  background:rgba(13,148,136,.12);
  border:1px solid rgba(13,148,136,.24);
}
.chat-modal .feedback-status.error{
  color:#b91c1c;
  background:rgba(220,38,38,.1);
  border-color:rgba(220,38,38,.24);
}
body:not([data-theme="light"]) .chat-modal .feedback-status{
  background:rgba(15,118,110,.18);
  border-color:rgba(45,212,191,.25);
  color:#5eead4;
}
body:not([data-theme="light"]) .chat-modal .feedback-status.error{
  background:rgba(153,27,27,.2);
  border-color:rgba(248,113,113,.25);
  color:#fca5a5;
}
.modal-btn{
  border:none;
  border-radius:999px;
  padding:.4rem 1.2rem;
  font-weight:600;
  cursor:pointer;
  font-size:.9rem;
  transition:background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.modal-btn.cancel{
  background:rgba(148,163,184,.2);
  color:#111827;
}
body:not([data-theme="light"]) .modal-btn.cancel{
  background:#1f1f1f;
  color:#e5e7eb;
}
.modal-btn.primary{
  background:#2563eb;
  color:#fff;
}
#chatRenameModal .modal-btn.primary{
  background:#0f172a;
  color:#f8fafc;
}
#chatRenameModal .modal-btn.primary:hover{
  background:#121826;
}
body:not([data-theme=light]) #chatRenameModal .modal-btn.primary{
  background:#1d4ed8;
  color:#eff6ff;
}
body:not([data-theme=light]) #chatRenameModal .modal-btn.primary:hover{
  background:#2563eb;
}
.modal-btn.primary-dark{
  background:#1f1f23;
  color:#f8fafc;
}
.modal-btn.primary-dark:hover{
  background:#2b2f36;
}
.modal-btn:disabled,
.modal-btn[aria-disabled="true"]{
  opacity:.55;
  cursor:not-allowed;
  filter:none !important;
  pointer-events:none;
}
.modal-btn.danger{
  background:#dc2626;
  color:#fff;
}
.modal-btn.cancel:hover,
.modal-btn.cancel:focus-visible{
  background:#dbe2ea;
  color:#0b1220;
  box-shadow:0 0 0 1px rgba(100,116,139,.28) inset;
}
body:not([data-theme="light"]) .modal-btn.cancel:hover,
body:not([data-theme="light"]) .modal-btn.cancel:focus-visible{
  background:#2c2c2c;
  color:#f8fafc;
  box-shadow:0 0 0 1px rgba(148,163,184,.28) inset;
}
.modal-btn.danger:hover,
.modal-btn.danger:focus-visible{
  background:#b91c1c;
  color:#fff;
  box-shadow:0 8px 18px rgba(185,28,28,.28);
  transform:translateY(-1px);
}
body[data-theme="light"] .modal-btn.danger:hover,
body[data-theme="light"] .modal-btn.danger:focus-visible{
  background:#dc2626;
  box-shadow:0 8px 18px rgba(220,38,38,.24);
}
#strikeNoticeModal{
  max-width:480px;
  border-radius:22px;
  padding:1.4rem 1.6rem 1.2rem;
}
#strikeNoticeModal .strike-notice-header{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:.5rem;
}
#strikeNoticeModal .strike-notice-icon{
  width:28px;
  height:28px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#0f172a;
  color:#f8fafc;
  font-weight:800;
  font-size:.95rem;
}
#strikeNoticeModal h3{
  font-size:1.1rem;
}
#strikeNoticeModal .strike-notice-text{
  font-size:1rem;
  line-height:1.55;
  margin-top:.25rem;
}
#strikeNoticeModal .strike-notice-actions{
  margin-top:1.1rem;
}
#strikeNoticeModal .modal-btn.primary{
  padding:.5rem 1.6rem;
  border-radius:999px;
  background:#0f172a;
}
body:not([data-theme="light"]) #strikeNoticeModal .strike-notice-icon{
  background:#f8fafc;
  color:#0f172a;
}
body[data-theme="light"] .sidebar-mini{
  background:var(--panel);
  border-right:1px solid #cbd5f5;
  box-shadow:0 4px 12px rgba(148,163,184,.35);
}
body[data-theme="light"] .sidebar-mini button{
  color:#1f2933;
}
body[data-theme="light"] .sidebar-close-btn{ color:#1f2933; }
body[data-theme="light"] .sidebar-header-title{ color:#1f2933; }
body[data-theme="light"] .sidebar-mini button span{ background:#1f2933; }
.settings-menu-footer{
  margin-top:auto;
  padding-top:.45rem;
  border-top:1px solid var(--line);
}
.settings-logout{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  border:1px solid #2d2d2d;
  border-radius:12px;
  padding:.4rem .6rem;
  background:#1a1a1a;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  transition:background .15s ease, border .15s ease;
}
.settings-menu-footer .settings-logout + .settings-logout{
  margin-top:.5rem;
}
.settings-legal-links{
  font-size:.78rem;
  color:var(--muted);
  margin-top:.65rem;
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
  justify-content:center;
  text-align:center;
}
.settings-legal-links a{
  color:var(--link-color);
  text-decoration:underline;
  font-weight:600;
}
.settings-legal-links a:hover{
  color:var(--link-color-hover);
}
.settings-logout:visited{
  color:#fff;
  text-decoration:none;
}
.settings-logout:hover{
  background:#242424;
  border-color:#3a3a3a;
  color:#fff;
  text-decoration:none;
}
.settings-menu.guest-flow .settings-upgrade-link,
.settings-menu.guest-flow .settings-profile-edit-btn,
.settings-menu.guest-flow .settings-logout#accountSettingsTrigger{
  opacity:.45;
  pointer-events:none;
  filter:grayscale(1);
}
body[data-theme="light"] .settings-logout{
  background:#ffffff;
  border-color:#d1d5db;
  color:#1f2933;
}
body[data-theme="light"] .settings-logout:hover{
  background:rgba(148,163,184,.15);
  border-color:#94a3b8;
  color:#111;
}
.settings-delete{
  margin-top:.1rem;
  border-color:#b91c1c;
  background:#2b1111;
  color:#fecaca;
}
.settings-delete:hover{
  background:#3b1515;
  border-color:#ef4444;
  color:#fee2e2;
}
body[data-theme="light"] .settings-delete{
  background:#fff5f5;
  border-color:#fca5a5;
  color:#991b1b;
}
body[data-theme="light"] .settings-delete:hover{
  background:#fee2e2;
  border-color:#f87171;
  color:#7f1d1d;
}
.show-password-toggle{
  appearance:none;
  width:18px;
  height:18px;
  border:2px solid #2f2f2f;
  border-radius:50%;
  background:#050505;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  cursor:pointer;
  margin-top:.05rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.show-password-toggle::after{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:transparent;
  transition:background .15s ease, transform .15s ease;
  transform:scale(.6);
}
.show-password-toggle:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.25);
}
.show-password-toggle:checked{
  border-color:#fff;
}
.show-password-toggle:checked::after{
  background:#fff;
  transform:scale(1);
}

/* ===== Permanent sidebar layout ===== */
.app-shell {
  min-height: 0;
  position:relative;
  background:var(--bg);
}
#sidebar {
  position:fixed;
  top:var(--navbar-height);
  left:0;
  width: var(--sidebar-width);
  height: calc(100vh - var(--navbar-height));
  height: calc(100dvh - var(--navbar-height));
  background: var(--panel);
  border-right: none;
  padding: 0 14px 0 14px;
  display:flex;
  flex-direction:column;
  overflow:visible;
  transition: width .22s ease, padding .22s ease, transform .22s ease;
  will-change: transform;
  z-index:800;
}
body.sidebar-hidden #sidebar{
  transform:translateX(-100%);
  padding:0 0 0 0;
  border:none;
  overflow:hidden;
  pointer-events:none;
}
.sidebar-user-footer{
  margin-top:auto;
  padding:1rem 14px 14px;
  border-top:1px solid var(--line);
  background:#ffffff;
  display:block;
  position:relative;
  margin-left:-14px;
  margin-right:-14px;
}
body:not([data-theme="light"]) .sidebar-user-footer{
  background:#1c1c1c;
}
.sidebar-user-actions{
  display:flex;
  align-items:center;
  gap:.12rem;
}
.sidebar-user-meta{
  display:flex;
  align-items:center;
  gap:.65rem;
}
.sidebar-profile-button{
  flex:1 1 auto;
  max-width:none;
  min-width:0;
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.55rem .16rem .55rem .35rem;
  margin-left:-6px;
  border-radius:12px;
  border:none;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  text-align:left;
  position:relative;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.sidebar-tab-action-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.45rem;
}
.sidebar-tab-action-row form{
  margin:0;
  flex:0 0 auto;
}
.sidebar-tab-action-row .sidebar-plain-btn{
  width:auto;
  padding:.22rem .34rem;
  font-size:1.04rem;
  border-radius:10px;
  line-height:1.2;
  gap:.32rem;
}
.sidebar-tab-action-tools{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:.32rem;
}
.sidebar-action-icon{
  width:34px;
  height:34px;
  border-radius:10px;
  border:none;
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
  cursor:pointer;
  padding:0;
  transition:background .2s ease;
}
.sidebar-action-icon:hover{
  background:rgba(255,255,255,0.05);
}
.sidebar-action-icon:focus-visible{
  outline:none;
  box-shadow:none;
}
body[data-theme="light"] .sidebar-action-icon{
  color:#0f172a;
}
body[data-theme="light"] .sidebar-action-icon:hover{
  background:#e2e8f0;
}
.sidebar-footer-icon-btn{
  width:41px;
  height:41px;
  border-radius:10px;
  border:none;
  background:transparent;
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  position:relative;
}
.sidebar-footer-icon-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  pointer-events:none;
  filter:grayscale(.25);
}
.sidebar-footer-icon-img{
  width:22px;
  height:22px;
  object-fit:contain;
  display:block;
  user-select:none;
  pointer-events:none;
}
.sidebar-footer-icon-btn ion-icon{
  font-size:22px;
}
.sidebar-footer-icon-img--light{
  display:none;
}
body[data-theme="light"] .sidebar-footer-icon-img--dark{
  display:none;
}
body[data-theme="light"] .sidebar-footer-icon-img--light{
  display:block;
}
.sidebar-footer-icon-btn:hover{
  background:rgba(255,255,255,0.05);
}
body[data-theme="light"] .sidebar-footer-icon-btn{
  color:#0f172a;
}
body[data-theme="light"] .sidebar-footer-icon-btn:hover{
  background:#e2e8f0;
}
.sidebar-profile-button:focus-visible{
  outline:none;
  box-shadow:none;
}
.sidebar-profile-button:hover{
  background:rgba(255,255,255,0.05);
}
body[data-theme="light"] .sidebar-profile-button{
  background:transparent;
  color:#0f172a;
}
body[data-theme="light"] .sidebar-profile-button:hover{
  background:#e2e8f0;
}
.sidebar-user-avatar{
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:50%;
  background:#1e1e1e;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#cfd5e8;
  font-size:1.2rem;
  border:1px solid rgba(255,255,255,0.05);
  position:relative;
  overflow:hidden;
  font-weight:600;
  text-transform:uppercase;
}
.sidebar-user-avatar img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
}
body[data-theme="light"] .sidebar-user-avatar{
  background:#d6dae4;
  color:#4a4f5c;
  border-color:rgba(0,0,0,0.05);
}
.sidebar-username{
  font-weight:600;
  color:var(--text);
  font-size:.85rem;
}
.sidebar-username-wrap{
  position:relative;
  display:block;
  align-items:flex-start;
  min-width:0;
  max-width:100%;
  white-space:nowrap;
  overflow:visible;
}
.sidebar-username-text{
  display:block;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding-right:12px;
  transform-origin:left center;
}
.sidebar-settings-wrap{
  position:relative;
}
.settings-alert-dot{
position:absolute;
top:-2px;
right:-2px;
width:10px;
  height:10px;
  border-radius:50%;
  background:#ef4444;
  border:2px solid #0b0b0f;
}
body[data-theme="light"] .settings-alert-dot{
  border-color:#f8fafc;
}
.notifications-toggle-wrap{
  position:relative;
  display:block;
  margin-top:0;
}
.settings-alert-dot--inline{
top:50%;
right:8px;
transform:translate(0,-50%);
}
.settings-alert-dot--inline-name{
top:0;
right:0;
transform:translate(-20%,-35%);
}
.settings-icon-wrap{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
}
.settings-alert-dot--icon{
width:9px;
height:9px;
top:-4px;
right:-4px;
}
.settings-alert-dot--friends{
width:10px;
height:10px;
}
.sidebar-settings-icon{
  border:none;
  background:transparent;
  color:var(--text);
  padding:0;
  font-size:1.35rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transform:translateY(2px);
}
.sidebar-settings-icon ion-icon{ transform:translateY(2px); }
#main    { margin-left:var(--sidebar-width); height:calc(100vh - var(--navbar-height)); height:calc(100dvh - var(--navbar-height)); overflow:auto; padding:18px; background:var(--bg); transition: margin-left .22s ease, filter .22s ease; }
body.images-page #main{
  background:var(--images-backdrop);
  padding:0;
}
body.images-page,
body.images-page .app-shell{
  background:var(--images-backdrop);
}
body.sidebar-hidden #main{ margin-left:0; }
#sidebarResizer{
  display:none;
}
body.sidebar-hidden #sidebarResizer{ display:none; }
body.sidebar-hidden .sidebar-mini{
  display:flex;
  background:transparent;
  border:none;
  width:auto;
  height:auto;
  bottom:auto;
  padding:0;
  box-shadow:none;
  top:calc(var(--navbar-height) + 20px);
  left:16px;
  align-items:flex-start;
}
body.resizing, body.resizing *{ user-select:none !important; cursor:col-resize !important; }
.sidebar-content{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:visible;
  gap:0;
  background:var(--panel);
}
.sidebar-chat-scroll{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:0;
  min-height:0;
  overflow:hidden;
  padding-bottom:0;
  background:#ffffff;
  margin-left:-14px;
  margin-right:-14px;
  padding-left:10px;
  padding-right:10px;
}
body:not([data-theme="light"]) .sidebar-chat-scroll{
  background:#1c1c1c;
}
.sidebar-tabs{
  display:flex;
  gap:.25rem;
  padding:.05rem 8px 0;
  border-bottom:1px solid var(--line);
  align-items:flex-end;
  background:var(--panel);
  margin-left:-14px;
  margin-right:-14px;
}
.sidebar-tab{
  flex:1 1 0;
  width:auto;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--panel);
  color:var(--text-muted);
  padding:.5rem .9rem .45rem;
  border-top-left-radius:12px;
  border-top-right-radius:12px;
  font-weight:700;
  font-size:1.02rem;
  line-height:1.1;
  cursor:pointer;
  transition:color .15s ease, background .15s ease;
  overflow:hidden;
  isolation:isolate;
}
.sidebar-tab::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg, rgba(148,163,184,.22), rgba(100,116,139,.16));
  opacity:0;
  transition:opacity .2s ease;
  z-index:-1;
}
.sidebar-tab:hover,
.sidebar-tab:focus-visible{
  color:var(--text);
}
.sidebar-tab:hover::after,
.sidebar-tab:focus-visible::after{
  opacity:1;
}
body[data-theme="light"] .sidebar-tab:hover,
body[data-theme="light"] .sidebar-tab:focus-visible{
  color:#111827;
}
body[data-theme="light"] .sidebar-tab::after{
  background:linear-gradient(105deg, rgba(148,163,184,.18), rgba(148,163,184,.12));
}
.sidebar-tab-label{
  display:inline-block;
  transition:transform .15s ease;
}
.sidebar-tab.has-unread .sidebar-tab-label{
  transform:translateX(-8px);
}
.sidebar-unread-badge{
  position:absolute;
  right:8px;
  top:calc(50% - 8px);
  transform:none;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  letter-spacing:0;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
}
.sidebar-tab.is-active{
  color:var(--text);
  border-bottom-color:transparent;
  background:#ffffff;
  position:relative;
  z-index:2;
  margin-bottom:-1px;
}
body:not([data-theme="light"]) .sidebar-tab.is-active{
  background:#1c1c1c;
}
.sidebar-tab.is-active::after{
  opacity:0;
}
.sidebar-tab-panels{
  background:#ffffff;
  margin:0;
  padding:0 4px;
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}
body:not([data-theme="light"]) .sidebar-tab-panels{
  background:#1c1c1c;
}
.sidebar-tab-panel{
  border:none;
  border-radius:0;
  background:#ffffff;
  padding-top:.6rem;
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
body:not([data-theme="light"]) .sidebar-tab-panel{
  background:#1c1c1c;
}
.sidebar-tab-panel[hidden]{ display:none; }
.sidebar-solo-list{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding-right:6px;
  margin-right:-6px;
  margin-top:.35rem;
  padding-bottom:1.2rem;
  max-height:calc(100dvh - var(--navbar-height) - 320px);
}
@media (max-height:700px) {
  .sidebar-solo-list{
    max-height:calc(100dvh - var(--navbar-height) - 280px);
  }
}
.sidebar-chat-title{
  position:sticky;
  top:0;
  z-index:3;
  background:#ffffff;
  padding-top:.35rem;
  padding-bottom:.35rem;
}
body[data-theme="light"] .sidebar-chat-title{ background:#ffffff; }
body:not([data-theme="light"]) .sidebar-chat-title{ background:#1c1c1c; }
.sidebar-chat-section{
  margin-bottom:1rem;
}
.sidebar-chat-section-group{
  flex:1;
  min-height:0;
  margin-top:0;
  padding-top:.4rem;
  display:flex;
  flex-direction:column;
  background:#ffffff;
}
body[data-theme="light"] .sidebar-chat-section-group{ background:#ffffff; }
body:not([data-theme="light"]) .sidebar-chat-section-group{ background:#1c1c1c; }
.sidebar-group-list{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding-right:6px;
  margin-right:-6px;
  margin-top:-.1rem;
  background:#ffffff;
  max-height:calc(100dvh - var(--navbar-height) - 320px);
}
body:not([data-theme="light"]) .sidebar-group-list{
  background:#1c1c1c;
}
@media (max-height:700px) {
  .sidebar-group-list{
    max-height:calc(100dvh - var(--navbar-height) - 280px);
  }
}

@media (max-width: 980px) {
  #sidebar {
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    height:100dvh;
    z-index:2000;
    transform:translateX(0);
    transition:transform .2s ease;
  }
  body.sidebar-hidden #sidebar{
    transform:translateX(-100%);
  }
  #sidebarResizer{
    display:none;
  }
  #main{
    margin-left:0 !important;
  }
  body.sidebar-hidden #main{
    margin-left:0 !important;
  }
  .sidebar-mini{
    position:fixed;
    left:16px;
    bottom:16px;
    z-index:2100;
  }
  .friend-menu-btn{
    display:inline-flex;
  }
.sidebar-overlay{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.45);
  z-index:1500;
  backdrop-filter:blur(2px);
  transition:opacity .22s ease;
}
body.sidebar-open #main{
  filter:blur(3px);
  pointer-events:none;
}
}
@media (hover: none) and (pointer: coarse) {
  .chat-actions{
    display:flex;
    opacity:1;
    pointer-events:auto;
    right:8px;
  }
  .chat-link{
    padding-right:2.2rem;
  }
  .chat-menu-toggle{
    min-width:36px;
    min-height:36px;
    padding:9px;
    margin:-9px;
    border-radius:999px;
  }
}

/* Buttons */
.btn-primary, .btn-secondary { background:#fff; color:#000; border:none; }
.btn-primary:hover, .btn-secondary:hover { background:#eaeaea; color:#000; }
.btn { padding:.55rem 1rem; border-radius:14px !important; }
#sidebar .btn,
#sidebar .btn-primary,
#sidebar .btn-secondary{
  background:#cfd3db;
  border:1px solid #b7bcc5;
  color:#0f172a;
  font-weight:600;
}
#sidebar .btn:hover,
#sidebar .btn:focus{
  background:#e4e7ed;
  color:#000;
}

.divider { border-color:#444; }
.muted { color:var(--muted); }

input, textarea {
  background:var(--input-bg) !important;
  color:var(--text) !important;
  border:1px solid var(--input-border) !important;
  border-radius:14px !important;
}
input::placeholder,
textarea::placeholder {
  color:#cbd5e1;
}
body:not([data-theme="light"]) input::placeholder,
body:not([data-theme="light"]) textarea::placeholder,
body:not([data-theme="light"]) .form-control::placeholder,
body:not([data-theme="light"]) .search-menu-input::placeholder {
  color:#cbd5e1;
  opacity:1;
}
body[data-theme="light"] input::placeholder,
body[data-theme="light"] textarea::placeholder {
  color:rgba(17,24,39,0.45);
}
body:not([data-theme="light"]) .text-muted,
body:not([data-theme="light"]) small,
body:not([data-theme="light"]) .small,
body:not([data-theme="light"]) .form-text{
  color:#9aa3b2 !important;
}

.chat-item {
  background:transparent;
  border:1px solid transparent;
  color:var(--text);
  position:relative;
  border-radius:12px;
  min-height:26px;
  --unread-pad:26px;
  transition:background .15s ease, border .15s ease, box-shadow .15s ease;
}
.chat-item:hover,
.chat-item:focus-within,
.chat-item.active{
  background:var(--card-bg);
  border-color:var(--card-border);
  box-shadow:0 8px 18px rgba(15,23,42,.15);
}
.chat-item.menu-open { z-index:100; }
.chat-item small {
  color:var(--muted);
  font-size:.72rem;
}
#sidebar .chat-item{
  background:transparent;
  border-color:transparent;
  color:#0f172a;
  box-shadow:none;
  width:100%;
  margin:0 0 10px;
}
#sidebar .chat-item:hover,
#sidebar .chat-item:focus-within{
  background:#f2f2f2;
  border-color:#e2e2e2;
}
#sidebar .chat-item.active{
  background:#e7e7e7;
  border-color:#d6d6d6;
}
#sidebar .chat-item small{
  color:#0f172a;
}
.chat-link {
  color:var(--text);
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  text-align:left;
  min-height:22px;
  padding:.04rem .6rem 0;
  transition:color .2s ease;
}
#sidebar .chat-link{
  color:#0f172a;
}
body:not([data-theme="light"]) #sidebar .chat-item:hover,
body:not([data-theme="light"]) #sidebar .chat-item:focus-within{
  background:#303030;
  border-color:#3f3f3f;
  box-shadow:none;
}
body:not([data-theme="light"]) #sidebar .chat-item.active{
  background:#2a2a2a;
  border-color:#3a3a3a;
  box-shadow:none;
}
.chat-link strong{
  color:inherit;
  font-size:.8rem;
  font-weight:600;
  display:block;
  width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chat-item.is-saved .chat-title{
  position:relative;
  padding-left:22px;
}
.chat-item.is-saved .chat-title::before{
  content:"";
  position:absolute;
  left:1px;
  top:50%;
  transform:translateY(-50%);
  width:14px;
  height:14px;
  background:#2563eb;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/></svg>") no-repeat center / contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/></svg>") no-repeat center / contain;
}
.chat-unread-badge{
  position:absolute;
  left:10px;
  top:calc(50% - 8px);
  transform:none;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-size:11px;
  font-weight:1000;
  line-height:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  letter-spacing:0;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
}
.chat-item.has-unread .chat-link{
  padding-left:calc(var(--unread-pad) + .3rem);
}
.sidebar-lazy-sentinel{
  width:100%;
  height:1px;
  margin:.2rem 0;
  opacity:0;
  pointer-events:none;
}
/* Icon-only button tooltips */
button[data-tooltip]{
  position:relative;
}
button[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  top:calc(100% + .35rem);
  background:#2563eb;
  color:#f8fafc;
  font-size:.7rem;
  font-weight:600;
  padding:.2rem .5rem;
  border-radius:8px;
  white-space:nowrap;
  opacity:0;
  transform:translate(-50%, -4px);
  pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
  z-index:50;
}
button[data-tooltip]:hover::after,
button[data-tooltip]:focus-visible::after{
  opacity:1;
  transform:translate(-50%, 0);
}
/* Reposition tooltips if they would go off-screen */
button[data-tooltip].tooltip-shift-left::after{
  left:0;
  transform:translate(0, -4px);
}
button[data-tooltip].tooltip-shift-left:hover::after,
button[data-tooltip].tooltip-shift-left:focus-visible::after{
  transform:translate(0, 0);
}
button[data-tooltip].tooltip-shift-right::after{
  left:auto;
  right:0;
  transform:translate(0, -4px);
}
button[data-tooltip].tooltip-shift-right:hover::after,
button[data-tooltip].tooltip-shift-right:focus-visible::after{
  transform:translate(0, 0);
}
button[data-tooltip].tooltip-right::after{
  left:calc(100% + .5rem);
  top:50%;
  transform:translate(0, -50%);
}
button[data-tooltip].tooltip-right:hover::after,
button[data-tooltip].tooltip-right:focus-visible::after{
  transform:translate(0, -50%);
}
body.use-global-tooltips button[data-tooltip]::after{
  display:none;
}
.global-tooltip{
  position:fixed;
  background:#2563eb;
  color:#f8fafc;
  font-size:.7rem;
  font-weight:600;
  padding:.2rem .5rem;
  border-radius:8px;
  white-space:nowrap;
  box-shadow:0 10px 20px rgba(0,0,0,.25);
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
  z-index:5000;
  transition:opacity .12s ease, transform .12s ease;
}
.global-tooltip.show{
  opacity:1;
  transform:translateY(0);
}
body:not([data-theme="light"]) #sidebar .chat-link{
  color:#e5e7eb;
}
#sidebar .chat-item:hover .chat-link,
#sidebar .chat-link:focus-visible{
  color:var(--text);
  text-decoration:none;
}
body[data-theme="light"] #sidebar .chat-item:hover .chat-link,
body[data-theme="light"] #sidebar .chat-link:focus-visible{
  color:#111827;
}
.chat-title:empty::after{
  content:'\00a0';
}

.chat-actions { position:absolute; top:50%; right:12px; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:0; z-index:3; opacity:0; pointer-events:none; transition:opacity .15s ease; }
.chat-item:hover .chat-actions{ opacity:1; pointer-events:auto; }
@media (hover: none) and (pointer: coarse){
  #sidebar .chat-actions{
    display:flex;
    opacity:1;
    pointer-events:auto;
    right:8px;
  }
  #sidebar .chat-item:hover .chat-actions{
    opacity:1;
    pointer-events:auto;
  }
}
.chat-menu-toggle {
  background:none;
  border:none;
  color:#888;
  font-size:20px;
  line-height:.3;
  padding:6px;
  margin:-6px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  border-radius:6px;
}
.chat-menu-toggle:hover{
  background:rgba(255,255,255,.08);
  color:var(--text);
}
.chat-menu-toggle span{
  display:block;
  width:3px;
  height:3px;
  background:currentColor;
  border-radius:50%;
}
.chat-menu-toggle:focus-visible{ outline:2px solid #666; border-radius:4px; }
.chat-menu {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  right:calc(100% + 8px);
  z-index:4000;
  background:var(--menu-bg);
  border:1px solid var(--menu-border);
  border-radius:10px;
  padding:.35rem;
  min-width:140px;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
}
.chat-menu[hidden]{ display:none; }
.chat-menu button,
.chat-menu form button{
  width:100%; text-align:left; background:none; border:none; color:var(--text); font-size:.85rem;
  padding:.25rem .2rem; border-radius:6px; cursor:pointer;
}
.chat-menu button:hover,
.chat-menu form button:hover{ background:rgba(255,255,255,.08); color:var(--text); }
.chat-menu .chat-delete-btn{
  color:#ef4444;
}
.chat-menu .chat-delete-btn:hover,
.chat-menu .chat-delete-btn:focus-visible{
  background:rgba(239,68,68,.24);
  color:#fca5a5;
}
.save-chat-btn{
  border:none;
  background:rgba(148,163,184,.18);
  color:var(--text);
  width:32px;
  height:32px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.save-chat-btn.is-saved{
  background:#2563eb;
  color:#fff;
}
.save-doc-popover{
  position:fixed;
  z-index:6000;
  display:none;
  top:-9999px;
  left:-9999px;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.9);
  border:1px solid rgba(148,163,184,.35);
  border-radius:12px;
  padding:.25rem;
  box-shadow:0 12px 24px rgba(0,0,0,.3);
  overflow:visible;
}
body[data-theme="light"] .save-doc-popover{
  background:rgba(248,250,252,.95);
  border-color:rgba(148,163,184,.4);
}
.save-doc-popover button{
  border:none;
  background:transparent;
  color:#cbd5e1;
  width:36px;
  height:36px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
body[data-theme="light"] .save-doc-popover button{
  background:transparent;
  color:#334155;
}
.save-doc-popover ion-icon{
  font-size:20px;
}
.save-doc-popover button:hover{
  background:transparent;
  color:#e2e8f0;
}
body[data-guest="true"] .save-doc-popover{
  display:none !important;
  pointer-events:none !important;
}
button[data-tooltip].tooltip-below::after{
  top:calc(100% + 8px);
  bottom:auto;
  transform:translateX(-50%);
}
button[data-tooltip].tooltip-below:hover::after,
button[data-tooltip].tooltip-below:focus-visible::after{
  opacity:1;
  transform:translateX(-50%) translateY(2px);
}
.save-doc-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:5205;
  opacity:0;
}
.save-doc-modal.show{
  display:flex;
  opacity:1;
  animation:fadeIn var(--motion-mid) ease;
}
.save-doc-card{
  background:#0f0f0f;
  color:#e5e7eb;
  border:1px solid #1f1f1f;
  border-radius:16px;
  padding:1.1rem;
  width:100%;
  max-width:360px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  animation:saveDocCardIn var(--motion-mid) var(--easing-smooth);
}
body[data-theme="light"] .save-doc-card{
  background:#fff;
  color:#0f172a;
  border-color:#e2e8f0;
}
.save-doc-card h3{
  margin:0 0 .75rem;
  font-size:1rem;
}
.save-doc-card select,
.save-doc-card input{
  width:100%;
  border-radius:10px;
  border:1px solid #334155;
  padding:.5rem .6rem;
  background:#111827;
  color:#e5e7eb;
}
body[data-theme="light"] .save-doc-card select,
body[data-theme="light"] .save-doc-card input{
  background:#f8fafc;
  color:#0f172a;
  border-color:#cbd5f5;
}
.save-doc-card-actions{
  display:flex;
  justify-content:flex-end;
  gap:.5rem;
  margin-top:.8rem;
}
.save-doc-card-actions button{
  border:none;
  border-radius:999px;
  padding:.35rem .75rem;
  font-weight:700;
  cursor:pointer;
}
.save-doc-card-actions .secondary{
  background:rgba(148,163,184,.2);
  color:var(--text);
}
.save-doc-card-actions .secondary:hover,
.save-doc-card-actions .secondary:focus-visible{
  background:rgba(148,163,184,.34);
  color:var(--text);
  box-shadow:0 0 0 1px rgba(148,163,184,.3) inset;
}
.save-doc-card-actions .primary{
  background:#2563eb;
  color:#fff;
}
@keyframes saveDocCardIn{
  from{
    opacity:0;
    transform:scale(.96);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}
.message-more-btn{
  border:none;
  background:transparent;
  color:#d1d5db;
  cursor:pointer;
  font-size:1rem;
  line-height:1;
  display:none;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  padding:0;
  -webkit-appearance:none;
  appearance:none;
  margin-left:.3rem;
}
.row-assist .message-more-btn{
  display:inline-flex;
}
.message-more-btn:hover{
  color:#e5e7eb;
}
body[data-theme="light"] .message-more-btn{
  color:#475569;
}
body[data-theme="light"] .message-more-btn:hover{
  color:#0f172a;
}
.row-assist[data-streaming="1"] .message-more-btn,
.row-assist[data-typing-row="1"] .message-more-btn,
.row-assist[data-typing="1"] .message-more-btn{
  display:none;
}
.message-more-menu{
  position:absolute;
  background:var(--menu-bg);
  border:1px solid var(--menu-border);
  border-radius:10px;
  padding:.35rem;
  min-width:140px;
  z-index:5201;
  box-shadow:0 10px 25px rgba(0,0,0,.45);
}
.message-more-menu button{
  width:100%;
  text-align:left;
  background:none;
  border:none;
  color:var(--text);
  font-size:.85rem;
  padding:.25rem .4rem;
  border-radius:8px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.message-more-menu button:hover{
  background:rgba(255,255,255,.08);
  color:var(--text);
}
body[data-theme="light"] .message-more-menu button:hover{
  background:rgba(148,163,184,.15);
  color:#0f172a;
}
.snippet-toast{
  position:fixed;
  left:50%;
  top:50px;
  transform:translate(-50%, -12px);
  background:linear-gradient(135deg, rgba(30,41,59,.88), rgba(15,23,42,.82));
  border:1px solid rgba(148,163,184,.3);
  border-radius:18px;
  padding:1rem 1.25rem;
  box-shadow:0 18px 40px rgba(2,6,23,.35);
  z-index:5600;
  min-width:min(560px, 92vw);
  text-align:left;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  display:flex;
  align-items:center;
  gap:.9rem;
  backdrop-filter:blur(12px);
}
body[data-theme="light"] .snippet-toast{
  background:linear-gradient(135deg, rgba(255,255,255,.82), rgba(241,245,249,.78));
  border-color:rgba(148,163,184,.38);
  box-shadow:0 16px 30px rgba(15,23,42,.18);
}
.snippet-toast.show{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%, 0);
}
.snippet-toast a{
  color:var(--link-color);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
}
body:not([data-theme="light"]) .snippet-toast a{
  color:#bfdbfe;
  text-decoration-color:#bfdbfe;
}
body[data-theme="light"] .snippet-toast a{
  color:#2563eb;
}
.snippet-toast a:hover{
  color:var(--link-color-hover);
  text-decoration:underline;
}
body:not([data-theme="light"]) .snippet-toast a:hover,
body:not([data-theme="light"]) .snippet-toast a:focus-visible{
  color:#dbeafe;
  text-decoration-color:#dbeafe;
}
.snippet-toast .snippet-toast-title{
  font-weight:700;
  margin-bottom:.2rem;
  font-size:1rem;
}
.snippet-toast .snippet-toast-icon{
  width:40px;
  height:40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(59,130,246,.2);
  color:#93c5fd;
  flex:0 0 auto;
}
body[data-theme="light"] .snippet-toast .snippet-toast-icon{
  background:rgba(37,99,235,.12);
  color:#2563eb;
}
.snippet-toast .snippet-toast-close{
  position:absolute;
  top:.4rem;
  right:.5rem;
}
.hover-menu{
  position:absolute;
  background:var(--menu-bg);
  border:1px solid var(--menu-border);
  border-radius:12px;
  padding:.35rem;
  min-width:120px;
  width:120px;
  box-shadow:0 10px 25px rgba(0,0,0,.45);
  z-index:5000;
}
.hover-menu[hidden]{ display:none !important; }
.hover-menu button{
  width:100%;
  text-align:left;
  background:none;
  border:none;
  color:var(--text);
  font-size:.85rem;
  padding:.25rem .4rem;
  border-radius:8px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.hover-menu button:hover{
  background:rgba(255,255,255,.08);
}
.chat-save-btn[data-saved="1"] ion-icon{
  color:#2563eb;
}
.chat-save-btn.is-disabled,
.chat-save-btn:disabled,
.chat-save-btn[aria-disabled="true"]{
  opacity:.5;
  color:#94a3b8;
  cursor:not-allowed;
  pointer-events:none;
}
body[data-guest="true"] .message-snippet-btn{
  opacity:.45 !important;
  color:#94a3b8 !important;
  cursor:not-allowed !important;
  pointer-events:none !important;
}
body[data-guest="true"] .message-snippet-btn ion-icon{
  color:#94a3b8 !important;
}
.hover-menu .chat-delete-btn{
  color:#ef4444;
  align-items:center;
  padding:.25rem .4rem;
}
.hover-menu .chat-delete-btn:hover,
.hover-menu .chat-delete-btn:focus-visible{
  background:rgba(239,68,68,.24);
  color:#fca5a5;
}
.sidebar-close-btn{
  margin-top:-40px;
}
.sidebar-header{ display:flex; align-items:center; gap:.65rem; }
.sidebar-logo{
  width:140px;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  padding:0;
  margin:0;
}
.sidebar-logo-img{ width:100%; height:100%; object-fit:contain; display:none; }
.sidebar-logo-dark{ display:block; }
body[data-theme="light"] .sidebar-logo-dark{ display:none; }
body[data-theme="light"] .sidebar-logo-light{ display:block; }
.sidebar-header-title{ color:#fff; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; font-weight:600; }
.sidebar-brand{
display:flex;
align-items:center;
gap:.45rem;
}
.sidebar-brand .brand-name{
  font-family:"Nunito", sans-serif;
  font-weight:800;
  font-size:1.6rem;
  color:#000;
  letter-spacing:.01em;
  display:none;
}
.sidebar-header-row{
  margin-bottom:-.3rem;
}
.sidebar-mini{
  position:fixed;
  top:var(--navbar-height);
  left:0;
  bottom:0;
  width:48px;
  background:#111;
  border-right:1px solid #2c2c2c;
  display:none;
  flex-direction:column;
  align-items:center;
  padding-top:32px;
  z-index:300;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
.sidebar-mini button{
  background:none;
  border:none;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  cursor:pointer;
  color:#fff;
}
.sidebar-mini button span{ width:20px; height:2px; background:#fff; display:block; }
.sidebar-plain-btn{
  background:transparent;
  border:none;
  color:inherit;
  padding:.28rem .48rem;
  width:100%;
  text-align:left;
  font-weight:700;
  font-size:1.18rem;
  box-shadow:none;
  display:flex;
  align-items:flex-start;
  gap:.4rem;
  line-height:1.3;
  border-radius:12px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:color .2s ease, transform .2s ease;
}
.sidebar-plain-btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(100deg, rgba(148,163,184,.22), rgba(100,116,139,.14));
  opacity:0;
  z-index:-1;
  transition:opacity .2s ease;
}
.sidebar-plain-btn:hover,
.sidebar-plain-btn:focus-visible{
  color:var(--text);
  transform:translateX(2px);
}
.sidebar-plain-btn:hover::after,
.sidebar-plain-btn:focus-visible::after{
  opacity:1;
}
.sidebar-plain-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}
.sidebar-plain-btn:disabled::after{
  opacity:0 !important;
}
.sidebar-plain-label{
  display:inline-block;
  transform:translateY(-1.5px);
}
.sidebar-plain-btn:focus,
.sidebar-plain-btn:focus-visible,
.sidebar-plain-btn:active{
  outline:none;
  box-shadow:none;
}
body[data-theme="light"] .sidebar-plain-btn:hover,
body[data-theme="light"] .sidebar-plain-btn:focus-visible{
  color:#111827;
}
body[data-theme="light"] .sidebar-plain-btn::after{
  background:linear-gradient(100deg, rgba(148,163,184,.16), rgba(148,163,184,.1));
}
.sidebar-create-btn{
  justify-content:center;
  text-align:center;
  font-weight:600;
  font-size:1rem;
}
.sidebar-tab-action{
  padding:.4rem 4px .5rem;
  border-bottom:1px solid var(--line);
  margin-bottom:.25rem;
}
.sidebar-nav-actions{
  padding:.15rem 4px .8rem;
  border-bottom:0;
  margin-bottom:.8rem;
}
.sidebar-nav-btn{
  background:transparent;
  border:none;
  color:var(--text);
  padding:.45rem .55rem;
  width:100%;
  text-align:left;
  font-weight:700;
  font-size:1.28rem;
  display:flex;
  align-items:center;
  gap:.55rem;
  line-height:1.3;
  text-decoration:none;
  border-radius:12px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:color .2s ease, transform .2s ease;
}
.sidebar-nav-btn:visited{
  color:var(--text);
}
.sidebar-nav-btn.is-disabled,
.sidebar-nav-btn[aria-disabled="true"]{
  opacity:.5;
  filter:grayscale(.3);
  cursor:not-allowed;
  pointer-events:none;
  transform:none !important;
}
.sidebar-nav-btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(100deg, rgba(148,163,184,.24), rgba(100,116,139,.16));
  opacity:0;
  z-index:-1;
  transition:opacity .2s ease;
}
.sidebar-nav-btn:hover,
.sidebar-nav-btn:focus-visible{
  color:var(--text);
  transform:translateX(2px);
  text-decoration:none;
}
.sidebar-nav-btn:hover::after,
.sidebar-nav-btn:focus-visible::after{
  opacity:1;
}
.sidebar-nav-btn.is-disabled::after,
.sidebar-nav-btn[aria-disabled="true"]::after{
  opacity:0 !important;
}
.sidebar-nav-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(148,163,184,.28);
}
body[data-theme="light"] .sidebar-nav-btn:hover,
body[data-theme="light"] .sidebar-nav-btn:focus-visible{
  color:#111827;
}
body[data-theme="light"] .sidebar-nav-btn::after{
  background:linear-gradient(100deg, rgba(148,163,184,.18), rgba(148,163,184,.12));
}

.icon { width:20px; height:20px; margin-right:8px; vertical-align:-3px; color:var(--text); font-size:20px; }
.icon path, .icon circle, .icon line { stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* === Chat rows & bubbles (used by room templates) === */
.row-user, .row-assist { display:flex; justify-content:flex-start; align-items:flex-start; gap:.3rem; }
.row-user > .bubble, .row-assist > .bubble { flex:0 0 auto; width:auto; align-self:flex-start; }

/* Compact bubbles */
.bubble {
  display:inline-flex;
  flex-direction:column;
  gap:.08rem;
  max-width:70%;
  padding:.34rem .7rem;
  margin:.12rem 0;
  border-radius:14px;
  border:none;
  font-size:1.08rem;
  line-height:1.6;
  font-weight:460;
  word-wrap:break-word;
  white-space:pre-wrap;
  background:var(--card-bg);
}
.bubble-user   { background:var(--bubble-user); }
.bubble-assist { background:var(--bubble-assist); }

/* Trim markdown spacing INSIDE bubbles only (prevents tall messages) */
.bubble .md,
.bubble .md-body{
  line-height:1.2;
  font-size:1.08rem;
}
.bubble .md-body > * { margin:0; }
.bubble .md-body p + p { margin-top:.12rem; }
.bubble .md h1,
.bubble .md h2,
.bubble .md h3,
.bubble .md h4,
.bubble .md h5,
.bubble .md h6{
  font-weight:620;
  font-size:1rem;
  margin:.1rem 0 .06rem;
  line-height:1.15;
}
.bubble .md ul,
.bubble .md ol{
  margin:.08rem 0 .12rem 1.05rem;
  padding-left:1.05rem;
  list-style-position:outside;
}
.bubble .md li{ margin:.04rem 0; }
.bubble .md li::marker{
  font-weight:600;
  color:#cdd5e0;
}
.bubble blockquote { margin:.15rem 0; }

/* Assistant markdown polish across all chat types */
.row-assist .bubble .md-body,
.ai-block.md .md-body,
.ai-block.md .ai-line.md,
.system-line.md{
  line-height:1.62;
  font-weight:460;
}
.row-assist .bubble .md-body hr,
.ai-block.md .md-body hr,
.ai-block.md .ai-line.md hr,
.system-line.md hr{
  border:0;
  border-top:2px solid rgba(148,163,184,.62);
  margin:1.15rem 0;
}
.row-assist .bubble .md-body blockquote,
.ai-block.md .md-body blockquote,
.ai-block.md .ai-line.md blockquote,
.system-line.md blockquote{
  margin:.85rem 0;
  padding:.55rem .8rem;
  border-left:4px solid rgba(148,163,184,.7);
  background:rgba(148,163,184,.12);
  border-radius:10px;
}
.row-assist .bubble .md-body h2:not(:first-child),
.row-assist .bubble .md-body h3:not(:first-child),
.ai-block.md .md-body h2:not(:first-child),
.ai-block.md .md-body h3:not(:first-child),
.ai-block.md .ai-line.md h2:not(:first-child),
.ai-block.md .ai-line.md h3:not(:first-child),
.system-line.md h2:not(:first-child),
.system-line.md h3:not(:first-child){
  border-top:0;
  padding-top:0;
  margin-top:1rem;
}
body[data-theme="light"] .row-assist .bubble .md-body hr,
body[data-theme="light"] .ai-block.md .md-body hr,
body[data-theme="light"] .ai-block.md .ai-line.md hr,
body[data-theme="light"] .system-line.md hr{
  border-top-color:#b7c3d3;
}
body[data-theme="light"] .row-assist .bubble .md-body blockquote,
body[data-theme="light"] .ai-block.md .md-body blockquote,
body[data-theme="light"] .ai-block.md .ai-line.md blockquote,
body[data-theme="light"] .system-line.md blockquote{
  border-left-color:#c0c8d5;
  background:#f5f7fb;
}
.mb-2 { margin-bottom:.24rem !important; } /* less gap between rows */

/* ===== ChatGPT-style code block ===== */
.codewrap {
  border:1px solid var(--code-border);
  border-radius:14px;
  overflow:hidden;             /* one smooth shape */
  background:var(--code-inner-bg);
  margin:.28rem 0;             /* tight in bubbles */
}
.codewrap-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.38rem .65rem;
  background:var(--code-header-bg);
  border-bottom:1px solid var(--code-border);
  color:#cbd3e0;
  border-top-left-radius:14px;
  border-top-right-radius:14px;
}
.code-lang {
  text-transform:none;
  letter-spacing:0;
  font-size:.82rem;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color:#aeb7c8;
  user-select:none;
  border:none;
  border-radius:0;
  padding:0;
  background:transparent;
}
.copy-btn {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size:.78rem;
  border:none;
  background:transparent;
  color:#8b9bb7;
  cursor:pointer;
  padding:0;
  transition:color .12s ease;
}
.copy-btn span{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.copy-btn ion-icon{
  font-size:1rem;
}
.copy-btn:hover{ color:#c5d4f6; }
.copy-btn.copied{
  color:#22c55e;
}
.copy-btn.copied ion-icon{
  color:#22c55e;
}
body[data-theme="light"] .code-lang{
  color:#4b5563;
}
body[data-theme="light"] .copy-btn{
  color:#4b5563;
}
body[data-theme="light"] .copy-btn ion-icon{
  color:#4b5563;
}
body[data-theme="light"] .copy-btn.copied{
  color:#16a34a;
}
body[data-theme="light"] .copy-btn.copied ion-icon{
  color:#16a34a;
}
body[data-theme="light"] .codewrap-header{
  color:#4b5563;
}
body[data-theme="light"] .codewrap pre{
  color:#374151;
}
body[data-theme="light"] .codewrap pre code .hljs-subst,
body[data-theme="light"] .codewrap pre code .hljs-params,
body[data-theme="light"] .codewrap pre code .hljs-variable,
body[data-theme="light"] .codewrap pre code .hljs-attr,
body[data-theme="light"] .codewrap pre code .hljs-operator,
body[data-theme="light"] .codewrap pre code .hljs-punctuation{
  color:inherit;
}

.codewrap-body { background:var(--code-inner-bg); padding:0; margin:0; }
.codewrap pre {
  margin:0; padding:.85rem 1rem; background:var(--code-inner-bg); color:#e6edf3; overflow:auto;
  line-height:1.32; font-size:.92rem; tab-size:2; white-space:pre;
  border-top-left-radius:0; border-top-right-radius:0; border-bottom-left-radius:14px; border-bottom-right-radius:14px;
  position:relative;
  font-family:var(--code-font);
}
.codewrap pre code{
  background:transparent !important;
  display:block;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  font-family:var(--code-font) !important;
}
.codewrap pre code,
.codewrap pre code.hljs {
  color: var(--code-text);
  font-family:var(--code-font) !important;
}
.codewrap pre code .hljs-comment,
.codewrap pre code .hljs-quote {
  color: var(--code-comment);
}
.codewrap pre code .hljs-doctag {
  color: var(--code-comment-doc);
}
.codewrap pre code .hljs-keyword,
.codewrap pre code .hljs-literal {
  color: var(--code-keyword);
}
.codewrap pre code .hljs-string,
.codewrap pre code .hljs-addition,
.codewrap pre code .hljs-template-tag,
.codewrap pre code .hljs-template-variable {
  color: var(--code-string);
}
.codewrap pre code .hljs-number,
.codewrap pre code .hljs-symbol {
  color: var(--code-number);
}
.codewrap pre code .hljs-property,
.codewrap pre code .hljs-variable.language_ {
  color: var(--code-variable);
}
.codewrap pre code .hljs-regexp {
  color: var(--code-regexp);
}
.codewrap pre code .hljs-variable,
.codewrap pre code .hljs-attribute {
  color: var(--code-variable);
}
.codewrap pre code .hljs-params,
.codewrap pre code .hljs-attr {
  color: var(--code-warning);
}
.codewrap pre code .hljs-built_in,
.codewrap pre code .hljs-constant {
  color: var(--code-constant);
}
.codewrap pre code .hljs-title,
.codewrap pre code .hljs-section {
  color: var(--code-title);
}
.codewrap pre code .hljs-title.class_,
.codewrap pre code .hljs-type {
  color: var(--code-type);
}
.codewrap pre code .hljs-title.function_,
.codewrap pre code .hljs-function .hljs-title,
.codewrap pre code .hljs-function {
  color: var(--code-title);
}
.codewrap pre code .hljs-name,
.codewrap pre code .hljs-tag,
.codewrap pre code .hljs-selector-tag {
  color: var(--code-tag);
}
.codewrap pre code .hljs-selector-id,
.codewrap pre code .hljs-selector-class {
  color: var(--code-selector);
}
.codewrap pre code .hljs-type,
.codewrap pre code .hljs-namespace {
  color: var(--code-type);
}
.codewrap pre code .hljs-decorator,
.codewrap pre code .hljs-meta {
  color: var(--code-decorator);
}
.codewrap pre code .hljs-operator,
.codewrap pre code .hljs-punctuation {
  color: var(--code-operator);
}
.codewrap pre code .hljs-subst {
  color: var(--code-variable);
}
.codewrap pre code .hljs-error {
  color: var(--code-invalid);
}
/* Kill any inline copy buttons some other script might inject into <pre> */
.codewrap pre > .copy-btn { display:none !important; }

/* Inline code (not blocks) */
code:not(pre code) {
  background:#1f2937; color:#e2e8f0; padding:0 .25rem; border-radius:.35rem; border:1px solid #334155;
}
body[data-theme="light"] code:not(pre code) {
  background:#eef2f7;
  color:#111827;
  border-color:#d7dee8;
}

/* Username meta smaller */
.meta{
  font-size:.7rem;
  margin-bottom:.02rem;
  color:var(--muted);
  letter-spacing:0;
  text-transform:none;
}

.ai-line{
  display:block;
  max-width:70%;
  color:var(--ai-line);
  font-size:.95rem;
  line-height:1.2;
  margin:.12rem 0;
}
.ai-line img{
  max-width:220px;
  max-height:240px;
  height:auto;
  border-radius:12px;
}
.bubble img{
  max-width:min(480px, 100%);
  max-height:360px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.chat-image img{
  max-width:100%;
  max-height:360px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.chat-image{
  margin:.25rem 0 .6rem;
  max-height:360px;
  width:min(360px, 100%);
  max-width:min(360px, 100%);
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  background:transparent;
}
.chat-image-block{
  margin:.15rem 0 .35rem;
  display:block;
}
.chat-image img{ display:block; }
.chat-image.chat-image-loading{
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.03);
  position:relative;
  min-height:0;
  aspect-ratio: var(--chat-image-aspect, 1 / 1);
}
body[data-theme="light"] .chat-image.chat-image-loading{
  background:rgba(15,23,42,0.06);
}
.chat-image-loading .chat-image-spinner{
  width:36px;
  height:36px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,0.35);
  border-top-color:#fff;
  animation:chat-spin 1s linear infinite;
}
body[data-theme="light"] .chat-image-loading .chat-image-spinner{
  border-color:rgba(15,23,42,0.25);
  border-top-color:#0f172a;
}
@keyframes chat-spin{
  to{ transform:rotate(360deg); }
}
.row-user .chat-image{ margin-left:auto; }
.row-assist .chat-image{ margin-right:auto; }
.md-text-block{
  background:transparent;
  color:var(--text);
  margin:.4rem 0;
  line-height:1.4;
  white-space:pre-wrap;
  font-family:var(--code-font);
}
@keyframes welcomeOverlayIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes welcomeCardIn{
  from{
    opacity:0;
    transform:translateY(16px) scale(.98);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}
.welcome-overlay{
  position:fixed;
  inset:0;
  z-index:8200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(16px, 4vw, 36px);
  background:rgba(2,6,23,.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  animation:welcomeOverlayIn .24s ease;
}
.welcome-overlay.show{
  display:flex;
}
.welcome-card{
  width:min(980px, 100%);
  border-radius:24px;
  border:1px solid rgba(148,163,184,.28);
  background:
    radial-gradient(95% 85% at 8% 2%, rgba(56,189,248,.18), transparent 56%),
    radial-gradient(82% 72% at 97% 8%, rgba(59,130,246,.2), transparent 58%),
    linear-gradient(150deg, rgba(15,23,42,.93), rgba(15,23,42,.86));
  color:#e2e8f0;
  box-shadow:0 28px 60px rgba(2,6,23,.5);
  padding:clamp(22px, 2.8vw, 34px);
  position:relative;
  animation:welcomeCardIn .34s var(--easing-smooth);
  overflow:hidden;
}
.welcome-card::before{
  content:"";
  position:absolute;
  inset:auto -120px -140px auto;
  width:360px;
  height:360px;
  background:radial-gradient(circle, rgba(56,189,248,.2), transparent 68%);
  pointer-events:none;
}
.welcome-title{
  margin:0 0 .35rem;
  font-size:clamp(1.45rem, 4vw, 2rem);
  font-weight:800;
  letter-spacing:-.01em;
  color:#f8fafc;
}
.welcome-sub{
  margin:0;
  color:#cbd5e1;
  font-size:1rem;
  line-height:1.45;
  max-width:62ch;
}
.welcome-grid{
  margin:1.2rem 0 1.25rem;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.9rem;
}
.welcome-feature{
  border:1px solid rgba(148,163,184,.28);
  border-radius:14px;
  padding:1rem .95rem .95rem;
  background:rgba(15,23,42,.38);
  position:relative;
}
.welcome-feature-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  height:auto;
  margin-bottom:.42rem;
  color:#e2e8f0;
  background:transparent;
  box-shadow:none;
}
.welcome-feature-icon ion-icon{
  font-size:1.2rem;
  line-height:1;
}
.welcome-feature-icon img{
  width:20px;
  height:20px;
  display:block;
  object-fit:contain;
}
.welcome-feature-icon .auction-icon-light{
  display:none;
}
.welcome-feature-icon .auction-icon-dark{
  display:block;
}
.welcome-feature strong{
  display:block;
  font-size:1.06rem;
  margin-bottom:.3rem;
  color:#f8fafc;
}
.welcome-feature span{
  font-size:.88rem;
  color:#cbd5e1;
  line-height:1.42;
  display:block;
}
.welcome-footer-row{
  border-top:1px solid rgba(148,163,184,.22);
  padding-top:.95rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.9rem;
  flex-wrap:wrap;
}
.welcome-foot{
  margin:0;
  font-size:.86rem;
  color:#cbd5e1;
  line-height:1.45;
  max-width:46ch;
}
.welcome-actions{
  display:flex;
  flex-wrap:nowrap;
  gap:.5rem;
  align-items:center;
  justify-content:flex-end;
}
@media (max-width: 1080px){
  .welcome-footer-row{
    flex-direction:column;
    align-items:stretch;
  }
  .welcome-actions{
    width:100%;
    justify-content:center;
  }
}
.welcome-actions .welcome-btn{
  border:1px solid rgba(148,163,184,.35);
  border-radius:999px;
  padding:.54rem 1.02rem;
  font-weight:700;
  font-size:.92rem;
  text-decoration:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.welcome-btn-primary{
  background:#f8fafc;
  color:#0f172a;
  border-color:rgba(226,232,240,.75);
}
.welcome-btn-primary:hover{
  background:#ffffff;
  color:#0f172a;
}
.welcome-btn-secondary{
  background:#2563eb;
  color:#fff;
  border-color:#2563eb;
}
.welcome-btn-secondary:hover{
  background:#1d4ed8;
  color:#fff;
  border-color:#1d4ed8;
}
.welcome-btn-ghost{
  background:transparent;
  color:#cbd5e1;
  border:none;
  padding-left:.15rem;
  padding-right:.15rem;
}
.welcome-btn-ghost:hover{
  color:#e2e8f0;
  background:transparent;
  border-color:transparent;
}
@media (max-width: 760px){
  .welcome-card{
    border-radius:22px;
  }
  .welcome-grid{
    grid-template-columns:1fr;
  }
  .welcome-footer-row{
    flex-direction:column;
    align-items:flex-start;
  }
  .welcome-actions{
    flex-wrap:wrap;
    justify-content:flex-start;
  }
}
body[data-theme="light"] .welcome-overlay{
  background:rgba(15,23,42,.25);
}
body[data-theme="light"] .welcome-card{
  border-color:rgba(148,163,184,.38);
  background:
    radial-gradient(90% 80% at 6% 0%, rgba(125,211,252,.28), transparent 58%),
    radial-gradient(88% 76% at 96% 4%, rgba(147,197,253,.24), transparent 60%),
    linear-gradient(140deg, rgba(243,250,255,.98), rgba(231,242,255,.96));
  color:#1f2937;
  box-shadow:0 22px 50px rgba(15,23,42,.24);
}
body[data-theme="light"] .welcome-card::before{
  background:radial-gradient(circle, rgba(56,189,248,.13), transparent 68%);
}
body[data-theme="light"] .welcome-title{
  color:#0f172a;
}
body[data-theme="light"] .welcome-sub,
body[data-theme="light"] .welcome-foot,
body[data-theme="light"] .welcome-feature span{
  color:#334155;
}
body[data-theme="light"] .welcome-feature{
  background:rgba(255,255,255,.8);
  border-color:rgba(148,163,184,.35);
}
body[data-theme="light"] .welcome-feature strong{
  color:#0f172a;
}
body[data-theme="light"] .welcome-feature-icon{
  color:#334155;
}
body[data-theme="light"] .welcome-feature-icon .auction-icon-light{
  display:block;
}
body[data-theme="light"] .welcome-feature-icon .auction-icon-dark{
  display:none;
}
body:not([data-theme="light"]) .welcome-card{
  border-color:rgba(148,163,184,.34);
  color:#e2e8f0;
}
body:not([data-theme="light"]) .welcome-title{
  color:#f8fafc;
}
body:not([data-theme="light"]) .welcome-sub,
body:not([data-theme="light"]) .welcome-foot,
body:not([data-theme="light"]) .welcome-feature span{
  color:#cbd5e1;
}
body:not([data-theme="light"]) .welcome-feature{
  background:rgba(15,23,42,.48);
  border-color:rgba(148,163,184,.28);
}
body:not([data-theme="light"]) .welcome-feature strong{
  color:#f8fafc;
}
body:not([data-theme="light"]) .welcome-btn-ghost,
body:not([data-theme="light"]) .welcome-btn-ghost:hover,
body:not([data-theme="light"]) .welcome-btn-ghost:focus-visible{
  border:none;
  box-shadow:none;
  background:transparent;
  color:#e2e8f0;
}
body:not([data-theme="light"]) .welcome-actions a.welcome-btn-primary,
body:not([data-theme="light"]) .welcome-actions a.welcome-btn-primary:visited{
  background:#f8fafc;
  color:#0f172a;
  border-color:#e2e8f0;
  text-decoration:none;
}
body:not([data-theme="light"]) .welcome-actions a.welcome-btn-primary:hover,
body:not([data-theme="light"]) .welcome-actions a.welcome-btn-primary:focus-visible{
  background:#ffffff;
  color:#0f172a;
  border-color:#ffffff;
}
body:not([data-theme="light"]) .welcome-actions a.welcome-btn-secondary,
body:not([data-theme="light"]) .welcome-actions a.welcome-btn-secondary:visited{
  background:#2563eb;
  color:#ffffff;
  border-color:#2563eb;
  text-decoration:none;
}
body:not([data-theme="light"]) .welcome-actions a.welcome-btn-secondary:hover,
body:not([data-theme="light"]) .welcome-actions a.welcome-btn-secondary:focus-visible{
  background:#1d4ed8;
  color:#ffffff;
  border-color:#1d4ed8;
}
body[data-theme="light"] .welcome-btn-primary{
  background:#ffffff;
  color:#0f172a;
  border-color:#d1d5db;
}
body[data-theme="light"] .welcome-btn-primary:hover{
  background:#f8fafc;
  border-color:#cbd5e1;
}
body[data-theme="light"] .welcome-btn-secondary{
  background:#2563eb;
  color:#fff;
  border-color:#2563eb;
}
body[data-theme="light"] .welcome-btn-secondary:hover{
  background:#1d4ed8;
  border-color:#1d4ed8;
  color:#fff;
}
body[data-theme="light"] .welcome-btn-ghost{
  color:#64748b;
  border-color:transparent;
  background:transparent;
}
body[data-theme="light"] .welcome-btn-ghost:hover{
  color:#334155;
  border-color:transparent;
  background:transparent;
}

.auth-corner-popup{
  position:fixed;
  right:clamp(12px, 2.2vw, 24px);
  bottom:calc(14px + var(--safe-bottom));
  z-index:9100;
  width:min(420px, calc(100vw - 22px));
  display:none;
}
.auth-corner-popup.show{
  display:block;
  animation:welcomeCardIn .28s var(--easing-smooth);
}
.auth-corner-card{
  position:relative;
  width:100%;
  background:var(--auth-card-bg);
  border:1px solid var(--auth-card-border);
  border-radius:24px;
  padding:1.05rem 1.15rem 1.12rem;
  box-shadow:var(--auth-card-shadow);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.auth-corner-close{
  position:absolute;
  top:.55rem;
  right:.55rem;
  width:30px;
  height:30px;
  border:none;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.auth-corner-close:hover{
  background:rgba(148,163,184,.14);
  color:var(--text);
}
.auth-corner-logo{
  width:100%;
  max-width:170px;
  height:auto;
  display:block;
  margin:0 auto .6rem;
}
.auth-corner-title{
  margin:0 0 .2rem;
  text-align:center;
  font-weight:700;
  color:var(--text);
  font-size:1rem;
  line-height:1.25;
}
.auth-corner-sub{
  margin:0 0 .85rem;
  text-align:center;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.35;
}
.auth-corner-actions{
  display:grid;
  gap:.5rem;
}
.auth-corner-legal{
  margin:.65rem 0 0;
  text-align:center;
  color:var(--muted);
  font-size:.72rem;
  line-height:1.35;
}
.auth-corner-legal a{
  color:inherit;
  text-decoration:underline;
  font-weight:600;
  text-underline-offset:1px;
}
.auth-corner-divider{
  display:flex;
  align-items:center;
  gap:.58rem;
  color:#64748b;
  font-size:.75rem;
  font-weight:600;
  line-height:1;
  margin:.04rem 0;
}
.auth-corner-divider::before,
.auth-corner-divider::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:rgba(148,163,184,.52);
}
.auth-corner-divider span{
  white-space:nowrap;
  text-transform:none;
}
.auth-corner-btn{
  border:1px solid rgba(15,23,42,.2);
  border-radius:999px;
  padding:.68rem .92rem;
  font-weight:700;
  font-size:.92rem;
  line-height:1;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.52rem;
  cursor:pointer;
}
.auth-corner-btn.primary{
  background:var(--auth-button-bg);
  color:var(--auth-button-color);
}
.auth-corner-btn.primary:hover{
  background:#edeff5;
}
.auth-corner-btn.secondary{
  background:transparent;
  border-color:rgba(148,163,184,.45);
  color:var(--text);
}
.auth-corner-btn.secondary:hover{
  background:rgba(148,163,184,.12);
}
.auth-corner-btn.google{
  border:1px solid #b8c3d3;
  background:#ffffff;
  color:#0f172a;
  box-shadow:0 2px 8px rgba(15,23,42,.06);
}
.auth-corner-btn.google:hover{
  background:#f8fafc;
  border-color:#8fa0b8;
  box-shadow:0 4px 12px rgba(15,23,42,.1);
  color:#0f172a;
}
.auth-corner-btn.google img{
  width:20px;
  height:20px;
  object-fit:contain;
  display:block;
  flex:0 0 auto;
}
body[data-theme="dark"] .auth-corner-btn.primary{
  background:var(--auth-button-bg);
  color:var(--auth-button-color);
}
body[data-theme="dark"] .auth-corner-btn.primary:hover{
  background:#e5e7eb;
  color:#0f172a;
}
body[data-theme="dark"] .auth-corner-btn.secondary{
  border-color:#334155;
  color:#e2e8f0;
  background:rgba(15,23,42,.32);
}
body[data-theme="dark"] .auth-corner-btn.secondary:hover{
  background:rgba(30,41,59,.45);
  color:#f8fafc;
}
body[data-theme="dark"] .auth-corner-btn.google{
  background:#111827;
  color:#e2e8f0;
  border-color:#334155;
  box-shadow:none;
}
body[data-theme="dark"] .auth-corner-btn.google:hover{
  background:#1a2437;
  color:#f8fafc;
  border-color:#4b5f7b;
  box-shadow:none;
}
body[data-theme="dark"] .auth-corner-divider{
  color:#94a3b8;
}
body[data-theme="dark"] .auth-corner-divider::before,
body[data-theme="dark"] .auth-corner-divider::after{
  background:rgba(100,116,139,.72);
}
@media (max-width: 760px){
  .auth-corner-popup{
    right:10px;
    width:min(320px, calc(100vw - 20px));
    bottom:calc(10px + var(--safe-bottom));
  }
  .auth-corner-card{
    border-radius:20px;
  }
}

/* Nuke any leftover inline copy buttons that other scripts added inside <pre> */
#main .codewrap pre > .copy-btn{ display:none !important; }
body.auth-page #main,
body.standalone-page #main{
  min-height:calc(100vh - var(--navbar-height));
  min-height:calc(100dvh - var(--navbar-height));
  background:var(--panel) !important;
  margin-left:0 !important;
  padding:0 !important;
  height:auto;
}
body.auth-page,
body.standalone-page{
  overflow:auto;
  background:var(--panel);
}
.flash-container{
  margin-left:var(--sidebar-width);
  max-width:calc(100% - var(--sidebar-width) - 24px);
  padding:1rem 1.5rem 0;
}
.flash-container .alert{
  border-radius:14px;
  border:1px solid rgba(148,163,184,.35) !important;
  background:linear-gradient(135deg, rgba(30,41,59,.9), rgba(15,23,42,.84)) !important;
  color:#e2e8f0 !important;
  box-shadow:0 18px 40px rgba(2,6,23,.35);
  backdrop-filter:blur(12px);
}
.flash-container .alert.alert-success{
  border-color:rgba(34,197,94,.45) !important;
}
.flash-container .alert.alert-warning{
  border-color:rgba(125,211,252,.56) !important;
}
.flash-container .alert.alert-danger{
  border-color:rgba(248,113,113,.56) !important;
}
.flash-container .alert.alert-info{
  border-color:rgba(148,163,184,.52) !important;
}
body.sidebar-hidden .flash-container{
  margin-left:48px;
  max-width:calc(100% - 48px - 24px);
}
body.auth-page .flash-container{
  display:none !important;
}
body.standalone-page .flash-container{
  margin-left:0;
  max-width:720px;
  padding:1rem 1rem 0;
}
.flash-toast-host{
  position:fixed;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  width:calc(100vw - 28px);
  max-width:calc(100vw - 28px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.55rem;
  z-index:5600;
  pointer-events:none;
  padding:0;
  margin:0;
}
body.notifications-menu-open .flash-toast-host{
  top:84px;
}
.flash-toast-host .alert{
  position:relative;
  margin:0 !important;
  display:inline-flex;
  flex:0 0 auto;
  flex-direction:column;
  align-self:center;
  box-sizing:border-box;
  width:auto;
  min-width:min(260px, calc(100vw - 28px));
  max-width:min(520px, calc(100vw - 28px));
  border-radius:14px;
  border:1px solid rgba(148,163,184,.35) !important;
  background:linear-gradient(135deg, rgba(30,41,59,.9), rgba(15,23,42,.84)) !important;
  color:#e2e8f0 !important;
  box-shadow:0 18px 40px rgba(2,6,23,.35);
  backdrop-filter:blur(12px);
  opacity:0;
  transform:translateY(-10px);
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:auto;
  padding:.62rem 2rem .62rem .82rem;
  font-size:.98rem;
  line-height:1.3;
}
.flash-toast-host .alert.show{
  opacity:1;
  transform:translateY(0);
}
.flash-toast-host .alert.alert-success{
  border-color:rgba(34,197,94,.45) !important;
}
.flash-toast-host .alert.alert-warning{
  border-color:rgba(125,211,252,.56) !important;
}
.flash-toast-host .alert.alert-danger{
  border-color:rgba(248,113,113,.56) !important;
}
.flash-toast-host .alert.alert-info{
  border-color:rgba(148,163,184,.52) !important;
}
.flash-toast-host .flash-toast-close{
  position:absolute;
  top:.34rem;
  right:.38rem;
  width:18px;
  height:18px;
  border:none;
  border-radius:7px;
  background:transparent;
  color:#cbd5e1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:.92rem;
  line-height:1;
  padding:0;
}
.flash-toast-host .flash-toast-close:hover,
.flash-toast-host .flash-toast-close:focus-visible{
  background:rgba(148,163,184,.2);
  color:#f8fafc;
}
.flash-toast-host .flash-toast-main{
  display:flex;
  flex-direction:column;
  gap:.24rem;
  min-width:0;
  padding-right:.7rem;
}
.flash-toast-host .flash-toast-title{
  font-weight:700;
}
.flash-toast-host .flash-toast-detail{
  font-size:.9rem;
  color:#cbd5e1;
}
.flash-toast-host .flash-toast-actions{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-top:.32rem;
}
.flash-toast-host .flash-toast-btn{
  border:1px solid rgba(125,211,252,.5);
  background:rgba(14,116,144,.28);
  color:#e0f2fe;
  border-radius:10px;
  padding:.34rem .68rem;
  font-size:.84rem;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.flash-toast-host .flash-toast-btn:hover,
.flash-toast-host .flash-toast-btn:focus-visible{
  background:rgba(14,116,144,.4);
  border-color:rgba(125,211,252,.72);
  transform:translateY(-1px);
}
.flash-toast-host .flash-toast-btn:disabled{
  opacity:.78;
  cursor:default;
  transform:none;
}
body[data-theme="light"] .flash-toast-host .alert{
  background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(241,245,249,.86)) !important;
  color:#0f172a !important;
  border-color:rgba(148,163,184,.45) !important;
  box-shadow:0 16px 30px rgba(15,23,42,.18);
}
body[data-theme="light"] .flash-container .alert{
  background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(241,245,249,.86)) !important;
  color:#0f172a !important;
  border-color:rgba(148,163,184,.45) !important;
  box-shadow:0 16px 30px rgba(15,23,42,.18);
  backdrop-filter:none;
}
body[data-theme="light"] .flash-container .alert.alert-success{
  border-color:rgba(22,163,74,.45) !important;
}
body[data-theme="light"] .flash-container .alert.alert-warning{
  border-color:rgba(2,132,199,.45) !important;
}
body[data-theme="light"] .flash-container .alert.alert-danger{
  border-color:rgba(220,38,38,.45) !important;
}
body[data-theme="light"] .flash-toast-host .alert.alert-success{
  border-color:rgba(22,163,74,.45) !important;
}
body[data-theme="light"] .flash-toast-host .alert.alert-warning{
  border-color:rgba(2,132,199,.45) !important;
}
body[data-theme="light"] .flash-toast-host .alert.alert-danger{
  border-color:rgba(220,38,38,.45) !important;
}
body[data-theme="light"] .flash-toast-host .flash-toast-close{
  color:#475569;
}
body[data-theme="light"] .flash-toast-host .flash-toast-close:hover,
body[data-theme="light"] .flash-toast-host .flash-toast-close:focus-visible{
  background:rgba(148,163,184,.18);
  color:#0f172a;
}
body[data-theme="light"] .flash-toast-host .flash-toast-detail{
  color:#334155;
}
body[data-theme="light"] .flash-toast-host .flash-toast-btn{
  border-color:rgba(3,105,161,.45);
  background:rgba(224,242,254,.95);
  color:#075985;
}
body[data-theme="light"] .flash-toast-host .flash-toast-btn:hover,
body[data-theme="light"] .flash-toast-host .flash-toast-btn:focus-visible{
  background:rgba(186,230,253,.95);
  border-color:rgba(2,132,199,.62);
}
.site-footer{
  border-top:1px solid var(--line);
  color:var(--muted);
  padding:1.5rem 1.5rem 2.5rem;
  margin-left:var(--sidebar-width);
  background:transparent;
}
body.sidebar-hidden .site-footer{
  margin-left:48px;
}
body.auth-page .site-footer,
body.standalone-page .site-footer{
  margin-left:0;
  max-width:720px;
  padding:1.5rem 1rem 2rem;
}
.site-footer-inner{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  font-size:.9rem;
}
.site-footer a{
  color:var(--link-color);
  text-decoration:underline;
  font-weight:600;
}
.site-footer a:hover{
  color:var(--link-color-hover);
}
.legal-shell{
  padding:2.5rem 1.5rem 4rem;
  display:flex;
  justify-content:center;
  width:100%;
}
.legal-card{
  width:100%;
  max-width:720px;
  margin:0 auto;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:24px;
  padding:2rem 2.5rem;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}
body[data-theme="light"] .legal-card{
  box-shadow:0 18px 40px rgba(15,23,42,.08);
}
.legal-body h1{
  font-weight:700;
  margin-bottom:.5rem;
}
.legal-body h2{
  margin-top:2rem;
  margin-bottom:.75rem;
  font-weight:700;
}
.legal-body h3{
  margin-top:1.35rem;
  margin-bottom:.6rem;
  font-weight:600;
}
.legal-body p,
.legal-body li{
  color:var(--text);
  line-height:1.65;
}
.legal-body ul{
  padding-left:1.2rem;
}
.legal-body hr{
  border:0;
  border-top:1px solid var(--line);
  margin:1.6rem 0;
}
.legal-back{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:var(--link-color);
  text-decoration:underline;
  font-weight:600;
  font-size:.9rem;
  margin-bottom:1rem;
}
.legal-back:hover{
  color:var(--link-color-hover);
}
.state-shell{
  position:relative;
  width:100%;
  min-height:calc(100vh - var(--navbar-height));
  min-height:calc(100dvh - var(--navbar-height));
  padding:4rem 1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0b1020 url("../images/sylas_bg.png") center/cover fixed no-repeat;
}
body.standalone-page,
body.standalone-page #main{
  background:#0b1020 url("../images/sylas_bg.png") center/cover fixed no-repeat !important;
}
body[data-theme="light"].standalone-page,
body[data-theme="light"].standalone-page #main{
  background:#f8fafc url("../images/sylas_bg.png") center/cover fixed no-repeat !important;
}
@media (max-width: 900px){
  .state-shell,
  body.standalone-page,
  body.standalone-page #main,
  body[data-theme="light"].standalone-page,
  body[data-theme="light"].standalone-page #main{
    background-attachment:scroll !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
  }
}
.state-card{
  width:100%;
  max-width:760px;
  background:var(--auth-card-bg);
  border:1px solid var(--auth-card-border);
  border-radius:28px;
  padding:1.5rem 1.75rem 1.75rem;
  box-shadow:var(--auth-card-shadow);
}
body[data-theme="light"] .state-card{
  background:var(--auth-card-bg);
  border-color:var(--auth-card-border);
}
body[data-theme="dark"] .state-card{
  border-color:#1b1b1b;
}
.state-card-grid{
  display:block;
}
.state-kicker{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.46rem .9rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(255,255,255,.04);
  color:#94a3b8;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.state-kicker::before{
  content:"";
  width:.45rem;
  height:.45rem;
  border-radius:999px;
  background:#60a5fa;
}
body[data-theme="light"] .state-kicker{
  background:#f8fafc;
  border-color:#d8dee7;
  color:#64748b;
}
.state-title{
  margin:1rem 0 .75rem;
  font-size:clamp(2rem, 5vw, 3.3rem);
  line-height:1;
  letter-spacing:-.05em;
  font-weight:700;
  color:var(--text);
}
.state-text{
  margin:0;
  max-width:34ch;
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.68;
}
.state-status{
  margin:1rem 0 0;
  color:var(--muted);
  font-weight:600;
}
.state-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  margin-top:1.5rem;
}
.state-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-height:3.05rem;
  padding:.9rem 1.35rem;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.2);
  background:#ffffff;
  color:#0f172a;
  text-decoration:none;
  font-weight:700;
  letter-spacing:0;
  box-shadow:0 2px 8px rgba(15,23,42,.06);
}
.state-button:hover,
.state-button:focus{
  background:#f8fafc;
  color:#0f172a;
  text-decoration:none;
  transform:none;
}
.state-button.primary{
  background:var(--auth-button-bg);
  color:var(--auth-button-color);
  border-color:rgba(15,23,42,.2);
}
.state-button.secondary{
  background:#ffffff;
  color:#0f172a;
}
body[data-theme="dark"] .state-button{
  background:#111827;
  color:#e2e8f0;
  border-color:#334155;
  box-shadow:none;
}
body[data-theme="dark"] .state-button:hover,
body[data-theme="dark"] .state-button:focus{
  background:#1a2437;
  color:#f8fafc;
}
body[data-theme="dark"] .state-button.primary{
  background:var(--auth-button-bg);
  color:var(--auth-button-color);
  border-color:rgba(15,23,42,.2);
}
body[data-theme="dark"] .state-button.primary:hover,
body[data-theme="dark"] .state-button.primary:focus{
  background:#edeff5;
  color:#111;
}
.state-form{
  display:grid;
  gap:.85rem;
  margin-top:.25rem;
}
.state-form label{
  font-size:.84rem;
  font-weight:600;
  color:var(--text);
}
.state-form input{
  width:100%;
  min-height:3.1rem;
  padding:.85rem 1rem;
  border-radius:14px;
  border:1px solid var(--input-border);
  background:var(--input-bg);
  color:var(--text);
  font-size:1rem;
  outline:none;
}
.state-form input::placeholder{
  color:#94a3b8;
}
.state-form input:focus{
  box-shadow:0 0 0 2px rgba(99,102,241,.35);
  border-color:#818cf8;
}
.state-alert{
  padding:.9rem 1rem;
  border-radius:14px;
  background:rgba(127,29,29,.18);
  border:1px solid rgba(248,113,113,.18);
  color:#fda4af;
  font-weight:600;
}
.state-footnote{
  margin:0;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.65;
}
@keyframes stateReveal{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
.state-card{
  animation:stateReveal .46s var(--easing-smooth);
}
@media (max-width: 860px){
  .state-shell{
    padding:3rem 1rem;
  }
}
@media (max-width: 720px){
  .legal-shell{ padding:2rem 1rem 3rem; }
  .legal-card{ padding:1.6rem; }
  .state-card{
    border-radius:24px;
    padding:1.25rem;
  }
  .state-title{
    font-size:clamp(1.8rem, 11vw, 2.7rem);
  }
  .state-actions{
    flex-direction:column;
  }
  .state-button{
    width:100%;
  }
}