/* style.css - external stylesheet for the modern UI (updated for theme switching) */ /* Light theme variables (default) */ :root{ --bg-1: #f7fafc; /* page top */ --bg-2: #eef2f6; /* page bottom */ --panel: #ffffff; --muted: #6b7280; --accent: #4263eb; --card: rgba(2,6,23,0.03); --glass: rgba(2,6,23,0.06); --text: #0b1220; --muted-text: rgba(11,18,32,0.6); --bubble-user-start: #3b82f6; --bubble-user-end: #1e40af; --bubble-assist: rgba(11,18,32,0.04); --shadow: rgba(2,6,23,0.06); } /* Dark theme overrides - applied when or has class "dark" */ .dark { --bg-1: #0f1720; --bg-2: #0b1116; --panel: #111216; --muted: #9aa4ad; --accent: #4263eb; --card: rgba(255,255,255,0.03); --glass: rgba(255,255,255,0.02); --text: #e6eef5; --muted-text: rgba(230,238,245,0.55); --bubble-user-start: #3b82f6; --bubble-user-end: #1e40af; --bubble-assist: rgba(255,255,255,0.02); --shadow: rgba(2,6,23,0.6); } /* global base uses variables so theme changes instantly */ html, body { height: 100%; margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color: var(--text); background: linear-gradient(180deg, var(--bg-1), var(--bg-2)); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Layout */ .app-shell { display:flex; height:100vh; overflow:hidden; } /* Sidebar */ .sidebar { width:260px; background: linear-gradient(180deg, var(--panel), var(--panel)); border-right:1px solid rgba(0,0,0,0.04); display:flex; flex-direction:column; } .sidebar-top { display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid rgba(0,0,0,0.04); } .logo img { width:30px; height:30px; object-fit:contain; } .collapse-btn { background:transparent; border:0; color:var(--muted); font-size:18px; } /* Nav */ .sidebar-nav { padding:12px 8px; flex:1; overflow:auto; } .nav-item { display:flex; align-items:center; gap:12px; padding:10px 12px; color:var(--muted); border-radius:8px; margin-bottom:6px; background:transparent; border:0; width:100%; text-align:left; } .nav-item i { width:20px; text-align:center; color:var(--muted); } .nav-item:hover { background:rgba(0,0,0,0.04); color:var(--text); cursor:pointer; } .section-title { margin-top:14px; margin-bottom:8px; padding-left:12px; color:var(--muted); font-size:12px; } /* Chats list */ .chats-list { padding:6px; } .chat-item { padding:10px 12px; border-radius:8px; color:var(--muted); background:transparent; margin-bottom:6px; } .chat-item:hover { background:rgba(43,46,59); color:var(--text); cursor:pointer; } .chat-item.muted { color:rgba(0,0,0,0.2); } /* Footer */ .sidebar-footer { padding:12px; border-top:1px solid rgba(0,0,0,0.04); } .btn-outline { display:block; width:100%; padding:8px 10px; border-radius:10px; border:1px solid rgba(0,0,0,0.04); color:var(--muted); background:transparent; text-align:center; } .company { margin-bottom:8px; color:var(--muted); } /* Main area */ .main-area { flex:1; display:flex; flex-direction:column; } .main-header { display:flex; align-items:center; justify-content:space-between; padding:18px 28px; border-bottom:1px solid rgba(0,0,0,0.04); background:transparent; } .model-select .model-btn { background:transparent; border:0; color:var(--text); font-size:16px; display:inline-flex; gap:8px; align-items:center; } .model-dropdown { position:absolute; margin-top:8px; background:var(--panel); border-radius:8px; box-shadow:0 8px 30px var(--shadow); padding:6px; } .model-item { padding:8px 12px; color:var(--muted); border-radius:6px; cursor:pointer; } .model-item:hover { background:rgba(43,46,59,0.9); color:var(--text); } /* Header actions */ .header-actions { display:flex; gap:10px; align-items:center; } .theme-toggle { display:flex; align-items:center; gap:8px; color:var(--muted); } .theme-toggle input { transform:scale(1.1); } /* Messages area */ .messages-area { flex:1; position:relative; overflow-y:auto; overflow-x:hidden; padding:48px 60px; z-index:1; } /* Center hero */ .center-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; text-align:center; color:var(--text); } .center-stage h1 { font-size:36px; margin-bottom:28px; font-weight:600; } .center-input { display:flex; align-items:center; gap:12px; width:70%; max-width:900px; background:var(--card); border-radius:40px; padding:12px 18px; box-shadow: 0 8px 30px var(--shadow); border:1px solid rgba(0,0,0,0.04); } .center-input input { flex:1; background:transparent; border:0; outline:none; color:var(--text); font-size:18px; padding:8px 6px; } .center-input .icon-left { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:transparent; border:0; color:var(--muted); } .center-input .right-icons { display:flex; gap:8px; align-items:center; } .center-input .send-btn { background:var(--glass); width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:0; color:var(--text); } /* Chat list bubbles */ .chat-list { display:flex; flex-direction:column; gap:18px; padding-bottom:160px; } .message-row { max-width:80%; display:flex; flex-direction:column; } .message-row.from-user { align-self:flex-end; text-align:right; } .message-row.from-assistant { align-self:flex-start; text-align:left; } .bubble-wrapper { position:relative; display:flex; align-items:center; gap:8px; } .bubble { display:inline-block; padding:8px 16px; border-radius:18px; font-size:16px; line-height:1.2; } .message-row.from-user .bubble { background: linear-gradient(180deg, rgba(94, 94, 94, 0.13), rgba(114, 114, 114, 0.19)); color: #d9d9d9; border-radius: 40px; box-shadow: 0 8px 20px var(--shadow); max-width: 100%; } .message-row.from-assistant .bubble { background: var(--bubble-assist); color: var(--muted); border-radius: 12px; max-width: 100%; } /* Inline small controls (spinner/cancel) placed near bubble */ .btn-inline { background:transparent; border:0; color:var(--muted); display:inline-flex; align-items:center; justify-content:center; padding:6px; border-radius:8px; cursor:pointer; } .btn-inline:hover { color:var(--text); background:rgba(0,0,0,0.03); } /* timestamp */ .bubble-time { font-size:12px; color:var(--muted-text); margin-top:6px; } /* typing */ .typing-row .assistant { background:var(--bubble-assist); border-radius:12px; padding:10px 14px; display:inline-flex; gap:6px; align-items:center; } .typing-row .dot { width:8px; height:8px; background:var(--muted); border-radius:50%; display:inline-block; animation:blink 1s infinite; } .typing-row .dot:nth-child(2){ animation-delay:0.15s } .typing-row .dot:nth-child(3){ animation-delay:0.3s } @keyframes blink { 0%{opacity:0.25}50%{opacity:1}100%{opacity:0.25} } /* Composer */ .composer { position:fixed; bottom:18px; left:320px; right:80px; display:flex; justify-content:center; pointer-events:auto; z-index:40; } .composer-inner { width:100%; max-width:900px; background: rgb(12,24,34) !important; border-radius:20px; padding:10px 14px; display:flex; align-items:flex-end; gap:12px; border:1px solid rgba(0,0,0,0.04); box-shadow:0 10px 30px var(--shadow); } .composer textarea { flex:1; min-height:40px; max-height:0px; resize:none; border:0; background:transparent; color:var(--text); font-size:16px; outline:none; padding:8px; } .composer .icon { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:transparent; border:0; color:var(--muted); } .composer .send { background:var(--glass); width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:0; color:var(--text); } /* Modal */ .modal-backdrop { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.6); z-index:60; } .modal { background:var(--panel); padding:22px; border-radius:12px; width:420px; color:var(--text); border:1px solid rgba(0,0,0,0.04); box-shadow:0 12px 40px var(--shadow); } .modal h3 { font-size:20px; margin-bottom:8px; } .modal p { color:var(--muted); margin-bottom:14px; } .modal-actions { display:flex; gap:10px; justify-content:flex-end; } .btn-primary { background:linear-gradient(180deg,#6b4bff,#5140d6); color:#fff; padding:8px 12px; border-radius:8px; border:0; } .btn-outline { background:transparent; color:var(--muted); border:1px solid rgba(0,0,0,0.04); padding:8px 12px; border-radius:8px; } /* Responsive */ @media (max-width: 900px){ .sidebar { display:none; } .composer { left:18px; right:18px; } .center-input { width:90%; } .messages-area { padding:28px; } } /* Model dropdown layering fix */ .main-header{position:relative;z-index:40;} .model-select{position:relative;} .model-dropdown{position:absolute;top:calc(100% + 6px);left:0;z-index:60;} /* === Dark Scrollbar Fix === */ /* For WebKit browsers (Chrome, Edge, Safari) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #0b1116; /* dark background (same as app bg) */ } ::-webkit-scrollbar-thumb { background: #2a2f36; /* medium gray thumb */ border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: #3b3f46; /* slightly lighter on hover */ } /* For Firefox */ * { scrollbar-width: thin; scrollbar-color: #2a2f36 #0b1116; /* thumb, track */ }