/* ================================================================ DRAGONFIRE WORKSTUDIO — Premium B2B Design System Charcoal / Grayscale / Monochrome. Clean, professional, minimal. ================================================================ */ /* FONTS */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400;500&family=EB+Garamond:ital,wght@0,400;0,600;1,400&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); /* ── VARIABLES ─────────────────────────────────────────────── */ :root { /* Surfaces — warm charcoal scale */ --bg: #0d0d0d; --sur: #141414; --sur2: #1b1b1b; --sur3: #222222; /* Borders */ --brd: #272727; --dim: #313131; /* Text */ --txt: #ebebeb; --txt2: #999999; --mut: #585858; --dis: #383838; /* Accent — single white */ --acc: #ffffff; /* Semantic — used sparingly for actual status only */ --r: #e84040; --y: #c8c8c8; /* re-mapped: neutral light gray (was orange/yellow) */ --g: #34c97a; --b: #888888; /* re-mapped: neutral mid-gray (was blue) */ /* Typography */ --fui: 'Inter', system-ui, sans-serif; --fmono: 'JetBrains Mono', 'Courier New', monospace; --fdoc: 'EB Garamond', Georgia, serif; /* Scale */ --sz-xs: 10px; --sz-sm: 11px; --sz: 12px; --sz-md: 13px; --sz-lg: 14px; --sz-xl: 16px; } /* ── LIGHT MODE ─────────────────────────────────────────────── */ /* Class applied to element so CSS vars cascade everywhere */ html.light, .light { --bg: #f2f2f2; --sur: #ffffff; --sur2: #ebebeb; --sur3: #e2e2e2; --brd: #d0d0d0; --dim: #c0c0c0; --txt: #141414; --txt2: #555555; --mut: #888888; --dis: #b8b8b8; --acc: #000000; --r: #cc2020; --g: #189150; --b: #555555; --y: #333333; } .light body { background: var(--bg); color: var(--txt); } .light .mb code { background: rgba(0,0,0,.06); border-color: var(--brd); } .light .mb pre { background: var(--sur2); border-left-color: var(--dim); } .light .mb table th { background: var(--sur2); } .light .ca { background: var(--bg); } .light .wout { background: var(--sur); } .light select.sel { background: var(--sur2); } .light input, .light textarea { background: var(--sur2) !important; } .light .mo > .md { background: var(--sur); border-color: var(--brd); } .light .smenu { background: var(--sur); border-color: var(--brd); } .light .slp { background: var(--sur); border-color: var(--brd); } .light code { background: rgba(0,0,0,.06); } /* ── PRO THEME ──────────────────────────────────────────────── */ html.pro { --bg: #f7f6f3; --sur: #ffffff; --sur2: #f0ede8; --sur3: #e8e4de; --brd: rgba(0,0,0,.07); --dim: rgba(0,0,0,.13); --txt: #1a1916; --txt2: #6b6760; --mut: #a09c97; --dis: #ccc8c3; --acc: #1a1916; --r: #c0392b; --g: #1e8449; --b: #2471a3; --y: #b7770d; } /* Body */ html.pro body { background: var(--bg); } /* Scrollbars — thinner, softer */ html.pro ::-webkit-scrollbar { width: 4px; } html.pro ::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 4px; } /* ── Pro: Modebar ── */ html.pro .modebar { border-bottom: none; box-shadow: 0 1px 0 var(--brd); padding: 0 16px; gap: 2px; } html.pro .dfw-logo-text { font-size: 13px; font-weight: 600; letter-spacing: 0; } html.pro .dfw-logo-sub { font-size: 9px; letter-spacing: 0.02em; color: var(--mut); } /* ── Pro: Mode buttons ── */ html.pro .mbtn { font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0; font-weight: 450; padding: 6px 12px; border-radius: 6px; border: none; color: var(--txt2); text-transform: none; } html.pro .mbtn:hover { background: var(--sur2); color: var(--txt); } html.pro .mbtn.on { background: var(--sur3); color: var(--txt); font-weight: 500; } /* ── Pro: Sidebar ── */ html.pro .ca { border-right: none; box-shadow: 1px 0 0 var(--brd); background: var(--sur); } html.pro .sbsec { border-bottom: none; padding: 12px 14px; } html.pro .sbsec-title { font-family: 'Inter', sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mut); font-weight: 500; margin-bottom: 6px; border: none; background: none; padding: 0 0 4px; } html.pro .addbtn { font-family: 'Inter', sans-serif; letter-spacing: 0; font-size: 11px; border: none; background: transparent; color: var(--mut); font-weight: 400; } html.pro .addbtn:hover { color: var(--txt2); background: transparent; } /* ── Pro: Persona cards ── */ html.pro .pc { border: none; border-radius: 8px; padding: 7px 8px; } html.pro .pc:hover { background: var(--sur2); border: none; } html.pro .pc.on { background: var(--sur2); border: none; } html.pro .pav { width: 28px; height: 28px; border-radius: 50%; background: var(--sur3); color: var(--txt2); font-size: 10px; font-weight: 600; font-family: 'Inter', sans-serif; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: 0; } html.pro .pn { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; } html.pro .pt { font-family: 'Inter', sans-serif; font-size: 10px; color: var(--mut); } html.pro .pmem { display: none; } /* ── Pro: Chat area ── */ html.pro .chat-hd { border-bottom: none; box-shadow: 0 1px 0 var(--brd); background: var(--sur); } html.pro .ibtn { font-family: 'Inter', sans-serif; letter-spacing: 0; font-size: 11px; font-weight: 400; border-radius: 5px; text-transform: none; border: none; color: var(--txt2); } html.pro .ibtn:hover { background: var(--sur2); color: var(--txt); } /* Messages */ html.pro .msg { border: none; border-radius: 10px; margin: 4px 8px; } html.pro .msg.u { background: var(--sur2); } html.pro .msg.a { background: transparent; } html.pro .mmeta { font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0; color: var(--mut); } html.pro .mb { font-size: 13px; font-family: 'Inter', sans-serif; line-height: 1.7; border: none; background: transparent; } html.pro .mb code { background: var(--sur2); border-color: var(--brd); border-radius: 4px; font-size: 12px; } html.pro .mb pre { background: var(--sur2); border-radius: 8px; border: none; border-left: 3px solid var(--dim); } html.pro .mb table th { background: var(--sur2); } html.pro .mab { font-family: 'Inter', sans-serif; letter-spacing: 0; font-size: 10px; font-weight: 400; border: none; border-radius: 4px; color: var(--mut); text-transform: none; } html.pro .mab:hover { background: var(--sur2); color: var(--txt2); } /* Typing indicator */ html.pro .typ { font-family: 'Inter', sans-serif; font-size: 12px; border: none; background: var(--sur2); border-radius: 8px; color: var(--mut); margin: 4px 8px; } /* Chat input */ html.pro .cinp { font-family: 'Inter', sans-serif; font-size: 13px; border-radius: 8px; border: 1px solid var(--brd); background: var(--sur); letter-spacing: 0; line-height: 1.6; } html.pro .cinp:focus { border-color: var(--dim); } html.pro .inp-row { border-top: none; box-shadow: 0 -1px 0 var(--brd); padding: 10px 14px; } /* ── Pro: Work bar ── */ html.pro .work-bar { border-bottom: none; box-shadow: 0 1px 0 var(--brd); } html.pro .work-instr { font-family: 'Inter', sans-serif; font-size: 13px; border-radius: 8px; border: 1px solid var(--brd); background: var(--sur); letter-spacing: 0; min-height: 80px; } html.pro .work-instr:focus { border-color: var(--dim); } html.pro .wexp { font-family: 'Inter', sans-serif; letter-spacing: 0; font-size: 11px; font-weight: 400; border-radius: 5px; text-transform: none; border-color: var(--brd); color: var(--txt2); } /* ── Pro: Modals ── */ html.pro .mo > .md { border: none; border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06); background: var(--sur); } html.pro .mdtl { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; margin-bottom: 16px; } html.pro .mdsec { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--mut); border-bottom: none; padding-bottom: 0; margin: 16px 0 8px; } html.pro .mdhint { font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.6; letter-spacing: 0; } html.pro .md label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; color: var(--txt2); letter-spacing: 0.04em; text-transform: none; } html.pro .md input, html.pro .md textarea, html.pro .md select { font-family: 'Inter', sans-serif; font-size: 13px; border-radius: 6px; border: 1px solid var(--brd); background: var(--sur); letter-spacing: 0; } html.pro .md input:focus, html.pro .md textarea:focus { border-color: var(--dim); box-shadow: 0 0 0 3px rgba(0,0,0,.04); } html.pro .btn { font-family: 'Inter', sans-serif; letter-spacing: 0; font-weight: 500; font-size: 13px; border-radius: 7px; text-transform: none; } html.pro .btn.prim { background: var(--acc); color: var(--bg); border: none; } html.pro .btn.prim:hover { opacity: 0.85; } html.pro .clsmd { border-radius: 50%; width: 26px; height: 26px; border: none; background: var(--sur2); display: flex; align-items: center; justify-content: center; } html.pro .clsmd:hover { background: var(--sur3); } /* ── Pro: Settings ── */ html.pro .set-tabs { border-bottom: none; box-shadow: 0 1px 0 var(--brd); padding: 0 6px; gap: 2px; } html.pro .set-tab { font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0; font-weight: 400; text-transform: none; border: none; border-radius: 6px 6px 0 0; color: var(--txt2); padding: 9px 14px; border-bottom: 2px solid transparent; } html.pro .set-tab:hover { color: var(--txt); background: var(--sur2); } html.pro .set-tab.active { color: var(--txt); border-bottom-color: var(--acc); background: transparent; font-weight: 500; } html.pro .dyn-add { font-family: 'Inter', sans-serif; letter-spacing: 0; font-size: 12px; font-weight: 400; border-radius: 6px; text-transform: none; border-color: var(--brd); } html.pro .dyn-tog { font-family: 'Inter', sans-serif; letter-spacing: 0; font-size: 11px; font-weight: 400; border-radius: 6px; text-transform: none; border-color: var(--brd); } html.pro .dyn-tog.on { background: var(--acc); color: var(--bg); border-color: var(--acc); } /* ── Pro: History list ── */ html.pro .hi { font-family: 'Inter', sans-serif; font-size: 11px; border: none; border-radius: 6px; padding: 6px 8px; letter-spacing: 0; } html.pro .hi:hover { background: var(--sur2); border: none; } html.pro .hit { font-family: 'Inter', sans-serif; } /* ── Pro: Notification ── */ html.pro .notif { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0; border-radius: 8px; border: none; box-shadow: 0 4px 12px rgba(0,0,0,.12); text-transform: none; } /* ── Pro: Skill manager card ── */ html.pro .tc { border: none; border-radius: 8px; background: var(--sur2); padding: 10px 12px; margin-bottom: 6px; } html.pro .tc:hover { background: var(--sur3); } /* ── Pro: Select ── */ html.pro select.sel { font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0; border-radius: 6px; border-color: var(--brd); text-transform: none; background: var(--sur); font-weight: 400; } /* ── Pro: Theme button ── */ html.pro .theme-btn { font-family: 'Inter', sans-serif; gap: 4px; border-radius: 6px; font-size: 10px; padding: 4px 8px; color: var(--txt2); } /* ── Pro: BUILD prompt row ── */ html.pro .prog-prompt-row { border-bottom: none; box-shadow: 0 1px 0 var(--brd); } html.pro .prog-prompt-row textarea { font-family: 'Inter', sans-serif; font-size: 12px; border-radius: 7px; border: 1px solid var(--brd); background: var(--sur); letter-spacing: 0; } html.pro .prog-prompt-row textarea:focus { border-color: var(--dim); } /* ── Pro: Separator line in sidebar ── */ html.pro .sep { background: var(--brd); } /* ── PRO DARK — Pro aesthetics, dark palette ───────────────── */ html.pro.pro-dk { --bg: #141210; --sur: #1e1c19; --sur2: #252320; --sur3: #2e2b27; --brd: rgba(255,255,255,.07); --dim: rgba(255,255,255,.13); --txt: #e8e4de; --txt2: #9c9891; --mut: #6b6760; --dis: #3a3834; --acc: #d4c9b8; --r: #e06060; --g: #6abf8a; --b: #6aaed6; --y: #d4a843; } /* ── Pro: Status bar ── */ html.pro .stm { font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0; color: var(--mut); } /* ── RESET ─────────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; display: flex; flex-direction: column; } body { background: var(--bg); color: var(--txt); font-family: var(--fui); font-size: var(--sz); font-weight: 400; line-height: 1.55; -webkit-font-smoothing: antialiased; letter-spacing: .01em; } /* ── ICONS ─────────────────────────────────────────────────── */ .ms { font-family: 'Material Symbols Outlined'; font-weight: 300; font-style: normal; font-size: 16px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; vertical-align: middle; user-select: none; } .ms-sm { font-size: 14px; } .ms-lg { font-size: 20px; } /* ── SCROLLBARS ─────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 3px; height: 3px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: var(--mut); } /* ── ANIMATIONS ─────────────────────────────────────────────── */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes pulse-acc { 0%, 100% { box-shadow: 0 0 0 1px var(--dim); } 50% { box-shadow: 0 0 0 2px var(--acc); } } @keyframes spin { to { transform: rotate(360deg); } } /* ── CORE COMPONENTS ─────────────────────────────────────────── */ /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1px solid var(--dim); color: var(--txt2); font-family: var(--fui); font-size: var(--sz-sm); font-weight: 500; padding: 5px 11px; cursor: pointer; transition: border-color .12s, color .12s, background .12s; white-space: nowrap; user-select: none; line-height: 1; letter-spacing: .02em; } .btn:hover { border-color: var(--mut); color: var(--txt); } .btn:active { opacity: .7; } .btn:disabled { opacity: .28; cursor: not-allowed; } .btn.prim { border-color: var(--acc); color: var(--acc); } .btn.prim:hover { background: rgba(255,255,255,.06); } .btn.dng { border-color: var(--r); color: var(--r); } .btn.dng:hover { background: rgba(232,64,64,.07); } .btn.act { border-color: var(--brd); color: var(--txt2); background: var(--sur2); } /* Icon buttons */ .ibtn { background: transparent; border: 1px solid transparent; color: var(--mut); font-family: var(--fui); font-size: var(--sz-sm); font-weight: 500; padding: 4px 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: color .1s, border-color .1s; white-space: nowrap; } .ibtn:hover { color: var(--txt2); border-color: var(--dim); } .ibtn:active { opacity: .65; } .ibtn.on { color: var(--txt); border-color: var(--brd); } /* Inputs */ .inp { width: 100%; background: var(--sur2); border: 1px solid var(--brd); color: var(--txt); font-family: var(--fui); font-size: var(--sz-md); padding: 7px 11px; outline: none; transition: border-color .12s; } .inp:focus { border-color: var(--mut); } .inp::placeholder { color: var(--mut); } /* Select */ .sel { background: var(--sur); border: 1px solid var(--dim); color: var(--txt); font-family: var(--fui); font-size: var(--sz-sm); padding: 5px 8px; cursor: pointer; outline: none; max-width: 160px; } .sel:focus { border-color: var(--mut); } /* Labels */ .lbl { display: block; font-size: var(--sz-xs); color: var(--mut); font-weight: 500; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 5px; } /* Textarea */ .ta { width: 100%; background: var(--sur2); border: 1px solid var(--brd); color: var(--txt); font-family: var(--fmono); font-size: var(--sz-lg); padding: 9px 11px; resize: vertical; outline: none; transition: border-color .12s; line-height: 1.55; } .ta:focus { border-color: var(--mut); } /* ── LAYOUT ──────────────────────────────────────────────────── */ .page { display: flex; flex-direction: column; flex: 1; min-height: 0; } .row { display: flex; align-items: center; gap: 6px; } .col { display: flex; flex-direction: column; gap: 6px; } .flex1 { flex: 1; min-width: 0; min-height: 0; } .sep { width: 1px; height: 16px; background: var(--brd); flex-shrink: 0; } /* ── HEADER / TOPBAR ─────────────────────────────────────────── */ .topbar { display: flex; align-items: center; gap: 6px; padding: 0 14px; height: 42px; border-bottom: 1px solid var(--brd); background: var(--sur); flex-shrink: 0; z-index: 50; } .dfw-logo { display: flex; align-items: center; gap: 7px; text-decoration: none; flex-shrink: 0; margin-right: 4px; user-select: none; } .dfw-logo-mark { width: 22px; height: 22px; flex-shrink: 0; color: var(--txt); transition: color .15s; } .dfw-logo:hover .dfw-logo-mark { color: var(--acc); } .dfw-logo-text { font-size: 11px; font-weight: 700; color: var(--txt); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; line-height: 1; } .dfw-logo-sub { font-size: 8px; font-weight: 400; color: var(--mut); letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; line-height: 1; } .appname { font-size: 11px; font-weight: 600; color: var(--txt); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; margin-right: 4px; } /* Dragon logo SVG inner highlight uses bg color */ .dfw-logo-mark .flame-hi { stroke: var(--bg); } /* Theme toggle */ .theme-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--dim); background: transparent; cursor: pointer; color: var(--txt2); transition: color .12s, border-color .12s; flex-shrink: 0; } .theme-btn:hover { color: var(--txt); border-color: var(--brd); } .ubadge { font-size: var(--sz-xs); font-weight: 500; padding: 2px 9px; border: 1px solid var(--dim); color: var(--txt2); letter-spacing: .06em; text-transform: uppercase; } /* ── MODE TABS ──────────────────────────────────────────────── */ .modebar { display: flex; align-items: stretch; border-bottom: 1px solid var(--brd); background: var(--sur); flex-shrink: 0; padding: 0 14px; gap: 0; } .modetab { display: flex; align-items: center; gap: 5px; padding: 0 14px; height: 37px; font-family: var(--fui); font-size: var(--sz-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--mut); cursor: pointer; border: none; background: transparent; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s, border-color .12s; } .modetab:hover { color: var(--txt2); } .modetab.active { color: var(--txt); border-bottom-color: var(--acc); } .modetab .ms { font-size: 14px; } /* ── SIDEBAR ────────────────────────────────────────────────── */ .sidebar { width: 204px; border-right: 1px solid var(--brd); background: var(--sur); display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto; transition: width .15s; } .sidebar.collapsed { width: 0; overflow: hidden; } .sbsec { padding: 10px 8px; border-bottom: 1px solid var(--brd); } .sbsec-title { font-size: var(--sz-xs); color: var(--mut); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; display: flex; align-items: center; gap: 5px; } .addbtn { width: 100%; background: transparent; border: 1px dashed var(--dim); color: var(--mut); font-family: var(--fui); font-size: var(--sz-xs); padding: 6px; cursor: pointer; margin-top: 5px; display: flex; align-items: center; justify-content: center; gap: 4px; transition: border-color .1s, color .1s; letter-spacing: .03em; } .addbtn:hover { border-color: var(--brd); color: var(--txt2); } /* ── PERSONA CARDS ──────────────────────────────────────────── */ .pc { padding: 8px 8px; border: 1px solid var(--brd); margin-bottom: 3px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: border-color .1s, background .1s; position: relative; } .pc:hover { border-color: var(--dim); background: var(--sur2); } .pc.on { border-color: var(--mut); background: rgba(255,255,255,.03); } .pav { font-size: 18px; flex-shrink: 0; } .pi { flex: 1; min-width: 0; } .pn { font-size: var(--sz-sm); font-weight: 500; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt { font-size: var(--sz-xs); color: var(--mut); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--fmono); } .pmem { position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; background: var(--txt2); border-radius: 50%; display: none; } .pmem.on { display: block; } .pac { display: none; position: absolute; bottom: 3px; right: 4px; gap: 2px; } .pc:hover .pac { display: flex; } .pab { background: transparent; border: none; font-size: 13px; cursor: pointer; padding: 0 2px; color: var(--mut); } .pab:hover { color: var(--txt2); } /* ── HISTORY ─────────────────────────────────────────────────── */ .hi { padding: 5px 7px; border: 1px solid var(--brd); margin-bottom: 3px; cursor: pointer; font-size: var(--sz-xs); color: var(--mut); display: flex; align-items: center; gap: 5px; transition: border-color .1s, color .1s, background .1s; } .hi:hover { border-color: var(--dim); color: var(--txt2); background: var(--sur2); } .hia { font-size: 12px; flex-shrink: 0; } .hit { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hid { flex-shrink: 0; color: var(--r); cursor: pointer; display: none; font-size: 11px; } .hi:hover .hid { display: block; } /* ── CLAUSE ──────────────────────────────────────────────────── */ .ci { padding: 6px 8px; border: 1px solid var(--brd); margin-bottom: 3px; cursor: pointer; transition: border-color .1s, background .1s; position: relative; } .ci:hover { border-color: var(--mut); background: var(--sur2); } .cn { font-size: var(--sz-sm); color: var(--txt); font-weight: 500; margin-bottom: 2px; } .cp { font-size: var(--sz-xs); color: var(--mut); font-family: var(--fmono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cd { position: absolute; top: 4px; right: 5px; color: var(--r); cursor: pointer; font-size: 12px; display: none; } .ci:hover .cd { display: block; } /* ── CHAT AREA ───────────────────────────────────────────────── */ .ca { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } .cm { flex: 1; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 12px; } .es { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--mut); gap: 10px; text-align: center; } .ea { font-size: 40px; } .et { font-size: var(--sz-sm); font-weight: 600; color: var(--mut); letter-spacing: .06em; } /* ── MESSAGES ────────────────────────────────────────────────── */ .msg { max-width: 74%; animation: slideUp .14s ease; } .msg.u { align-self: flex-end; } .msg.a { align-self: flex-start; } .mmeta { font-size: var(--sz-xs); color: var(--mut); margin-bottom: 4px; display: flex; gap: 6px; align-items: center; } .mav { font-size: 13px; line-height: 1; } .msndr { color: var(--txt2); font-weight: 500; } .mtag { font-size: 10px; color: var(--dis); font-family: var(--fmono); } .mb { padding: 11px 16px; border: 1px solid; font-family: var(--fmono); font-size: var(--sz-lg); line-height: 1.65; word-break: break-word; position: relative; } /* User message — subtle white tint, clean */ .msg.u .mb { border-color: var(--dim); background: var(--sur2); } /* AI message — slightly recessed */ .msg.a .mb { border-color: var(--brd); background: var(--sur); } .msg.a.active .mb { border-color: var(--mut); } .mb p { margin-bottom: 7px; } .mb p:last-child { margin-bottom: 0; } .mb code { background: rgba(255,255,255,.06); padding: 1px 5px; font-size: .9em; border: 1px solid var(--brd); } .mb pre { background: var(--bg); padding: 10px 12px; margin: 8px 0; overflow-x: auto; border-left: 2px solid var(--dim); } .mb ul, .mb ol { padding-left: 18px; margin: 4px 0; } .mb strong { color: var(--txt); font-weight: 600; } .mtime { font-size: 10px; color: var(--dis); float: right; margin-top: 6px; margin-left: 10px; } .mact { display: flex; gap: 4px; margin-top: 5px; justify-content: flex-end; } .mab { background: transparent; border: 1px solid var(--brd); color: var(--mut); font-family: var(--fui); font-size: var(--sz-xs); padding: 2px 7px; cursor: pointer; transition: border-color .1s, color .1s; letter-spacing: .02em; } .mab:hover { border-color: var(--dim); color: var(--txt2); } .msys { align-self: center; padding: 4px 14px; border: 1px solid var(--brd); color: var(--mut); font-size: 11px; font-family: var(--fmono); } .typ { align-self: flex-start; padding: 11px 16px; border: 1px solid var(--brd); background: var(--sur); font-family: var(--fmono); font-size: var(--sz-lg); color: var(--mut); animation: blink .9s infinite; } .stream-body { white-space: pre-wrap; font-family: var(--fmono); font-size: var(--sz-sm); line-height: 1.65; color: var(--txt); } .msg.streaming { opacity: .88; } .msg.streaming .mact { display: none; } .cimg { max-width: 280px; max-height: 280px; border: 1px solid var(--brd); display: block; margin-top: 7px; cursor: pointer; } /* ── INPUT BAR ───────────────────────────────────────────────── */ .ciw { padding: 10px 14px; border-top: 1px solid var(--brd); background: var(--sur); display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0; } .cinp { flex: 1; background: var(--bg); border: 1px solid var(--brd); color: var(--txt); font-family: var(--fmono); font-size: var(--sz-xl); padding: 9px 12px; resize: none; min-height: 44px; max-height: 120px; outline: none; line-height: 1.5; transition: border-color .12s; } .cinp:focus { border-color: var(--dim); } .cinp::placeholder { color: var(--mut); } .sbtn { background: transparent; border: 1px solid var(--dim); color: var(--txt2); font-family: var(--fui); font-size: var(--sz-sm); font-weight: 600; padding: 9px 16px; cursor: pointer; flex-shrink: 0; letter-spacing: .06em; transition: border-color .1s, color .1s, background .1s; display: flex; align-items: center; gap: 5px; } .sbtn:hover { border-color: var(--acc); color: var(--acc); background: rgba(255,255,255,.04); } .sbtn:active { opacity: .7; } .sbtn:disabled { opacity: .28; cursor: not-allowed; } /* ── STATUS BAR ──────────────────────────────────────────────── */ .stbar { padding: 4px 14px; border-top: 1px solid var(--brd); font-size: var(--sz-xs); color: var(--mut); display: flex; gap: 14px; background: var(--bg); flex-wrap: wrap; flex-shrink: 0; align-items: center; letter-spacing: .03em; } .sdot { display: inline-block; width: 5px; height: 5px; background: var(--g); border-radius: 50%; margin-right: 3px; } /* ── SLASH PANEL ─────────────────────────────────────────────── */ .slp { position: absolute; bottom: 64px; left: 12px; right: 12px; background: var(--sur2); border: 1px solid var(--brd); z-index: 100; display: none; max-height: 240px; overflow-y: auto; } .slp.open { display: block; animation: fadeIn .1s ease; } .slph { padding: 7px 12px; border-bottom: 1px solid var(--brd); font-size: var(--sz-xs); color: var(--txt2); font-weight: 600; display: flex; align-items: center; gap: 5px; letter-spacing: .05em; } .slo { padding: 8px 14px; font-size: var(--sz-md); color: var(--txt); cursor: pointer; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--brd); font-family: var(--fmono); transition: background .08s; } .slo:hover { background: rgba(255,255,255,.035); } .slcmd { font-family: var(--fui); font-size: var(--sz-xs); font-weight: 600; color: var(--txt); min-width: 80px; } .sldsc { color: var(--mut); font-size: 11px; } /* ── SEND PANEL ──────────────────────────────────────────────── */ .sp { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.82); display: none; align-items: center; justify-content: center; } .sp.open { display: flex; } .spb { background: var(--sur); border: 1px solid var(--brd); padding: 24px; width: min(400px,90vw); animation: slideUp .15s ease; } .sptl { font-size: var(--sz-md); color: var(--txt); font-weight: 600; margin-bottom: 18px; letter-spacing: .05em; display: flex; align-items: center; gap: 8px; } .sopt { padding: 10px 12px; border: 1px solid var(--brd); margin-bottom: 6px; cursor: pointer; font-size: var(--sz-sm); color: var(--txt2); display: flex; align-items: center; gap: 9px; transition: border-color .1s, color .1s; } .sopt:hover, .sopt.sel { border-color: var(--dim); color: var(--txt); background: rgba(255,255,255,.03); } .sck { font-size: 12px; opacity: 0; } .sopt.sel .sck { opacity: 1; } /* ── MODALS ──────────────────────────────────────────────────── */ .mo { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.82); z-index: 200; align-items: center; justify-content: center; animation: fadeIn .12s ease; } .mo.open { display: flex; } .md { background: var(--sur); border: 1px solid var(--brd); padding: 24px; width: min(480px,93vw); max-height: 88vh; overflow-y: auto; position: relative; animation: slideUp .15s ease; } .mdtl { font-size: var(--sz-md); font-weight: 600; color: var(--txt); margin-bottom: 20px; letter-spacing: .03em; display: flex; align-items: center; gap: 7px; } .md label { display: block; font-size: var(--sz-xs); color: var(--mut); font-weight: 500; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 5px; } .md input, .md textarea, .md select { width: 100%; background: var(--bg); border: 1px solid var(--brd); color: var(--txt); font-family: var(--fmono); font-size: var(--sz-lg); padding: 8px 11px; margin-bottom: 12px; outline: none; resize: vertical; transition: border-color .12s; } .md input:focus, .md textarea:focus { border-color: var(--mut); } .mdsec { font-size: var(--sz-xs); color: var(--txt2); font-weight: 600; text-transform: uppercase; letter-spacing: .09em; margin: 18px 0 10px; border-bottom: 1px solid var(--brd); padding-bottom: 6px; } .mdhint { font-size: var(--sz-xs); color: var(--mut); margin-top: -8px; margin-bottom: 12px; line-height: 1.75; } .mda { display: flex; gap: 7px; margin-top: 14px; flex-wrap: wrap; } .mb2 { flex: 1; background: transparent; border: 1px solid var(--dim); color: var(--txt2); font-family: var(--fui); font-size: var(--sz-sm); font-weight: 500; padding: 9px; cursor: pointer; min-width: 70px; transition: border-color .1s, color .1s; letter-spacing: .03em; } .mb2.prim { border-color: var(--acc); color: var(--acc); } .mb2.dng { border-color: var(--r); color: var(--r); } .mb2:hover { border-color: var(--mut); color: var(--txt); } .clsmd { position: absolute; top: 10px; right: 10px; background: transparent; border: 1px solid var(--brd); color: var(--mut); font-family: var(--fui); font-size: var(--sz-xs); padding: 3px 7px; cursor: pointer; } .clsmd:hover { border-color: var(--r); color: var(--r); } /* ── CONFIRM OVERLAY ─────────────────────────────────────────── */ .cov { position: fixed; inset: 0; background: rgba(0,0,0,.82); z-index: 700; display: none; align-items: center; justify-content: center; } .cov.open { display: flex; } .cob { background: var(--sur); border: 1px solid var(--dim); padding: 28px 26px; width: min(340px,90vw); text-align: center; animation: slideUp .15s ease; } .com { font-size: var(--sz-md); color: var(--txt2); margin-bottom: 22px; line-height: 1.65; } .coa { display: flex; gap: 10px; } .cobtn { flex: 1; background: transparent; font-family: var(--fui); font-size: var(--sz-sm); font-weight: 500; padding: 10px; cursor: pointer; transition: opacity .1s; border: 1px solid; } .cobtn:active { opacity: .65; } /* ── EMOJI GRID ──────────────────────────────────────────────── */ .eg { display: grid; grid-template-columns: repeat(8,1fr); gap: 4px; margin-bottom: 12px; } .eo { font-size: 20px; cursor: pointer; text-align: center; padding: 4px; border: 1px solid transparent; transition: border-color .1s; } .eo:hover, .eo.sel { border-color: var(--dim); background: rgba(255,255,255,.04); } /* ── MEMORY ──────────────────────────────────────────────────── */ .memb { background: var(--bg); border: 1px solid var(--brd); padding: 10px 12px; font-family: var(--fmono); font-size: var(--sz-md); color: var(--txt); min-height: 60px; max-height: 140px; overflow-y: auto; margin-bottom: 10px; white-space: pre-wrap; line-height: 1.6; } /* ── STORAGE BAR ─────────────────────────────────────────────── */ .stbar2 { background: var(--bg); border: 1px solid var(--brd); height: 4px; margin: 4px 0 10px; } .stfil { height: 100%; background: var(--mut); transition: width .3s; } .stfil.w { background: var(--txt2); } .stfil.f { background: var(--r); } /* ── NOTIFICATION ────────────────────────────────────────────── */ .notif { position: fixed; top: 52px; right: 14px; background: var(--sur2); border: 1px solid var(--dim); color: var(--txt2); font-size: var(--sz-sm); padding: 10px 16px; z-index: 600; display: none; max-width: 280px; animation: slideUp .15s ease; letter-spacing: .02em; line-height: 1.5; } .notif.err { border-color: var(--r); color: var(--r); } /* ── SAVE MENU ───────────────────────────────────────────────── */ .sw { position: relative; } .smenu { position: absolute; top: 100%; left: 0; background: var(--sur2); border: 1px solid var(--brd); display: none; flex-direction: column; min-width: 180px; z-index: 40; } .smenu.open { display: flex; } .smo { padding: 9px 14px; font-size: var(--sz-sm); color: var(--txt2); cursor: pointer; border-bottom: 1px solid var(--brd); display: flex; align-items: center; gap: 7px; transition: background .08s; } .smo:hover { background: rgba(255,255,255,.04); color: var(--txt); } /* ── GROUP CHAT ──────────────────────────────────────────────── */ #gs { display: none; position: fixed; inset: 0; z-index: 80; background: var(--bg); flex-direction: column; animation: fadeIn .15s ease; } .gset { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px; gap: 14px; overflow-y: auto; } .ggrd { display: grid; grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); gap: 6px; width: 100%; max-width: 580px; } .gp { padding: 9px; border: 1px solid var(--brd); cursor: pointer; font-size: var(--sz-xs); color: var(--mut); position: relative; display: flex; align-items: center; gap: 7px; transition: border-color .1s, color .1s, background .1s; } .gp:hover { border-color: var(--dim); color: var(--txt2); background: var(--sur2); } .gp.sel { border-color: var(--mut); color: var(--txt); background: rgba(255,255,255,.03); } .gpck { position: absolute; top: 4px; right: 5px; font-size: 10px; display: none; } .gp.sel .gpck { display: block; } .gbdg { font-size: var(--sz-xs); font-weight: 500; padding: 2px 7px; border: 1px solid; display: flex; align-items: center; gap: 4px; } .gms { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 9px; } .gmsg { max-width: 76%; animation: slideUp .15s ease; } .gmsg.fu { align-self: flex-end; } .gmsg.fa { align-self: flex-start; } .gmbody { padding: 9px 14px; border: 1px solid; font-family: var(--fmono); font-size: var(--sz-lg); line-height: 1.55; word-break: break-word; } .gmsg.fu .gmbody { border-color: var(--dim); background: var(--sur2); } /* ── WORK MODE ───────────────────────────────────────────────── */ #ws { display: none; position: fixed; inset: 0; z-index: 80; background: var(--bg); flex-direction: column; animation: fadeIn .15s ease; } .wl { width: 300px; flex-shrink: 0; border-right: 1px solid var(--brd); display: flex; flex-direction: column; background: var(--sur); overflow-y: auto; } .wr { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } .wprev { flex: 1; overflow-y: auto; padding: 28px 32px; font-family: var(--fdoc); font-size: 16px; line-height: 1.9; color: var(--txt2); } .wprev h1 { font-size: 22px; color: var(--txt); border-bottom: 1px solid var(--brd); padding-bottom: 10px; margin: 22px 0 12px; font-weight: 700; } .wprev h2 { font-size: 18px; color: var(--txt2); margin: 18px 0 9px; font-weight: 600; } .wprev h3 { font-size: 15px; color: var(--txt2); margin: 14px 0 7px; font-weight: 600; } .wprev p { margin-bottom: 12px; } .wprev strong { color: var(--txt); font-weight: 600; } .wprev table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; font-family: var(--fui); } .wprev th { border: 1px solid var(--brd); padding: 7px 12px; color: var(--mut); font-weight: 600; font-size: var(--sz-xs); text-transform: uppercase; letter-spacing: .05em; } .wprev td { border: 1px solid var(--brd); padding: 7px 12px; } .wprev blockquote { border-left: 2px solid var(--dim); padding: 8px 16px; margin: 12px 0; background: var(--sur2); font-style: italic; color: var(--txt2); } .wexp { background: transparent; border: 1px solid var(--dim); color: var(--mut); font-family: var(--fui); font-size: var(--sz-xs); font-weight: 500; padding: 6px 5px; cursor: pointer; text-align: center; display: flex; align-items: center; justify-content: center; gap: 4px; transition: border-color .1s, color .1s; } .wexp:hover { border-color: var(--brd); color: var(--txt2); } .wexp:disabled { opacity: .28; cursor: not-allowed; } /* Template cards */ .tc { padding: 10px 12px; border: 1px solid var(--brd); display: flex; align-items: center; gap: 10px; margin-bottom: 4px; transition: border-color .1s, background .1s; cursor: pointer; } .tc:hover { border-color: var(--dim); background: var(--sur2); } /* Image */ .iprev { width: 100%; max-height: 240px; object-fit: contain; border: 1px solid var(--brd); margin-top: 7px; display: none; } .iprev.show { display: block; } .iload { font-size: var(--sz-xs); color: var(--txt2); animation: blink .7s infinite; display: none; margin-top: 7px; text-align: center; } .iload.show { display: block; } /* ── LOGIN ───────────────────────────────────────────────────── */ #login-screen { position: fixed; inset: 0; z-index: 500; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg); gap: 0; } .l-title { font-size: clamp(13px, 2.2vw, 18px); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--txt); margin-bottom: 5px; } .l-sub { font-size: var(--sz-xs); color: var(--mut); margin-bottom: 32px; letter-spacing: .06em; } .l-box { width: min(310px, 90vw); border: 1px solid var(--brd); padding: 28px 26px; background: var(--sur); position: relative; } .l-box::before { content: 'SECURE ACCESS'; position: absolute; top: -9px; left: 18px; background: var(--sur); padding: 0 8px; font-size: var(--sz-xs); font-weight: 600; color: var(--mut); letter-spacing: .1em; text-transform: uppercase; } .l-lbl { display: block; font-size: var(--sz-xs); color: var(--mut); font-weight: 500; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 5px; } .l-inp { width: 100%; background: var(--bg); border: 1px solid var(--brd); color: var(--txt); font-family: var(--fmono); font-size: var(--sz-xl); padding: 9px 11px; margin-bottom: 14px; outline: none; transition: border-color .12s; } .l-inp:focus { border-color: var(--mut); } .l-btn { width: 100%; background: transparent; border: 1px solid var(--dim); color: var(--txt2); font-family: var(--fui); font-size: var(--sz-sm); font-weight: 600; padding: 12px; cursor: pointer; letter-spacing: .1em; text-transform: uppercase; transition: border-color .12s, color .12s, background .12s; } .l-btn:hover { border-color: var(--acc); color: var(--acc); background: rgba(255,255,255,.04); } .l-err { font-size: var(--sz-xs); color: var(--r); text-align: center; margin-top: 10px; min-height: 14px; } .l-hint { font-size: var(--sz-xs); color: var(--dis); text-align: center; margin-top: 22px; } /* ── VISUAL MODE ─────────────────────────────────────────────── */ .chart-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 18px; gap: 12px; } .chart-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--brd); } .chart-canvas-wrap { flex: 1; border: 1px solid var(--brd); background: var(--sur); overflow: hidden; position: relative; } /* ── ACTION MODE ─────────────────────────────────────────────── */ .action-area { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; max-width: 660px; width: 100%; margin: 0 auto; } .connector-card { border: 1px solid var(--brd); padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--sur); } .connector-title { font-size: var(--sz-sm); font-weight: 600; color: var(--txt); display: flex; align-items: center; gap: 7px; } .connector-status { font-size: var(--sz-xs); color: var(--mut); display: flex; align-items: center; gap: 5px; } .connector-status.ok { color: var(--g); } /* ── PROGRAM / BUILD MODE ────────────────────────────────────── */ .program-area { flex: 1; display: flex; overflow: hidden; min-height: 0; } .code-pane { flex: 1; display: flex; flex-direction: column; border-right: 1px solid var(--brd); min-width: 0; } .preview-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg); } .preview-pane iframe { flex: 1; border: none; background: #fff; } .code-pane-bar, .preview-pane-bar { padding: 7px 14px; border-bottom: 1px solid var(--brd); display: flex; align-items: center; gap: 7px; font-size: var(--sz-xs); color: var(--mut); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; background: var(--sur); } .code-editor { flex: 1; background: var(--bg); border: none; color: var(--txt); font-family: var(--fmono); font-size: var(--sz-md); padding: 16px; resize: none; outline: none; line-height: 1.65; min-height: 0; } /* ── MULTI-MODE PANELS ───────────────────────────────────────── */ .mode-panel.active { min-width: 320px; } /* ── SETTINGS MODAL (tabbed) ─────────────────────────────────── */ .set-md { width: min(800px, 97vw) !important; display: flex; flex-direction: column; max-height: 90vh; } .set-tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--brd); flex-shrink: 0; scrollbar-width: none; } .set-tabs::-webkit-scrollbar { display: none; } .set-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--mut); font-family: var(--fmono); font-size: 10px; padding: 10px 14px; cursor: pointer; white-space: nowrap; letter-spacing: .08em; transition: color .15s, border-color .15s; flex-shrink: 0; } .set-tab:hover { color: var(--txt2); } .set-tab.active { color: var(--txt); border-bottom-color: var(--acc); } .set-panels { flex: 1; overflow: hidden; min-height: 0; } .set-panel { display: none; overflow-y: auto; height: 100%; padding: 14px 0 4px; } .set-panel.active { display: block; } /* Dynamic row (APIs, webhooks) */ .dyn-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; } .dyn-row { display: grid; gap: 5px; align-items: center; padding: 7px 9px; border: 1px solid var(--brd); background: var(--sur); } .dyn-row.tapi { grid-template-columns: 1fr 2fr 1.5fr 1.2fr auto; } .dyn-row.iapi { grid-template-columns: 1fr 2fr 1.5fr auto; } .dyn-row.vapi { grid-template-columns: 1fr 2fr 1.5fr auto; } .dyn-row.wh { grid-template-columns: 1.4fr 2.5fr 80px auto auto; } .dyn-row.conn { grid-template-columns: 1fr 2fr 90px 1fr auto; } .dyn-row.rp { grid-template-columns: 36px 1fr auto; } .dyn-row input, .dyn-row select, .dyn-row textarea { background: var(--bg); border: 1px solid var(--brd); color: var(--txt); font-family: var(--fmono); font-size: 11px; padding: 4px 8px; outline: none; width: 100%; } .dyn-row input:focus, .dyn-row select:focus { border-color: var(--dim); } .dyn-row select { cursor: pointer; } .dyn-row textarea { resize: vertical; min-height: 44px; font-size: 11px; } .dyn-rm { background: none; border: 1px solid var(--brd); color: var(--mut); width: 24px; height: 24px; cursor: pointer; font-size: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: border-color .15s, color .15s; } .dyn-rm:hover { border-color: var(--r); color: var(--r); } .dyn-add { display: flex; align-items: center; gap: 5px; background: none; border: 1px dashed var(--brd); color: var(--mut); font-family: var(--fmono); font-size: 10px; padding: 6px 10px; cursor: pointer; letter-spacing: .06em; transition: border-color .15s, color .15s; width: 100%; } .dyn-add:hover { border-color: var(--dim); color: var(--txt2); } .dyn-lbl { font-size: 9px; color: var(--dis); letter-spacing: .05em; font-family: var(--fmono); } .dyn-tog { background: none; border: 1px solid var(--brd); color: var(--mut); font-family: var(--fmono); font-size: 9px; padding: 3px 7px; cursor: pointer; transition: all .15s; white-space: nowrap; } .dyn-tog.on { border-color: var(--g); color: var(--g); } /* Roleplay persona expand */ .rp-expand { grid-column: 1 / -1; } .rp-expand textarea { width: 100%; } /* Connector template badge */ .conn-tmpl { font-size: 9px; background: var(--sur2); border: 1px solid var(--brd); color: var(--mut); padding: 2px 6px; letter-spacing: .04em; white-space: nowrap; } /* Settings persona/template list */ .set-item { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid var(--brd); margin-bottom: 4px; cursor: pointer; transition: border-color .15s, background .15s; } .set-item:hover { border-color: var(--dim); background: var(--sur2); } .set-item-av { font-size: 18px; flex-shrink: 0; } .set-item-info { flex: 1; min-width: 0; } .set-item-name { font-size: var(--sz-sm); font-weight: 600; color: var(--txt); } .set-item-sub { font-size: var(--sz-xs); color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .set-item-acts { display: flex; gap: 4px; flex-shrink: 0; } /* ── INLINE CODE RUNNER ──────────────────────────────────────── */ .run-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid var(--dim); color: var(--txt2); font-family: var(--fmono); font-size: 10px; padding: 3px 10px; cursor: pointer; margin: 4px 0 2px; letter-spacing: .05em; transition: border-color .15s, color .15s; } .run-btn:hover { border-color: var(--brd); color: var(--txt); } .inline-runner { width: 100%; height: 280px; border: 1px solid var(--brd); background: #fff; margin: 4px 0 6px; display: block; } /* ── FOLDER BADGE ────────────────────────────────────────────── */ #fs-badge.active { color: var(--g); } #fs-badge.active #fs-name { color: var(--g); } /* ── UNIFIED LAYOUT ──────────────────────────────────────────── */ .body-wrap { display: flex; flex: 1; overflow: hidden; min-height: 0; } .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } /* Chat sub-header */ .chat-hd { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid var(--brd); background: var(--sur); flex-shrink: 0; } /* ── WORK BAR ────────────────────────────────────────────────── */ .work-bar { flex-direction: column; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--brd); background: var(--sur); flex-shrink: 0; } .work-bar-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .work-instr { flex: 1; min-width: 180px; background: var(--bg); border: 1px solid var(--brd); color: var(--txt); font-family: var(--fmono); font-size: 12px; padding: 7px 10px; outline: none; resize: vertical; line-height: 1.5; min-height: 96px; } .work-instr:focus { border-color: var(--dim); } .work-exports { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--brd); } /* Work doc in chat */ .work-msg .mb { background: var(--sur2); border-color: var(--brd); } .work-doc { font-family: 'EB Garamond', Georgia, serif; font-size: 15px; line-height: 1.85; } .work-doc-header { border-bottom: 1px solid var(--brd); padding-bottom: 14px; margin-bottom: 20px; } .work-doc-conf { font-size: 10px; color: var(--r); font-weight: 700; letter-spacing: .1em; margin-bottom: 6px; font-family: var(--fmono); } .work-doc-entity { font-size: 16px; color: var(--txt); font-weight: 600; } .work-doc-tag { font-size: 12px; color: var(--mut); margin-top: 3px; font-family: var(--fmono); } .work-doc-sig { border-top: 1px solid var(--brd); margin-top: 26px; padding-top: 14px; font-size: 13px; color: var(--mut); } .work-msg-acts { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--brd); } /* ── ACTION STRIP ────────────────────────────────────────────── */ .action-strip { align-items: center; gap: 6px; padding: 5px 14px; border-top: 1px solid var(--brd); background: var(--sur); flex-shrink: 0; overflow-x: auto; } .as-badge { display: inline-flex; align-items: center; gap: 4px; background: none; border: 1px solid var(--brd); color: var(--mut); font-family: var(--fmono); font-size: 10px; padding: 3px 9px; cursor: pointer; letter-spacing: .04em; white-space: nowrap; transition: border-color .15s, color .15s; } .as-badge:hover { border-color: var(--dim); color: var(--txt2); } .as-badge.ok { border-color: var(--dim); color: var(--txt2); } .as-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brd); } .as-dot.ok { background: var(--g); } /* ── MODE TOOLS (active mode badges above input) ─────────────── */ .mode-tools { align-items: center; gap: 5px; flex-wrap: wrap; padding: 5px 12px; border-top: 1px solid var(--brd); background: var(--sur); flex-shrink: 0; } .mtool-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--sur2); border: 1px solid var(--brd); color: var(--mut); font-family: var(--fmono); font-size: 10px; padding: 3px 9px; cursor: pointer; letter-spacing: .05em; transition: color .15s, border-color .15s; } .mtool-badge:hover { color: var(--r); border-color: var(--r); } /* ── RIGHT PANE (BUILD) ──────────────────────────────────────── */ .rpane { flex-direction: column; width: 45%; min-width: 300px; max-width: 700px; border-left: 1px solid var(--brd); flex-shrink: 0; overflow: hidden; } .rpane-hd { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid var(--brd); background: var(--sur); flex-shrink: 0; } .prog-prompt-row { display: flex; gap: 6px; align-items: flex-end; padding: 7px 10px; border-bottom: 1px solid var(--brd); background: var(--sur); flex-shrink: 0; } .prog-prompt-row textarea { flex: 1; background: var(--bg); border: 1px solid var(--brd); color: var(--txt); font-family: var(--fmono); font-size: 11px; padding: 6px 9px; outline: none; resize: vertical; min-height: 56px; line-height: 1.5; } .prog-prompt-row textarea:focus { border-color: var(--dim); } /* ── ACTION MODE — CONNECTOR CARDS ──────────────────────────── */ #action-connectors { display: flex; flex-direction: column; gap: 14px; padding: 18px; overflow-y: auto; flex: 1; } .ac-section { display: flex; flex-direction: column; gap: 6px; } .ac-section-hd { display: flex; align-items: center; gap: 6px; font-size: 9px; font-family: var(--fmono); color: var(--mut); letter-spacing: .1em; padding-bottom: 5px; border-bottom: 1px solid var(--brd); } .ac-card { padding: 10px 14px; border: 1px solid var(--brd); background: var(--sur); display: flex; flex-direction: column; gap: 5px; } .ac-card.ok { border-color: var(--dim); } .ac-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-family: var(--fmono); } .ac-label { flex: 1; font-weight: 600; color: var(--txt); letter-spacing: .05em; } .ac-type { font-size: 9px; color: var(--mut); background: var(--sur2); border: 1px solid var(--brd); padding: 1px 5px; letter-spacing: .06em; } .ac-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brd); flex-shrink: 0; } .ac-dot.ok { background: var(--g); } .ac-url { font-size: 10px; font-family: var(--fmono); color: var(--mut); word-break: break-all; } .ac-acts { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; } .ac-empty { font-size: 11px; font-family: var(--fmono); color: var(--mut); padding: 10px; border: 1px dashed var(--brd); text-align: center; } .ac-empty a { color: var(--txt2); text-decoration: underline; cursor: pointer; } .btn-sm { background: none; border: 1px solid var(--brd); color: var(--txt2); font-family: var(--fmono); font-size: 10px; padding: 3px 10px; cursor: pointer; letter-spacing: .05em; display: inline-flex; align-items: center; gap: 4px; transition: border-color .15s, color .15s; } .btn-sm:hover { border-color: var(--dim); color: var(--txt); } /* ── WORKSPACE FILE BROWSER ───────────────────────────────────── */ .ftree { display: flex; flex-direction: column; gap: 0; padding: 2px 4px 8px; max-height: 300px; overflow-y: auto; } .ft-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 8px; } .ft-item { display: flex; align-items: center; gap: 5px; padding: 4px 6px; cursor: pointer; font-size: 11px; font-family: var(--fmono); color: var(--txt2); position: relative; min-width: 0; border-radius: 2px; transition: background .08s, color .08s; } .ft-item:hover { background: var(--sur2); color: var(--txt); } .ft-item.open { color: var(--txt); background: var(--sur2); } .ft-icon { font-size: 13px; flex-shrink: 0; color: var(--mut); } .ft-dir .ft-icon { color: var(--txt2); } .ft-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ft-acts { display: none; gap: 2px; flex-shrink: 0; } .ft-item:hover .ft-acts { display: flex; } .ft-act { background: none; border: none; color: var(--mut); cursor: pointer; padding: 1px 2px; font-size: 11px; line-height: 1; transition: color .1s; } .ft-act:hover { color: var(--r); } .ft-back { color: var(--mut); font-style: italic; } /* ── RESPONSIVE ──────────────────────────────────────────────── */ @media (max-width: 600px) { .sidebar { width: 160px; } .msg { max-width: 88%; } .cinp { font-size: var(--sz-xl); } .wl { width: 100%; border-right: none; border-bottom: 1px solid var(--brd); max-height: 40vh; } #ws .body { flex-direction: column; } .program-area { flex-direction: column; } .code-pane { border-right: none; border-bottom: 1px solid var(--brd); } } @media (max-width: 400px) { .sidebar { position: absolute; z-index: 10; height: 100%; } .sidebar.collapsed { width: 0; } .msg { max-width: 95%; } .modebar { overflow-x: auto; } .modetab { padding: 0 10px; font-size: 9px; } } /* ── AV MODE PANEL ───────────────────────────────────────────── */ .av-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--mut); font-family: var(--fui); font-size: var(--sz-xs); font-weight: 600; letter-spacing: .07em; padding: 7px 14px; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: color .15s, border-color .15s; flex-shrink: 0; } .av-tab:hover { color: var(--txt2); } .av-tab.active { color: var(--txt); border-bottom-color: var(--txt); } .av-panel { display: none; flex: 1; min-height: 0; } .av-panel.active { display: flex; flex-direction: column; } .av-scroll { flex: 1; overflow-y: auto; padding: 12px; } .av-scroll::-webkit-scrollbar { width: 4px; } .av-scroll::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 2px; } .av-drop { border: 1px dashed var(--dim); padding: 16px 12px; text-align: center; cursor: pointer; margin-bottom: 10px; border-radius: 2px; transition: border-color .15s, background .15s; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .av-drop:hover { border-color: var(--brd); background: var(--base1); } .av-drop.has-file { border-color: var(--g); border-style: solid; } .av-prog { font-family: var(--fmono); font-size: var(--sz-xs); color: var(--mut); text-align: center; padding: 10px; letter-spacing: .06em; animation: blink 1.2s step-end infinite; } @keyframes blink { 50% { opacity: .35; } } /* ── VISUAL MODE — Chart.js + Mermaid ────────────────────────── */ .vchart-wrap { padding: 12px 0; max-width: 600px; } .vmermaid-wrap { padding: 12px 0; overflow-x: auto; } .vmermaid-wrap svg { max-width: 100%; height: auto; background: transparent; } .vact-row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .verr { background: #1a0000; border: 1px solid #550000; color: #e06060; font-family: var(--fmono); font-size: var(--sz-xs); padding: 8px 12px; border-radius: 2px; margin-top: 6px; white-space: pre-wrap; } /* ── MOBILE RESPONSIVE ────────────────────────────────────────── */ .sb-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 90; } @media (max-width: 768px) { .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 100; transform: translateX(-100%); transition: transform .2s ease; width: 240px !important; min-width: 240px !important; } .sidebar.open { transform: translateX(0); } .sb-overlay.open { display: block; } .modebar { overflow-x: auto; flex-wrap: nowrap; padding: 0 4px; gap: 0; } .modebar::-webkit-scrollbar { display: none; } .rpane { position: fixed !important; inset: 0 !important; z-index: 80; width: 100% !important; } .main { margin-left: 0 !important; } }