:root{
  --bg:#0b0f17;
  --panel:#0f1625;
  --panel2:#0c1220;
  --muted:#9aa5b1;
  --text:#e7ecf3;
  --border:rgba(255,255,255,.08);
  --accent:#7c5cff;
  --accent2:#00d4ff;
  --good:#22c55e;
  --bad:#ef4444;
  --shadow:0 16px 50px rgba(0,0,0,.55);
  --radius:16px;
  --radius2:22px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  background:
    radial-gradient(1200px 600px at 20% -20%, rgba(124,92,255,.25), transparent 50%),
    radial-gradient(900px 500px at 90% 0%, rgba(0,212,255,.18), transparent 45%),
    radial-gradient(700px 600px at 50% 120%, rgba(124,92,255,.12), transparent 55%),
    var(--bg);
  color:var(--text);
  overflow:hidden;
}

/* Buttons */
.btn{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  text-decoration:none;
  transition:transform .05s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12)}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:linear-gradient(135deg, rgba(124,92,255,.9), rgba(0,212,255,.65));
  border-color:transparent;
  box-shadow:0 10px 30px rgba(124,92,255,.25);
}
.btn-primary:hover{filter:brightness(1.03)}
.btn-ghost{background:transparent}
.btn-icon{padding:10px; border-radius:14px}
.btn-mini{padding:8px 10px; border-radius:12px; font-size:13px}
.w-full{width:100%}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Icons (CSS mask with inline SVG) */
.icon{width:18px;height:18px;display:inline-block;background:currentColor;mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;opacity:.92}
.icon-menu{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h16v2H4zM4 11h16v2H4zM4 16h16v2H4z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h16v2H4zM4 11h16v2H4zM4 16h16v2H4z'/%3E%3C/svg%3E")}
.icon-plus{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 5h2v14h-2zM5 11h14v2H5z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 5h2v14h-2zM5 11h14v2H5z'/%3E%3C/svg%3E")}
.icon-search{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 18a8 8 0 1 1 5.3-14 8 8 0 0 1-5.3 14m11 2-6.2-6.2 1.4-1.4L22.4 18.6z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 18a8 8 0 1 1 5.3-14 8 8 0 0 1-5.3 14m11 2-6.2-6.2 1.4-1.4L22.4 18.6z'/%3E%3C/svg%3E")}
.icon-settings{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.4 12.9a7.8 7.8 0 0 0 0-1.8l2-1.5-2-3.5-2.4 1a7.7 7.7 0 0 0-1.6-.9l-.4-2.6h-4l-.4 2.6c-.6.2-1.1.5-1.6.9l-2.4-1-2 3.5 2 1.5a7.8 7.8 0 0 0 0 1.8l-2 1.5 2 3.5 2.4-1c.5.4 1 .7 1.6.9l.4 2.6h4l.4-2.6c.6-.2 1.1-.5 1.6-.9l2.4 1 2-3.5zM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.4 12.9a7.8 7.8 0 0 0 0-1.8l2-1.5-2-3.5-2.4 1a7.7 7.7 0 0 0-1.6-.9l-.4-2.6h-4l-.4 2.6c-.6.2-1.1.5-1.6.9l-2.4-1-2 3.5 2 1.5a7.8 7.8 0 0 0 0 1.8l-2 1.5 2 3.5 2.4-1c.5.4 1 .7 1.6.9l.4 2.6h4l.4-2.6c.6-.2 1.1-.5 1.6-.9l2.4 1 2-3.5zM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5'/%3E%3C/svg%3E")}
.icon-logout{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 17v-2h-6V9h6V7l5 5zm1-14h9v18h-9v-2h7V5h-7z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 17v-2h-6V9h6V7l5 5zm1-14h9v18h-9v-2h7V5h-7z'/%3E%3C/svg%3E")}
.icon-share{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18 16a3 3 0 0 0-2.4 1.2L8.9 13.7a3 3 0 0 0 0-3.4l6.7-3.5A3 3 0 1 0 15 5a3 3 0 0 0 .1.7L8.4 9.2a3 3 0 1 0 0 5.6l6.7 3.5A3 3 0 1 0 18 16'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18 16a3 3 0 0 0-2.4 1.2L8.9 13.7a3 3 0 0 0 0-3.4l6.7-3.5A3 3 0 1 0 15 5a3 3 0 0 0 .1.7L8.4 9.2a3 3 0 1 0 0 5.6l6.7 3.5A3 3 0 1 0 18 16'/%3E%3C/svg%3E")}
.icon-attach{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16.5 6.5 9 14a3 3 0 1 0 4.2 4.2l7.1-7.1a5 5 0 0 0-7.1-7.1L6.4 10.8'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16.5 6.5 9 14a3 3 0 1 0 4.2 4.2l7.1-7.1a5 5 0 0 0-7.1-7.1L6.4 10.8'/%3E%3C/svg%3E")}
.icon-file{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h9l5 5v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m8 1.5V8h4.5'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h9l5 5v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m8 1.5V8h4.5'/%3E%3C/svg%3E")}
.icon-image{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2m-4.5-9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0M5 19l4-5 3 4 2-3 5 4z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2m-4.5-9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0M5 19l4-5 3 4 2-3 5 4z'/%3E%3C/svg%3E")}
.icon-magic{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 20 14 10l4 4L8 24zm12.5-12.5 3-3 3 3-3 3zM12 2l1.2 3.6L17 7l-3.8 1.4L12 12l-1.2-3.6L7 7l3.8-1.4z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 20 14 10l4 4L8 24zm12.5-12.5 3-3 3 3-3 3zM12 2l1.2 3.6L17 7l-3.8 1.4L12 12l-1.2-3.6L7 7l3.8-1.4z'/%3E%3C/svg%3E")}
.icon-bolt{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 3 14h8l-1 8 10-12h-8z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 3 14h8l-1 8 10-12h-8z'/%3E%3C/svg%3E")}
.icon-arrow-left{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 7 9 12l5 5-1.4 1.4L6.2 12l6.4-6.4z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 7 9 12l5 5-1.4 1.4L6.2 12l6.4-6.4z'/%3E%3C/svg%3E")}

/* Layout */
.app-shell{display:flex;height:100vh;width:100vw}
.sidebar{
  width:320px;
  background:linear-gradient(180deg, rgba(15,22,37,.9), rgba(12,18,32,.9));
  border-right:1px solid var(--border);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  position:relative;
}
.sidebar.collapsed{width:86px}
.sidebar .brand{display:flex;align-items:center;gap:10px;overflow:hidden}
.brand-name{font-weight:700;letter-spacing:.2px;white-space:nowrap}
.logo-sq{
  width:34px;height:34px;border-radius:12px;
  background:
    url('../img/favicon.png') center/20px 20px no-repeat,
    linear-gradient(135deg, rgba(124,92,255,1), rgba(0,212,255,.85));
  box-shadow:0 12px 32px rgba(124,92,255,.25);
}
.side-top{display:flex;align-items:center;gap:10px}
.side-actions{display:flex;flex-direction:column;gap:10px}
.search{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.02)}
.search input{flex:1;background:transparent;border:0;outline:none;color:var(--text);font-size:14px}
.side-section{flex:1;display:flex;flex-direction:column;min-height:0}
.side-title{color:var(--muted);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:6px 0}
.chat-list{overflow:auto;display:flex;flex-direction:column;gap:6px;padding-right:6px}
.chat-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border:1px solid transparent;border-radius:14px;
  cursor:pointer;user-select:none;
}
.chat-item:hover{background:rgba(255,255,255,.03)}
.chat-item.active{background:rgba(124,92,255,.12);border-color:rgba(124,92,255,.25)}
.chat-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-actions{display:flex;gap:6px;opacity:.0;transition:opacity .12s ease}
.chat-item:hover .chat-actions{opacity:1}
.pill{display:inline-flex;padding:2px 8px;border:1px solid var(--border);border-radius:999px;font-size:12px;color:var(--muted)}
.pill-ok{border-color:rgba(34,197,94,.35);color:#b9f6c8}

.side-bottom{display:flex;flex-direction:column;gap:10px}
.user-chip{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.02)}
.avatar{width:34px;height:34px;border-radius:12px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;font-weight:700}
.user-meta{min-width:0}
.user-name{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-email{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Main */
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  background:rgba(11,15,23,.55);
  backdrop-filter: blur(10px);
  /* allow dropdowns to overflow the header on all browsers */
  overflow:visible;
  position:relative;
}
.topbar-left{display:flex;align-items:center;gap:12px}

.model-dd{position:relative}
.model-trigger{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.03);cursor:pointer;color:var(--text);box-shadow:0 10px 30px rgba(0,0,0,.15)}
.model-trigger:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.model-badge{
  width:26px;height:26px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:15px;line-height:1;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(135deg, rgba(124,92,255,.95), rgba(0,212,255,.70));
  box-shadow:0 10px 30px rgba(124,92,255,.18);
  position:relative;
}
.model-badge::before{content:attr(data-ic);}
.model-current{max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.model-trigger .icon{opacity:.85}
.model-menu{position:absolute;top:48px;left:0;z-index:50;width:360px;max-width:84vw;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(10,14,22,.92);backdrop-filter:blur(12px);box-shadow:0 22px 70px rgba(0,0,0,.55);padding:12px;display:none}
.model-dd.open .model-menu{display:block;animation:pop .12s ease}
@keyframes pop{from{transform:translateY(-4px);opacity:0}to{transform:translateY(0);opacity:1}}
.model-menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.model-menu-title{display:flex;align-items:center;gap:10px;font-weight:750}
.model-search{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.02)}
.model-search input{flex:1;background:transparent;border:0;outline:none;color:var(--text);font-size:14px}
.model-list{margin-top:10px;max-height:320px;overflow:auto;display:flex;flex-direction:column;gap:8px;padding-right:6px}
.model-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid transparent;border-radius:14px;cursor:pointer;background:rgba(255,255,255,.02)}
.model-opt:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.model-opt.active{background:rgba(124,92,255,.14);border-color:rgba(124,92,255,.25)}
.model-opt-badge{
  width:28px;height:28px;border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:16px;line-height:1;
  position:relative;
}
.model-opt-badge::before{content:attr(data-ic);}

/* Model icon themes (varied per model) */
.mi-0{background:linear-gradient(135deg, rgba(34,197,94,.35), rgba(0,212,255,.22));border-color:rgba(34,197,94,.25)}
.mi-1{background:linear-gradient(135deg, rgba(250,204,21,.35), rgba(124,92,255,.18));border-color:rgba(250,204,21,.25)}
.mi-2{background:linear-gradient(135deg, rgba(239,68,68,.30), rgba(59,130,246,.18));border-color:rgba(239,68,68,.22)}
.mi-3{background:linear-gradient(135deg, rgba(124,92,255,.32), rgba(0,212,255,.18));border-color:rgba(124,92,255,.22)}
.mi-4{background:linear-gradient(135deg, rgba(56,189,248,.30), rgba(34,197,94,.18));border-color:rgba(56,189,248,.22)}
.mi-5{background:linear-gradient(135deg, rgba(244,114,182,.28), rgba(124,92,255,.18));border-color:rgba(244,114,182,.22)}
.mi-6{background:linear-gradient(135deg, rgba(148,163,184,.26), rgba(56,189,248,.14));border-color:rgba(148,163,184,.18)}
.mi-7{background:linear-gradient(135deg, rgba(16,185,129,.26), rgba(250,204,21,.14));border-color:rgba(16,185,129,.18)}
.mi-8{background:linear-gradient(135deg, rgba(59,130,246,.28), rgba(244,114,182,.14));border-color:rgba(59,130,246,.18)}
.mi-9{background:linear-gradient(135deg, rgba(99,102,241,.28), rgba(34,197,94,.14));border-color:rgba(99,102,241,.18)}
.model-opt-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.model-opt-meta{color:var(--muted);font-size:12px}
.model-pill{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.03)}
.model-select{
  background:transparent;border:0;outline:none;color:var(--text);font-size:14px;
  appearance:none;-webkit-appearance:none;
}
.mode-badge{color:var(--muted);font-size:13px}
.chat-area{flex:1;min-height:0;position:relative}
.chat-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.hero{max-width:520px;text-align:center;padding:24px}
.hero-title{font-size:38px;font-weight:800;letter-spacing:-.02em}
.hero-sub{margin-top:10px;color:var(--muted);font-size:15px}
.messages{
  height:100%;
  overflow:auto;
  padding:18px 18px 120px;
  display:flex;flex-direction:column;gap:14px;
}

/* Hide scrollbars (keep scroll working) */
.messages, .chat-list, .model-list, .admin-wrap, .auth-wrap{
  scrollbar-width:none; /* Firefox */
  -ms-overflow-style:none; /* IE/Edge legacy */
}
.messages::-webkit-scrollbar,
.chat-list::-webkit-scrollbar,
.model-list::-webkit-scrollbar,
.admin-wrap::-webkit-scrollbar,
.auth-wrap::-webkit-scrollbar{width:0;height:0}
.msg-row{display:flex;gap:10px}
.msg-row.user{justify-content:flex-end}
.msg-row.assistant{justify-content:flex-start}
.bubble{
  max-width:min(760px, 92vw);
  border:1px solid var(--border);
  border-radius:var(--radius2);
  padding:14px 14px;
  background:rgba(255,255,255,.03);
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.msg-row.user .bubble{
  background:linear-gradient(135deg, rgba(124,92,255,.18), rgba(0,212,255,.10));
  border-color:rgba(124,92,255,.22);
}
.msg-row.assistant .bubble{
  background:rgba(255,255,255,.02);
}
.msg-meta{margin-top:10px;display:flex;gap:8px;align-items:center;justify-content:space-between}
.msg-actions{display:flex;gap:8px;align-items:center}
.action-btn{
  width:34px;height:34px;border-radius:12px;border:1px solid var(--border);
  background:rgba(255,255,255,.02);cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.92);
}
.action-btn:hover{background:rgba(255,255,255,.04)}
.action-btn svg{width:18px;height:18px;fill:currentColor;opacity:.9}
.action-text{color:var(--muted);font-size:12px}
.fallback-note{color:rgba(255,255,255,.72);font-size:12px;padding:6px 10px;border-radius:12px;border:1px dashed rgba(255,255,255,.14)}

/* Markdown */
.mc-p{margin:0 0 10px 0;line-height:1.65}
.mc-p:last-child{margin-bottom:0}
.mc-ul{margin:0 0 10px 20px}
.mc-ul li{margin:6px 0;line-height:1.6}
.mc-inline{font-family:var(--mono);font-size:.95em;padding:2px 6px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.mc-code{position:relative;margin:10px 0 0 0;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:14px 12px 12px 12px;overflow:auto}
.mc-code code{font-family:var(--mono);font-size:13px;line-height:1.55;display:block;white-space:pre}
.mc-copy{
  position:absolute;top:10px;right:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--text);
  border-radius:12px;
  padding:6px 10px;
  cursor:pointer;
  font-size:12px;
}
.mc-code .mc-copy:hover{background:rgba(255,255,255,.06)}

/* Image card */
.img-card{display:flex;flex-direction:column;gap:10px}
.img-frame{width:min(520px, 82vw);aspect-ratio:1/1;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02);overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative}
.img-frame img{width:100%;height:100%;object-fit:cover;display:block}
.img-skeleton{
  width:100%;height:100%;
  background:linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,255,255,.06), rgba(255,255,255,.02));
  background-size:200% 100%;
  animation:shimmer 1.2s infinite;
}
@keyframes shimmer{0%{background-position:0 0}100%{background-position:200% 0}}
.loader-ring{
  position:absolute;
  width:54px;height:54px;border-radius:50%;
  border:4px solid rgba(255,255,255,.10);
  border-top-color:rgba(124,92,255,.9);
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Composer */
.composer{
  position:sticky;bottom:0;
  padding:12px 14px 14px;
  background:linear-gradient(180deg, rgba(11,15,23,0), rgba(11,15,23,.85), rgba(11,15,23,1));
  border-top:1px solid rgba(255,255,255,.06);
}
.composer-inner{
  display:flex;gap:12px;align-items:flex-end;
  max-width:980px;margin:0 auto;
  padding:12px 12px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
}
.prompt{
  flex:1;resize:none;
  background:transparent;border:0;outline:none;
  color:var(--text);
  font-size:15px;line-height:1.5;
  padding:10px 6px 8px;
  max-height:180px;
}
.send-btn{
  width:44px;height:44px;border-radius:999px;
  border:0;cursor:pointer;
  background:#ffffff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 36px rgba(0,0,0,.35);
}
.send-btn:hover{filter:brightness(1.03)}
.send-arrow{
  width:18px;height:18px;display:block;
  background:#0b0f17;
  mask-size:contain;mask-repeat:no-repeat;mask-position:center;
  -webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 4 5 11h4v9h6v-9h4z'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 4 5 11h4v9h6v-9h4z'/%3E%3C/svg%3E");
}
.attach-wrap{position:relative}
.plus-menu{
  position:absolute;bottom:56px;left:0;
  width:220px;
  background:rgba(15,22,37,.98);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:8px;
  display:none;
}
.plus-menu.open{display:block}
.menu-item{
  width:100%;
  text-align:left;
  background:transparent;border:0;
  color:var(--text);
  padding:10px 10px;border-radius:14px;
  display:flex;align-items:center;gap:10px;
  cursor:pointer;
}
.menu-item:hover{background:rgba(255,255,255,.05)}
.composer-hint{max-width:980px;margin:8px auto 0;color:var(--muted);font-size:12px;padding:0 6px}

/* Auth */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto}
.auth-card{
  width:min(420px, 96vw);
  background:rgba(15,22,37,.85);
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;
  padding:22px;
  box-shadow:var(--shadow);
}
.install-card{width:min(560px, 96vw)}
.auth-brand{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.auth-title{font-size:20px;font-weight:800}
.auth-sub{color:var(--muted);font-size:13px;margin-top:2px}
.auth-form{display:flex;flex-direction:column;gap:10px;margin-top:16px}
label{font-size:12px;color:rgba(255,255,255,.75)}
input,select,textarea{
  width:100%;
  padding:11px 12px;border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
}
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px 16px;
}
input[type="checkbox"],input[type="radio"]{accent-color:rgba(124,92,255,.95)}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{border-color:rgba(124,92,255,.5);box-shadow:0 0 0 3px rgba(124,92,255,.12)}
.alert{margin-top:12px;padding:10px 12px;border-radius:14px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.25);color:#fecaca}
.success{margin-top:12px;padding:10px 12px;border-radius:14px;background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.22);color:#bbf7d0}
.auth-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;color:var(--muted);font-size:13px}
.auth-foot a{color:#c7d2fe;text-decoration:none}
.auth-foot a:hover{text-decoration:underline}
.dot{opacity:.6}
.sep{border:0;height:1px;background:rgba(255,255,255,.08);margin:14px 0}

/* Admin */
.admin-wrap{max-width:1100px;margin:0 auto;padding:24px;overflow:auto;height:100vh}
.admin-top{display:flex;align-items:center;gap:14px}
.admin-title{font-size:22px;font-weight:800}
.admin-nav{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.nav-item{padding:10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.10);text-decoration:none;color:var(--text);background:rgba(255,255,255,.02)}
.nav-item.active{background:rgba(124,92,255,.14);border-color:rgba(124,92,255,.22)}
.admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.card{background:rgba(15,22,37,.75);border:1px solid rgba(255,255,255,.10);border-radius:24px;padding:16px}
.card-title{font-weight:700;color:rgba(255,255,255,.9)}
.card-big{font-size:34px;font-weight:900;margin-top:6px}
.mt{margin-top:12px}
.form-card label{margin-top:10px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}
.grid-span-2{grid-column:1 / -1}
.table{display:flex;flex-direction:column;margin-top:10px;border-top:1px solid rgba(255,255,255,.06)}
.tr{display:grid;grid-template-columns:80px 120px 1fr 1.4fr 110px 110px 260px;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);align-items:center}
.th{color:var(--muted);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.inline{display:inline-block}
.in-mini{padding:8px 10px;border-radius:12px}
@media (max-width:980px){
  .tr{grid-template-columns:70px 100px 1fr 1fr 90px 90px 220px}
}
@media (max-width:860px){
  body{overflow:auto}
  .app-shell{height:auto;min-height:100vh;overflow:hidden}
  .sidebar{position:fixed;inset:0 auto 0 0;z-index:50;transform:translateX(-102%);transition:transform .18s ease}
  .sidebar.open{transform:translateX(0)}
  .main{height:100vh}
}

/* Additional icons */
.icon-chevron{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.4 8.6 12 13.2l4.6-4.6L18 10l-6 6-6-6z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.4 8.6 12 13.2l4.6-4.6L18 10l-6 6-6-6z'/%3E%3C/svg%3E")}
.icon-x{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z'/%3E%3C/svg%3E")}

/* Typing dots */
.typing-dots{display:inline-flex;gap:2px}
.typing-dots span{display:inline-block;width:8px;text-align:center;animation:dotPulse 1.1s infinite;opacity:.35}
.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.30s}
@keyframes dotPulse{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}

/* Toast notifications */
.toast-host{position:fixed;top:16px;right:16px;z-index:200;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{pointer-events:none;min-width:220px;max-width:360px;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(12,18,32,.88);backdrop-filter:blur(12px);box-shadow:0 20px 70px rgba(0,0,0,.55);display:flex;gap:10px;align-items:flex-start;animation:toastIn .18s ease}
.toast .t-ico{width:22px;height:22px;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.toast .t-title{font-weight:700;font-size:13px;line-height:1.35}
.toast .t-msg{color:rgba(255,255,255,.78);font-size:12px;line-height:1.35;margin-top:2px}
.toast.good{border-color:rgba(34,197,94,.35)}
.toast.good .t-ico{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.28)}
.toast.error{border-color:rgba(239,68,68,.35)}
.toast.error .t-ico{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.28)}
.toast.info{border-color:rgba(124,92,255,.35)}
.toast.info .t-ico{background:rgba(124,92,255,.12);border-color:rgba(124,92,255,.28)}
@keyframes toastIn{from{transform:translateY(-6px);opacity:0}to{transform:translateY(0);opacity:1}}
@media (max-width:520px){.toast-host{left:16px;right:16px}.toast{max-width:none}}


/* ===== Fixed4.1 UI patches (mobile menu, model menu readability, icons, typing dots, reactions) ===== */
#btnSidebarToggle{display:none!important;} /* legacy desktop/mobile toggle hidden */
.mobile-only{display:none!important;}

@media (max-width:860px){
  .mobile-only{display:flex!important;}
  .app-shell{display:block;}
  .sidebar{
    position:fixed;
    top:0; bottom:0; left:0;
    width:320px;
    max-width:86vw;
    transform:translateX(-110%);
    transition:transform .24s ease;
    z-index:120;
  }
  .sidebar.open{transform:translateX(0);}
  .sb-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
    z-index:110;
  }
  .sb-backdrop.show{opacity:1; pointer-events:auto;}
  .main{margin-left:0!important;}
}

@media (min-width:861px){
  .sidebar{position:relative; transform:none!important;}
  .sidebar.collapsed{width:320px!important;} /* disable collapse look on desktop */
}

/* Model menu: make it readable (no glassy transparency) */
.model-menu{
  /* keep it fully opaque + clickable */
  background:#0f1625!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 22px 70px rgba(0,0,0,.72)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  opacity:1!important;
  pointer-events:auto!important;
  z-index:1005!important;
}
.model-menu *{color:var(--text);}

/* Search box a bit more compact */
.search{
  padding:8px 10px!important;
  gap:8px!important;
  border-radius:12px!important;
}
.search input{
  font-size:13px!important;
}

/* Ensure SVG icons are visible (white-ish) */
.action-btn, .btn, .chat-actions .action-btn{
  color:rgba(255,255,255,.88)!important;
}
.action-btn svg, .btn svg, .chat-actions .action-btn svg{
  width:18px;
  height:18px;
  fill:currentColor!important;
  stroke:none!important;
}

/* Typing dots animation: . .. ... */
.typing-dots span{
  display:inline-block;
  opacity:.25;
  animation:mcDot 1.1s infinite ease-in-out;
}
.typing-dots span:nth-child(2){animation-delay:.15s;}
.typing-dots span:nth-child(3){animation-delay:.3s;}
@keyframes mcDot{
  0%, 80%, 100%{opacity:.25; transform:translateY(0)}
  40%{opacity:1; transform:translateY(-1px)}
}

/* Like/Dislike active state */
.msg-actions .action-btn.active{
  background:rgba(124,92,255,.18)!important;
  border-color:rgba(124,92,255,.35)!important;
  box-shadow:0 10px 30px rgba(124,92,255,.18);
}


/* Model menu portal open state */
.model-menu.is-open{display:block!important;}