Update bot_style.css

bot_style.css

@@ -1,160 +1,62 @@
-:root{
-  --bg:#f7f7fb;
-  --card:#ffffff;
-  --muted:#667085;
-  --text:#1f2937;
-  --brand:#4b6cb7;
-  --brand-2:#FFD700;
-  --accent:#28a745;
-  --danger:#e11d48;
-  --soft:#eef2ff;
-  --ring: rgba(76, 110, 245, .25);
-  --radius:14px;
-  --shadow:0 6px 24px rgba(0,0,0,.08);
-}
-
-*{box-sizing:border-box}
-html,body{height:100%}
-body{
-  margin:0; background:var(--bg); color:var(--text);
-  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial;
-}
-
-/* header */
-.app-header{
-  position:sticky; top:0; z-index:50;
-  display:flex; align-items:center; justify-content:space-between;
-  padding:8px 14px; background:var(--card); box-shadow:var(--shadow); border-bottom: 2px solid #eaeaea;
-}
-.brand{display:flex; gap:10px; align-items:center; cursor:pointer}
-.brand img{width:40px; height:40px; border-radius:10px}
-.titles .title{font-weight:800}
-.titles .subtitle{font-size:12px; color:var(--muted)}
-
-.nav{display:flex; gap:8px}
-.tab-btn{
-  border:none; padding:10px 12px; border-radius:999px; cursor:pointer; background:#f1f5ff; color:#29408a;
-}
-.tab-btn[aria-selected="true"]{background:#29408a; color:#fff}
-
-.header-right{display:flex; align-items:center; gap:10px}
-.btn{
-  border:none; background:#29408a; color:#fff; padding:8px 12px; border-radius:10px; cursor:pointer;
-}
-.btn.secondary{background:#eaf0ff; color:#29408a}
-.btn.danger{background:var(--danger); color:#fff}
-.btn.link{background:transparent; color:#29408a; padding:6px}
-
-.icon-btn{
-  border:none; background:#fff; width:36px; height:36px; border-radius:8px; box-shadow:var(--shadow); cursor:pointer;
-}
-
-.menu{position:relative}
-.dropdown{
-  position:absolute; right:0; top:42px; min-width:180px; background:var(--card); box-shadow:var(--shadow);
-  border-radius:12px; padding:6px; display:none;
-}
-.dropdown .dropdown-item{
-  display:block; width:100%; text-align:left; padding:10px 12px; border:none; background:transparent; cursor:pointer;
-}
-.dropdown .dropdown-item:hover{background:#f6f7ff}
-
-/* user */
-.user-block{display:flex; gap:8px; align-items:center}
-.user-initial{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:#29408a; color:#fff; font-weight:700}
-.user-menu{display:flex; flex-direction:column; gap:2px}
-.user-menu #userName{font-size:12px; color:var(--muted)}
-
-/* layout */
-main{padding:16px; max-width:1200px; margin:0 auto}
-.tab{display:none}
-.tab.active{display:block}
-
-/* chat */
-.chat{display:flex; flex-direction:column; min-height:70vh}
-.chat-body{flex:1; display:flex; flex-direction:column; gap:12px; padding:8px}
-.user-message,.bot-message{
-  background:var(--card); border-radius:16px; padding:12px 14px; box-shadow:var(--shadow);
-  max-width:85%;
-}
-.user-message{align-self:flex-end; background:#eaffea}
-.bot-message{align-self:flex-start; background:#f7f9ff}
-.bot-message.welcome{display:flex; gap:12px}
-.bot-icon{width:42px; height:42px}
-
-.mantra{
-  background:linear-gradient(180deg, #fff7da, #fff0b8);
-  border-left:4px solid #e1c657; padding:12px; border-radius:10px; margin-top:6px;
-}
-.mantra pre{white-space:pre-wrap; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; color:#b91c1c; font-weight:700}
-
-.chat-footer{position:sticky; bottom:0; background:transparent; padding-top:8px}
-.input-wrap{
-  background:var(--card); border-radius:16px; box-shadow:var(--shadow); padding:8px; display:flex; align-items:center; gap:8px;
-}
-#userInput{
-  flex:1; border:none; outline:none; resize:none; max-height:160px; min-height:40px; padding:8px 10px; font:inherit; background:transparent;
-}
-.input-actions{display:flex; gap:8px}
-
-/* shastra */
-.grid{display:grid; grid-template-columns: 280px 1fr; gap:16px}
-.side{background:var(--card); padding:12px; border-radius:12px; box-shadow:var(--shadow)}
-.tree{list-style:none; padding-left:0; margin:0}
-.tree li{padding:8px; border-radius:8px; cursor:pointer}
-.tree li:hover{background:#f0f5ff}
-.content{display:flex; flex-direction:column; gap:12px}
-.blocks{display:grid; grid-template-columns:1fr 1fr; gap:12px}
-.block{background:var(--card); padding:12px; border-radius:12px; box-shadow:var(--shadow)}
-.block-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
-.scroller{max-height:340px; overflow:auto}
-#ytWrap{aspect-ratio:16/9; background:#000; border-radius:10px; overflow:hidden}
-#ytPlayer{width:100%; height:100%}
-
-/* satsang */
-.satsang .row{display:flex; gap:8px; align-items:center}
-.wrap{flex-wrap:wrap}
-.stats{display:flex; gap:12px; margin:8px 0}
-.stat{background:var(--card); padding:8px 12px; border-radius:10px; box-shadow:var(--shadow)}
-.stat span{font-size:12px; color:var(--muted); display:block}
-.video-card{background:var(--card); padding:12px; border-radius:12px; box-shadow:var(--shadow); margin-top:8px}
-.yt{width:100%; aspect-ratio:16/9; background:#000; border-radius:10px}
-.muted{color:var(--muted)}
-.saved details{background:var(--card); padding:8px 10px; border-radius:10px; box-shadow:var(--shadow); margin:6px 0}
-.saved summary{cursor:pointer}
-
-/* modal */
-.modal{border:none; padding:0}
-.modal::backdrop{background:rgba(0,0,0,.45)}
-.modal-card{background:var(--card); border-radius:16px; width:min(560px, 92vw); box-shadow:var(--shadow)}
-.modal-head{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #f0f0f0}
-.modal-body{padding:12px 14px; display:grid; gap:12px}
-.modal-foot{padding:12px 14px; display:flex; justify-content:flex-end; border-top:1px solid #f0f0f0}
-.qr{width:160px; border-radius:12px; box-shadow:var(--shadow)}
-.row code{background:#f5f5f5; padding:6px 8px; border-radius:8px}
-
-.switch{display:flex; gap:10px; align-items:center}
-.stack{display:grid; gap:6px}
-
-/* loaders */
-.loader{
-  position:fixed; inset:auto 16px 16px auto; background:var(--card); border-radius:12px;
-  padding:10px 12px; display:flex; gap:10px; align-items:center; box-shadow:var(--shadow)
-}
-.spinner{
-  width:22px; height:22px; border-radius:50%; border:3px solid #eee; border-top-color:#29408a; animation:spin 1s linear infinite;
-}
-@keyframes spin{to{transform:rotate(360deg)}}
-
-/* toast */
-.toast{
-  position:fixed; left:50%; transform:translateX(-50%);
-  bottom:20px; background:#111; color:#fff; padding:10px 14px; border-radius:10px; box-shadow:var(--shadow)
-}
-
-/* responsive */
-@media (max-width: 960px){
-  .blocks{grid-template-columns:1fr}
-  .grid{grid-template-columns:1fr}
-  .nav{display:none}
-}
+:root {
+  color-scheme: light dark;
+  --bg: #0b0c10;
+  --panel: #111318;
+  --text: #e6e6e6;
+  --muted: #9aa3b2;
+  --accent: #7dd3fc;
+  --bubble: #171a21;
+  --user: #0f172a;
+  --ring: #1f6feb;
+}
+
+* { box-sizing: border-box; }
+html, body { height: 100%; margin: 0; }
+body { font: 15px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica, Arial, "Apple Color Emoji","Noto Color Emoji","Segoe UI Emoji"; background: var(--bg); color: var(--text); }
+
+.app { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
+.topbar { display:flex; align-items:center; gap:.5rem; padding:.6rem .9rem; background: var(--panel); border-bottom: 1px solid #202431; position:sticky; top:0; z-index: 10; }
+.topbar .brand { font-weight: 600; letter-spacing:.3px; }
+.topbar button { background: transparent; color: var(--text); border: 1px solid #2a2f3d; padding:.35rem .5rem; border-radius:.6rem; cursor:pointer; }
+.topbar .spacer { flex:1; }
+
+.chat { overflow:auto; padding: 1rem .9rem; display:flex; flex-direction:column; gap: .8rem; }
+
+.msg { display:flex; gap:.6rem; align-items:flex-start; }
+.msg .avatar { width: 28px; height: 28px; border-radius:50%; background:#2b3242; flex: 0 0 28px; }
+.msg.user .avatar { background:#334155; }
+.msg .bubble { background: var(--bubble); border:1px solid #20283a; padding:.75rem .8rem; border-radius: 1rem; max-width: 900px; width: fit-content; box-shadow: 0 8px 18px rgba(0,0,0,.25); }
+.msg.user .bubble { background: var(--user); }
+
+.header { display:flex; align-items:center; gap:.5rem; margin-bottom:.3rem; }
+.header .who { font-weight: 600; }
+.header .tags { font-size: 12px; color: var(--muted); }
+
+.body pre { background:#0b1020; padding:.8rem; border-radius:.6rem; overflow:auto; border:1px solid #1a2240; }
+.body code { white-space: pre-wrap; word-break: break-word; }
+
+.sources { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; }
+.source-chip { font-size:12px; color:#cbd5e1; background:#0f172a; border:1px solid #1f2937; padding:.18rem .45rem; border-radius:999px; text-decoration:none; }
+
+.actions { display:flex; gap:.4rem; margin-top:.5rem; }
+.action-btn { font-size:12px; border:1px solid #1e293b; background:#0b1220; color:#e2e8f0; padding:.25rem .5rem; border-radius:.5rem; cursor:pointer; }
+
+.tools { display:flex; gap:.4rem; margin-top:.4rem; }
+.tools button { border:1px solid #243045; background:#0b1220; color:#e2e8f0; padding:.25rem .5rem; border-radius:.5rem; cursor:pointer; }
+
+.composer { border-top:1px solid #202431; background: var(--panel); padding:.6rem .9rem; }
+#chatForm { display:flex; flex-direction:column; gap:.5rem; }
+#chatForm .row { display:flex; gap:.5rem; }
+#userInput { flex:1; padding:.6rem .7rem; border-radius:.6rem; border:1px solid #2a3348; background:#0b1020; color:var(--text); }
+#sendBtn { padding:.6rem .9rem; border-radius:.6rem; border:1px solid #2a3348; background:#0b1220; color:var(--text); cursor:pointer; }
+
+.meta { display:flex; gap:.6rem; flex-wrap: wrap; align-items:center; font-size:12px; color:var(--muted); }
+.meta input { padding:.35rem .5rem; border-radius:.5rem; border:1px solid #2a3348; background:#0b1020; color:var(--text); }
+.meta button { padding:.35rem .6rem; border-radius:.5rem; border:1px solid #2a3348; background:#0b1220; color:var(--text); cursor:pointer; }
+
+/* Mobile tweaks */
+@media (max-width: 680px) {
+  .body pre { max-width: 88vw; }
+  .composer .row { gap:.4rem; }
+  #userInput { min-width: 0; }
+}