/* ========================================================= ChatX — Theming + Layout (dark default, light override) Toggle by setting: … ========================================================= */ /* ---------- Theme tokens (DARK DEFAULT) ---------- */ :root{ /* Brand & state */ --brand: #f98a0a; /* main */ --brand--hover: #692e06;/* secondary/hover */ --error: #3b1111; /* Surfaces & text */ --bg: #0d1117; --bg-2: #0b0f14; --fg: #e6edf3; --muted: #9aa4af; --line: #1f2937; /* Special */ --ai: #161b22; /* AI bubble */ --sidebar: #1f2328; /* left rail */ --menu: #20252b; /* kebab menus */ --menu-br: #2a2f36; /* System/intro bubble defaults (can be overridden per theme) */ --bubble-system-bg: rgba(255,255,255,0.06); --bubble-system-fg: #e3e3e3; --bubble-system-br: rgba(255,255,255,0.08); /* Layout */ --side-w: 300px; --side-w-sm: 64px; --easing: cubic-bezier(.2,.8,.2,1); } /* ---------- LIGHT THEME OVERRIDES ---------- */ html[data-theme="light"]{ --bg: #f7f9fc; /* page background */ --bg-2: #ffffff; /* composer/secondary surface */ --fg: #0f172a; /* text */ --muted: #5b6575; --line: #e5e7eb; --ai: #f6f8fa; /* AI bubble */ --sidebar: #f0f3f7; /* light rail */ --menu: #ffffff; --menu-br: #e6e8ee; --bubble-system-bg: #f5f7fb; --bubble-system-fg: #1f2937; --bubble-system-br: #e6e8ee; } .danger{ color: #DC3545; } .bg-danger{ background-color: #DC3545; } /* ---------- Base ---------- */ *{ box-sizing:border-box; } html, body{ height:100%; } body.chatx{ margin:0; background:var(--bg); color:var(--fg); font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica Neue,Arial,Apple Color Emoji,Segoe UI Emoji; transition: background .25s var(--easing), color .25s var(--easing); } /* ---------- Shell layout ---------- */ .chatx-wrap{ display:grid; grid-template-columns: var(--side-w) 1fr; height:100vh; transition:grid-template-columns .25s var(--easing); } body.sidebar-collapsed .chatx-wrap{ grid-template-columns: var(--side-w-sm) 1fr; } /* ---------- Sidebar (Gemini-style) ---------- */ .g-side{ height:100vh; background:var(--sidebar); border-right:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column; transition: background .25s var(--easing), border-color .25s var(--easing); } .g-head{ display:flex; align-items:center; gap:.75rem; padding:.75rem .75rem .6rem; border-bottom:1px solid var(--line); background:var(--sidebar); color:var(--fg); } .g-iconbtn{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--sidebar); border-radius:.75rem; background:transparent; color:var(--fg); cursor:pointer; font-size:1.05rem; transition: background .15s var(--easing), border-color .15s; } .g-iconbtn:hover{ background:var(--brand); color: white;} .g-title{ font-weight:600; } .g-nav{ display:flex; flex-direction:column; gap:.5rem; padding:.75rem .6rem; } .g-row{ display:flex; align-items:center; gap:.75rem; padding:.85rem .9rem; border-radius:24px; border:1px solid transparent; background:transparent; color:var(--fg); text-decoration:none; cursor:pointer; transition: background .15s var(--easing), border-color .15s; } .g-row:hover{ background:var(--brand); color: white !important;} .g-row i{ width:1.25rem; text-align:center; font-size:1.05rem; } .g-row:hover i.danger, .g-row:hover .g-row-label.danger { color: #fff; } .g-row.g-secondary{ color:#d1d7df; } html[data-theme="light"] .g-row.g-secondary{ color:#444d5a; } .g-section{ padding:.75rem .95rem .45rem; color:#cbd5e1; font-weight:600; } html[data-theme="light"] .g-section{ color:#455066; } .g-list{ padding:.25rem .45rem 1rem; overflow:auto; height:100%; } /* Sessions list */ .sessions{ list-style:none; margin:0; padding:0; } .session-row{ position:relative; } .session-link{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.75rem .95rem; border-radius:24px; text-decoration:none; color:inherit; border:1px solid transparent; padding-right:3rem; transition: background .15s var(--easing), border-color .15s; } .session-link:hover{ background:var(--brand); border-color:var(--brand); } .session-title{ max-width:22ch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .session-time{ color:var(--muted); } .session-link.active{ background:var(--brand); color:#fff; } /* Kebab button + menu */ .row-menu-btn{ position:absolute; right:.35rem; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; background:transparent; color:var(--fg); opacity:0; pointer-events:none; transition:opacity .15s var(--easing), background .15s; } .session-row:hover .row-menu-btn, .session-row:focus-within .row-menu-btn{ opacity:1; pointer-events:auto; } .row-menu-btn:hover{ background:var(--brand); } .row-menu-btn i{ font-size:16px; } .row-menu{ position:absolute; right:.35rem; top: calc(100% - .35rem); min-width:180px; background:var(--menu); color:var(--fg); border:1px solid var(--menu-br); border-radius:14px; box-shadow:0 10px 24px rgba(0,0,0,.35); padding:.35rem; display:none; z-index:15; transition: background .25s, border-color .25s; } .session-row.open .row-menu{ display:block; } .row-menu-item{ width:100%; display:flex; gap:.6rem; align-items:center; justify-content:flex-start; background:transparent; color:var(--fg); border:0; border-radius:10px; padding:.6rem .7rem; text-align:left; cursor:pointer; transition: background .15s var(--easing); } .row-menu-item:hover{ background:var(--brand); color:#fff; } .row-menu-item i{ width:1.25rem; text-align:center; } .row-menu-item.danger{ color:#ffdddd; } .row-menu-item.danger i{ color:#ff9b9b; } /* Collapsed rail states */ body.sidebar-collapsed .g-title, body.sidebar-collapsed .g-row .g-row-label, body.sidebar-collapsed .g-section, body.sidebar-collapsed .g-list{ display:none !important; } body.sidebar-collapsed .g-nav{ padding:.6rem .6rem; } body.sidebar-collapsed .g-row{ width:44px; height:44px; justify-content:center; padding:0; border-radius:.9rem; } /* ---------- Main panel ---------- */ .main{ display:flex; flex-direction:column; max-height:100vh; position:relative; } .empty{ margin:auto; color:var(--muted); } .chat-head{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding:.5rem .75rem; color:var(--muted); height:62.5px; } .messages-scroll{ flex:1; overflow:auto; padding:1rem; } .messages{ display:flex; flex-direction:column; gap:.75rem; } /* Bubbles */ .bubble{ max-width:900px; padding:.6rem .8rem; border-radius:12px; box-shadow:0 1px 0 rgba(0,0,0,.2); white-space:pre-wrap; word-wrap:break-word; transition: background .25s, color .25s, border-color .25s; } .bubble.user{ align-self:flex-end; background:var(--brand); color:#fff; } .bubble.ai{ align-self:flex-start; background:var(--ai); color:var(--fg); } html[data-theme="light"] .bubble.ai{ color:#0f172a; } .bubble.error{ background:var(--error); color:#ffd6d6; border:1px solid #6b1a1a; } /* System/info bubble (intro) */ .bubble.system{ align-self: anchor-center; max-width:min(760px, 90%); border-radius:16px; line-height:1.45; font-size:.95rem; background: var(--bubble-system-bg); color: var(--bubble-system-fg); border:1px solid var(--bubble-system-br); box-shadow:0 1px 0 rgba(0,0,0,.2) inset; margin:12px 0; white-space:normal !important; } .bubble.system.intro{ margin-top:8px; max-width:min(880px, 92%); } .messages .bubble.system{ display:inline-block; } .warning{ background:#c28200 !important; color:#111 !important; } /* Composer */ .composer{ display:grid; grid-template-columns: 1fr auto; gap:.5rem; padding:.5rem .75rem; border-top:1px solid var(--line); background:var(--bg-2); } .ta{ background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:.5rem; padding:.6rem .7rem; resize:none; min-height:44px; max-height:220px; transition:border-color .15s var(--easing), background .25s, color .25s; } .ta:focus{ outline:none; border-color:var(--brand); } .send{ border:1px solid var(--brand); color:var(--fg); background:transparent; padding:.5rem .8rem; border-radius:.5rem; cursor:pointer; transition: background .15s var(--easing), color .15s; } .send:hover{ background:var(--brand); color:#fff; } .htmx-indicator{ align-self:center; color:var(--muted); } .border-primary{ border:1px solid var(--brand); } /* Subtle entrance */ .messages .bubble:not(.thinking){ animation:chatx-pop .18s var(--easing) both; } @keyframes chatx-pop{ from{ transform:translateY(4px); opacity:0; } to{ transform:none; opacity:1; } } /* Thinking bubble: stable while polling */ .bubble.thinking{ animation:none !important; min-height:26px; will-change:auto; } .thinking .dot-wave{ display:inline-flex; gap:2px; margin-left:4px; vertical-align:baseline; } .thinking .dot-wave span{ display:inline-block; line-height:1; font-weight:700; color:var(--brand); transform:translateY(0); opacity:.5; animation:dotWave 1.2s ease-in-out infinite; } .thinking .dot-wave span:nth-child(2){ animation-delay:.15s; } .thinking .dot-wave span:nth-child(3){ animation-delay:.30s; } @keyframes dotWave{ 0%,60%,100%{ transform:translateY(0); opacity:.45; } 30%{ transform:translateY(-4px); opacity:1; } } /* Center spinner for panel loads */ .center-ind{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; pointer-events:none; } .htmx-request ~ .center-ind, #chatx-main.htmx-request .center-ind{ display:flex; } .spinner{ width:36px; height:36px; border-radius:50%; border:3px solid rgba(255,255,255,.15); border-top-color:rgba(255,255,255,.7); animation:spin .9s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } html[data-theme="light"] .spinner{ border-color: rgba(0,0,0,.08); border-top-color: rgba(0,0,0,.4); } /* Nice scrollbars */ .sidebar-list,.messages-scroll,.g-list{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent; scrollbar-gutter:stable both-edges; } .sidebar-list::-webkit-scrollbar,.messages-scroll::-webkit-scrollbar,.g-list::-webkit-scrollbar{ width:8px; height:8px; } .sidebar-list::-webkit-scrollbar-thumb,.messages-scroll::-webkit-scrollbar-thumb,.g-list::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:8px; border:2px solid transparent; background-clip:padding-box; } .sidebar-list:hover::-webkit-scrollbar-thumb,.messages-scroll:hover::-webkit-scrollbar-thumb,.g-list:hover::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.32); } html[data-theme="light"] .sidebar-list, html[data-theme="light"] .messages-scroll, html[data-theme="light"] .g-list{ scrollbar-color:rgba(0,0,0,.25) transparent; } html[data-theme="light"] .sidebar-list::-webkit-scrollbar-thumb, html[data-theme="light"] .messages-scroll::-webkit-scrollbar-thumb, html[data-theme="light"] .g-list::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.2); } html[data-theme="light"] .sidebar-list:hover::-webkit-scrollbar-thumb, html[data-theme="light"] .messages-scroll:hover::-webkit-scrollbar-thumb, html[data-theme="light"] .g-list:hover::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.35); } /* ---------- Mobile (≤ 900px) ---------- */ @media (max-width: 900px){ .chatx-wrap{ grid-template-columns: var(--side-w-sm) 1fr; } body:not(.sidebar-collapsed) .chatx-wrap{ grid-template-columns: 1fr; } body:not(.sidebar-collapsed) .g-side{ position:fixed; left:0; top:0; width:86vw; max-width:360px; z-index:40; box-shadow:0 10px 25px rgba(0,0,0,.4); } body.sidebar-collapsed .g-nav{ padding:.6rem .6rem; } body.sidebar-collapsed .g-row{ width:44px; height:44px; justify-content:center; padding:0; border-radius:.9rem; } body.sidebar-collapsed .g-title, body.sidebar-collapsed .g-row .g-row-label, body.sidebar-collapsed .g-section, body.sidebar-collapsed .g-list{ display:none !important; } .messages-scroll{ padding:.75rem; } .bubble{ max-width:100%; } } /* ---------- Minimal modal ---------- */ .x-modal{ position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.45); z-index:1000; } .x-modal.show{ display:grid; } .x-dialog{ width:min(540px, 92vw); background:var(--sidebar); color:var(--fg); border:1px solid var(--menu-br); border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.45); overflow:hidden; transition: background .25s, border-color .25s, color .25s; } .x-head{ padding:.9rem 1rem; font-weight:600; border-bottom:1px solid var(--line); } .x-body{ padding:1rem; color:var(--muted); } .x-actions{ display:flex; gap:.5rem; justify-content:flex-end; padding:.9rem 1rem; border-top:1px solid var(--line); } .x-btn{ border:1px solid var(--line); background:transparent; color:var(--fg); padding:.55rem .9rem; border-radius:.65rem; cursor:pointer; transition: background .15s, color .15s, border-color .15s; } .x-btn:hover{ background:var(--brand); color:#fff; } .x-btn.danger{ border-color:#6b1a1a; color:#ffd6d6; } .x-btn.danger:hover{ background:#3b1111; } .x-btn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; } /* ---------- Theme toggle (sidebar control) ---------- */ .theme-toggle{ margin:.5rem .75rem 1rem; padding:.6rem .8rem; display:flex; align-items:center; gap:.6rem; border:1px solid var(--line); border-radius:12px; background:transparent; color:var(--fg); cursor:pointer; width:calc(100% - 1.5rem); transition: background .15s, border-color .15s, color .15s; } .theme-toggle:hover{ background:var(--brand); } .theme-toggle .pill{ position:relative; width:44px; height:24px; border-radius:999px; background:var(--bg); border:1px solid var(--line); transition: background .25s, border-color .25s; } .theme-toggle .thumb{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--brand); transition:left .25s var(--easing), background .25s; } html[data-theme="light"] .theme-toggle .thumb{ left:22px; } /* Avatar + menu */ .userbox{ position:relative; } .avatar{ width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; letter-spacing:.3px; background:var(--brand); color:#fff; border:0; cursor:pointer; box-shadow:0 0 0 1px rgba(0,0,0,.18) inset; } .avatar:hover{ filter:brightness(.95); } .user-menu{ position:absolute; right:0; top:calc(100% + .5rem); min-width:160px; background:#20252b; color:var(--fg); border:1px solid #2a2f36; border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.35); padding:.35rem; display:none; z-index:20; } .user-menu.open{ display:block; } .user-menu-item{ display:block; padding:.55rem .7rem; border-radius:10px; color:inherit; text-decoration:none; } .user-menu-item:hover{ background:#692e06; } /* Guest pill */ .login-pill{ display:inline-block; padding:.4rem .75rem; border-radius:999px; background:transparent; color:var(--brand); border:1px solid var(--brand); text-decoration:none; font-weight:600; } .login-pill:hover{ background:rgba(249,138,10,.08); }