/* Ek hi font - Inter. Pehle headings serif (Newsreader) mein thi aur body sans mein; dono ka mel akhbaar jaisa ajeeb lagta tha. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { --ground: #f6f7f6; --surface: #ffffff; --surface-2: #f0f2f1; --ink: #101917; --ink-soft: #3d4947; --ink-faint: #5e6a67; --rule: #cdd5d2; --rule-soft: #dfe4e2; --accent: #0d6156; --accent-hover: #0a4f46; --accent-soft: #e2efec; --caution: #8a5a12; --caution-bg: #f7efdf; --risk: #8c3226; --risk-bg: #f8e8e5; --good: #1f6b3f; --good-bg: #e3f0e8; --on-accent: #ffffff; --display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Gol kinare - ek hi jagah se, taaki har card/button ek jaisa dikhe. */ --radius: 14px; --radius-sm: 10px; --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; } /* OS dark mode ko jaan-boojh kar follow NAHI karte. Pehle yahan `prefers-color-scheme: dark` tha, jiski wajah se jinki machine dark mode par hai unhe poora portal kaala dikhta tha - aur us palette mein table, form aur chhote labels padhna mushkil ho jaata hai. Ye ek kaam ka tool hai, mood light nahi; padhna aasan hona zyada zaroori hai. Dark chahiye toh se aa jaata hai (neeche). */ :root[data-theme='dark'] { --ground: #101614; --surface: #18201e; --surface-2: #1f2926; --ink: #e8eeeb; --ink-soft: #a5b2ae; --ink-faint: #78847f; --rule: #2b3532; --rule-soft: #222b29; --accent: #5fbfae; --accent-hover: #7ed3c3; --accent-soft: #1a2c29; --caution: #d6a55c; --caution-bg: #2b2519; --risk: #e08b7c; --risk-bg: #2d1e1b; --good: #6cc08c; --good-bg: #1a2b21; --on-accent: #0d1a18; } * { box-sizing: border-box; } /* display:flex on .stack/.card would otherwise beat the [hidden] attribute. */ [hidden] { display: none !important; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 15.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ---------- topbar ---------- */ .topbar { border-bottom: 1px solid var(--rule); background: var(--surface); position: sticky; top: 0; z-index: 20; } .topbar-inner { /* Poori chaudai. Pehle 78rem par bandha tha, jisse bade screen par dayein taraf khali patti bach jaati thi - aur session table waise bhi chaudi hoti hai. Forms abhi bhi .narrow se bandhe rehte hain, kyunki lambi line padhna mushkil hota hai. */ max-width: none; margin: 0 auto; padding: 0.85rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .brand { font-family: var(--display); font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; margin-right: auto; } .brand span { color: var(--accent); } .topnav { display: flex; gap: 0.35rem; flex-wrap: wrap; } .topnav a { font-size: 0.85rem; color: var(--ink-soft); text-decoration: none; padding: 0.35rem 0.7rem; border-radius: var(--radius-sm); } .topnav a:hover { background: var(--surface-2); color: var(--ink); } .topnav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; } /* ---------- layout ---------- */ .page { max-width: none; margin: 0 auto; padding: 2rem 1.5rem 5rem; } .narrow { max-width: 46rem; } .stack { display: flex; flex-direction: column; gap: 1.5rem; } .row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; } .spread { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.25rem; } /* ---------- type ---------- */ h1 { font-family: var(--display); font-weight: 700; font-size: 1.75rem; margin: 0 0 0.35rem; letter-spacing: -0.02em; text-wrap: balance; } h2 { font-family: var(--display); font-weight: 600; font-size: 1.15rem; margin: 0; letter-spacing: -0.01em; } h3 { font-size: 0.95rem; font-weight: 600; margin: 0; } p { margin: 0; } .sub { color: var(--ink-soft); font-size: 0.92rem; max-width: 42rem; } .eyebrow { font-size: 0.78rem; font-weight: 600; color: var(--accent); } .mono { font-family: var(--mono); font-size: 0.82rem; } .muted { color: var(--ink-soft); } .faint { color: var(--ink-faint); font-size: 0.85rem; } .num { font-variant-numeric: tabular-nums; } /* ---------- card ---------- */ .card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.25rem; display: flex; flex-direction: column; gap: 0.9rem; } .card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; } /* ---------- forms ---------- */ label { display: block; font-size: 0.82rem; font-weight: 500; margin-bottom: 0.3rem; color: var(--ink-soft); } input[type='text'], input[type='number'], input[type='password'], input[type='email'], select, textarea { width: 100%; font-family: inherit; font-size: 0.92rem; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 0.5rem 0.65rem; line-height: 1.5; } textarea { resize: vertical; min-height: 5rem; font-family: var(--mono); font-size: 0.82rem; line-height: 1.6; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } .field { margin-bottom: 0.85rem; } .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.85rem; } .check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; } .check input { width: auto; } .check label { margin: 0; font-weight: 400; color: var(--ink); } /* ---------- buttons ---------- */ button, .btn { font-family: inherit; font-size: 0.88rem; font-weight: 500; padding: 0.5rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; } button:hover, .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); } button:focus-visible, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } button:disabled { opacity: 0.45; cursor: not-allowed; } button.ghost, .btn.ghost { background: transparent; color: var(--ink-soft); border-color: var(--rule); } button.ghost:hover, .btn.ghost:hover { background: var(--surface-2); color: var(--ink); border-color: var(--rule); } button.danger { background: transparent; color: var(--risk); border-color: var(--risk); } button.danger:hover { background: var(--risk-bg); border-color: var(--risk); } button.big { font-size: 1rem; padding: 0.75rem 1.6rem; } button.sm, .btn.sm { font-size: 0.78rem; padding: 0.3rem 0.6rem; } /* ---------- pills ---------- */ .pill { font-size: 0.75rem; font-weight: 600; letter-spacing: 0; padding: 0.22rem 0.65rem; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); white-space: nowrap; } .pill.good { background: var(--good-bg); color: var(--good); } .pill.warn { background: var(--caution-bg); color: var(--caution); } .pill.bad { background: var(--risk-bg); color: var(--risk); } .pill.accent { background: var(--accent-soft); color: var(--accent); } /* ---------- tables ---------- */ .tablewrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); } table { border-collapse: collapse; width: 100%; font-size: 0.88rem; } th, td { text-align: left; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--rule-soft); vertical-align: top; } thead th { font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); background: var(--surface-2); border-bottom: 1px solid var(--rule); white-space: nowrap; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--surface-2); } /* ---------- callouts ---------- */ .callout { border: 1px solid var(--rule); border-left: 3px solid var(--accent); background: var(--accent-soft); padding: 0.85rem 1.1rem; border-radius: var(--radius-sm); font-size: 0.89rem; display: flex; flex-direction: column; gap: 0.35rem; /* close button ke liye jagah - warna wo lambi line ke upar chadh jaata hai */ position: relative; padding-right: 2.6rem; } .callout-close { position: absolute; top: 0.45rem; right: 0.5rem; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink-faint); cursor: pointer; font-size: 1.1rem; line-height: 1; display: grid; place-items: center; } .callout-close:hover { background: rgba(0, 0, 0, 0.07); color: var(--ink); } .callout.warn { border-left-color: var(--caution); background: var(--caution-bg); } .callout.bad { border-left-color: var(--risk); background: var(--risk-bg); } .callout b { font-weight: 600; } /* ---------- tabs ---------- */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--rule); flex-wrap: wrap; } .tab { font-size: 0.87rem; padding: 0.55rem 0.9rem; border: 0; background: transparent; color: var(--ink-soft); border-bottom: 2px solid transparent; border-radius: 0; cursor: pointer; } .tab:hover { background: var(--surface-2); color: var(--ink); } .tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; } .panel { display: none; padding-top: 1.5rem; } .panel.active { display: block; } /* ---------- stats ---------- */ /* Grid ki jagah flex-wrap - jaan-boojh kar. Grid mein aakhri row ke khali cell rah jaate the, aur container ka grey background unme se jhaankta tha: screen par ek bada khali sletee block dikhta tha jo bug jaisa lagta hai. flex-wrap mein aakhri row ke tile khud phail kar poori chaudai bhar lete hain, isliye khali jagah bachti hi nahi. */ .stats { display: flex; flex-wrap: wrap; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; } .stat { background: var(--surface); flex: 1 1 8rem; padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.15rem; } .stat .v { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; } .stat .k { font-size: 0.78rem; font-weight: 500; color: var(--ink-faint); } /* ---------- transcript ---------- */ .transcript { display: flex; flex-direction: column; gap: 0.6rem; max-height: 30rem; overflow-y: auto; padding-right: 0.5rem; } .turn { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.75rem; font-size: 0.89rem; } .turn .who { font-size: 0.78rem; font-weight: 600; padding-top: 0.15rem; } .turn.agent .who { color: var(--accent); } .turn.staff .who { color: var(--ink-faint); } .turn .txt { color: var(--ink); } .turn.agent .txt { color: var(--ink-soft); } /* ---------- session page ---------- */ .session-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem; align-items: start; } @media (max-width: 56rem) { .session-stage { grid-template-columns: 1fr; } } .video-wrap { position: relative; background: #0b0f0e; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--rule); } .video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scaleX(-1); } .video-badge { position: absolute; top: 0.6rem; left: 0.6rem; display: flex; align-items: center; gap: 0.4rem; background: rgba(0,0,0,0.6); color: #fff; padding: 0.25rem 0.55rem; border-radius: var(--radius-sm); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; } .rec-dot { width: 7px; height: 7px; border-radius: 50%; background: #e05a45; } @media (prefers-reduced-motion: no-preference) { .rec-dot { animation: pulse 1.6s ease-in-out infinite; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } .agent-orb { width: 72px; height: 72px; border-radius: 50%; background: var(--accent-soft); border: 2px solid var(--accent); display: grid; place-items: center; flex: none; transition: transform 0.15s ease; } .agent-orb.speaking { transform: scale(1.12); } .agent-orb .inner { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); } .timer { font-family: var(--mono); font-size: 1.05rem; font-variant-numeric: tabular-nums; } /* ---------- misc ---------- */ .toast { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--ground); padding: 0.6rem 1.1rem; border-radius: var(--radius-sm); font-size: 0.87rem; z-index: 100; box-shadow: 0 4px 16px rgba(0,0,0,0.2); max-width: 90vw; } .list { display: flex; flex-direction: column; gap: 0.75rem; } .item { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 0.8rem 1rem; background: var(--surface); display: flex; flex-direction: column; gap: 0.4rem; } .item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; } .empty { padding: 2rem 1rem; text-align: center; color: var(--ink-faint); font-size: 0.9rem; } hr { border: 0; border-top: 1px solid var(--rule); margin: 0; } a { color: var(--accent); } pre.json { font-family: var(--mono); font-size: 0.76rem; background: var(--surface-2); padding: 0.8rem; border-radius: var(--radius-sm); overflow-x: auto; margin: 0; color: var(--ink-soft); line-height: 1.55; } .bar { height: 5px; background: var(--surface-2); border-radius: var(--radius-sm); overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--accent); } /* Review ho chuka par staff ko dikhaya nahi gaya - ye aakhri step chhoot na jaye. */ .card.needs-action { border-color: var(--caution); background: var(--caution-bg); } .card.needs-action .pill { background: var(--surface); } /* ===================================================================== MOBILE ===================================================================== */ @media (max-width: 46rem) { body { font-size: 15px; } .topbar-inner { padding: 0.7rem 1rem; gap: 0.5rem 1rem; } .brand { font-size: 1.05rem; } .topnav { width: 100%; } .topnav a { padding: 0.4rem 0.65rem; } .page { padding: 1.5rem 1rem calc(3rem + env(safe-area-inset-bottom)); } .stack { gap: 1.1rem; } h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; } .card { padding: 1rem; } /* 16px se kam par iOS input focus par page zoom kar deta hai. */ input[type='text'], input[type='number'], input[type='password'], input[type='email'], select, textarea { font-size: 16px; padding: 0.6rem 0.7rem; } /* Angoothe ke laayak tap target. */ button, .btn { min-height: 2.75rem; padding: 0.6rem 1.1rem; justify-content: center; } button.sm, .btn.sm { min-height: 2.2rem; } .row > button { flex: 1 1 10rem; } .stats { grid-template-columns: repeat(2, 1fr); } .stat .v { font-size: 1.3rem; } .grid-2 { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } .turn { grid-template-columns: 1fr; gap: 0.15rem; } .item-head { align-items: center; } .toast { left: 1rem; right: 1rem; transform: none; max-width: none; text-align: center; } } @media (hover: none) { button:hover, .btn:hover { background: var(--accent); border-color: var(--accent); } button.ghost:hover, .btn.ghost:hover { background: transparent; color: var(--ink-soft); } tbody tr:hover { background: transparent; } } /* ---------- camera alerts (admin + review) ---------- Evidence frame ke bina alert par koi faisla nahi le sakta, isliye thumbnail list mein hi dikhta hai - ek extra click bhi zyada hai. */ .alert-item { flex-direction: row; gap: 0.9rem; align-items: flex-start; } .alert-item .alert-body { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; flex: 1; } .alert-thumb { width: 8.5rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--rule); background: #0b0f0e; display: block; flex: none; } .alert-item.seen { opacity: 0.55; } .tab .pill { margin-left: 0.35rem; } @media (max-width: 46rem) { .alert-item { flex-direction: column; } .alert-thumb { width: 100%; max-width: 18rem; } }