/* HQ 1.0.0 (HQ · 47, D-037): Franken UI (vendor/franken-ui/core.min.css) is the kit; this file is HQ's layout on top of it. Every colour comes from the Franken theme variables, so light and dark both follow . Mobile (< 900 px): one column and a five-tab bar at the bottom. Desktop (>= 900 px): rail | list | open item | context. */ :root { --bg: hsl(var(--background)); --fg: hsl(var(--foreground)); --card: hsl(var(--card)); --muted: hsl(var(--muted-foreground)); --soft: hsl(var(--muted)); --line: hsl(var(--border)); --red: hsl(var(--destructive)); /* HQ green: unread, live, sent, the open tab. */ --hq: #16a34a; --hq-strong: #15803d; --hq-soft: rgba(22, 163, 74, .12); --amber: #d97706; --amber-soft: rgba(217, 119, 6, .14); --blue: #2563eb; --chat-bg: hsl(var(--muted) / .55); --mine: #dcfce7; --rail: 76px; --list: 360px; --side: 320px; --topbar: 56px; /* old names, still used inline in a few places */ --text: var(--fg); --navy: var(--fg); --green: var(--hq); } .dark { --hq: #22c55e; --hq-strong: #4ade80; --hq-soft: rgba(34, 197, 94, .16); --amber: #f59e0b; --amber-soft: rgba(245, 158, 11, .16); --blue: #60a5fa; --chat-bg: hsl(var(--background)); --mine: #14532d; } * { box-sizing: border-box; } /* hidden means hidden: a class with its own display must not undo it. */ [hidden] { display: none !important; } html, body { margin: 0; height: 100%; } body { background: var(--bg); color: var(--fg); font-size: 15px; -webkit-tap-highlight-color: transparent; } /* No reset for buttons or inputs here: Franken UI styles them in a CSS layer, and any plain rule in this file would win over it (a white button with no text). */ h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.01em; } hq-icon { display: inline-flex; line-height: 0; } .muted { color: var(--muted); } .small { font-size: 13px; } .err { color: var(--red); font-size: 14px; } .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .meta-line { color: var(--muted); font-size: 13px; margin: 0 0 12px; } /* Buttons made by the app (.btn) look like Franken's default button. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 1px solid var(--line); background: var(--card); color: var(--fg); border-radius: .375rem; padding: .45rem .9rem; font-size: 14px; font-weight: 500; cursor: pointer; } .btn:hover { background: var(--soft); } .btn.more { width: 100%; margin-top: 4px; } /* ---------------------------------------------------------- Login */ .login { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; background: var(--soft); } .login form { width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 28px 24px; box-shadow: 0 1px 3px rgba(0,0,0,.08); } .login h1 { margin: 12px 0 4px; font-size: 24px; } .login p { margin: 0 0 20px; color: var(--muted); font-size: 14px; } .login img { width: 48px; height: 48px; display: block; } .login label { display: block; font-weight: 500; margin-bottom: 6px; font-size: 14px; } .login .err { margin: 10px 0 0; } .login .uk-btn { width: 100%; margin-top: 16px; } /* ---------------------------------------------------------- App shell (mobile first) */ .app { display: flex; flex-direction: column; height: 100%; } .top { order: 1; display: flex; align-items: center; gap: 6px; height: var(--topbar); padding: 0 10px 0 16px; padding-top: env(safe-area-inset-top); border-bottom: 1px solid var(--line); background: var(--bg); flex: none; } .top img { width: 28px; height: 28px; border-radius: 6px; } .top h1 { font-size: 17px; margin: 0 0 0 4px; flex: 1; } .ver { font-size: 12px; border: 1px solid var(--line); color: var(--muted); padding: 2px 8px; border-radius: 999px; } .gear { width: 38px; height: 38px; padding: 0; } main { order: 2; flex: 1; overflow: auto; padding: 16px; min-height: 0; } .panel h2 { margin: 0 0 4px; font-size: 20px; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; } .install { display: none; } .install.show { display: block; } nav.tabs { order: 3; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--bg); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); flex: none; } nav.tabs button { position: relative; background: none; border: 0; padding: 8px 0 9px; color: var(--muted); font-size: 11px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; } nav.tabs button b { display: block; line-height: 0; } nav.tabs button[aria-selected="true"] { color: var(--fg); font-weight: 600; } nav.tabs button[aria-selected="true"] b { color: var(--hq); } nav.tabs button[aria-selected="true"]::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; border-radius: 2px; background: var(--hq); } .tabcount { position: absolute; top: 3px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--hq); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; } .centerempty, .ctx { display: none; } .toast { position: fixed; left: 16px; right: 16px; bottom: 84px; z-index: 40; background: var(--fg); color: var(--bg); border-radius: 8px; padding: 12px 14px; display: none; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.25); } .toast.show { display: block; } .updatebar { position: fixed; left: 12px; right: 12px; top: calc(env(safe-area-inset-top) + 64px); z-index: 30; border: 0; border-radius: 10px; padding: 12px 14px; background: var(--hq); color: #fff; font-weight: 600; font-size: 15px; box-shadow: 0 6px 20px rgba(0,0,0,.25); cursor: pointer; text-align: left; } /* ---------------------------------------------------------- Lists */ .group { margin: 18px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; } .item { display: block; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; margin-bottom: 8px; cursor: pointer; color: var(--fg); transition: background .12s, border-color .12s; } .item:hover { background: var(--soft); } .item.current { border-color: var(--hq); box-shadow: 0 0 0 1px var(--hq) inset; } .item b { display: block; font-weight: 600; overflow-wrap: anywhere; } .item span { display: block; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; } .item.missing { opacity: .6; } .note { background: var(--amber-soft); border: 1px solid var(--amber); border-radius: 8px; padding: 8px 12px; font-size: 14px; } .chip { flex: none; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 4px 11px; font-size: 13px; color: var(--fg); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; max-width: 70vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chip:hover { background: var(--soft); } .seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--soft); padding: 3px; gap: 3px; } .seg button { border: 0; background: none; padding: 6px 4px; color: var(--muted); cursor: pointer; border-radius: 6px; font-size: 14px; } .seg button[aria-pressed="true"] { background: var(--card); color: var(--fg); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); } .seg b { font-weight: 700; } /* ---------------------------------------------------------- Page viewer */ .viewer { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; background: var(--bg); } .vbar { display: flex; align-items: center; gap: 8px; min-height: var(--topbar); padding: 6px 12px; padding-top: max(6px, env(safe-area-inset-top)); border-bottom: 1px solid var(--line); background: var(--bg); color: var(--fg); flex: none; } .vback { background: none; border: 0; color: var(--fg); padding: 6px 8px 6px 2px; cursor: pointer; display: inline-flex; border-radius: 6px; } .vback:hover { background: var(--soft); } .vtitle { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vopen { color: var(--hq-strong); font-size: 14px; text-decoration: underline; white-space: nowrap; } .vlinks { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--soft); flex: none; } .vlinks:empty { display: none; } .viewer iframe { flex: 1; width: 100%; border: 0; background: #fff; } /* ---------------------------------------------------------- Files */ .filters { position: sticky; top: -16px; z-index: 1; background: var(--bg); padding: 8px 0 10px; display: grid; gap: 8px; } .item .badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-right: 6px; vertical-align: 1px; } .badge.pdf { background: rgba(220, 38, 38, .12); color: #dc2626; } .badge.html { background: var(--hq-soft); color: var(--hq-strong); } /* ---------------------------------------------------------- Board: Kanban */ .kchips { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px 10px; padding: 0 16px; } .kchips button { flex: none; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 4px 11px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .kchips b { font-weight: 700; } .kanban { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 16px; padding: 2px 2px 12px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; align-items: flex-start; } .kcol { flex: 0 0 82%; max-width: 340px; scroll-snap-align: start; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; min-height: 120px; } .kcol.drop { outline: 2px dashed var(--hq); outline-offset: -2px; } .khead { display: flex; align-items: center; gap: 8px; padding: 4px 4px 8px; font-weight: 600; font-size: 14px; } .khead .kdot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; } .khead .kn { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; } .khead button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 2px; display: inline-flex; } .kcol[data-col="unassigned"] .kdot { background: var(--amber); } .kcol[data-col="todo"] .kdot { background: var(--blue); } .kcol[data-col="doing"] .kdot { background: var(--hq); } .kcol[data-col="blocked"] .kdot { background: var(--red); } .kcards { display: flex; flex-direction: column; gap: 8px; } .kcol.collapsed .kcards, .kcol.collapsed .kmore { display: none; } .kcol.collapsed { min-height: 0; } .kmore { font-size: 13px; color: var(--muted); padding: 6px 4px 2px; } .task { margin: 0; cursor: grab; } .task .who { font-size: 12px; color: var(--muted); margin-top: 4px; } .task .scope { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; color: var(--muted); margin-top: 4px; } .task.col-blocked { border-left: 3px solid var(--red); } .task.col-unassigned { border-left: 3px solid var(--amber); } .task.dragging { opacity: .4; } /* ---------------------------------------------------------- Knowledge base: graph */ .kbfind { max-width: 200px; height: 34px; } .kbgraph { position: relative; height: calc(100vh - 230px); min-height: 360px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; touch-action: none; } .kbgraph svg { width: 100%; height: 100%; display: block; cursor: grab; user-select: none; } .kbgraph svg.panning { cursor: grabbing; } .kbgraph .edge { stroke: var(--line); stroke-width: 1.2; } .kbgraph .edge.hot { stroke: var(--hq); stroke-width: 2; } .kbgraph .node { cursor: pointer; } .kbgraph .node circle { stroke: var(--card); stroke-width: 2; } .kbgraph .node text { font-size: calc(11px / var(--zs, 1)); fill: var(--fg); paint-order: stroke; stroke: var(--card); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; } .kbgraph .node.dim { opacity: .18; } .kbgraph .node:not(.big) text { opacity: 0; transition: opacity .12s; } .kbgraph svg.zoomed .node text, .kbgraph .node:hover text, .kbgraph .node:focus text, .kbgraph .node.hit text, .kbgraph .node.near text { opacity: 1; } .kbgraph .node.hit circle { stroke: var(--hq); stroke-width: 3; } .kbgraph .node.missing circle { fill: var(--line) !important; stroke-dasharray: 2 2; stroke: var(--muted); } .kblegend { position: absolute; left: 8px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 12px; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; pointer-events: none; } .kblegend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: 0; } .kbzoom { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 4px; } .kbzoom button { width: 32px; height: 32px; border: 1px solid var(--line); background: var(--card); border-radius: 6px; cursor: pointer; display: grid; place-items: center; font-size: 16px; } /* ---------------------------------------------------------- Sheets (task, settings) */ .sheet { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .5); display: flex; align-items: flex-end; } .sheetbox { width: 100%; max-height: 92%; overflow: auto; background: var(--bg); border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); } .sheetbox h3 { margin: 0 0 8px; font-size: 18px; } .sheetbox h4 { margin: 18px 0 8px; font-size: 15px; } .sheetbox label { display: block; margin: 12px 0 4px; } .sheetbox textarea { resize: vertical; } .sheetbox .row { margin-top: 16px; } .sheetbox .row .uk-btn { flex: 1; } .changelog h4 { margin: .8rem 0 .3rem; } .cllist { max-height: 38vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; background: var(--soft); } .clentry { padding: 6px 0; border-bottom: 1px solid var(--line); } .clentry:last-child { border-bottom: 0; } .clentry small { color: var(--muted); } .clentry ul { margin: 2px 0 0; padding-left: 1.1rem; list-style: disc; } .clentry li { font-size: .9rem; line-height: 1.35; } .clentry.current b { color: var(--hq-strong); } .signout { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; } .themeseg { margin-bottom: 4px; } /* ---------------------------------------------------------- Chat list */ .thread .top1 { display: flex; justify-content: space-between; gap: 8px; } .thread .top1 small { color: var(--muted); white-space: nowrap; font-size: 12px; } .thread .prev { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .thread.master { border-left: 3px solid var(--hq); } .thread .row2 { display: flex; align-items: center; gap: 8px; } .thread .row2 .prev { flex: 1; min-width: 0; } .thread .count { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--hq); color: #fff; font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; } .thread.unread b { font-weight: 800; } .thread.unread .top1 small { color: var(--hq-strong); font-weight: 700; } .archived-toggle { display: block; width: 100%; text-align: left; margin: 14px 0 6px; padding: 10px 4px; background: none; border: 0; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; } .thread.archived { opacity: .7; } .pushcard { border-left: 3px solid var(--hq); } .pushcard p { margin: 0 0 10px; } .pushcard .row { justify-content: flex-start; flex-wrap: wrap; } /* Bot status (HQ · 18, 30, 33) */ .sdot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--muted); } /* In a list row a span is a block; the dot stays in the line (display only, no colour here). */ .item span.sdot { display: inline-block; } .sdot.listening { background: var(--hq); } .sdot.working { background: var(--amber); } .sdot.offline { background: var(--muted); opacity: .6; } .sdot.needsok { background: var(--red); box-shadow: 0 0 0 2px rgba(220, 38, 38, .25); } .sdot.asleep { background: #7c8fb0; box-shadow: inset -3px -2px 0 0 var(--soft); } /* ---------------------------------------------------------- Chat thread */ /* Opaque panel (on a desktop it covers the centre's empty-state text); the tint is behind the messages only. */ .chat { position: fixed; inset: 0; z-index: 8; display: flex; flex-direction: column; background: var(--bg); } .ctitle { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ctitle .vtitle { flex: none; } .cstatus { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msgs { flex: 1; overflow-y: auto; padding: 12px 10px 20px; display: flex; flex-direction: column; gap: 6px; background: var(--chat-bg); } .day { align-self: center; font-size: 12px; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; margin: 8px 0 2px; } .msg { max-width: 86%; padding: 8px 10px 4px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); overflow-wrap: anywhere; transition: transform .15s ease-out; touch-action: pan-y; -webkit-user-select: text; user-select: text; } .msg.krishna { align-self: flex-end; background: var(--mine); border-color: transparent; } .msg.bot { align-self: flex-start; } .msg .t { white-space: pre-wrap; font-size: 15px; line-height: 1.45; } .msg .meta { font-size: 11px; color: var(--muted); text-align: right; margin-top: 2px; } .msg .file { display: block; margin: 4px 0; padding: 8px 10px; border-radius: 8px; background: var(--soft); border: 1px solid var(--line); color: var(--fg); text-decoration: underline; cursor: pointer; text-align: left; width: 100%; font-size: 14px; } .msg .file.gone { text-decoration: none; color: var(--muted); cursor: default; } .msg img.pic { display: block; max-width: 100%; border-radius: 8px; margin: 4px 0; cursor: pointer; } .msg.pending { opacity: .6; } .msg.swiping { transition: none; } .msg.picked { outline: 2px solid var(--hq); } .msg a.lnk { color: var(--blue); text-decoration: underline; overflow-wrap: anywhere; } .msg .quote { border-left: 3px solid var(--hq); background: var(--soft); border-radius: 6px; padding: 4px 8px; margin: 2px 0 6px; font-size: 13px; } .msg .quote b { display: block; color: var(--hq-strong); } .msg .quote span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); } .choices { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 2px; } .choice { text-align: left; border: 1px solid var(--hq); background: var(--hq-soft); color: var(--fg); border-radius: 8px; padding: 8px 12px; font-size: 14px; cursor: pointer; } .choice.on { background: var(--hq); color: #fff; font-weight: 700; } .qhead { font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 4px; } .tick { font-weight: 700; color: var(--muted); letter-spacing: -2px; margin-left: 2px; } .tick.read { color: var(--hq); } #msgs .earlier { display: block; margin: 8px auto 12px; } .offline-note { color: var(--amber); } /* Composer */ .composer { background: var(--bg); border-top: 1px solid var(--line); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); flex: none; } .crow { display: flex; align-items: flex-end; gap: 6px; } .composer textarea { flex: 1; min-width: 0; resize: none; max-height: 140px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 20px; font-size: 16px; line-height: 1.3; background: var(--card); outline: none; } .composer textarea:focus { border-color: var(--hq); } .attach, .sendbtn { flex: none; width: 40px; height: 40px; border-radius: 20px; display: grid; place-items: center; cursor: pointer; border: 0; } .attach { background: var(--soft); color: var(--fg); } .sendbtn { background: var(--hq); color: #fff; } .sendbtn:disabled { opacity: .5; } .attached { font-size: 13px; background: var(--soft); border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; gap: 8px; } .attached button { border: 0; background: none; color: var(--red); cursor: pointer; } .attached .pv { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: none; background: #000; } .attached .an { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attachmenu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; } .attachmenu button { border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 12px 6px; font-size: 14px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; } .cnote { font-size: 12px; color: var(--muted); margin: 6px 4px 0; } .replybar { display: flex; gap: 8px; align-items: center; background: var(--soft); border-left: 3px solid var(--hq); border-radius: 8px; padding: 6px 8px 6px 10px; margin-bottom: 6px; } .replybar .rb { flex: 1; min-width: 0; } .replybar b { display: block; font-size: 13px; color: var(--hq-strong); } .replybar span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .replybar button { border: 0; background: none; font-size: 18px; color: var(--muted); cursor: pointer; padding: 4px 6px; } /* ---------------------------------------------------------- Search */ .searchview { position: fixed; inset: 0; z-index: 9; display: flex; flex-direction: column; background: var(--bg); } .searchview .vbar input { flex: 1; min-width: 0; } .sresults { flex: 1; overflow-y: auto; padding: 8px 16px 24px; } .sresults .item span.snip { white-space: normal; } .sresults mark { background: var(--amber-soft); color: inherit; border-radius: 2px; } /* ---------------------------------------------------------- Questions (HQ · 41) */ .qseg { grid-template-columns: 1fr 1fr; margin-bottom: 12px; } .qitem .qbadges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .qitem .qbadges span { display: inline-block; font-size: 12px; background: var(--soft); color: var(--fg); border-radius: 999px; padding: 1px 8px; } .qitem .qbadges span.ans { background: var(--hq-soft); color: var(--hq-strong); font-weight: 700; } .qitem .qq { color: var(--fg); margin-top: 4px; } .qitem .qbadges span.old, .qold { background: var(--amber-soft); color: var(--amber); font-weight: 700; } .qold { display: inline-block; font-size: 12px; border-radius: 999px; padding: 1px 8px; margin-left: 6px; } .qview { position: fixed; inset: 0; z-index: 9; display: flex; flex-direction: column; background: var(--bg); } .qbody { flex: 1; overflow-y: auto; padding: 12px 16px 32px; } .qwho { font-size: 13px; color: var(--muted); margin: 0 0 6px; } .qtext { font-size: 17px; font-weight: 600; margin: 0 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; } .qframe { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 10px; } .qframe iframe { display: block; width: 100%; height: 62vh; border: 0; } .qframe.none { padding: 12px 14px; color: var(--muted); font-size: 14px; background: var(--card); } .qctx { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; font-size: 13px; color: var(--muted); align-items: center; } .qopts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .qopt { display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%; border: 1px solid var(--line); background: var(--card); color: var(--fg); border-radius: 10px; padding: 12px 14px; font-size: 15px; cursor: pointer; } .qopt:hover { background: var(--soft); } .qopt .k { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); font-weight: 700; } .qopt .l { flex: 1; min-width: 0; overflow-wrap: anywhere; } .qopt .rec { display: block; font-size: 12px; font-weight: 700; color: var(--hq-strong); margin-top: 2px; } .qopt[aria-checked="true"] { border-color: var(--hq); background: var(--hq-soft); box-shadow: 0 0 0 1px var(--hq) inset; } .qopt[aria-checked="true"] .k { background: var(--hq); color: #fff; } .qform label { margin: 4px 0 6px; display: block; } .qsend { width: 100%; margin-top: 10px; } .qdone { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--hq); border-radius: 10px; padding: 12px 14px; } .qdone b { display: block; margin-bottom: 4px; } .qdone p { margin: 4px 0; overflow-wrap: anywhere; } /* ---------------------------------------------------------- Right panel (desktop) */ .ctx h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 8px; font-weight: 600; } .ctx h3:first-child { margin-top: 0; } .ctx .kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 13px; margin: 0; } .ctx .kv dt { color: var(--muted); } .ctx .kv dd { margin: 0; overflow-wrap: anywhere; } .ctx .mini { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 6px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--fg); } .ctx .mini:hover { background: var(--soft); } .ctx .mini .n { margin-left: auto; color: var(--muted); font-size: 12px; } .ctx .mini .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ctx .big { font-size: 22px; font-weight: 700; } .ctx .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ctx .stat { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--card); } .ctx .stat span { display: block; font-size: 12px; color: var(--muted); } /* ================================================================ Desktop */ @media (min-width: 900px) { body { font-size: 14px; } .app { display: grid; grid-template-columns: var(--rail) var(--list) minmax(0, 1fr) var(--side); grid-template-rows: var(--topbar) minmax(0, 1fr); height: 100vh; } .top { grid-column: 1 / -1; grid-row: 1; padding-top: 0; } nav.tabs { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; border-top: 0; border-right: 1px solid var(--line); background: var(--soft); } nav.tabs button { padding: 10px 0 8px; border-radius: 8px; font-size: 11px; } nav.tabs button:hover { background: var(--bg); } nav.tabs button[aria-selected="true"] { background: var(--bg); box-shadow: 0 1px 2px rgba(0,0,0,.06); } nav.tabs button[aria-selected="true"]::before { top: 20%; bottom: 20%; left: -8px; right: auto; width: 3px; height: auto; } .tabcount { top: 2px; left: calc(50% + 4px); } main { grid-column: 2; grid-row: 2; border-right: 1px solid var(--line); padding: 16px; } .centerempty { grid-column: 3; grid-row: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); text-align: center; padding: 24px; } .ctx { grid-column: 4; grid-row: 2; display: block; overflow-y: auto; border-left: 1px solid var(--line); padding: 16px; background: var(--bg); } /* The open item sits in the centre column, not over the whole screen. */ .chat, .viewer, .qview, .searchview { inset: var(--topbar) var(--side) 0 calc(var(--rail) + var(--list)); z-index: 5; } .searchview { z-index: 6; } .chat .vback, .qview .vback { display: none; } .vbar { padding-top: 6px; } /* Each open item belongs to its tab; another tab hides it until you come back. */ body:not([data-tab="chat"]) #chat, body:not([data-tab="questions"]) #qview { display: none !important; } body[data-tab="chat"] #viewer:not([data-tab="chat"]), body[data-tab="board"] #viewer:not([data-tab="board"]), body[data-tab="kb"] #viewer:not([data-tab="kb"]), body[data-tab="files"] #viewer:not([data-tab="files"]), body[data-tab="questions"] #viewer:not([data-tab="questions"]) { display: none !important; } /* Board and the graph use the list and the centre columns together. */ body[data-tab="board"] main, body[data-tab="kb"]:not(.viewer-open) main { grid-column: 2 / 4; } body[data-tab="board"] .centerempty, body[data-tab="kb"]:not(.viewer-open) .centerempty { display: none; } .kanban { margin: 0; padding: 2px 0 12px; overflow-x: auto; scroll-snap-type: none; } .kchips { display: none; } /* Four open columns + folded Done fit a 1440 px screen: 4 x 180 + 170 + gaps < 990 px. */ .kcol { flex: 1 1 0; min-width: 180px; max-width: none; } .kcol.collapsed { flex: 0 0 170px; min-width: 170px; } .kbgraph { height: calc(100vh - 150px); } /* The task sheet opens in the right panel; settings open in the middle. */ #sheet { inset: var(--topbar) 0 0 auto; width: var(--side); background: none; align-items: stretch; z-index: 7; } #sheet .sheetbox { max-height: none; height: 100%; border-radius: 0; border-top: 0; border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgba(0,0,0,.06); } #settings { align-items: center; justify-content: center; } #settings .sheetbox { max-width: 560px; border-radius: 12px; border: 1px solid var(--line); max-height: 86vh; } .toast { left: auto; right: 24px; bottom: 24px; width: 380px; } .updatebar { left: auto; right: 24px; top: 70px; width: 380px; } .msgs { padding: 16px 24px 24px; } .msg { max-width: 72%; } .qbody { padding: 16px 24px 32px; } .qframe iframe { height: 56vh; } } @media (min-width: 1400px) { :root { --list: 380px; --side: 340px; } }