/* ECAI Unified Styles — ecai-merged.css - Light theme by default (from ecai-chat.css) - Dark theme available via body.theme-dark (from ecai.css) - Minimal conflicts: both "search" and "chat" components supported */ /* ---------- THEME VARIABLES ---------- */ /* Light (default) */ :root{ --bg:#f7f7fb; --panel:#ffffff; --muted:#8a8a9b; --text:#1a1a1f; --accent:#2f6feb; --border:#e5e7ef; --danger:#e23d3d; /* Search card palette (light approximation) */ --card:#ffffff; --line:#e5e7ef; --brand-fg: var(--text); } /* Dark (opt-in with .theme-dark on ) */ body.theme-dark{ --bg:#0b0f14; --text:#e6edf3; --muted:#9da7b3; --panel:#111824; --card:#111824; --line:#1f2a3a; --accent:#7ee787; --border:#1f2a3a; --danger:#ff6b6b; --brand-fg:#e6edf3; } /* Auto-use dark if user prefers it (can still be overridden by body.theme-dark/light) */ @media (prefers-color-scheme: dark) { :root:not(.force-light) { --bg:#0b0f14; --text:#e6edf3; --muted:#9da7b3; --panel:#111824; --card:#111824; --line:#1f2a3a; --accent:#7ee787; --border:#1f2a3a; --danger:#ff6b6b; --brand-fg:#e6edf3; } } *{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Ubuntu,"Helvetica Neue",sans-serif} /* ---------- APP LAYOUT (from chat) ---------- */ .app{display:grid;grid-template-columns:280px 1fr;height:100vh} .sidebar{background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column} .brand{padding:16px;border-bottom:1px solid var(--border); color:var(--brand-fg)} .brand h1{margin:0;font-size:16px} .brand p{margin:2px 0 0;color:var(--muted);font-size:11px} .section{padding:12px;border-top:1px solid var(--border)} .row{display:flex;gap:8px} select,input,button,textarea{font:inherit} select,input{border:1px solid var(--border);border-radius:8px;padding:6px 8px;background:#fff;color:#111} body.theme-dark select, body.theme-dark input{background:#0e1420;color:var(--text)} button{border:1px solid var(--border);background:#fff;border-radius:8px;padding:6px 10px;cursor:pointer;color:#111} body.theme-dark button{background:#0e1420;color:var(--text);border-color:var(--line)} button.primary{background:var(--accent);color:#0b0f14;border-color:var(--accent)} button.link{border:none;background:transparent;padding:0;color:var(--muted);text-decoration:underline;cursor:pointer} .list{overflow:auto;flex:1} .item{padding:10px 12px;border-left:4px solid transparent;border-bottom:1px solid var(--border);cursor:pointer} .item.active{background:var(--panel);border-left-color:var(--accent)} .item small{display:block;color:var(--muted)} .danger{color:var(--danger)} .main{display:flex;flex-direction:column;background:var(--bg)} .topbar{height:44px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:var(--panel)} .messages{flex:1;overflow:auto;padding:18px} .bubble{max-width:800px;padding:12px 14px;border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.06)} .user{margin-left:auto;background:var(--accent);color:#0b0f14} .asst{margin-right:auto;background:color-mix(in srgb, var(--accent) 10%, transparent); color:var(--text); background: rgba(127,127,255,0.08)} .timestamp{font-size:10px;color:var(--muted);margin:4px 2px} .composer{border-top:1px solid var(--border);background:var(--panel);padding:10px} .composer .row{align-items:flex-end} textarea{flex:1;min-height:72px;resize:vertical;background:#fff;color:#111;border:1px solid var(--border);border-radius:8px;padding:8px} body.theme-dark textarea{background:#0e1420;color:var(--text);border-color:var(--line)} .status{font-size:12px;color:var(--muted);margin-top:6px} .sources{font-size:12px;color:var(--text);background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px;margin-top:8px} /* ---------- MINIMAL MARKDOWN ---------- */ .md h1{font-size:20px;margin:8px 0} .md h2{font-size:18px;margin:8px 0} .md h3{font-size:16px;margin:8px 0} .md p{margin:8px 0} .md ul{margin:8px 0 8px 20px} .md code{background:color-mix(in srgb, var(--text) 6%, transparent);padding:2px 4px;border-radius:6px} /* ---------- SEARCH UI (merged from ecai.css) ---------- */ .wrap { max-width:900px; margin:12vh auto; padding:0 16px; text-align:center; } .brand.big { font-weight:700; font-size:28px; letter-spacing:.2px; margin-bottom:18px; } .search-row { display:flex; gap:10px; justify-content:center; } .searchbox { flex:1; max-width:720px; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:12px 16px; display:flex; gap:12px; align-items:center; position:relative; } .searchbox input { flex:1; border:0; outline:0; background:transparent; color:var(--text); font-size:16px; } .btn { border:0; border-radius:999px; padding:11px 16px; font-weight:600; cursor:pointer; } .btn-primary { background:var(--accent); color:#0b0f14; } .btn-ghost { background:transparent; color:var(--text); border:1px solid var(--line); } .sub { margin-top:8px; color:var(--muted); font-size:13px; } .status-line { margin-top:8px; color:var(--muted); font-size:13px; min-height:20px; } .results { margin:24px auto 0; max-width:820px; display:grid; gap:10px; text-align:left; } .card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; } .doc { font-weight:600; } .score { color:var(--muted); font-size:13px; margin-top:4px; } .err { color:#ffb4b4; } .ok { color:var(--accent); } /* Floating clear button inside .searchbox */ .clear-btn{ position:absolute; right:110px; top:50%; transform:translateY(-50%); width:32px; height:32px; line-height:30px; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--muted); font-size:18px; padding:0; cursor:pointer; display:none; } .clear-btn:hover{ color:var(--text); border-color:color-mix(in srgb, var(--line) 60%, var(--text)); } /* ---------- BLANK STATE CONTAINER ---------- */ .blank { display:flex; align-items:center; justify-content:center; flex:1; padding:24px; } .blank .brand { border:0; padding:0; } /* ---------- UTILITIES ---------- */ .hidden { display:none !important; } .full-bleed { width:100%; } /* Ensure chat bubbles look decent in dark as well */ body.theme-dark .bubble { box-shadow: 0 1px 2px rgba(0,0,0,.3); }