/* ===================================================================== ONIXSENSE ChatGPT-style full-screen chat stylesheet --------------------------------------------------------------------- - Modern, polished, responsive - Works with the new index.php layout - Light + dark mode via [data-theme] attribute on ===================================================================== */ :root{ /* Brand */ --brand: #6366f1; --brand-dark: #4f46e5; --brand-light: #818cf8; --brand-soft: #eef2ff; --brand-tint: #f5f7ff; /* Surface */ --bg: #ffffff; --bg-soft: #f7f7f8; --bg-elevated: #ffffff; --bg-input: #ffffff; --bg-hover: #f1f5f9; --bg-active: #eef2ff; /* Sidebar */ --sidebar-bg: #171717; --sidebar-fg: #ececec; --sidebar-fg-muted: #9ca3af; --sidebar-hover: #212121; --sidebar-active: #2a2a2a; --sidebar-border: #2a2a2a; /* Text */ --text: #0f172a; --text-muted: #6b7280; --text-faint: #9ca3af; /* Lines */ --border: #e5e7eb; --border-strong:#d1d5db; /* Status */ --success: #10b981; --success-soft: #d1fae5; --danger: #ef4444; --danger-soft: #fee2e2; --warn: #f59e0b; --warn-soft: #fef3c7; /* Effects */ --shadow-sm: 0 1px 2px rgba(15,23,42,.04); --shadow: 0 4px 14px rgba(15,23,42,.06); --shadow-md: 0 10px 28px rgba(15,23,42,.10); --shadow-lg: 0 20px 48px rgba(15,23,42,.14); --radius: 10px; --radius-lg: 16px; --radius-pill: 9999px; } html[data-theme="dark"]{ --bg: #1a1a1a; --bg-soft: #0f0f0f; --bg-elevated: #212121; --bg-input: #2a2a2a; --bg-hover: #2a2a2a; --bg-active: #312e81; --text: #ececec; --text-muted: #9ca3af; --text-faint: #6b7280; --border: #2a2a2a; --border-strong:#3a3a3a; --brand-soft: #1e1b4b; --brand-tint: #1a1a2e; --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow: 0 4px 14px rgba(0,0,0,.4); --shadow-md: 0 10px 28px rgba(0,0,0,.5); --shadow-lg: 0 20px 48px rgba(0,0,0,.6); } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%;overflow:hidden} body{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji',sans-serif; font-size:14px;line-height:1.55; background:var(--bg-soft);color:var(--text); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} input,textarea,select{font-family:inherit;font-size:14px;color:inherit} a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline} /* ===================================================================== App shell ===================================================================== */ .chat-app{ display:grid; grid-template-columns:auto 1fr; height:100vh;background:var(--bg-soft); } /* ===================================================================== Sidebar ===================================================================== */ .chat-sidebar{ width:280px; background:var(--sidebar-bg);color:var(--sidebar-fg); display:flex;flex-direction:column; border-right:1px solid var(--sidebar-border); transition:width .2s ease, margin-left .25s ease; position:relative;z-index:50; } .chat-sidebar.collapsed{margin-left:-280px} .sidebar-head{ padding:12px 12px 8px; display:flex;align-items:center;justify-content:space-between;gap:8px; } .sidebar-brand{ display:flex;align-items:center;gap:10px; color:#fff;font-weight:600;font-size:15px; text-decoration:none;padding:6px 8px;border-radius:8px; } .sidebar-brand:hover{background:var(--sidebar-hover);text-decoration:none} .sidebar-brand .logo{ width:30px;height:30px;border-radius:8px; background:linear-gradient(135deg,var(--brand) 0%,#8b5cf6 100%); display:flex;align-items:center;justify-content:center; color:#fff;font-weight:800;font-size:15px;flex-shrink:0; box-shadow:0 2px 6px rgba(99,102,241,.4); } .sidebar-brand .name{ letter-spacing:.6px;overflow:hidden;text-overflow:ellipsis; } .icon-btn-dark{ background:transparent;border:none;color:var(--sidebar-fg-muted); width:32px;height:32px;border-radius:8px; display:flex;align-items:center;justify-content:center; font-size:16px;cursor:pointer;transition:all .15s; } .icon-btn-dark:hover{background:var(--sidebar-hover);color:#fff} .new-chat-btn{ margin:8px 12px 12px; padding:10px 14px; background:transparent;color:var(--sidebar-fg); border:1px solid var(--sidebar-border); border-radius:10px;cursor:pointer; font-size:13px;font-weight:500; display:flex;align-items:center;gap:8px;justify-content:center; transition:background .15s; } .new-chat-btn:hover{background:var(--sidebar-hover)} .new-chat-btn .plus{font-size:18px;line-height:1;font-weight:300} .conversations-list{ flex:1;overflow-y:auto;padding:0 8px 8px; scrollbar-width:thin;scrollbar-color:#3a3a3a transparent; } .conversations-list::-webkit-scrollbar{width:6px} .conversations-list::-webkit-scrollbar-thumb{background:#3a3a3a;border-radius:3px} .conversations-list::-webkit-scrollbar-track{background:transparent} .conv-group{font-size:11px;color:var(--sidebar-fg-muted);font-weight:600; padding:14px 10px 6px;letter-spacing:.4px;text-transform:uppercase} .conv-item{ padding:9px 10px;border-radius:8px; color:var(--sidebar-fg);font-size:13px;cursor:pointer; display:flex;align-items:center;gap:10px;margin-bottom:1px; transition:background .12s;position:relative; } .conv-item:hover{background:var(--sidebar-hover)} .conv-item.active{background:var(--sidebar-active)} .conv-item .conv-icon{ opacity:.5;flex-shrink:0;font-size:14px; width:16px;text-align:center; } .conv-item .conv-title{ flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .conv-item .conv-del{ opacity:0;background:transparent;border:none;color:var(--sidebar-fg-muted); cursor:pointer;padding:2px 4px;border-radius:4px;font-size:14px;line-height:1; transition:opacity .12s,background .12s,color .12s; } .conv-item:hover .conv-del{opacity:1} .conv-item .conv-del:hover{background:#3a3a3a;color:#fff} .conv-empty{ padding:24px 14px;text-align:center; color:var(--sidebar-fg-muted);font-size:12px;line-height:1.6; } .sidebar-footer{ padding:8px;border-top:1px solid var(--sidebar-border); } .sidebar-user{ display:flex;align-items:center;gap:10px; padding:8px 10px;border-radius:8px;cursor:pointer; transition:background .15s; } .sidebar-user:hover{background:var(--sidebar-hover)} .sidebar-user .avatar{ width:30px;height:30px;border-radius:50%;flex-shrink:0; background:linear-gradient(135deg,#8b5cf6,#ec4899); display:flex;align-items:center;justify-content:center; color:#fff;font-weight:700;font-size:13px; } .sidebar-user .info{flex:1;min-width:0;overflow:hidden} .sidebar-user .name{color:#fff;font-size:13px;font-weight:500; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sidebar-user .email{color:var(--sidebar-fg-muted);font-size:11px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sidebar-user .guest-label{color:var(--sidebar-fg-muted);font-size:11px} /* ===================================================================== Main chat area ===================================================================== */ .chat-main{ display:flex;flex-direction:column;min-width:0;background:var(--bg-soft); position:relative; } /* Topbar */ .chat-topbar{ height:54px;flex-shrink:0; background:var(--bg);border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between; padding:0 16px;gap:12px; } .topbar-left{display:flex;align-items:center;gap:8px;min-width:0} .topbar-right{display:flex;align-items:center;gap:8px} .sidebar-toggle{ display:none;width:34px;height:34px;border-radius:8px; background:transparent;border:none;cursor:pointer;color:var(--text-muted); font-size:18px;align-items:center;justify-content:center; } .sidebar-toggle:hover{background:var(--bg-hover);color:var(--text)} .topbar-title{ font-size:14px;font-weight:600;color:var(--text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* Model selector */ .model-selector{position:relative} .model-selector-btn{ display:flex;align-items:center;gap:8px; padding:7px 12px;background:var(--bg); border:1px solid var(--border);border-radius:10px; cursor:pointer;font-size:13px;color:var(--text); font-weight:500;transition:all .15s; } .model-selector-btn:hover{border-color:var(--brand);background:var(--bg-hover)} .model-selector-btn .model-dot{ width:8px;height:8px;border-radius:50%;background:var(--success); display:inline-block;box-shadow:0 0 0 2px var(--success-soft); } .model-selector-btn .caret{font-size:10px;color:var(--text-faint);margin-left:2px} .model-dropdown{ position:absolute;top:calc(100% + 6px);right:0; min-width:300px;max-width:380px; background:var(--bg-elevated); border:1px solid var(--border);border-radius:14px; box-shadow:var(--shadow-md);padding:6px;z-index:80; display:none;max-height:420px;overflow-y:auto; } .model-dropdown.open{display:block;animation:dropIn .15s ease} @keyframes dropIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .model-option{ display:flex;align-items:flex-start;gap:10px; padding:10px 12px;border-radius:10px;cursor:pointer; transition:background .12s; } .model-option:hover{background:var(--bg-hover)} .model-option.active{background:var(--bg-active)} .model-option .check{ width:18px;color:transparent;font-size:14px; flex-shrink:0;margin-top:1px; } .model-option.active .check{color:var(--brand)} .model-option .label{ flex:1;font-size:13px;color:var(--text);font-weight:500;line-height:1.4; } .model-option .meta{ font-size:11px;color:var(--text-faint);margin-top:3px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } .model-option .badges{display:flex;gap:4px;margin-top:5px;flex-wrap:wrap} .model-option .badge{ font-size:9px;padding:2px 6px;border-radius:4px; background:var(--brand-soft);color:var(--brand-dark); text-transform:uppercase;letter-spacing:.3px;font-weight:600; } html[data-theme="dark"] .model-option .badge{color:var(--brand-light)} .model-option .badge.think{background:var(--warn-soft);color:#92400e} .model-option .badge.stream{background:var(--success-soft);color:#065f46} /* ===================================================================== Messages area ===================================================================== */ .chat-messages{ flex:1;overflow-y:auto;padding:24px 16px 8px; scroll-behavior:smooth; scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent; } .chat-messages::-webkit-scrollbar{width:8px} .chat-messages::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px} .chat-messages::-webkit-scrollbar-thumb:hover{background:#94a3b8} .chat-messages::-webkit-scrollbar-track{background:transparent} html[data-theme="dark"] .chat-messages::-webkit-scrollbar-thumb{background:#3a3a3a} .chat-messages-inner{ max-width:780px;margin:0 auto; display:flex;flex-direction:column;gap:22px; } /* Welcome screen (shown when no messages) */ .welcome-screen{ text-align:center;padding:48px 20px 24px; display:flex;flex-direction:column;align-items:center;gap:20px; animation:fadeUp .3s ease; } .welcome-screen .logo-big{ width:60px;height:60px;border-radius:16px; background:linear-gradient(135deg,var(--brand) 0%,#8b5cf6 50%,#ec4899 100%); display:flex;align-items:center;justify-content:center; color:#fff;font-weight:800;font-size:28px; box-shadow:0 8px 24px rgba(99,102,241,.35); } .welcome-screen h1{ font-size:26px;font-weight:700;color:var(--text);letter-spacing:-.4px; } .welcome-screen .subtitle{ color:var(--text-muted);font-size:14px;max-width:520px;line-height:1.6; } .welcome-suggestions{ display:grid;grid-template-columns:repeat(2,1fr);gap:10px; width:100%;max-width:600px;margin-top:12px; } .welcome-sugg{ text-align:left;padding:14px 16px; background:var(--bg);border:1px solid var(--border); border-radius:12px;cursor:pointer;transition:all .15s; display:flex;flex-direction:column;gap:4px; } .welcome-sugg:hover{ border-color:var(--brand);background:var(--brand-tint); transform:translateY(-1px);box-shadow:var(--shadow); } .welcome-sugg .s-title{ font-size:13px;font-weight:600;color:var(--text); } .welcome-sugg .s-desc{ font-size:12px;color:var(--text-muted);line-height:1.5; } /* Messages */ .msg{display:flex;gap:14px;animation:fadeUp .25s ease} @keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .msg-avatar{ width:32px;height:32px;border-radius:8px;flex-shrink:0; display:flex;align-items:center;justify-content:center; color:#fff;font-weight:700;font-size:13px; box-shadow:0 1px 3px rgba(0,0,0,.08); } .msg.user .msg-avatar{ background:linear-gradient(135deg,#06b6d4,#3b82f6); } .msg.assistant .msg-avatar{ background:linear-gradient(135deg,var(--brand) 0%,#8b5cf6 100%); } .msg-body{flex:1;min-width:0;overflow-wrap:break-word;word-break:break-word} .msg-body .role{ font-size:13px;color:var(--text);font-weight:600;margin-bottom:3px; } .msg-bubble{ color:var(--text);font-size:14.5px;line-height:1.7; padding:0;word-wrap:break-word; } .msg-bubble p{margin:0 0 10px} .msg-bubble p:last-child{margin-bottom:0} .msg-bubble h1,.msg-bubble h2,.msg-bubble h3{ margin:14px 0 8px;font-weight:600;line-height:1.3;color:var(--text); } .msg-bubble h1{font-size:20px} .msg-bubble h2{font-size:17px} .msg-bubble h3{font-size:15px} .msg-bubble ul,.msg-bubble ol{margin:6px 0 10px;padding-left:22px} .msg-bubble li{margin:3px 0} .msg-bubble pre{ background:#0f172a;color:#e2e8f0; padding:14px 16px;border-radius:10px; overflow-x:auto;font-size:13px;line-height:1.55; margin:10px 0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } html[data-theme="dark"] .msg-bubble pre{background:#000;border:1px solid #2a2a2a} .msg-bubble code{ background:var(--bg-hover);padding:2px 6px;border-radius:4px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px;color:#be123c; } html[data-theme="dark"] .msg-bubble code{background:#2a2a2a;color:#f472b6} .msg-bubble pre code{background:transparent;padding:0;color:inherit;font-size:13px} .msg-bubble a{color:var(--brand);text-decoration:underline;text-underline-offset:2px} .msg-bubble blockquote{ border-left:3px solid var(--brand);padding-left:12px; color:var(--text-muted);margin:8px 0;font-style:italic; } .msg-bubble table{ border-collapse:collapse;margin:10px 0;font-size:13px;width:100%; } .msg-bubble th,.msg-bubble td{ border:1px solid var(--border);padding:6px 10px;text-align:left; } .msg-bubble th{background:var(--bg-hover);font-weight:600} .msg-bubble hr{border:none;border-top:1px solid var(--border);margin:14px 0} .msg-bubble img.generated{ max-width:100%;border-radius:12px;margin:6px 0; box-shadow:var(--shadow);display:block; } /* Streaming caret */ .msg-bubble .stream-content{display:inline} .msg-bubble .stream-caret{ display:inline-block;width:8px;height:14px; background:var(--brand);margin-left:2px;vertical-align:text-bottom; animation:caretBlink 1s steps(2) infinite; border-radius:1px; } @keyframes caretBlink{0%,50%{opacity:1}50.01%,100%{opacity:0}} /* Think block */ .think-block{ background:var(--warn-soft);color:#78350f; border:1px solid #fde68a;border-radius:10px; padding:10px 14px;margin:8px 0 12px;font-size:13px; line-height:1.6; } html[data-theme="dark"] .think-block{ background:rgba(245,158,11,.1);color:#fbbf24;border-color:rgba(245,158,11,.3); } .think-block summary{ cursor:pointer;font-weight:600;font-size:12px; color:#92400e;letter-spacing:.3px; list-style:none;display:flex;align-items:center;gap:6px; } html[data-theme="dark"] .think-block summary{color:#fbbf24} .think-block summary::-webkit-details-marker{display:none} .think-block summary::before{content:'🧠';font-size:14px} .think-block[open] summary::after{ content:'▾';margin-left:auto;color:currentColor;opacity:.5; } .think-block:not([open]) summary::after{ content:'▸';margin-left:auto;color:currentColor;opacity:.5; } .think-block .think-content{ margin-top:8px;font-style:italic;color:#78350f; line-height:1.65;font-size:12.5px; border-top:1px solid #fde68a;padding-top:8px; } html[data-theme="dark"] .think-block .think-content{ color:#fde68a;border-top-color:rgba(245,158,11,.2); } /* Message actions (copy, regenerate) */ .msg-actions{ display:flex;gap:4px;margin-top:6px;opacity:0; transition:opacity .15s; } .msg:hover .msg-actions{opacity:1} .msg-action-btn{ padding:4px 8px;border-radius:6px;background:transparent; color:var(--text-faint);font-size:11px; display:flex;align-items:center;gap:4px; border:none;cursor:pointer;transition:all .12s; } .msg-action-btn:hover{background:var(--bg-hover);color:var(--text)} /* Typing indicator */ .typing-msg{display:flex;gap:14px;animation:fadeUp .2s ease} .typing-msg .msg-avatar{ width:32px;height:32px;border-radius:8px; background:linear-gradient(135deg,var(--brand) 0%,#8b5cf6 100%); color:#fff;font-weight:700;font-size:13px; display:flex;align-items:center;justify-content:center; } .typing-dots{ display:flex;gap:5px;align-items:center; padding:10px 14px;background:var(--bg); border:1px solid var(--border);border-radius:14px; } .typing-dots span{ width:7px;height:7px;border-radius:50%;background:var(--text-faint); animation:typing 1.4s infinite ease-in-out; } .typing-dots span:nth-child(2){animation-delay:.2s} .typing-dots span:nth-child(3){animation-delay:.4s} @keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}} /* ===================================================================== Input area ===================================================================== */ .chat-input-area{ padding:8px 16px 14px;background:var(--bg-soft); flex-shrink:0; } .chat-input-inner{ max-width:780px;margin:0 auto; background:var(--bg-input);border:1px solid var(--border); border-radius:24px;padding:8px 8px 8px 16px; display:flex;flex-direction:column;gap:6px; box-shadow:var(--shadow);transition:all .15s; } .chat-input-inner:focus-within{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(99,102,241,.12),var(--shadow); } .chat-input-row1{display:flex;align-items:flex-end;gap:8px} .chat-input-row1 textarea{ flex:1;border:none;outline:none;resize:none; font-family:inherit;font-size:14.5px;line-height:1.5; padding:6px 0;background:transparent;color:var(--text); max-height:200px;min-height:24px; } .chat-input-row1 textarea::placeholder{color:var(--text-faint)} .input-actions{display:flex;align-items:center;gap:4px} .icon-btn{ width:36px;height:36px;border-radius:50%; background:transparent;border:none;cursor:pointer; color:var(--text-muted);display:flex;align-items:center;justify-content:center; font-size:18px;transition:all .15s;position:relative;flex-shrink:0; } .icon-btn:hover{background:var(--bg-hover);color:var(--text)} .icon-btn.active{background:var(--brand-soft);color:var(--brand);border:1px solid var(--brand-light)} .icon-btn.active.think{background:var(--warn-soft);color:#92400e;border-color:#fde68a} .icon-btn.active.image{background:var(--success-soft);color:#065f46;border-color:#a7f3d0} .icon-btn.send{ background:var(--brand);color:#fff;width:36px;height:36px; box-shadow:0 2px 8px rgba(99,102,241,.35); } .icon-btn.send:hover{background:var(--brand-dark);transform:scale(1.05)} .icon-btn.send:disabled{ background:var(--border-strong);color:#fff;cursor:not-allowed; box-shadow:none;transform:none; } .icon-btn .tooltip{ position:absolute;bottom:calc(100% + 6px);left:50%; transform:translateX(-50%);background:var(--text);color:var(--bg); padding:4px 9px;border-radius:6px;font-size:11px;font-weight:500; white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s; } .icon-btn:hover .tooltip{opacity:1} .chat-input-row2{ display:flex;align-items:center;gap:6px;padding:0 4px;flex-wrap:wrap; min-height:0; } .chat-input-row2:empty{display:none} .mode-chip{ display:inline-flex;align-items:center;gap:5px; padding:3px 10px;border-radius:99px; background:var(--bg-hover);color:var(--text-muted); font-size:11px;cursor:pointer;user-select:none; transition:all .15s;border:1px solid transparent; } .mode-chip:hover{background:var(--border);color:var(--text)} .mode-chip.active{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-light)} .mode-chip.active.think{background:var(--warn-soft);color:#92400e;border-color:#fde68a} .mode-chip.active.image{background:var(--success-soft);color:#065f46;border-color:#a7f3d0} .mode-chip input{display:none} .chat-footer-note{ text-align:center;font-size:11px;color:var(--text-faint); padding:6px 0 0; } .chat-footer-note a{color:var(--text-faint);text-decoration:underline} /* ===================================================================== Auth-required state ===================================================================== */ .auth-required{ flex:1;display:flex;align-items:center;justify-content:center; padding:30px;text-align:center; } .auth-required .card{ max-width:420px;background:var(--bg);padding:36px 30px; border-radius:18px;box-shadow:var(--shadow-md); border:1px solid var(--border); } .auth-required .logo{ width:64px;height:64px;border-radius:18px; background:linear-gradient(135deg,var(--brand) 0%,#8b5cf6 50%,#ec4899 100%); display:flex;align-items:center;justify-content:center; color:#fff;font-weight:800;font-size:30px;margin:0 auto 18px; box-shadow:0 8px 24px rgba(99,102,241,.35); } .auth-required h2{margin:0 0 6px;color:var(--text);font-size:22px;font-weight:700} .auth-required p{color:var(--text-muted);margin:0 0 22px;font-size:14px;line-height:1.6} .auth-required .btn{ display:inline-block;padding:11px 22px;border-radius:10px; text-decoration:none;font-weight:600;font-size:14px;margin:0 6px; transition:all .15s; } .auth-required .btn-primary{ background:var(--brand);color:#fff; } .auth-required .btn-primary:hover{background:var(--brand-dark);text-decoration:none} .auth-required .btn-outline{ background:transparent;border:1px solid var(--border-strong);color:var(--text); } .auth-required .btn-outline:hover{background:var(--bg-hover);text-decoration:none} /* ===================================================================== Toast notifications ===================================================================== */ .toast-container{ position:fixed;top:16px;right:16px;z-index:9999; display:flex;flex-direction:column;gap:8px;max-width:380px; } .toast{ background:var(--bg-elevated);border:1px solid var(--border); border-left:4px solid var(--brand); padding:12px 16px;border-radius:10px; box-shadow:var(--shadow-md);font-size:13px;color:var(--text); display:flex;align-items:flex-start;gap:10px; animation:toastIn .25s ease;cursor:pointer; } .toast.error{border-left-color:var(--danger)} .toast.success{border-left-color:var(--success)} .toast.warn{border-left-color:var(--warn)} .toast .toast-icon{font-size:16px;flex-shrink:0;margin-top:1px} .toast .toast-msg{flex:1;line-height:1.5} .toast.removing{animation:toastOut .25s ease forwards} @keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}} @keyframes toastOut{to{opacity:0;transform:translateX(20px)}} /* ===================================================================== Sidebar overlay (mobile) ===================================================================== */ .sidebar-overlay{ position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:40; display:none;backdrop-filter:blur(2px); } .sidebar-overlay.show{display:block;animation:fadeIn .2s ease} @keyframes fadeIn{from{opacity:0}to{opacity:1}} /* ===================================================================== Responsive ===================================================================== */ @media (max-width: 900px){ .chat-sidebar{ position:fixed;left:0;top:0;bottom:0; box-shadow:0 0 40px rgba(0,0,0,.3); } .chat-sidebar.collapsed{margin-left:-280px} .sidebar-toggle{display:flex} .welcome-suggestions{grid-template-columns:1fr} } @media (max-width: 600px){ .chat-messages{padding:16px 12px 4px} .chat-input-area{padding:6px 10px 10px} .chat-input-inner{border-radius:20px} .model-selector-btn{padding:6px 10px;font-size:12px} .model-selector-btn .label-text{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .topbar-right .btn-sm{padding:6px 10px;font-size:12px} .welcome-screen{padding:24px 16px} .welcome-screen h1{font-size:22px} }