/* Balcão — console de atendimento. Design system layered over Bootstrap. Loaded AFTER bootstrap so equal-specificity rules win by source order. */ :root { --ink: #14181d; --ink-2: #1e242b; /* The top bar used to be dark in both themes: --ink is dark here too, and its text colours were hardcoded white. Its own variables, so it follows the toggle like everything else. */ --bar-bg: #ffffff; --bar-line: #e5e8e2; --bar-text: #1b2027; --bar-muted: #6a7480; --bar-hover: #f0f2ee; --surface: #f5f6f3; --card: #ffffff; --line: #e5e8e2; --line-2: #eef0ec; --text: #1b2027; --muted: #6a7480; --muted-2: #98a1ab; --signal: #2563eb; /* brand: action / live / connected */ --signal-ink: #1d4ed8; --signal-wash: #e8effe; --amber: #c2760a; /* esperando atendente */ --amber-wash: #fbf1e0; --sky: #0ea5e9; /* bot / iniciada — distinct from brand blue */ --sky-wash: #e0f2fe; --slate: #8a96a3; /* abandonou */ --slate-wash: #eef1f4; --rose: #e11d48; /* unread / erro */ --violet: #7c3aed; /* com atendente */ --violet-wash: #f1e9fe; --hover: #fafbf9; /* row / conv hover fill */ --hover-2: #f4f5f2; /* outline-button hover / disabled input */ --field-bg: #ffffff; /* form controls */ --radius: 12px; --radius-sm: 9px; --topbar-h: 56px; --shadow: 0 1px 2px rgba(16,24,32,.05), 0 6px 20px -12px rgba(16,24,32,.18); --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, monospace; /* JSON token colours for the trace panels (Playground and the admin's chat view). */ --json-key: #7c3aed; --json-string: #15803d; --json-number: #b45309; --json-bool: #1d4ed8; --json-null: #b91c1c; } /* Dark theme — flips off [data-bs-theme="dark"] on , same signal the webchat uses, so both apps share one toggle mechanism and stay consistent. */ [data-bs-theme="dark"] { --ink: #0f1317; /* topbar / brand bar */ --ink-2: #232a33; --bar-bg: #0f1317; --bar-line: transparent; --bar-text: #ffffff; --bar-muted: #aab3bd; --bar-hover: #232a33; --surface: #0f1317; /* page background */ --card: #1a2027; /* cards / panels */ --line: #2b333c; --line-2: #232a31; --text: #e6e9ec; --muted: #9aa4af; --muted-2: #6f7883; --signal: #3b82f6; --signal-ink: #60a5fa; --signal-wash: rgba(37,99,235,.20); --amber: #e0912e; --amber-wash: rgba(194,118,10,.22); --sky: #38bdf8; --sky-wash: rgba(14,165,233,.20); --slate: #9aa4af; --slate-wash: rgba(138,150,163,.16); --rose: #fb7185; --violet: #c4b5fd; --violet-wash: rgba(124,58,237,.26); --hover: #1f262e; --hover-2: #232a31; --field-bg: #12171c; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6); --json-key: #c4b5fd; --json-string: #86efac; --json-number: #fbbf24; --json-bool: #93c5fd; --json-null: #fca5a5; } * { box-sizing: border-box; } body { background: var(--surface); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; margin: 0; } /* ---------- App shell ---------- */ .topbar { height: var(--topbar-h); background: var(--bar-bg); border-bottom: 1px solid var(--bar-line); color: var(--bar-text); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; position: sticky; top: 0; z-index: 20; } .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -0.02em; font-size: 17px; color: var(--bar-text); text-decoration: none; } .brand-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(15,157,118,.22); } .brand small { font-weight: 500; color: var(--bar-muted); letter-spacing: 0; font-size: 12px; margin-left: 2px; } .topbar-actions { display: flex; align-items: center; gap: 10px; } .topbar-user { font-family: var(--mono); font-size: 12.5px; color: var(--bar-muted); max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar .tb-link { color: var(--bar-text); text-decoration: none; font-size: 13.5px; font-weight: 500; padding: 6px 11px; border-radius: 8px; border: 1px solid transparent; } .topbar .tb-link:hover { background: var(--bar-hover); color: var(--bar-text); } .topbar .tb-link--accent { color: #fff; background: var(--signal); } .topbar .tb-link--accent:hover { background: var(--signal-ink); } .topbar .bot-toggle { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; background: transparent; cursor: pointer; } .topbar .bot-toggle:disabled { opacity: .6; cursor: default; } /* Paused is the state that needs noticing — the button reads like a pill in trouble, same amber as the "esperando atendente" pill, until it's clicked to start the bot again. */ .topbar .bot-toggle--off { color: var(--amber); background: var(--amber-wash); } .topbar .bot-toggle--off:hover { background: var(--amber-wash); } .tb-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: transparent; border: 1px solid transparent; color: var(--bar-text); cursor: pointer; font-size: 16px; line-height: 1; } .tb-toggle:hover { background: var(--bar-hover); color: var(--bar-text); } /* ---------- Main regions ---------- */ .app-main { padding: 32px 20px 56px; } .app-main .wrap { max-width: 1080px; margin: 0 auto; } .main--full { padding: 0; } .main--auth { min-height: calc(100vh - var(--topbar-h)); display: grid; place-items: center; padding: 24px; } /* ---------- Page header ---------- */ .page-head { max-width: 1080px; margin: 0 auto 22px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .page-title { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; margin: 0; } .page-sub { color: var(--muted); font-size: 13.5px; margin: 4px 0 0; } /* ---------- Cards ---------- */ .card2 { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .card2 > .card2-head { padding: 16px 20px; border-bottom: 1px solid var(--line-2); } .card2 > .card2-head h2 { font-size: 15px; font-weight: 700; margin: 0; letter-spacing: -0.01em; } .card2 > .card2-head p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; } .card2 > .card2-body { padding: 20px; } /* ---------- Admin layout ---------- */ .admin-grid { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; align-items: start; } @media (max-width: 860px) { .admin-grid { grid-template-columns: 1fr; } } /* ---------- Roster / table reskin ---------- */ .roster { width: 100%; border-collapse: collapse; font-size: 14px; } .roster th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); } .roster td { padding: 14px 16px; border-bottom: 1px solid var(--line-2); vertical-align: middle; } .roster tr:last-child td { border-bottom: 0; } .roster tbody tr:hover { background: var(--hover); } .roster .r-name { font-weight: 600; letter-spacing: -0.01em; } .roster .r-data { font-family: var(--mono); font-size: 12.5px; color: var(--muted); } .roster-empty { padding: 34px 16px; text-align: center; color: var(--muted); } /* ---------- Icon buttons (row actions) ---------- Bootstrap Icons throughout, so glyphs inherit the theme's colour instead of the fixed hue an emoji would force. */ .icon-btn { line-height: 1; padding: 5px 10px; font-size: 14px; } .icon-btn .bi { vertical-align: -1px; } /* A disabled field must read as unavailable, not merely unfocused. */ .form-control:disabled, .form-select:disabled { background: var(--hover-2); color: var(--muted-2); cursor: not-allowed; } /* A button label must never wrap mid-word when its container gets narrow. */ .btn { white-space: nowrap; } .row-actions { display: inline-flex; align-items: center; gap: 8px; } /* ---------- Inline editor (opens under the row it edits) ---------- */ .inline-form { padding: 16px; background: var(--hover); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .inline-form-title { font-size: 14px; margin: 0 0 14px; } .field-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); } /* ---------- Attendance schedule (inside the restaurant editor) ---------- */ [x-cloak] { display: none !important; } .sched-row { padding: 10px 0; border-bottom: 1px solid var(--line-2); } .sched-row:last-child { border-bottom: 0; } .sched-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .sched-when { font-family: var(--mono); font-size: 13px; font-weight: 600; min-width: 118px; color: var(--signal); } .sched-name { font-size: 14px; font-weight: 600; } .sched-line-end { display: inline-flex; align-items: center; gap: 14px; margin-left: auto; } .sched-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; } .sched-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 11px; font-family: var(--mono); font-size: 12px; } .sched-chip-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; line-height: 1; padding: 2px 5px; border-radius: 999px; font-size: 13px; } .sched-chip-x:hover { color: var(--rose); background: var(--hover-2); } .sched-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; } /* The time inputs must not stretch: a form-control defaults to 100% width. */ .sched-add .form-control { width: auto; flex: 0 0 auto; min-width: 128px; } .sched-dash { color: var(--muted); font-size: 13px; } .sched-error { color: var(--amber); font-size: 13px; } .sched-empty { color: var(--muted); font-size: 13px; } /* ---------- Prompt version history ---------- The preview wraps and clamps: a whole system prompt on one nowrap line stretched the page sideways. */ .version-row { padding: 10px 0; border-bottom: 1px solid var(--line-2); min-width: 0; } .version-row:last-child { border-bottom: 0; } .version-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .version-date { font-family: var(--mono); font-size: 12px; color: var(--muted); } .version-text { margin: 6px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- Destructive-action dialog ---------- */ .confirm-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; padding: 20px; } .confirm-backdrop[hidden] { display: none; } .confirm-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; width: 100%; max-width: 460px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); } /* The icon carries the tone, so the wording does not have to shout it. */ .confirm-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .confirm-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; } .confirm-icon--danger { background: var(--slate-wash); color: var(--rose); } .confirm-icon--warning { background: var(--amber-wash); color: var(--amber); } .confirm-title { font-size: 17px; margin: 0; } .confirm-body { color: var(--muted); font-size: 14px; margin: 0; line-height: 1.5; } .confirm-body[hidden], .confirm-actions .btn[hidden] { display: none; } .confirm-list { margin: 12px 0 0; padding: 12px 12px 12px 30px; background: var(--hover); border-radius: var(--radius-sm); color: var(--muted); font-size: 13px; } .confirm-list[hidden] { display: none; } .confirm-list li { margin: 2px 0; } .confirm-field { width: 100%; margin-top: 14px; } .confirm-field[hidden] { display: none; } .confirm-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; } .btn-danger { background: var(--rose); border-color: var(--rose); color: #fff; } .btn-danger:hover { filter: brightness(1.08); color: #fff; } /* ---------- Status pills (the signature) ---------- */ .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: -0.005em; padding: 4px 10px 4px 8px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; } .pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .pill--iniciada, .pill--connecting { color: var(--sky); background: var(--sky-wash); } .pill--esperando, .pill--on { color: var(--amber); background: var(--amber-wash); } /* "Com atendente": alguém já pegou. Cor própria e não o âmbar do "esperando" porque as duas estão lado a lado na mesma lista e dizem coisas opostas — âmbar pulsa pedindo gente, este fica parado dizendo que a gente já chegou. */ .pill--atendente { color: var(--violet); background: var(--violet-wash); } .pill--pedido, .pill--connected { color: var(--signal-ink); background: var(--signal-wash); } .pill--finalizado, .pill--abandonou, .pill--off, .pill--disconnected { color: var(--slate); background: var(--slate-wash); } .pill--on { color: var(--signal-ink); background: var(--signal-wash); } /* live pulse — only where a human is needed / a link is forming */ .pill--esperando::before, .pill--connecting::before { animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 50% { box-shadow: 0 0 0 4px transparent; opacity: .45; } } @media (prefers-reduced-motion: reduce) { .pill--esperando::before, .pill--connecting::before { animation: none; } } /* ---------- Buttons (reskin Bootstrap) ---------- */ .btn { border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; letter-spacing: -0.005em; padding: 9px 16px; border: 1px solid transparent; transition: background .12s, border-color .12s, color .12s; } .btn-sm { padding: 6px 11px; font-size: 13px; border-radius: 8px; } .btn-primary { background: var(--signal); border-color: var(--signal); color: #fff; } .btn-primary:hover, .btn-primary:focus { background: var(--signal-ink); border-color: var(--signal-ink); color: #fff; } .btn-success { background: var(--signal); border-color: var(--signal); color: #fff; } .btn-success:hover { background: var(--signal-ink); border-color: var(--signal-ink); color: #fff; } .btn-outline-secondary { background: var(--card); border-color: var(--line); color: var(--text); } .btn-outline-secondary:hover { background: var(--hover-2); border-color: var(--line); color: var(--text); } .btn-outline-primary, .btn-outline-success { background: var(--card); border-color: var(--signal); color: var(--signal-ink); } .btn-outline-primary:hover, .btn-outline-success:hover { background: var(--signal-wash); color: var(--signal-ink); } .btn-warning { background: var(--amber); border-color: var(--amber); color: #fff; } .btn-warning:hover { background: #a9670a; border-color: #a9670a; color: #fff; } /* ---------- Forms (reskin) ---------- */ .form-label { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 5px; letter-spacing: -0.005em; } .form-control, .form-select { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; color: var(--text); background: var(--field-bg); } .form-control::placeholder { color: var(--muted-2); } /* Our `background` shorthand above wipes the caret Bootstrap draws as a background-image, which left every select on the dashboard looking like a plain text field. Drawn back here, inline so it needs no asset, and with room reserved for it on the right. */ .form-select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238b98a5'%3E%3Cpath d='M8 11.5 3.5 7l1-1L8 9.5 11.5 6l1 1z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; cursor: pointer; } /* WhatsApp's send control is an arrow pointing right; Bootstrap's paper plane sits at 45°. */ .send-arrow { transform: rotate(45deg); } .form-control:focus, .form-select:focus { border-color: var(--signal); box-shadow: 0 0 0 3px rgba(15,157,118,.15); outline: none; } textarea.form-control { line-height: 1.5; } .field { margin-bottom: 15px; } .field:last-of-type { margin-bottom: 20px; } .form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 16px; } .form-2col .field { margin-bottom: 0; } .form-2col .field--wide { grid-column: 1 / -1; } @media (max-width: 620px) { .form-2col { grid-template-columns: 1fr; } } /* ---------- Auth card ---------- */ .auth { width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 30px 28px; } .auth h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; } .auth .auth-sub { color: var(--muted); font-size: 13px; margin: 0 0 22px; } .alert-danger { background: #fdecef; border: 1px solid #f6c9d2; color: #a01834; border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; margin-bottom: 14px; } [data-bs-theme="dark"] .alert-danger { background: rgba(225,29,72,.12); border-color: rgba(225,29,72,.4); color: #fca5b5; } /* ---------- QR / connect card ---------- */ .connect { max-width: 460px; margin: 0 auto; text-align: center; } .connect .status-line { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 18px; } /* The sentence explaining the state and the button that changes it are two different things; with no gap they read as one block and the button loses its weight. */ .connect .connect-note p { margin: 0 0 16px; } .qr-frame { display: inline-block; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 18px; } /* QR stays on a white plate so the code always scans, even in dark mode. */ .qr-frame img { display: block; width: 240px; height: 240px; } .switch-row { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line-2); } .form-check-input:checked { background-color: var(--signal); border-color: var(--signal); } .form-check-input:focus { box-shadow: 0 0 0 3px rgba(15,157,118,.15); border-color: var(--signal); } /* ---------- Mesa (live desk) ---------- */ .mesa { display: grid; grid-template-columns: 340px 1fr; height: calc(100vh - var(--topbar-h)); background: var(--card); } .mesa-list { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; } .mesa-list-head { padding: 14px 16px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* The store's own name, not a section label — so no uppercasing or tracking, and it truncates rather than pushing the filter out of the column. */ .mesa-list-head h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mesa-list-head .form-select { padding: 6px 26px 6px 10px; font-size: 12.5px; width: auto; } .mesa-scroll { overflow-y: auto; flex: 1; min-height: 0; } .conv { display: block; padding: 12px 16px; border-bottom: 1px solid var(--line-2); cursor: pointer; text-decoration: none; color: inherit; } .conv:hover { background: var(--hover); } .conv.is-active { background: var(--signal-wash); box-shadow: inset 3px 0 0 var(--signal); } .conv-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .conv-phone { font-family: var(--mono); font-size: 13.5px; font-weight: 600; color: var(--text); } .conv-who { display: flex; align-items: center; gap: 9px; min-width: 0; } .conv-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } /* Stand-in for a contact with no public photo, so the row keeps its alignment either way. */ .conv-avatar--none { display: inline-flex; align-items: center; justify-content: center; background: var(--hover-2); color: var(--muted-2); font-size: 16px; } .conv-name { font-size: 13.5px; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-name.is-phone { font-family: var(--mono); } .conv-preview { color: var(--muted); font-size: 12.5px; margin: 3px 0 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .unread { background: var(--rose); color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } /* Removing a thread without opening it first. Hidden until the row is hovered: a column of trash cans reads as a list of things to delete rather than a list of customers. */ .conv-right { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; } .conv-x { opacity: 0; transition: opacity .12s; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--muted-2); font-size: 12px; line-height: 1; cursor: pointer; } .conv:hover .conv-x, .conv-x:focus-visible { opacity: 1; } .conv-x:hover { background: var(--hover-2); color: var(--rose); } /* chat pane */ /* `relative` anchors the attachment overlay to this pane instead of the viewport. */ .mesa-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; } .chat-head { padding: 13px 20px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .chat-who { display: flex; align-items: center; gap: 10px; min-width: 0; } .chat-who .conv-phone { font-size: 15px; } .chat-who .conv-avatar { width: 38px; height: 38px; font-size: 18px; } .chat-id { display: flex; flex-direction: column; min-width: 0; } .chat-id .conv-name { font-size: 15px; } /* With a pushName in the title, the number still has to be reachable at a glance. */ .chat-subphone { font-family: var(--mono); font-size: 11.5px; color: var(--muted); } /* Where the store's Chat puts "Assumir", the admin's view says why there is nothing to press. */ .chat-readonly { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } /* The token count rides along with the money but reads as secondary: the figure a store argues about is the money. */ .spend-tokens { opacity: .7; font-weight: 500; margin-left: 5px; } .pg-chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .chat-thread { flex: 1; overflow-y: auto; min-height: 0; padding: 20px; background: radial-gradient(circle at 1px 1px, rgba(20,24,29,.035) 1px, transparent 0) 0 0 / 22px 22px, var(--surface); } [data-bs-theme="dark"] .chat-thread { background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0) 0 0 / 22px 22px, var(--surface); } .msg { display: flex; margin-bottom: 10px; } .msg.is-out { justify-content: flex-end; } .bubble { max-width: 76%; padding: 8px 12px 9px; border-radius: 14px; font-size: 14px; line-height: 1.42; box-shadow: 0 1px 1px rgba(16,24,32,.06); } /* The text is set with x-text, so a `\n` in it (the bot's multi-line summaries, an operator's multi-line reply) is real content that needs pre-wrap to show as line breaks instead of collapsing to one line. Scoped to this span, NOT `.bubble`: the templates put whitespace (indentation, newlines) between the bubble's own opening tag and this span for readability, and pre-wrap on the bubble rendered THAT as a visible gap before the message even starts. */ .msg-text { white-space: pre-wrap; overflow-wrap: anywhere; } .bubble .who { display: block; font-size: 11px; font-weight: 700; letter-spacing: .01em; margin-bottom: 2px; opacity: .8; } .bubble--customer { background: var(--card); border: 1px solid var(--line); border-top-left-radius: 4px; } .bubble--bot { background: var(--sky-wash); border: 1px solid #cfe0fd; border-top-right-radius: 4px; } [data-bs-theme="dark"] .bubble--bot { border-color: rgba(56,189,248,.35); } .bubble--bot .who { color: var(--sky); } .bubble--human { background: var(--signal); color: #fff; border-top-right-radius: 4px; } .bubble--human .who { color: rgba(255,255,255,.85); } /* When the message was sent: date and time on a line of their own, under the text, faded and right-aligned. A line rather than the corner tuck WhatsApp uses — that only works for the four characters of an hour, and this stamp carries the date too. Tabular figures so a column of them does not jitter. */ .msg-time { display: block; text-align: right; margin-top: 4px; font-size: 10.5px; line-height: 1.2; opacity: .55; font-variant-numeric: tabular-nums; white-space: nowrap; } /* On the blue bubble the same 55% reads as illegible rather than discreet. */ .bubble--human .msg-time { opacity: .75; } /* Per-message actions at the bubble's top-right corner, where WhatsApp puts them. It rides on a translucent dark chip rather than inheriting the bubble's colour: the same control has to read over a white bubble, a blue one and a photo, and a bare glyph disappeared into two of the three. Visible at rest, not only on hover — an action nobody can find is no action. */ .msg { align-items: flex-start; } .bubble { position: relative; } /* Hooked onto the bubble's corner from just outside it: a short bubble is barely wider than its word, and a chip inside the padding box sat on top of the text. Hidden until the message is hovered — the 20px of thread padding is what keeps it from clipping at the edge. */ .msg-menu { position: absolute; top: -7px; right: -7px; z-index: 2; } .msg-menu-btn { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s; } .msg:hover .msg-menu-btn, .msg-menu-btn:focus-visible, .msg-menu-btn[aria-expanded="true"] { opacity: 1; } .msg-menu-btn:hover { background: rgba(0,0,0,.78); } .msg-menu-list { position: absolute; top: 24px; z-index: 5; min-width: 190px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 5px; } /* Opens toward the middle of the thread, never toward the wall it is standing against: a customer's bubble sits on the left edge, and a menu anchored to its right corner opening leftward is clipped by `.chat-thread`'s own scroll box. */ .msg .msg-menu-list { left: 0; right: auto; } .msg.is-out .msg-menu-list { left: auto; right: 0; } .msg-menu-list button { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: transparent; color: var(--text); padding: 8px 10px; border-radius: 7px; font-size: 13.5px; text-align: left; cursor: pointer; } .msg-menu-list button:hover { background: var(--hover-2); } /* A message drawn before the round trip finished. Faded rather than hidden: the operator sees what they sent immediately and reads the delay as delivery, not as a frozen app. */ .msg.is-pending .bubble { opacity: .55; } .msg-pending-mark { margin-left: 6px; font-size: 11px; opacity: .8; vertical-align: baseline; } /* A message WhatsApp took back from the customer, and one that was changed after sending. */ .bubble .is-deleted { font-style: italic; opacity: .7; } .msg-edited { margin-left: 6px; font-size: 11px; opacity: .65; } /* Attachments inside a bubble. The width is capped so a phone photo does not push the thread sideways; `width: 100%` keeps it from being upscaled past its own resolution. */ .msg-media { margin-bottom: 5px; } .msg-media img, .msg-media video { display: block; max-width: 320px; width: 100%; border-radius: 10px; } .msg-media audio { display: block; width: 260px; max-width: 100%; } .msg-doc { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--hover-2); color: inherit; text-decoration: none; font-size: 13px; } .msg-doc:hover { background: var(--hover); color: inherit; } .bubble--human .msg-doc { background: rgba(255,255,255,.18); color: #fff; } .bubble--human .msg-doc:hover { background: rgba(255,255,255,.28); color: #fff; } /* The bubble's text already says the file was lost; this only marks it at a glance. */ .msg-media-missing { margin-right: 6px; opacity: .75; } /* A photo or video in the thread opens full-screen on click, so it has to look clickable. */ .msg-media-open { cursor: zoom-in; } /* The video's own first frame is the poster; the badge is what says it will play. */ .msg-video { position: relative; display: inline-block; line-height: 0; } .msg-video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .msg-video-play .bi { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); color: #fff; font-size: 28px; line-height: 1; } /* Dropping a file anywhere on the conversation attaches it. */ .drop-hint { position: absolute; inset: 0; z-index: 25; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--signal-wash); border: 2px dashed var(--signal); border-radius: var(--radius); color: var(--signal); font-weight: 600; font-size: 15px; } .drop-hint .bi { font-size: 34px; } /* ---------- Full-screen photo viewer (built by openLightbox) ---------- */ .lightbox { display: none; position: fixed; inset: 0; z-index: 1080; background: rgba(0,0,0,.92); align-items: center; justify-content: center; flex-direction: column; gap: 14px; } .lightbox.is-open { display: flex; } .lightbox img, .lightbox video { max-width: 92vw; max-height: 82vh; object-fit: contain; border-radius: 6px; } /* `hidden` is how the viewer switches between the photo and the video element. */ .lightbox [hidden] { display: none !important; } /* What the customer wrote alongside the file — the point of opening it, often enough. */ .lightbox-caption { color: #fff; font-size: 14.5px; line-height: 1.45; margin: 0; max-width: min(92vw, 720px); text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; } .lightbox-x, .lightbox-dl { position: absolute; top: 16px; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; font-size: 17px; text-decoration: none; cursor: pointer; } .lightbox-x:hover, .lightbox-dl:hover { background: rgba(255,255,255,.22); color: #fff; } .lightbox-x { left: 16px; } .lightbox-dl { right: 16px; } /* ---------- Confirming an attachment before it goes out ---------- Covers the thread the way WhatsApp does: the file big enough to check, the caption typed against it, one send. Absolute (not fixed) so it fills the conversation pane and leaves the conversation list beside it reachable — cancelling is not the only way out. */ .attach-overlay { position: absolute; inset: 0; z-index: 20; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 56px 20px 24px; } .attach-overlay-stage { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; } .attach-overlay-stage img, .attach-overlay-stage video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; } .attach-overlay-stage audio { width: min(420px, 100%); } .attach-overlay-doc { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; text-align: center; word-break: break-all; } .attach-overlay-doc .bi { font-size: 64px; color: var(--muted-2); } .attach-overlay-x { position: absolute; top: 14px; left: 16px; width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--hover-2); color: var(--text); font-size: 15px; cursor: pointer; } .attach-overlay-x:hover { background: var(--hover); } .attach-overlay-bar { display: flex; gap: 10px; align-items: center; width: min(640px, 100%); flex: 0 0 auto; } .attach-overlay-bar .form-control { flex: 1; } .composer { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line-2); background: var(--card); align-items: flex-end; } .composer .form-control:disabled { background: var(--hover-2); color: var(--muted-2); } /* Grows with the text (autoGrow(), capped at 160px) instead of pushing the composer's other controls off screen; resize:none because the drag handle fights with that JS-driven height. */ .composer-textarea { resize: none; max-height: 160px; overflow-y: auto; line-height: 1.4; } .mesa-empty { margin: auto; color: var(--muted); font-size: 14px; text-align: center; } /* ---------- Form page (separate create screen) ---------- */ .form-page { max-width: 640px; margin: 0 auto; } .form-actions { display: flex; gap: 10px; align-items: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-2); } /* "Salvo." ao lado do botão. Discreto de propósito: quem salvou já sabe o que fez e só quer a confirmação — o mesmo tom do aviso em /loja/mensagens, de onde ele veio. */ .save-note { color: var(--muted); font-size: 14px; margin: 0; } @media (max-width: 760px) { .mesa { grid-template-columns: 1fr; grid-template-rows: 40% 60%; } .mesa-list { border-right: 0; border-bottom: 1px solid var(--line); } } /* ---------- Connection status dot (navbar) ---------- */ .navdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 5px; vertical-align: middle; background: #6b7280; } .navdot--on { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .2); } .navdot--connecting { background: #fbbf24; } /* ---------- Agent trace (Playground and the admin's read-only conversation view) ---------- Shared because both screens render the same partial: `dashboard/templates/_trace.html`. */ /* Closed, the trace is a line of small print under the reply — one per bot message means it is read a hundred times a screen and looked at once, so it should be findable, not loud. The panel it opens keeps its border and background; that one you are actually reading. */ details.trace { margin-top: 4px; font-size: 12px; } details.trace summary { padding: 2px 0; cursor: pointer; list-style: none; color: var(--muted-2); opacity: .75; transition: opacity .12s, color .12s; } details.trace summary::-webkit-details-marker { display: none; } details.trace summary:hover { opacity: 1; color: var(--muted); } /* Open, it becomes a panel: the border is what separates it from the conversation around it. */ details.trace[open] { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); margin-top: 8px; } details.trace[open] summary { padding: 8px 12px; opacity: 1; color: var(--muted); border-bottom: 1px solid var(--line-2); } .trace-tool { padding: 10px 12px; border-top: 1px solid var(--line-2); } .trace-tool-name { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .trace-count { color: var(--muted); font-size: 11.5px; } .trace-part { margin-top: 10px; } .trace-label { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 4px; } .trace-req-box { border: 1px solid var(--line-2); border-radius: 8px; padding: 10px; margin-top: 8px; background: var(--hover); } .trace-req-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .trace-req-endpoint { font-family: var(--mono); font-size: 12px; font-weight: 600; } .trace-req-ms { color: var(--muted); font-size: 11.5px; } .trace-tool pre { background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; margin: 6px 0 0; font-family: var(--mono); font-size: 11.5px; white-space: pre-wrap; word-break: break-word; overflow-x: auto; max-height: 260px; overflow-y: auto; } /* The result and the HTTP requests a tool made sit behind their own toggle — a tool row's name and arguments are what is worth seeing at a glance, everything else is on demand. */ .trace-more { margin-top: 10px; } .trace-more > summary { cursor: pointer; list-style: none; color: var(--signal); font-size: 11.5px; font-weight: 600; } .trace-more > summary::-webkit-details-marker { display: none; } .trace-more > summary::before { content: "▸ "; } .trace-more[open] > summary::before { content: "▾ "; } .trace-more[open] > summary { margin-bottom: 4px; } /* JSON syntax colouring, applied by `traceHighlight()` in _trace.html. */ .trace-json-key { color: var(--json-key); } .trace-json-string { color: var(--json-string); } .trace-json-number { color: var(--json-number); } .trace-json-bool { color: var(--json-bool); } .trace-json-null { color: var(--json-null); } /* keyboard focus */ :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } /* Where one attendance ended: the order went through and the spend counter restarted. Drawn as a rule across the thread rather than as a bubble, because nobody said it. */ .cycle-mark { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--muted-2); font-size: 11.5px; } .cycle-mark::before, .cycle-mark::after { content: ""; flex: 1; height: 1px; background: var(--line); } .cycle-mark-body { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: var(--signal-wash); color: var(--signal-ink); border-radius: 999px; padding: 4px 12px; font-weight: 600; } [data-bs-theme="dark"] .cycle-mark-body { color: var(--signal-ink); } .cycle-mark-cost { opacity: .8; font-weight: 500; } /* Three dots pulsing where the answer will land: a slow model must look busy, not stuck. Shared by the Playground and the Chat, which shows them while the bot composes. */ .typing { display: inline-flex; align-items: center; gap: 5px; padding: 3px 0; } .typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); display: inline-block; animation: typing-blink 1.3s infinite ease-in-out; } .typing i:nth-child(2) { animation-delay: .18s; } .typing i:nth-child(3) { animation-delay: .36s; } @keyframes typing-blink { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } /* A turn: the bubble plus whatever hangs off it (the agent's trace). The trace lines up with the reply it belongs to instead of spanning the thread — on the far side it read as if it described the other speaker's message. */ .turn > details.trace { width: fit-content; max-width: 76%; } .turn.is-out > details.trace { margin-left: auto; }