/* Theme-aware styles: LIGHT by default, DARK when is present */ :root { color-scheme: light; } html.dark { color-scheme: dark; } * { font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif; } /* Glass card */ .glass { background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.70)); border: 1px solid rgba(15,23,42,.10); backdrop-filter: blur(14px); } html.dark .glass { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.08); } .label { display:block; font-size:.78rem; color: rgba(15,23,42,.75); margin-bottom:.35rem; } html.dark .label { color: rgba(226,232,240,.9); } .input { width:100%; background: rgba(15,23,42,.04); border: 1px solid rgba(15,23,42,.12); color: rgba(15,23,42,1); border-radius: 1rem; padding: .7rem .9rem; outline: none; } html.dark .input { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); color: rgba(241,245,249,1); } .input:focus { border-color: rgba(99,102,241,.65); box-shadow: 0 0 0 3px rgba(99,102,241,.22); } .btn-primary { border-radius: 1rem; padding: .6rem .9rem; background: rgba(99,102,241,.95); color: white; border: 1px solid rgba(255,255,255,.12); } .btn-primary:hover { filter: brightness(1.08); } .btn-secondary { border-radius: 1rem; padding: .6rem .9rem; background: rgba(15,23,42,.04); border: 1px solid rgba(15,23,42,.12); color: rgba(15,23,42,1); } html.dark .btn-secondary{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); color: rgba(241,245,249,1); } .btn-secondary:hover { background: rgba(15,23,42,.06); } html.dark .btn-secondary:hover { background: rgba(255,255,255,.09); } .btn-icon { height: 42px; width: 42px; border-radius: 1rem; display:grid; place-items:center; background: rgba(15,23,42,.04); border: 1px solid rgba(15,23,42,.12); color: rgba(15,23,42,1); } html.dark .btn-icon{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); color: rgba(241,245,249,1); } .btn-icon:hover { background: rgba(15,23,42,.06); } html.dark .btn-icon:hover { background: rgba(255,255,255,.10); } .chip { border-radius: 999px; padding: .55rem .7rem; background: rgba(15,23,42,.04); border: 1px solid rgba(15,23,42,.12); font-size: .82rem; text-align:left; } html.dark .chip{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); } .chip:hover { background: rgba(15,23,42,.06); } html.dark .chip:hover { background: rgba(255,255,255,.10); } /* Toggle switch */ .switch { position: relative; display:inline-block; width: 46px; height: 26px; } .switch input { opacity:0; width:0; height:0; } .slider { position:absolute; inset:0; cursor:pointer; background: rgba(15,23,42,.12); border: 1px solid rgba(15,23,42,.12); transition: .2s; border-radius: 999px; } .slider:before{ position:absolute; content:""; height: 20px; width: 20px; left: 3px; top: 2px; background: white; border-radius: 999px; transition: .2s; } .switch input:checked + .slider{ background: rgba(99,102,241,.95); border-color: rgba(99,102,241,.95); } .switch input:checked + .slider:before{ transform: translateX(20px); } html.dark .slider{ background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); } /* Chat bubbles */ .bubble { max-width: 780px; border-radius: 22px; padding: 12px 14px; border: 1px solid rgba(15,23,42,.12); background: rgba(255,255,255,.70); white-space: pre-wrap; word-wrap: break-word; } .bubble.user { background: rgba(99,102,241,.14); border-color: rgba(99,102,241,.28); } .bubble.assistant { background: rgba(255,255,255,.70); } html.dark .bubble{ border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); } html.dark .bubble.user { background: rgba(99,102,241,.18); border-color: rgba(99,102,241,.35); } html.dark .bubble.assistant { background: rgba(255,255,255,.06); } .meta { font-size: 11px; color: rgba(15,23,42,.55); margin-top: 6px; } html.dark .meta { color: rgba(226,232,240,.65); }