/* * One stylesheet for the panel — castomapi-chat's, with this service's own rules appended at the end. * * THEME. Three states, not two. An explicit choice stamps * `data-theme="light|dark"` on ; the default "system" setting stamps * nothing and only `prefers-color-scheme` separates the two. So the light * palette is declared on bare :root, the dark one is declared twice — once * behind the media query (guarded so an explicit light choice beats a dark * OS) and once behind the stamp — and every component reads tokens only. A * colour whose sole definition sits inside a media query is invisible to * half the visitors, which is the classic version of this bug. * * LAYOUT. Three columns on a desktop: an icon rail, a section sidebar, the * view. Below 900px the rail becomes a bottom bar and the sidebar an * off-canvas drawer, because a support inbox is read on a phone between * other things and a wrapped desktop layout is not a phone layout. */ :root { color-scheme: light; --bg: #eceef1; --panel: #ffffff; --panel-2: #f4f6f8; --sidebar: #f7f8f9; --ink: #16191d; --ink-2: #3c444b; --muted: #656e77; --line: #e1e5ea; --line-2: #edf0f3; --accent: #335c81; --accent-ink: #ffffff; --accent-tint: #e7eff7; --accent-tint-ink: #1d3f5c; --ok-bg: #e4f3e8; --ok-ink: #1d6b33; --warn-bg: #fdf3dc; --warn-ink: #7d5605; --warn-line: #f0dcae; --error: #b3261e; --error-bg: #fdecea; --online: #21a366; --radius: 8px; --radius-lg: 12px; --shadow: 0 1px 2px rgba(16, 24, 32, 0.06), 0 4px 14px rgba(16, 24, 32, 0.05); --shadow-pop: 0 12px 40px rgba(16, 24, 32, 0.22); --rail-w: 56px; --sidebar-w: 232px; --view-pad: 22px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0e1113; --panel: #171b1f; --panel-2: #1e2429; --sidebar: #131719; --ink: #e7eaed; --ink-2: #c2c9cf; --muted: #939ca4; --line: #272e34; --line-2: #1f2429; --accent: #79aad4; --accent-ink: #0e1113; --accent-tint: #1a2733; --accent-tint-ink: #b9d5ec; --ok-bg: #16301f; --ok-ink: #74c48c; --warn-bg: #2f2611; --warn-ink: #e9c069; --warn-line: #4a3c16; --error: #f2b8b5; --error-bg: #3a1f1d; --online: #35c07f; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3); --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.55); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0e1113; --panel: #171b1f; --panel-2: #1e2429; --sidebar: #131719; --ink: #e7eaed; --ink-2: #c2c9cf; --muted: #939ca4; --line: #272e34; --line-2: #1f2429; --accent: #79aad4; --accent-ink: #0e1113; --accent-tint: #1a2733; --accent-tint-ink: #b9d5ec; --ok-bg: #16301f; --ok-ink: #74c48c; --warn-bg: #2f2611; --warn-ink: #e9c069; --warn-line: #4a3c16; --error: #f2b8b5; --error-bg: #3a1f1d; --online: #35c07f; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3); --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.55); } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 14.5px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; } ::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); } :focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 1px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } input, textarea, select, button { font: inherit; color: inherit; } input, textarea, select { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; width: 100%; } input:focus, textarea:focus, select:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); } textarea { resize: vertical; min-height: 80px; } label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; } label.inline { display: inline-flex; align-items: center; gap: 6px; margin: 6px 12px 6px 0; color: var(--ink); } label.inline input { width: auto; } a { color: var(--accent); } h1, h2, h3 { margin: 0 0 8px; line-height: 1.25; } h1 { font-size: 22px; } h2 { font-size: 17px; } h3 { font-size: 15px; } p { margin: 0 0 8px; } .muted { color: var(--muted); } .small { font-size: 12.5px; } .error { color: var(--error); } code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; } pre { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; } button, .btn { cursor: pointer; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: var(--radius); padding: 7px 12px; } button:hover, .btn:hover { background: var(--panel-2); } button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } button.primary:hover { filter: brightness(1.08); background: var(--accent); } button.danger { color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, var(--line)); } button.link { border: 0; background: none; padding: 0; color: var(--accent); } button.link:hover { background: none; text-decoration: underline; } button:disabled { opacity: 0.5; cursor: default; } button.sm { padding: 4px 8px; font-size: 13px; } .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .row.between { justify-content: space-between; } .grid { display: grid; gap: 12px; } .grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid.three { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow); } .card.flat { box-shadow: none; } .pill { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 12px; background: var(--panel-2); border: 1px solid var(--line); } .pill.ok { background: var(--ok-bg); color: var(--ok-ink); border-color: transparent; } .pill.warn { background: var(--warn-bg); color: var(--warn-ink); border-color: transparent; } .pill.err { background: var(--error-bg); color: var(--error); border-color: transparent; } .pill.accent { background: var(--accent-tint); color: var(--accent-tint-ink); border-color: transparent; } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; } th { font-size: 12.5px; color: var(--muted); font-weight: 600; } tr.clickable { cursor: pointer; } tr.clickable:hover td { background: var(--panel-2); } .empty { padding: 32px; text-align: center; color: var(--muted); } .stack > * + * { margin-top: 12px; } .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; flex-wrap: wrap; } .tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 8px 12px; color: var(--muted); } .tabs button.on { color: var(--ink); border-bottom-color: var(--accent); } .field-help { font-size: 12.5px; color: var(--muted); margin-top: 2px; } /* An icon button: a square hit area with a 16px glyph and no chrome until hovered. Used in the rail, the conversation header and the composer. */ .icon-btn { border: 0; background: none; color: var(--muted); width: 32px; height: 32px; padding: 0; border-radius: var(--radius); display: inline-grid; place-items: center; flex: 0 0 auto; } .icon-btn:hover { background: var(--panel-2); color: var(--ink); } .icon-btn.on { color: var(--accent); background: var(--accent-tint); } .icon-btn svg { width: 17px; height: 17px; } svg.ico { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* Initials in a disc. The hue comes from the id so the same person keeps the same colour between sessions without anybody storing one. */ .avatar { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: #fff; background: var(--accent); position: relative; text-transform: uppercase; } .avatar.lg { width: 36px; height: 36px; font-size: 13.5px; } .avatar.sm { width: 22px; height: 22px; font-size: 10px; } .avatar[data-online="1"]::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--online); border: 2px solid var(--panel); } /* sign-in */ .signin { min-height: 100dvh; display: grid; place-items: center; padding: 20px; } .signin .card { width: min(420px, 100%); } .signin h1 { margin-bottom: 4px; } .signin button { width: 100%; margin-top: 14px; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .forgot { display: inline-block; margin: 12px 12px 0 0; font-size: 13px; } /* ---------------------------------------------------------------- shell */ .shell { display: grid; grid-template-columns: var(--rail-w) var(--sidebar-w) minmax(0, 1fr); height: 100dvh; overflow: hidden; } .rail { background: var(--sidebar); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 0; } .rail-brand { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); display: grid; place-items: center; margin-bottom: 10px; flex: 0 0 auto; } .rail-brand svg { width: 17px; height: 17px; color: #fff; } .rail-btn { width: 38px; height: 38px; border: 0; background: none; color: var(--muted); border-radius: 10px; display: grid; place-items: center; padding: 0; position: relative; text-decoration: none; cursor: pointer; } .rail-btn:hover { background: var(--panel-2); color: var(--ink); } .rail-btn.on { background: var(--accent-tint); color: var(--accent-tint-ink); } .rail-btn svg { width: 18px; height: 18px; } .rail-btn .count { position: absolute; top: 3px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-size: 10px; line-height: 15px; font-weight: 600; text-align: center; } .rail-items { display: contents; } .rail-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 2px; } .sidebar { background: var(--sidebar); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 12px 10px; overflow-y: auto; } .sidebar-head { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; } .sidebar-head select { background: none; border: 0; padding: 4px 2px; font-weight: 600; font-size: 15px; } .sidebar-head select:focus { outline-offset: 2px; } .nav-title { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 14px 0 5px 10px; } .nav { display: flex; flex-direction: column; gap: 1px; } .nav a { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: var(--radius); color: var(--ink-2); text-decoration: none; font-size: 14px; } .nav a:hover { background: var(--panel-2); color: var(--ink); } .nav a.on { background: var(--accent-tint); color: var(--accent-tint-ink); font-weight: 600; } .nav a .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav .count { font-size: 11.5px; background: var(--accent); color: var(--accent-ink); border-radius: 10px; padding: 0 7px; font-weight: 600; } .sidebar-foot { margin-top: auto; padding-top: 12px; font-size: 13px; } .away-toggle { display: flex; align-items: center; gap: 6px; margin: 0 0 8px 2px; color: var(--ink-2); } .away-toggle input { width: auto; } .me { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; min-width: 0; } .me span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .me button { margin-left: auto; flex: 0 0 auto; } /* The view column owns its own scrolling, so the inbox can be exactly as tall as the window and scroll in three independent places inside it. */ .view-wrap { display: flex; flex-direction: column; min-width: 0; overflow: hidden; } .view { flex: 1; padding: var(--view-pad) 26px; min-width: 0; min-height: 0; overflow-y: auto; } .view > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } /* The mobile chrome. Present in the document at every width so the markup never changes with the viewport; only its display does. */ .topbar { display: none; align-items: center; gap: 10px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; } .topbar .t { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .scrim { position: fixed; inset: 0; background: rgba(8, 12, 16, 0.45); z-index: 28; border: 0; padding: 0; } /* ---------------------------------------------------------------- inbox */ /* The inbox is the one view that wants the whole column, edge to edge: it supplies its own padding per pane and scrolls in three places. Letting it opt the view's padding out beats the negative margins this used to use, which had to be kept in step with two breakpoints' worth of padding. */ .view:has(> .inbox) { padding: 0; overflow: hidden; } .inbox { display: grid; grid-template-columns: 328px minmax(0, 1fr) 292px; height: 100%; background: var(--panel); } .inbox > * { min-width: 0; min-height: 0; } .inbox-list { border-right: 1px solid var(--line); display: flex; flex-direction: column; background: var(--panel); } .list-head { padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 9px; border-bottom: 1px solid var(--line); } .list-head .top { display: flex; align-items: center; gap: 8px; } .list-head .top h2 { margin: 0; font-size: 15px; flex: 1; } .list-head .top .n { color: var(--muted); font-size: 12.5px; } .list-search { position: relative; display: flex; align-items: center; } .list-search svg { position: absolute; left: 9px; color: var(--muted); pointer-events: none; } .list-search input { padding-left: 30px; background: var(--panel-2); border-color: transparent; } /* Filters scroll sideways rather than wrapping into three rows on a phone. */ .chips { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; padding-bottom: 1px; } .chips::-webkit-scrollbar { display: none; } .chips button { flex: 0 0 auto; padding: 3px 10px; font-size: 12.5px; border-radius: 20px; color: var(--muted); } .chips button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .chips .sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 3px; flex: 0 0 auto; } .inbox-items { overflow-y: auto; flex: 1; } .conv-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: none; padding: 11px 14px; position: relative; } .conv-item:hover { background: var(--panel-2); } .conv-item.on { background: var(--accent-tint); } .conv-item.on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); } .conv-item .meta { min-width: 0; } .conv-item .top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .conv-item .name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-item .time { color: var(--muted); font-size: 11.5px; flex: 0 0 auto; } .conv-item .preview { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; } .conv-item .tags { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; } .conv-item .tags .pill { font-size: 11px; padding: 1px 7px; } .conv-item.unread .preview { color: var(--ink); font-weight: 600; } .conv-item.unread .name::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 6px; vertical-align: middle; } .conv-pane { display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--line); } .conv-head { padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--panel); display: flex; align-items: center; gap: 10px; } /* The name wins any fight for width here: an operator can live with a shortened assignee picker, not with a truncated person. */ .conv-head .who { min-width: 56px; flex: 1 1 auto; } .conv-head .who .title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-head .who .sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The actions never shrink — a squeezed flex box clips its last button rather than wrapping it. The name gives way instead; it has an ellipsis. */ .conv-head .acts { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; } .conv-head .acts button.sm { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; } .conv-head .assignee { width: auto; max-width: 160px; padding: 4px 8px; font-size: 13px; } .side .assignee { width: 100%; } /* Both of these belong to narrow layouts: the back arrow appears when the list is a separate screen, the details button when the column is gone. */ .back-btn, .details-btn, .narrow-only { display: none; } .conv-log { flex: 1; overflow-y: auto; padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 2px; background: var(--panel); } .m { max-width: min(78%, 620px); margin: 4px 0; display: flex; flex-direction: column; } .m.visitor { align-self: flex-start; } .m.operator, .m.bot { align-self: flex-end; align-items: flex-end; } .m .who { font-size: 11.5px; color: var(--muted); margin: 4px 4px 3px; } .m .b { padding: 9px 13px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; } .m.visitor .b { border-bottom-left-radius: 5px; } /* Agent and assistant read as one side of the conversation, tinted rather than solid: a solid accent bubble loses its own timestamps and metadata in dark mode, and the log is read more often than it is written to. */ .m.operator .b, .m.bot .b { background: var(--accent-tint); color: var(--accent-tint-ink); border-color: transparent; border-bottom-right-radius: 5px; } .m.streaming .b::after { content: "▍"; margin-left: 1px; color: var(--accent); animation: caret-blink 1s infinite; } @keyframes caret-blink { 50% { opacity: 0; } } .m.private .b { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); } .m .t { font-size: 11px; color: var(--muted); margin: 3px 4px 0; } .m .extras { font-size: 12px; color: var(--muted); margin: 3px 4px 0; } /* A timeline row: what happened, as opposed to what somebody said. Page moves, handovers, and every tool the assistant reached for. */ .tl { display: flex; align-items: flex-start; gap: 8px; align-self: stretch; color: var(--muted); font-size: 12.5px; padding: 5px 2px; } .tl svg { margin-top: 2px; color: var(--muted); } .tl .txt { flex: 1; min-width: 0; overflow-wrap: anywhere; } .tl .at { flex: 0 0 auto; font-size: 11px; } .tl.fail { color: var(--error); } .tl.fail svg { color: var(--error); } /* The assistant's working, folded away. Open it and you get the model, the confidence and the sources — the reason an answer looked like that. */ .think { align-self: stretch; margin: 2px 0; } .think > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--muted); font-size: 12.5px; padding: 4px 2px; list-style: none; } .think > summary::-webkit-details-marker { display: none; } .think > summary .chev { transition: transform 0.15s ease; } .think[open] > summary .chev { transform: rotate(90deg); } .think .body { margin: 2px 0 6px 26px; padding: 9px 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); font-size: 12.5px; color: var(--ink-2); } .think .body dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; } .think .body dt { color: var(--muted); } .think .body dd { margin: 0; overflow-wrap: anywhere; } /* The summary card, in the log where it is read rather than in a side panel nobody scrolls to. */ .ai-card { align-self: stretch; background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--radius-lg); padding: 11px 14px; margin: 8px 0; color: var(--warn-ink); } .ai-card h4 { margin: 0 0 6px; font-size: 12.5px; display: flex; align-items: center; gap: 7px; letter-spacing: 0.02em; } .ai-card p { margin: 0; font-size: 13px; color: var(--ink-2); } .typing-dots { color: var(--muted); font-size: 12.5px; padding: 6px 2px; align-self: flex-start; } /* composer */ .composer { border-top: 1px solid var(--line); background: var(--panel); padding: 0 12px 10px; position: relative; } .composer-tabs { display: flex; gap: 2px; padding: 6px 0 8px; } .composer-tabs button { border: 0; background: none; color: var(--muted); padding: 4px 10px; border-radius: 14px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; } .composer-tabs button.on { background: var(--panel-2); color: var(--ink); font-weight: 600; } .composer-box { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); overflow: hidden; } .composer-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .composer textarea { border: 0; border-radius: 0; min-height: 62px; padding: 10px 12px; background: none; } .composer textarea:focus { outline: 0; } .composer.note .composer-box { background: var(--warn-bg); border-color: var(--warn-line); } .composer-tools { display: flex; align-items: center; gap: 2px; padding: 4px 6px 6px; } .composer-tools .hint { margin-left: auto; margin-right: 6px; color: var(--muted); font-size: 11.5px; } .composer-tools button.primary { display: inline-flex; align-items: center; gap: 6px; } @media (max-width: 560px) { .composer-tools .hint { display: none; } } .canned-pop { position: absolute; bottom: 100%; left: 12px; right: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); max-height: 230px; overflow: auto; z-index: 5; } .canned-pop button { display: block; width: 100%; text-align: left; border: 0; border-radius: 0; padding: 8px 12px; background: none; } .canned-pop button:hover, .canned-pop button.on { background: var(--panel-2); } /* details column */ .side { background: var(--panel); overflow-y: auto; padding: 14px; font-size: 13.5px; } .side h3 { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 16px 0 6px; font-weight: 600; } .side h3:first-child { margin-top: 0; } .side dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; } .side dt { color: var(--muted); } .side dd { margin: 0; overflow-wrap: anywhere; } .side-head { display: none; align-items: center; gap: 8px; margin-bottom: 10px; } .badge-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); margin-right: 6px; vertical-align: middle; } .badge-dot.on { background: var(--online); } .badge-dot.bot { background: var(--accent); } /* ---------------------------------------------------------------- toasts, modal */ .toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; } .toast { background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow-pop); max-width: 360px; cursor: pointer; } .toast.error { background: var(--error); color: #fff; } .modal-back { position: fixed; inset: 0; background: rgba(8, 12, 16, 0.5); display: grid; place-items: center; z-index: 40; padding: 16px; } .modal { background: var(--panel); border-radius: 14px; padding: 20px; width: min(560px, 100%); max-height: 90dvh; overflow: auto; box-shadow: var(--shadow-pop); } .modal .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } /* ---------------------------------------------------------------- widgets, stats */ .preview-wrap { position: relative; background: repeating-linear-gradient(45deg, var(--panel-2), var(--panel-2) 10px, var(--panel) 10px, var(--panel) 20px); border: 1px solid var(--line); border-radius: 12px; min-height: 620px; overflow: hidden; } .preview-wrap iframe { position: absolute; right: 16px; bottom: 16px; width: 380px; height: 580px; border: 0; border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,0.28); background: transparent; } .swatch { display: inline-block; width: 18px; height: 18px; border-radius: 4px; vertical-align: middle; border: 1px solid var(--line); } input[type="color"] { width: 48px; padding: 2px; height: 34px; } .hours-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 6px; align-items: center; margin-bottom: 6px; } .days button { padding: 3px 7px; font-size: 12px; } .days button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .stat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; } .stat .n { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .stat .l { color: var(--muted); font-size: 12.5px; } /* A change against the period before. Colour says better or worse, never up or down — fewer hand-overs is an improvement and a red arrow would lie. */ .stat .l.up { color: var(--ok-ink); } .stat .l.down { color: var(--warn-ink); } .bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; } .bars div { flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; } .bars div:hover::after { content: attr(data-label); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); font-size: 11px; padding: 2px 6px; border-radius: 4px; white-space: nowrap; z-index: 2; } /* A simulated conversation in the test results: who said what, in order. */ .sim-log { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; } .sim-turn { padding: 6px 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); } .sim-turn.assistant { background: var(--accent-tint); color: var(--accent-tint-ink); border-color: transparent; } .sim-turn .who { display: block; font-size: 11px; color: var(--muted); margin-bottom: 2px; } .sim-turn.assistant .who { color: inherit; opacity: 0.75; } .playground { display: flex; flex-direction: column; gap: 8px; max-height: 480px; overflow-y: auto; padding: 8px; background: var(--panel-2); border-radius: 10px; border: 1px solid var(--line); } .stars-sm { color: #e2a03f; letter-spacing: 1px; } .kbd { font-family: ui-monospace, monospace; font-size: 11.5px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; } /* ---------------------------------------------------------------- narrow */ /* One column of the inbox has to go before anything else does: the details pane repeats what the header already says. */ /* Three columns still fit here, but not at their full width — the middle one is where the work happens, so the outer two give ground first. */ @media (max-width: 1400px) { .inbox { grid-template-columns: 296px minmax(0, 1fr) 250px; } /* The actions lose their words before the conversation loses its width; every one of them keeps a title, so the tooltip still says what it does. */ .conv-head select { max-width: 104px; flex: 0 1 auto; min-width: 0; } .conv-head .acts .lbl { display: none; } .conv-head .acts button.sm { padding: 5px 7px; margin-left: 2px; } } @media (max-width: 1180px) { .inbox { grid-template-columns: 300px minmax(0, 1fr); } .side { display: none; } .details-btn { display: grid; } /* The column becomes a sheet over the conversation, opened deliberately. */ .inbox.showing-side .side { display: block; position: fixed; z-index: 32; top: 0; right: 0; bottom: 0; width: min(340px, 92vw); box-shadow: var(--shadow-pop); padding-bottom: 24px; } .inbox.showing-side .side-head { display: flex; } } @media (max-width: 1000px) { :root { --sidebar-w: 208px; } .inbox { grid-template-columns: 268px minmax(0, 1fr); } } /* * The phone layout. The rail moves to the bottom (thumbs are there), the * sidebar becomes a drawer, and the inbox stops being three columns beside * each other and becomes three screens on top of each other: list, then * conversation, then details as a sheet. */ @media (max-width: 900px) { :root { --view-pad: 14px; } .shell { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; } .topbar { display: flex; } .view-wrap { grid-row: 1; } .rail { grid-row: 2; flex-direction: row; justify-content: space-around; border-right: 0; border-top: 1px solid var(--line); padding: 4px 4px; padding-bottom: max(4px, env(safe-area-inset-bottom)); background: var(--panel); } .rail-brand { display: none; } .rail-btn { width: 46px; height: 42px; } .rail-foot { margin-top: 0; flex-direction: row; } .sidebar { position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: min(280px, 84vw); transform: translateX(-102%); transition: transform 0.18s ease; box-shadow: var(--shadow-pop); padding-bottom: 20px; } body.nav-open .sidebar { transform: none; } body:not(.nav-open) .scrim { display: none; } .view { grid-row: 1; padding: var(--view-pad); } .view > header { margin-bottom: 12px; } .inbox { grid-template-columns: 1fr; height: 100%; } /* No room for a picker in a phone header; assignment moves to the details sheet, which is one tap away and has the space to label it. */ .conv-head select { display: none; } .narrow-only { display: block; } /* Which screen is showing is a class on the grid, so back and forward are one class change and the DOM of the other screen is left intact. */ .inbox .conv-pane { display: none; } .inbox.showing-conv .inbox-list { display: none; } .inbox.showing-conv .conv-pane { display: flex; border-right: 0; } .back-btn { display: grid; } .conv-log { padding: 12px 12px 16px; } .m { max-width: 88%; } .conv-head { padding: 8px 10px; gap: 6px; } .list-head { padding: 10px 12px 8px; } .composer { padding: 0 10px 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); } .toasts { right: 10px; left: 10px; bottom: 74px; } .toast { max-width: none; } } @media (max-width: 560px) { .grid.two, .grid.three { grid-template-columns: 1fr; } .view { padding: 12px; } .card { padding: 13px; } h1 { font-size: 19px; } /* Wide tables scroll in their own box rather than pushing the page sideways. */ .view table { display: block; overflow-x: auto; white-space: nowrap; } } /* ---------------------------------------------------------------- wizard * * The review screen's mock widget. Deliberately NOT the real widget in an * iframe: at this point nothing has been created, and a picture the brand * colour repaints instantly is worth more here than fidelity — the person is * deciding whether that colour is theirs, not testing the product. */ .wiz textarea { width: 100%; font: inherit; } .wiz-caveats ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); } .wiz-caveats li { margin: 2px 0; } .wiz-pages { margin: 6px 0 0; padding-left: 18px; } .wiz-faq { margin: 6px 0 0; } .wiz-faq dt { font-weight: 600; margin-top: 8px; } .wiz-faq dd { margin: 2px 0 0; color: var(--ink-2); } .wiz-preview { position: relative; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px 16px 76px; min-height: 260px; } .wiz-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; color: #fff; font-weight: 600; } .wiz-logo { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; background: #fff; padding: 2px; flex: 0 0 auto; } .wiz-logo.blank { display: inline-flex; align-items: center; justify-content: center; color: #16191d; font-size: 14px; } .wiz-body { padding: 12px 14px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .wiz-launcher { position: absolute; right: 16px; bottom: 16px; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,0.24); } .wiz-launcher img { width: 26px; height: 26px; object-fit: contain; } /* Fixed light colours, NOT tokens: this is a picture of the widget on the customer's own site, and it must not change because the operator looking at it happens to have the dashboard in dark mode. */ .wiz-win { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.12); color: #16191d; } .wiz-bubble { background: #f1f3f5; border-radius: 12px; padding: 9px 12px; font-size: 14px; max-width: 88%; } .wiz-chip { border: 1px solid; border-radius: 999px; padding: 5px 11px; font-size: 13px; background: #fff; } /* ---------------------------------------------------------------- castomapi-web */ /* Everything above is castomapi-chat's stylesheet, copied so the two panels share one look. What follows is this panel's own: the site cards, the editors, the previews, and a two-pane inbox. */ .eyebrow { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 2px; } .site-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .site-card { display: flex; flex-direction: column; gap: 10px; } .site-card h2 { margin: 0; } .kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13.5px; } .kv .muted { font-size: 12.5px; } .progress { height: 6px; background: var(--panel-2); border-radius: 3px; overflow: hidden; border: 1px solid var(--line); } .progress .bar { height: 100%; background: var(--accent); transition: width 0.6s; } .preview-wrap { display: flex; flex-direction: column; gap: 6px; } .preview-wrap.sticky { position: sticky; top: 8px; align-self: start; } .preview-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; } iframe.preview { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; } iframe.preview.tall { height: calc(100dvh - 160px); min-height: 480px; } .editor-split { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } @media (max-width: 1100px) { .editor-split { grid-template-columns: 1fr; } .preview-wrap.sticky { position: static; } } .section-card { border-left: 3px solid var(--accent); } .item-card { background: var(--panel-2); } .asset-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .asset { margin: 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; } .asset img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--panel); } .asset figcaption { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; } .inbox.two { grid-template-columns: 340px minmax(0, 1fr); } .msg-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 12px; } .msg-card .fields { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0 0 10px; font-size: 13px; } .msg-card .fields dt { color: var(--muted); text-transform: capitalize; } .msg-card .fields dd { margin: 0; } .msg-body { white-space: pre-wrap; margin: 0; font-size: 14.5px; } .timeline { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; } .timeline .tl { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); } .timeline .tl .at { margin-left: auto; } details > summary { cursor: pointer; } details pre { max-height: 320px; overflow: auto; } .wiz-pages { columns: 2; font-size: 13px; } @media (max-width: 760px) { .wiz-pages { columns: 1; } .inbox.two { grid-template-columns: 1fr; } } /* utilities, so no view needs an inline style attribute (the panel's CSP forbids them) */ .mt { margin-top: 14px; } .mt-auto { margin-top: auto; } .mb { margin-bottom: 0.8rem; } .ml { margin-left: 4px; } .m0 { margin: 0; } .p0 { padding: 0; } .w-auto { width: auto; } .w-hex { width: 110px; } .swatch { width: 48px; padding: 2px; } .narrow { max-width: 640px; } .warn-text { color: var(--warn-ink); } .more-row { padding: 10px; text-align: center; }