/* ============================================================================ Design tokens. The default :root is the "Aurora" look (the original dark blue). Alternate looks below override these tokens via [data-theme]; the app sets the attribute on (see app.js applyTheme). Only tokens change per theme — every rule references them, so the whole UI reskins. Semantic data colours (cycle seasons, gold PRs, status) and admin-only diagnostics stay fixed. ============================================================================ */ :root { /* Surfaces */ --bg: #0f172a; --panel: #111c33; --panel-2: #16233f; --topbar-bg: rgba(15, 23, 42, .9); /* Text */ --text: #e6edf7; --text-strong: #ffffff; --muted: #93a3bd; /* Lines & borders */ --border: var(--border); --border-strong: var(--border-strong); --line: var(--line); /* Accent */ --accent: #38bdf8; --accent-ink: #05263a; --accent-soft: var(--accent-soft); --accent-line: var(--accent-line); /* Other */ --user: #2563eb; --error: #f87171; --ok: #34d399; --warn: #fbbf24; /* Shape (per-theme corner rounding: smaller = cleaner, larger = softer) */ --radius: 14px; --radius-md: 10px; --radius-sm: 8px; --maxw: 820px; } /* Noir — dark monochrome with a warm amber accent. Crisper corners. */ :root[data-theme="noir"] { --bg: #141414; --panel: #1c1c1c; --panel-2: #242424; --topbar-bg: rgba(20, 20, 20, .9); --text: #eaeaea; --text-strong: #ffffff; --muted: #9a9a9a; --border: #333333; --border-strong: #4a4a4a; --line: #2a2a2a; --accent: #e0a24e; --accent-ink: #2a1c06; --accent-soft: rgba(224, 162, 78, .14); --accent-line: #5a4326; --user: #3a3a3a; --radius: 10px; --radius-md: 8px; --radius-sm: 6px; } /* Paper — clean monochrome light with a blue accent. */ :root[data-theme="paper"] { --bg: #f5f5f4; --panel: #ffffff; --panel-2: #ececeb; --topbar-bg: rgba(245, 245, 244, .92); --text: #1c1c1c; --text-strong: #000000; --muted: #6b6b6b; --border: #d6d6d4; --border-strong: #b8b8b6; --line: #e2e2e0; --accent: #2563eb; --accent-ink: #ffffff; --accent-soft: rgba(37, 99, 235, .10); --accent-line: #bcd0f5; --user: #2563eb; --radius: 10px; --radius-md: 8px; --radius-sm: 6px; } /* Lavender — soft, airy violet. Gentle rounded corners. */ :root[data-theme="lavender"] { --bg: #f3f0fb; --panel: #faf8ff; --panel-2: #ebe5fa; --topbar-bg: rgba(243, 240, 251, .92); --text: #2e2545; --text-strong: #1a1330; --muted: #8579a8; --border: #ddd3f2; --border-strong: #c4b4e8; --line: #e7def7; --accent: #8b5cf6; --accent-ink: #ffffff; --accent-soft: rgba(139, 92, 246, .12); --accent-line: #d3c2f2; --user: #8b5cf6; --radius: 16px; --radius-md: 12px; --radius-sm: 9px; } /* Blush — soft pink, light and gentle. Rounded corners. */ :root[data-theme="blush"] { --bg: #fdf2f6; --panel: #fffafc; --panel-2: #fbe6ef; --topbar-bg: rgba(253, 242, 246, .92); --text: #3d2233; --text-strong: #2a0f20; --muted: #a67c92; --border: #f3d6e3; --border-strong: #e6b3cc; --line: #f7e3ec; --accent: #ec4899; --accent-ink: #ffffff; --accent-soft: rgba(236, 72, 153, .12); --accent-line: #f3c2da; --user: #ec4899; --radius: 18px; --radius-md: 14px; --radius-sm: 10px; } /* Disco — neon on deep purple, cranked up. Big playful corners. */ :root[data-theme="disco"] { --bg: #0d0221; --panel: #1a0938; --panel-2: #2a0e52; --topbar-bg: rgba(13, 2, 33, .9); --text: #ffe9ff; --text-strong: #ffffff; --muted: #c39bd3; --border: #5a2a8c; --border-strong: #8e44ad; --line: #3a1466; --accent: #ff2d95; --accent-ink: #2a0016; --accent-soft: rgba(255, 45, 149, .18); --accent-line: #a01e63; --user: #c026d3; --radius: 20px; --radius-md: 16px; --radius-sm: 12px; } * { box-sizing: border-box; } /* Dark, thin scrollbars to match the theme (default Windows ones are light/chunky). */ * { scrollbar-width: thin; /* Firefox */ scrollbar-color: var(--border-strong) transparent; /* Firefox: thumb, track */ } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-sm); border: 2px solid transparent; /* inset the thumb a touch */ background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); } ::-webkit-scrollbar-corner { background: transparent; } html, body { margin: 0; height: 100%; } body { background: var(--bg); color: var(--text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } .brand { font-weight: 700; letter-spacing: .2px; } .muted { color: var(--muted); } .error { color: var(--error); margin: 0 0 4px; } /* ---------- Auth ---------- */ .auth { min-height: 100dvh; display: grid; place-items: center; padding: 24px; } .card { width: 100%; max-width: 360px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); } .card h1 { margin: 0; font-size: 28px; } .card > .muted { margin: -8px 0 6px; } .card label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); } .card label.checkbox { flex-direction: row; align-items: center; gap: 8px; color: var(--text); } input[type="email"], input[type="password"], textarea { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-md); padding: 11px 12px; font: inherit; outline: none; } input:focus, textarea:focus { border-color: var(--accent); } button { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: var(--radius-md); padding: 11px 14px; font: inherit; font-weight: 700; cursor: pointer; } button:disabled { opacity: .55; cursor: default; } button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); font-size: 20px; line-height: 1; padding: 0 12px; } /* ---------- App ---------- */ .app { display: flex; flex-direction: column; height: 100dvh; max-width: var(--maxw); margin: 0 auto; } /* Holds messages + card panel + composer. Mobile: a flex column (card panel folds between the stream and the composer — the original behaviour). Desktop: a grid, see the min-width block below. */ .workspace { flex: 1; min-height: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); border-bottom: 1px solid var(--line); background: var(--topbar-bg); backdrop-filter: blur(6px); /* Lift the whole bar (and its dropdown, which overflows below it) above the message stream + card panel, which are later siblings. Stays below the full-screen modals/toasts (z-index 50–100). */ position: relative; z-index: 45; } .topbar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } .who { font-size: 13px; display: inline-flex; align-items: center; } .who-full { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .who-initial { display: none; width: 28px; height: 28px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--border); align-items: center; justify-content: center; font-weight: 700; color: var(--text); } .link { color: var(--accent); text-decoration: none; font-size: 14px; } .logout .icon { display: none; font-size: 18px; } .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); text-decoration: none; } .badge.ok { color: var(--ok); border-color: #1f5a44; } .banner { margin: 10px 16px 0; padding: 10px 12px; border-radius: var(--radius-md); font-size: 14px; border: 1px solid; } .banner.ok { color: var(--ok); border-color: #1f5a44; background: #0e2a20; } .banner.warn { color: var(--warn); border-color: #5a4a1f; background: #2a230e; } .banner.info { color: var(--accent); border-color: var(--accent-line); background: #0c2536; } .messages { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; } .msg { max-width: 82%; padding: 10px 13px; border-radius: var(--radius); white-space: pre-wrap; word-wrap: break-word; } .msg.user { align-self: flex-end; background: var(--user); color: #fff; border-bottom-right-radius: 4px; } .msg.assistant { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; } /* Assistant avatar + bubble sit in a row; the row is the flex item. */ .row.assistant { align-self: flex-start; display: flex; align-items: flex-start; gap: 8px; max-width: 90%; } .row.assistant .msg.assistant { align-self: auto; max-width: 100%; } .avatar { width: 40px; height: 40px; object-fit: contain; /* show the whole bird; it's transparent, no crop */ flex: 0 0 auto; margin-top: -2px; } .msg.error { align-self: flex-start; background: #2a1414; border: 1px solid #5a2020; color: #fecaca; } .msg.typing, .row.typing .msg { color: var(--muted); font-style: italic; } .empty { margin: auto; color: var(--muted); text-align: center; padding: 0 12px; } .empty-hint { margin-bottom: 4px; } .chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; max-width: 540px; } .chip { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 13px; font-weight: 500; line-height: 1.2; cursor: pointer; transition: border-color .15s ease, color .15s ease; } .chip:hover { border-color: var(--border-strong); color: var(--text); } /* "Pick up where you left off" pill — distinct accent so it reads as resume, not a prompt. */ .chip-resume { border-color: var(--accent-line); color: var(--accent); font-weight: 600; } .chip-resume:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } /* Quick-reply chips under the latest assistant message (from [[suggest: …]]). */ .suggestions { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 8px; margin-top: -4px; padding-left: 48px; /* align under the assistant bubble, past the avatar */ max-width: 92%; } .suggestion-chip { border-color: var(--accent-line); color: var(--accent); } .suggestion-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } /* ---------- Interactive cards (workout plan; reusable) ---------- */ .plan-card { align-self: stretch; max-width: 100%; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; } .plan-card-title { font-weight: 700; margin-bottom: 8px; } /* ---------- Shopping card: inline add + reveal recently-ticked ---------- */ .shop-add { display: flex; gap: 8px; margin-top: 10px; } .shop-add-input { flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-md); padding: 9px 11px; font: inherit; outline: none; } .shop-add-input:focus { border-color: var(--accent); } .shop-add-btn { flex: 0 0 auto; width: 40px; background: transparent; border: 1px solid var(--border); color: var(--accent); border-radius: var(--radius-md); font-size: 20px; line-height: 1; cursor: pointer; } .shop-add-btn:hover { border-color: var(--accent); background: var(--accent-soft); } .shop-checked { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; } .shop-checked > summary { list-style: none; cursor: pointer; color: var(--muted); font-size: 13px; user-select: none; -webkit-user-select: none; } .shop-checked > summary::-webkit-details-marker { display: none; } .shop-checked > summary::before { content: '▸ '; } .shop-checked[open] > summary::before { content: '▾ '; } .shop-checked .plan-items { margin-top: 8px; } .plan-day + .plan-day { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); } .plan-day-head { font-size: 13px; color: var(--muted); margin-bottom: 6px; } .plan-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .plan-items li label { display: flex; align-items: center; gap: 11px; cursor: pointer; } .plan-items input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; flex: 0 0 auto; margin: 0; border: 2px solid var(--border-strong); border-radius: 6px; background: var(--panel-2); cursor: pointer; position: relative; transition: background .15s ease, border-color .15s ease; } .plan-items input[type="checkbox"]:hover { border-color: var(--accent); } .plan-items input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); } /* Drawn checkmark (rotated border) in the dark ink colour, visible on the blue fill. */ .plan-items input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid var(--accent-ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } .plan-items input[type="checkbox"]:disabled { opacity: .5; cursor: default; } .plan-items li.done span { text-decoration: line-through; color: var(--muted); } .plan-empty { color: var(--muted); font-size: 14px; } .plan-logged { font-size: 12px; color: var(--ok); margin-left: 4px; } /* Read-only calendar agenda card */ /* Note: spacing uses margins, not flex `gap` — older iOS Safari (<14.1) ignores `gap` on flex, which would collapse the time and title together. */ .agenda-items { list-style: none; margin: 0; padding: 0; } .agenda-items li { display: flex; align-items: baseline; cursor: pointer; border-radius: var(--radius-sm); padding: 4px 6px; margin: 0 -6px; /* keep text aligned; padding is just hit/hover area */ transition: background .15s ease; outline: none; } .agenda-items li + li { margin-top: 4px; } .agenda-items li:hover, .agenda-items li:focus-visible { background: var(--panel-2); } .agenda-time { flex: 0 0 auto; min-width: 84px; margin-right: 12px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--accent); white-space: nowrap; } .agenda-items li.all-day .agenda-time { color: var(--muted); } .agenda-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .agenda-title { word-wrap: break-word; } .cal-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: middle; position: relative; top: -1px; flex: 0 0 auto; } .agenda-meta { font-size: 12px; color: var(--muted); } /* ---------- Weather card ---------- */ .wx-now { display: flex; align-items: center; gap: 14px; padding: 4px 0 10px; } .wx-now-sym { font-size: 46px; line-height: 1; } .wx-now-main { display: flex; flex-direction: column; } .wx-now-temp { font-size: 34px; font-weight: 700; line-height: 1.1; } .wx-now-stats { font-size: 13px; color: var(--muted); margin-top: 2px; } /* Hourly strip: horizontal scroll on narrow screens. */ .wx-hourly { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; border-top: 1px solid var(--line); scrollbar-width: thin; } .wx-hour { flex: 0 0 auto; width: 56px; text-align: center; background: var(--panel-2); border-radius: var(--radius-md); padding: 8px 4px; } .wx-hour-time { font-size: 12px; color: var(--muted); } .wx-hour .wx-sym { font-size: 22px; display: block; margin: 4px 0 2px; } .wx-hour-temp { font-size: 14px; font-weight: 600; } .wx-hour-precip { font-size: 11px; color: var(--accent); } .wx-days { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: 6px; } .wx-day { display: flex; align-items: center; gap: 10px; padding: 6px 0; } .wx-day + .wx-day { border-top: 1px solid var(--line); } .wx-day-name { flex: 0 0 34px; font-weight: 600; } .wx-day .wx-sym { font-size: 22px; flex: 0 0 auto; width: 26px; text-align: center; } .wx-day-temp { flex: 0 0 auto; min-width: 82px; font-variant-numeric: tabular-nums; } .wx-day-extra { font-size: 12px; color: var(--muted); margin-left: auto; white-space: nowrap; } /* Fun little animations on the weather glyphs. */ .wx-sym, .wx-now-sym { display: inline-block; } .wx-spin { animation: wx-spin 14s linear infinite; } .wx-glow { animation: wx-glow 3.2s ease-in-out infinite; } .wx-drift { animation: wx-drift 4s ease-in-out infinite; } .wx-rain { animation: wx-rain 1.6s ease-in-out infinite; } @keyframes wx-spin { to { transform: rotate(360deg); } } @keyframes wx-glow { 0%, 100% { opacity: .7; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } } @keyframes wx-drift { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(3px); } } @keyframes wx-rain { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } } /* ---------- Expenses summary card ---------- */ .exp-totals { margin-bottom: 10px; } .exp-cur + .exp-cur { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); } .exp-total { font-size: 30px; font-weight: 700; margin: 2px 0 2px; } .exp-sub { font-size: 12.5px; color: var(--muted); } .exp-breakdown { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .exp-cat { font-size: 12px; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; } .exp-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .exp-list li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; } .exp-list li + li { border-top: 1px solid var(--line); } .exp-when { flex: 1; min-width: 0; } .exp-main { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .exp-note { font-size: 12px; color: var(--muted); margin-top: 1px; word-wrap: break-word; } .exp-amt { flex: 0 0 auto; font-variant-numeric: tabular-nums; padding-top: 1px; } /* ---------- Income + owner-draw cards (reuse receipt + exp classes, plus these) ---------- */ .income-paid { flex-direction: row; align-items: center; justify-content: space-between; } .income-paid-controls { display: inline-flex; align-items: center; gap: 8px; } .income-outstanding { font-size: 12.5px; color: var(--muted); margin: 6px 0 2px; padding: 6px 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .income-unpaid-badge { display: inline-block; margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--warn); background: rgba(245, 158, 11, .16); border-radius: 999px; padding: 1px 8px; } .income-bilag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--accent); text-decoration: none; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius-sm); padding: 6px 10px; margin-bottom: 8px; } .income-bilag:hover { text-decoration: underline; } /* ---------- Bookkeeping cockpit (kind: bookkeeping) ---------- */ .books { display: flex; flex-direction: column; gap: 14px; } .books-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .books-title { font-weight: 700; font-size: 16px; } .books-periods { display: inline-flex; gap: 4px; } .books-period { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; cursor: pointer; background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); } .books-period.is-active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); } .books-period:hover { color: var(--text); } .books-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .books-nav { display: inline-flex; align-items: center; gap: 6px; } .books-navbtn { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); cursor: pointer; width: 26px; height: 26px; line-height: 1; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; } .books-navbtn:hover { border-color: var(--accent); color: var(--accent); } .books-navbtn:disabled { opacity: .4; cursor: default; } .books-navlabel { font-size: 13px; font-weight: 600; min-width: 84px; text-align: center; } /* KPI tiles */ .books-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .books-kpi { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; } .books-kpi-label { font-size: 12px; color: var(--muted); } .books-kpi-val { font-size: 24px; font-weight: 700; margin: 3px 0 2px; font-variant-numeric: tabular-nums; } .books-kpi-sub { font-size: 11.5px; color: var(--muted); } .books-kpi-warn .books-kpi-val { color: var(--warn); } .books-kpi-ok .books-kpi-val { color: var(--ok); } .books-kpi-accent { border-color: var(--accent-line); } .books-kpi-accent .books-kpi-val { color: var(--accent); } .books-strap { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; } /* Modules grid */ .books-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .books-module { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; min-width: 0; } .books-module-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .books-module-title { font-weight: 600; font-size: 14px; } .books-module-total { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } .books-note { font-size: 12px; color: var(--warn); margin-top: 4px; } .books-add { font-size: 12px; padding: 3px 10px; border-radius: 999px; cursor: pointer; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); white-space: nowrap; line-height: 1.4; } .books-add:hover { filter: brightness(1.08); } .books-addform { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; } .books-addinput { flex: 1 1 90px; min-width: 0; padding: 6px 8px; font-size: 13px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); } .books-addinput:focus { outline: none; border-color: var(--accent); } .books-addsave { padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); } .books-addsave:disabled { opacity: .6; cursor: default; } /* "+ Add" choice popover (manual vs photo) */ .books-addmenu { position: absolute; top: 100%; right: 0; z-index: 20; margin-top: 4px; display: flex; flex-direction: column; min-width: 168px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.28); } .books-addmenu-item { text-align: left; padding: 8px 10px; font-size: 13px; cursor: pointer; background: transparent; color: var(--text); border: none; border-radius: var(--radius-sm); } .books-addmenu-item:hover { background: var(--accent-soft); color: var(--accent); } .books-reading { font-size: 13px; color: var(--muted); padding: 14px 4px; } /* Owner-draw rows: reveal the delete affordance on hover/focus */ .books-row-del { flex: 0 0 auto; opacity: .55; } .books-row-draw:hover .books-row-del, .books-row-del:focus-visible { opacity: 1; } /* Moms (quarterly VAT settlement) card */ .moms-card { display: flex; flex-direction: column; gap: 12px; } .moms-hero { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; text-align: center; background: var(--panel-2); } .moms-hero.is-pay { border-color: var(--accent-line); background: var(--accent-soft); } .moms-hero-label { font-size: 12.5px; color: var(--muted); } .moms-hero-val { font-size: 30px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; } .moms-hero.is-pay .moms-hero-val { color: var(--accent); } .moms-hero.is-refund .moms-hero-val { color: var(--ok); } .moms-calc { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 6px 12px; } .moms-row { display: grid; grid-template-columns: 18px 1fr auto; align-items: baseline; gap: 8px; padding: 7px 0; font-size: 13.5px; font-variant-numeric: tabular-nums; } .moms-row + .moms-row { border-top: 1px solid var(--line); } .moms-op { color: var(--muted); text-align: center; } .moms-row-label { color: var(--text); } .moms-row-val { font-weight: 600; } .moms-row.is-total { font-weight: 700; } .moms-row.is-total .moms-row-val { font-size: 15px; } .moms-deadline { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-2); } .moms-deadline.is-soon { color: var(--warn); border-color: var(--warn); } .moms-deadline.is-overdue { color: #ef4444; border-color: #ef4444; font-weight: 600; } .moms-note { font-size: 12px; color: var(--warn); } .moms-foot { font-size: 11.5px; color: var(--muted); line-height: 1.4; } .moms-record { align-self: flex-start; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); } .moms-record:hover { filter: brightness(1.08); } .moms-record:disabled { opacity: .6; cursor: default; } /* Cash position card */ .cash-card { display: flex; flex-direction: column; gap: 12px; } .cash-heroes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } .cash-hero { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; background: var(--panel-2); } .cash-hero.is-expected { border-color: var(--accent-line); background: var(--accent-soft); } .cash-hero-label { font-size: 12.5px; color: var(--muted); } .cash-hero-val { font-size: 26px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; } .cash-hero.is-expected .cash-hero-val { color: var(--accent); } .cash-hero.is-free .cash-hero-val { color: var(--ok); } .cash-hero.is-negative .cash-hero-val { color: #ef4444; } .cash-hero-sub { font-size: 11px; color: var(--muted); margin-top: 2px; } .cash-reserve { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .cash-refund { font-size: 12.5px; color: var(--ok); font-variant-numeric: tabular-nums; } .cash-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .cash-col { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; } .cash-col-head { font-weight: 600; font-size: 13px; margin-bottom: 6px; font-variant-numeric: tabular-nums; } .cash-col.cash-in .cash-col-head { color: var(--ok); } .cash-col.cash-out .cash-col-head { color: var(--warn); } .cash-col-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muted); padding: 3px 0; } .cash-opening { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .cash-moves-head { font-weight: 600; font-size: 13px; margin-top: 2px; } .cash-pos { color: var(--ok); } .cash-neg { color: var(--warn); } .cash-add { align-self: flex-start; } .cash-addform select.books-addinput { flex: 0 0 auto; } /* Profit & loss (resultatopgørelse) card */ .pl-card { display: flex; flex-direction: column; gap: 12px; } .pl-statement { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 14px; } .pl-line { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 6px 0; font-size: 13.5px; font-variant-numeric: tabular-nums; } .pl-line-val { font-weight: 600; white-space: nowrap; } .pl-subhead { font-size: 12px; color: var(--muted); padding: 8px 0 2px; font-weight: 600; } .pl-cat { color: var(--muted); font-size: 12.5px; padding: 3px 0; } .pl-cat .pl-line-val { font-weight: 500; } .pl-revenue { border-bottom: 1px solid var(--line); } .pl-revenue .pl-line-val { color: var(--ok); } .pl-expenses { border-top: 1px solid var(--line); } .pl-profit { border-top: 2px solid var(--border); margin-top: 4px; font-size: 15px; font-weight: 700; } .pl-profit .pl-line-val { font-size: 16px; } .pl-profit.is-profit .pl-line-val { color: var(--accent); } .pl-profit.is-loss .pl-line-val { color: #ef4444; } .pl-note { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; } /* Generated invoice: document link + line items on the income card */ .income-invoice-doc { display: inline-block; } .income-lines { list-style: none; margin: 8px 0 0; padding: 8px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); } .income-lines li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13px; border-top: 1px solid var(--line); } .income-lines li:first-child { border-top: none; } .income-line-desc { min-width: 0; } /* Mileage (kørsel) card */ .mileage-card { display: flex; flex-direction: column; gap: 12px; } .mileage-counter { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 14px; } .mileage-counter.is-over { border-color: var(--warn); } .mileage-counter-text { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; } .mileage-counter.is-over .mileage-counter-text { color: var(--warn); } .mileage-bar { height: 7px; background: var(--line); border-radius: 999px; overflow: hidden; } .mileage-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s; } .mileage-counter.is-over .mileage-bar-fill { background: var(--warn); } .mileage-dist { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); } .mileage-link { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 12.5px; padding: 0; text-decoration: underline; } .mileage-dist-edit { display: inline-flex; gap: 6px; } .mileage-dist-edit .books-addinput { flex: 0 0 90px; } .mileage-add { align-self: flex-start; } .mileage-badge { display: inline-block; font-size: 10.5px; padding: 1px 7px; border-radius: 999px; vertical-align: middle; } .mileage-badge-business { background: var(--accent-soft); color: var(--accent); } .mileage-badge-commuter { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); } .books-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; } .books-chip { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); } .books-chip-unpaid { color: var(--warn); } .books-chip-paid { color: var(--ok); } .books-list { list-style: none; margin: 6px 0 0; padding: 0; } .books-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); } .books-row:first-child { border-top: 0; } .books-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .books-amt { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: 13px; } .books-row-click { cursor: pointer; border-radius: var(--radius-sm); } .books-row-click:hover { background: var(--accent-soft); } .books-empty { color: var(--muted); font-size: 12.5px; justify-content: center; } .books-badge { font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 1px 7px; flex: 0 0 auto; } .books-badge-draft { color: var(--muted); background: var(--panel-2); } .books-badge-unpaid { color: var(--warn); background: rgba(245, 158, 11, .16); } .books-badge-paid { color: var(--ok); background: rgba(52, 211, 153, .16); } .books-detail-bar { margin-bottom: 10px; } .books-back { background: transparent; border: 0; color: var(--accent); cursor: pointer; font-size: 13px; padding: 4px 0; } /* Shared visible delete button (SVG in currentColor) */ .icon-del { flex: 0 0 auto; background: transparent; border: 0; cursor: pointer; color: var(--muted); padding: 4px 6px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; } .icon-del:hover { color: var(--error); background: rgba(248, 113, 113, .15); } .icon-del:disabled { opacity: .4; cursor: default; } .icon-export { flex: 0 0 auto; background: transparent; border: 0; cursor: pointer; color: var(--muted); padding: 4px 6px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; } .icon-export:hover { color: var(--accent); background: var(--accent-soft); } /* Small standalone notice card (e.g. deleted) */ .notice-card { align-self: stretch; max-width: 100%; } .notice-title { font-weight: 600; } .notice-detail { font-size: 13px; color: var(--muted); margin-top: 2px; } .notice-deleted .notice-title::before { content: "🗑 "; } .notice-deleted .notice-detail { text-decoration: line-through; } /* ---------- Personality slider card ---------- */ .personality-card { display: flex; flex-direction: column; gap: 10px; } .persona-intro { font-size: 14px; color: var(--text); } .persona-slider { width: 100%; accent-color: var(--accent); cursor: pointer; } .persona-ticks { display: flex; gap: 6px; } .persona-tick { flex: 1; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); border-radius: var(--radius-sm); padding: 6px 4px; font-size: 13px; cursor: pointer; } .persona-tick.is-on { color: var(--text); border-color: var(--accent); background: var(--accent-soft); } .persona-blurb { font-size: 13px; color: var(--muted); } .persona-example { font-size: 14px; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; } /* ---------- Appearance / theme picker card ---------- */ .appearance-card { display: flex; flex-direction: column; gap: 10px; } .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .theme-opt { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; cursor: pointer; border: 2px solid var(--border); /* background + corner radius are set inline per theme, to preview the look */ } .theme-opt.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .theme-pv-panel { width: 54px; height: 34px; display: flex; align-items: center; gap: 5px; padding: 0 7px; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); } .theme-pv-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; } .theme-pv-bar { height: 5px; flex: 1; border-radius: 3px; opacity: .7; } .theme-name { font-size: 12px; font-weight: 600; } /* ---------- Receipt / expense card ---------- */ .receipt-thumb { max-width: 140px; max-height: 160px; border-radius: var(--radius-md); border: 1px solid var(--border); margin: 2px 0 10px; cursor: zoom-in; display: block; } .receipt-thumb-msg { max-width: 160px; max-height: 200px; border-radius: var(--radius-md); display: block; cursor: zoom-in; } /* Placeholder tile shown while a photo is uploading/converting (e.g. HEIC, which the browser can't render) — beats the broken-image icon. */ .receipt-thumb-ph { display: flex; align-items: center; justify-content: center; width: 120px; height: 150px; border-radius: var(--radius-md); background: var(--panel-2); border: 1px solid var(--border); font-size: 34px; animation: ph-pulse 1.4s ease-in-out infinite; } @keyframes ph-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .receipt-thumb-ph { animation: none; } } /* Full-screen image preview (lightbox) */ .lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, .85); backdrop-filter: blur(2px); cursor: zoom-out; padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); } .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius-sm); box-shadow: 0 12px 48px rgba(0, 0, 0, .6); } .lightbox-close { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 16px; font-size: 26px; line-height: 1; color: #fff; background: transparent; border: 0; cursor: pointer; opacity: .85; padding: 6px 10px; } .lightbox-close:hover { opacity: 1; } .receipt-fields { display: flex; flex-direction: column; gap: 8px; } .receipt-field { display: flex; flex-direction: column; gap: 3px; } .receipt-label { font-size: 12px; color: var(--muted); } .receipt-field input, .receipt-field select { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 8px 10px; font: inherit; outline: none; } .receipt-field input:focus, .receipt-field select:focus { border-color: var(--accent); } .receipt-field input:disabled, .receipt-field select:disabled { opacity: .7; } .receipt-actions { display: flex; gap: 8px; margin-top: 12px; } .receipt-confirm { flex: 1; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: var(--radius-md); padding: 10px; font-weight: 700; cursor: pointer; } .receipt-confirm:disabled { opacity: .55; cursor: default; } .receipt-discard { background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 14px; cursor: pointer; } .receipt-discard:hover { color: var(--error); border-color: #5a2020; } .receipt-saved { margin-top: 10px; font-size: 13px; color: var(--ok); } .receipt-vat-hint { margin-top: 8px; font-size: 12.5px; color: var(--warn); } .receipt-dup-hint { margin-top: 8px; font-size: 12.5px; color: var(--warn); } /* Line items extracted from the photo — editable (fix, add, remove) */ .receipt-items { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); } .receipt-items-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 6px; } .receipt-items-sum { font-variant-numeric: tabular-nums; } .receipt-item { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 3px 0; } /* Editable inputs */ .receipt-item-desc, .receipt-item-qty, .receipt-item-amt-in { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 6px 8px; font: inherit; font-size: 13px; outline: none; } .receipt-item-desc:focus, .receipt-item-qty:focus, .receipt-item-amt-in:focus { border-color: var(--accent); } .receipt-item-desc { flex: 1; min-width: 0; } .receipt-item-qty { flex: 0 0 auto; width: 46px; text-align: center; } .receipt-item-amt-in { flex: 0 0 auto; width: 78px; text-align: right; font-variant-numeric: tabular-nums; } /* Read-only rows (confirmed) */ .receipt-item.is-confirmed .receipt-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .receipt-item.is-confirmed .receipt-item-amt { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; } .receipt-item-rm { flex: 0 0 auto; background: transparent; border: 0; cursor: pointer; color: var(--muted); font-size: 18px; line-height: 1; padding: 0 4px; border-radius: 6px; } .receipt-item-rm:hover { color: var(--error); background: rgba(248, 113, 113, .15); } .receipt-add-line { margin-top: 6px; background: transparent; color: var(--accent); border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 6px 10px; font: inherit; font-size: 12.5px; cursor: pointer; width: 100%; } .receipt-add-line:hover { border-color: var(--accent); } .receipt-items-mismatch { margin-top: 6px; font-size: 12px; color: var(--warn); } .receipt-items-relink { background: transparent; border: 0; color: var(--accent); cursor: pointer; font: inherit; font-size: 12px; text-decoration: underline; padding: 0; } /* ---------- Notification settings modal ---------- */ .modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4, 10, 22, .6); backdrop-filter: blur(3px); } .modal[hidden] { display: none; } .modal-card { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); padding: 16px 18px 18px; max-height: 85vh; overflow-y: auto; } .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .modal-head strong { font-size: 18px; } .modal-close { background: transparent; color: var(--muted); border: 0; font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 6px; } .modal-close:hover { color: var(--text); } .notif-note { color: var(--muted); font-size: 14px; padding: 10px 2px; } .notif-row { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-top: 1px solid var(--line); } .notif-row:first-of-type { border-top: 0; } .notif-row-text { flex: 1; min-width: 0; } .notif-row-title { font-weight: 600; } .notif-row-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; } .notif-test { width: 100%; margin-top: 14px; background: transparent; color: var(--accent); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 9px; font-weight: 600; cursor: pointer; } .notif-test:hover:not(:disabled) { border-color: var(--accent); } .notif-test:disabled { opacity: .55; cursor: default; } /* ---------- Chat history ---------- */ .history-search { width: 100%; margin: 8px 0 6px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-md); padding: 9px 12px; font: inherit; outline: none; } .history-search:focus { border-color: var(--accent); } .history-list { display: flex; flex-direction: column; } .history-empty { color: var(--muted); font-size: 14px; padding: 14px 2px; text-align: center; } .history-item { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-top: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; } .history-item:first-child { border-top: 0; } .history-item:hover { background: var(--panel-2); } .history-item.current { background: var(--accent-soft); } .history-main { flex: 1; min-width: 0; } .history-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .history-sub { font-size: 12px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* iOS-style toggle switch */ .switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; inset: 0; cursor: pointer; background: var(--border-strong); border-radius: 999px; transition: background .18s ease; } .switch .slider::before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .18s ease; } .switch input:checked + .slider { background: var(--accent); } .switch input:checked + .slider::before { transform: translateX(20px); } .switch input:disabled + .slider { opacity: .5; cursor: default; } /* ---------- Work-hours card ---------- */ .work-total { font-size: 30px; font-weight: 700; margin: 2px 0 8px; display: flex; align-items: baseline; gap: 10px; } .work-live { font-size: 12px; font-weight: 600; color: var(--ok); border: 1px solid #1f5a44; border-radius: 999px; padding: 2px 9px; animation: wx-glow 2.4s ease-in-out infinite; } .work-breakdown { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; } .work-place-total { font-size: 12px; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; } .work-place { font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; margin-left: 2px; } .work-sessions { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .work-sessions li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; } .work-sessions li + li { border-top: 1px solid var(--line); } .work-when { color: var(--text); font-variant-numeric: tabular-nums; } .work-dur { color: var(--muted); flex: 0 0 auto; } .work-warn { margin-top: 8px; font-size: 13px; color: var(--warn); } /* Playful "waiting for the weather API" animation in the thinking bubble. */ .wx-wait { display: inline-flex; gap: 5px; font-style: normal; } .wx-wait-glyph { display: inline-block; font-size: 19px; animation: wx-wait-bob 1.1s ease-in-out infinite; } @keyframes wx-wait-bob { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-6px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .wx-spin, .wx-glow, .wx-drift, .wx-rain, .wx-wait-glyph { animation: none; } } /* Rendered markdown inside assistant bubbles */ .msg.assistant > :first-child { margin-top: 0; } .msg.assistant > :last-child { margin-bottom: 0; } .msg.assistant p { margin: 0 0 8px; } .msg.assistant ul, .msg.assistant ol { margin: 4px 0 8px; padding-left: 20px; } .msg.assistant li { margin: 3px 0; } .msg.assistant li > ul, .msg.assistant li > ol { margin: 3px 0; } .msg.assistant strong { font-weight: 700; color: var(--text-strong); } .msg.assistant em { font-style: italic; } .msg.assistant h3, .msg.assistant h4, .msg.assistant h5 { margin: 10px 0 6px; font-size: 1em; font-weight: 700; } .msg.assistant code { background: rgba(255, 255, 255, .1); padding: 1px 5px; border-radius: 5px; font-size: .92em; } .msg.assistant a { color: var(--accent); } /* ---------- Persistent card panel ("canvas") — mobile-first ---------- */ /* Sits between the message stream and the composer: the message list (flex:1) shrinks to make room, the composer stays pinned at the bottom, and the panel holds the current card, updating in place instead of re-posting the whole thing into the transcript. Foldable (min) and closable. */ .card-panel { flex: 0 0 auto; display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--line); background: var(--bg); } .card-panel[hidden] { display: none; } .card-panel-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--panel-2); cursor: pointer; user-select: none; -webkit-user-select: none; } .cp-grip { width: 26px; height: 4px; flex: 0 0 auto; border-radius: 2px; background: var(--border-strong); } .cp-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cp-sub { color: var(--muted); font-size: 12px; white-space: nowrap; } .cp-actions { margin-left: auto; display: flex; gap: 2px; flex: 0 0 auto; } .cp-expand { display: none; } /* desktop-only (shown in the min-width block) */ .ws-divider { display: none; } /* desktop-only drag handle */ .card-rail { display: none; } /* desktop-only card switcher rail */ .cp-btn { background: transparent; border: 0; color: var(--muted); font-size: 15px; line-height: 1; padding: 6px 9px; border-radius: var(--radius-sm); cursor: pointer; user-select: none; -webkit-user-select: none; } .cp-btn:hover { background: var(--accent-soft); color: var(--text); } .card-panel[data-state="min"] .cp-min { transform: rotate(180deg); } .card-panel-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px; max-height: min(52vh, 460px); } .card-panel[data-state="min"] .card-panel-body { display: none; } /* Cards fill the panel seamlessly — drop their own outer chrome inside it. */ .card-panel-body > .plan-card { border: 0; border-radius: 0; padding: 0; background: transparent; } .card-panel-body > * { margin: 0; } /* Brief highlight when a fresh/updated card lands. */ @keyframes cp-flash { from { background: var(--accent-soft); } to { background: var(--panel-2); } } .card-panel.cp-flash .card-panel-head { animation: cp-flash 1s ease-out; } /* ---------- Desktop: two-column workspace (chat rail | large card canvas) ---------- */ @media (min-width: 1024px) { /* Use the full viewport width — the card canvas is meant to host large widgets (calendars, the bookkeeping cockpit), so it gets all the room it can. */ .app { max-width: none; } .workspace { display: grid; /* Chat rail width is user-draggable (default 1/3; clamped 23–60% by the JS). A thin divider column sits between chat and the card canvas; a fixed icon rail sits on the far right. */ grid-template-columns: var(--chat-w, 33%) 8px minmax(0, 1fr) 46px; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "messages divider card rail" "composer divider card rail"; } #messages { grid-area: messages; } #composer { grid-area: composer; } #cardPanel { grid-area: card; } #cardRail { grid-area: rail; } /* Card switcher rail (staples + session recents). */ .card-rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 5px; overflow-y: auto; border-left: 1px solid var(--line); background: var(--panel-2); } .rail-btn { width: 36px; height: 36px; flex: 0 0 auto; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; cursor: pointer; font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .rail-btn:hover { background: var(--accent-soft); } .rail-btn.is-active { background: var(--accent-soft); border-color: var(--accent-line); } .rail-sep { width: 22px; height: 1px; background: var(--border); margin: 3px 0; flex: 0 0 auto; } /* Drag handle between the two panes. */ .ws-divider { grid-area: divider; display: block; cursor: col-resize; background: var(--line); position: relative; } .ws-divider::before { content: ""; position: absolute; inset: 0 -4px; /* wider hit area */ } .ws-divider:hover { background: var(--accent); } body.ws-resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; } /* Focus mode: the card canvas takes the ENTIRE width (chat rail + divider collapse) — for full-bleed widgets. The icon rail stays so you can still switch cards. */ .workspace.ws-focus-card { grid-template-columns: 0 0 minmax(0, 1fr) 46px; } .workspace.ws-focus-card #messages, .workspace.ws-focus-card #composer, .workspace.ws-focus-card .ws-divider { display: none; } .cp-expand { display: inline-flex; } /* The card panel is a permanent right column now — a left border, always present (even with no card), and it fills the column height with its own scroll. */ .card-panel { border-top: 0; border-left: 1px solid var(--line); min-height: 0; } .card-panel[hidden] { display: flex; } /* keep the column even when "closed" */ .card-panel-head { cursor: default; } .cp-grip, .cp-min { display: none; } /* folding is a mobile-only affordance */ .card-panel-body { max-height: none; flex: 1; min-height: 0; } .card-panel[data-state="min"] .card-panel-body { display: block; } /* never folded on desktop */ /* Empty-state hint when no card is loaded, so the column doesn't read as broken. */ .card-panel-body:empty::after { content: "🗂️ Your cards appear here — invoices, expenses, plans, agenda…"; display: block; padding: 28px 18px; color: var(--muted); font-size: 13px; text-align: center; line-height: 1.7; } } .composer { display: flex; gap: 8px; padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); } .composer textarea { flex: 1; resize: none; max-height: 140px; } /* Compact icon Send button (up-arrow), swaps to a stop square while in flight. */ #send { padding: 0; width: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } #send svg { display: block; } /* Send button turns into a red Stop control while a reply is in flight. */ #send.stopping { background: var(--error); border-color: var(--error); color: #fff; } /* Composer overflow menu: ＋ folds New chat + Add receipt into one button, freeing width for the text field (especially on phones). */ .composer-menu { position: relative; display: flex; } .composer-menu > summary { list-style: none; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 20px; line-height: 1; padding: 0 12px; height: 100%; cursor: pointer; } .composer-menu > summary::-webkit-details-marker { display: none; } .composer-menu[open] > summary { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } .composer-menu-pop { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 40; min-width: 190px; max-width: 70vw; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.45); } .composer-menu-item { display: block; width: 100%; box-sizing: border-box; text-align: left; background: none; border: 0; color: var(--text); font: inherit; font-size: 15px; padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; } .composer-menu-item:hover { background: var(--accent-soft); } /* ---------- Voice controls ---------- */ button.iconbtn { background: transparent; color: var(--text); font-weight: 400; font-size: 15px; padding: 5px 10px; cursor: pointer; opacity: .5; /* muted look when off (works despite emoji color) */ } button.iconbtn.on { opacity: 1; border-color: var(--accent-line); background: var(--accent-soft); } /* History (🕘) and notifications (🔔) are plain actions, not on/off toggles, so they shouldn't look dimmed like the muted toggle-off state. */ #historyBtn, #notifBtn { opacity: .9; } #historyBtn:hover, #notifBtn:hover { opacity: 1; } .composer .mic { font-size: 18px; } .composer .mic.listening { /* Filled pill + pulsing ring — visible even though iOS ignores CSS color on the emoji glyph. */ background: var(--error); border-color: var(--error); animation: mic-pulse 1.2s ease-in-out infinite; } @keyframes mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, .55); } 50% { box-shadow: 0 0 0 7px rgba(248, 113, 113, 0); } } /* ---------- Compact top bar on narrow phones ---------- */ @media (max-width: 480px) { .topbar { padding-left: 12px; padding-right: 12px; } .topbar-actions { gap: 8px; } .badge .label { display: none; } /* calendar → icon only */ .who-full { display: none; } /* name → first initial only */ .who-initial { display: inline-flex; } .logout .label { display: none; } /* log out → door icon */ .logout .icon { display: inline; } .avatar { width: 32px; height: 32px; } /* Quick-action chips: keep them small and well-spaced so they don't collide when they wrap on a narrow phone. */ .chips { gap: 8px 8px; max-width: 100%; } .chip { font-size: 12.5px; padding: 6px 11px; } /* Give the text field more room: tighter gaps/padding + slimmer buttons. */ .composer { gap: 6px; padding-left: 10px; padding-right: 10px; } .composer-menu > summary, .composer .mic { padding: 0 9px; } #send { width: 40px; min-width: 40px; } } /* ---------- Email connect menu (topbar) ---------- */ .email-menu { position: relative; } .email-menu > summary { list-style: none; cursor: pointer; } .email-menu > summary::-webkit-details-marker { display: none; } .email-menu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 220px; max-width: 80vw; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); } .email-menu-head { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 4px 6px; } .email-menu-acc { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: 13px; word-break: break-all; } .email-menu-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--muted); } .email-menu-gmail { background: #ea4335; } .email-menu-outlook { background: #0a84ff; } .email-menu-sep { height: 1px; background: var(--border); margin: 6px 4px; } .email-menu-item { display: block; width: 100%; box-sizing: border-box; text-align: left; background: none; border: 0; font: inherit; font-size: 14px; padding: 7px 8px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; cursor: pointer; } .email-menu-item:hover { background: var(--accent-soft); } /* ---------- Top-bar overflow menu (☰) ---------- */ .topbar-menu { position: relative; display: flex; } .topbar-menu > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; line-height: 1; } .topbar-menu > summary::-webkit-details-marker { display: none; } .topbar-menu[open] > summary { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } .topbar-menu-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 230px; max-width: 84vw; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.5); } .tm-identity { padding: 6px 10px 2px; font-weight: 700; color: var(--text); word-break: break-word; } .tm-head { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px 10px 3px; } .tm-sep { height: 1px; background: var(--border); margin: 6px 4px; } .tm-acc { display: flex; align-items: center; gap: 8px; padding: 4px 10px; font-size: 13px; color: var(--muted); word-break: break-all; } .tm-item { display: block; width: 100%; box-sizing: border-box; text-align: left; background: none; border: 0; color: var(--text); font: inherit; font-size: 14px; padding: 9px 10px; border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; } .tm-item:hover { background: var(--accent-soft); } .tm-item.tm-on { color: var(--accent); } /* ---------- IMAP connect modal ---------- */ .imap-hint { color: var(--muted); font-size: 13px; margin: 0 0 12px; line-height: 1.5; } .imap-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; } .imap-label input { display: block; width: 100%; margin-top: 4px; } .imap-advanced { margin: 4px 0 12px; } .imap-advanced > summary { cursor: pointer; font-size: 13px; color: var(--accent); margin-bottom: 8px; } .imap-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); } .imap-check input { width: auto; } .imap-error { background: #2a1414; border: 1px solid #5a2020; color: #fecaca; border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13px; margin-bottom: 10px; word-break: break-word; } .imap-connect { width: 100%; background: var(--accent); color: var(--accent-ink); border: 0; font-weight: 600; padding: 10px; border-radius: var(--radius-sm); cursor: pointer; } .imap-connect:disabled { opacity: .6; cursor: default; } /* ---------- Work-log card ---------- */ .worklog-jobs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .worklog-job { background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; font-size: 13px; font-weight: 600; } .worklog-entry { padding: 8px 0; border-top: 1px solid var(--line); } .worklog-entry:first-of-type { border-top: 0; } .worklog-entry-meta { font-size: 12px; color: var(--muted); } .worklog-entry-desc { margin-top: 2px; white-space: pre-wrap; word-break: break-word; } /* ---------- Email cards ---------- */ .email-card .email-row { display: block; width: 100%; text-align: left; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 9px 11px; margin-top: 8px; cursor: pointer; color: var(--text); } .email-card .email-row:hover { border-color: var(--accent); } .email-row-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .email-from { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .email-date { color: var(--muted); font-size: 12px; flex: 0 0 auto; } .email-subject { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .email-snippet { margin-top: 2px; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Unread: accent dot + bolder sender. */ .email-row.unread .email-from { font-weight: 800; } .email-row.unread .email-from::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 7px; vertical-align: middle; } .email-empty { color: var(--muted); margin-top: 6px; } .email-open .email-meta, .email-draft .email-meta { color: var(--muted); font-size: 13px; margin-bottom: 2px; } .email-body { margin-top: 8px; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 14px; line-height: 1.45; max-height: 320px; overflow-y: auto; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; } /* HTML email body rendered in a sandboxed iframe (white page, like a mail client) */ .email-html { margin-top: 8px; width: 100%; height: 320px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; display: block; } .email-note { margin-top: 8px; color: var(--muted); font-size: 13px; } .email-draft.sent { border-color: #2e6f4e; } .email-back-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; color: var(--accent); font: inherit; font-size: 13px; padding: 2px 0; margin-bottom: 6px; cursor: pointer; } .email-back-btn:hover { text-decoration: underline; } .email-actions { margin-top: 10px; } .email-reply-btn { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); font-size: 13px; padding: 6px 12px; border-radius: var(--radius-sm); cursor: pointer; } .email-reply-btn:hover { border-color: var(--accent); } .email-send-btn { background: var(--accent); color: var(--accent-ink); border: 0; font-weight: 600; font-size: 14px; padding: 8px 18px; border-radius: var(--radius-sm); cursor: pointer; } .email-send-btn:disabled { opacity: .6; cursor: default; } .email-send-status { margin-left: 10px; font-size: 13px; color: var(--error); } /* Editable draft fields */ .email-field { display: block; margin-top: 8px; } .email-field-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 3px; } .email-field-input { width: 100%; box-sizing: border-box; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 8px 10px; font-size: 14px; font-family: inherit; } .email-field-input:focus { border-color: var(--accent); outline: none; } .email-field-body { resize: vertical; min-height: 110px; line-height: 1.45; } .email-field-input:disabled { opacity: .7; } /* ---------- Cycle (period) card ---------- */ .cycle-card { text-align: center; } .cycle-ring-wrap { display: flex; flex-direction: column; align-items: center; margin-top: 6px; } .cyc-ring { display: block; } .cyc-track { stroke: var(--border); } /* Inner-seasons palette — arcs and legend swatches share these hues. Winter (menstrual) is red — the intuitive period colour. */ .cyc-winter { stroke: #ef4444; } /* menstrual — red */ .cyc-spring { stroke: #34d399; } /* follicular */ .cyc-summer { stroke: #facc15; } /* ovulation */ .cyc-autumn { stroke: #fb923c; } /* luteal */ .cyc-arc { transition: stroke-dasharray .6s ease; } .cyc-marker { fill: #fff; stroke: #0b1220; stroke-width: 2; filter: drop-shadow(0 0 5px rgba(255, 255, 255, .8)); animation: cyc-pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes cyc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } .cyc-emoji { font-size: 30px; } .cyc-dayn { fill: var(--text); font-size: 15px; font-weight: 700; } .cycle-phase { margin-top: 6px; display: flex; flex-direction: column; align-items: center; gap: 1px; } .cycle-season { font-weight: 700; font-size: 15px; } .cycle-phase-sub { font-size: 12px; color: var(--muted); text-transform: capitalize; } /* Legend — swatch colours match the ring arcs exactly */ .cycle-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--muted); } .cycle-legend-item { display: inline-flex; align-items: center; gap: 5px; } .cycle-legend-item.on { color: var(--text); font-weight: 600; } .cycle-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .cycle-swatch.cyc-winter { background: #ef4444; } .cycle-swatch.cyc-spring { background: #34d399; } .cycle-swatch.cyc-summer { background: #facc15; } .cycle-swatch.cyc-autumn { background: #fb923c; } .cycle-count { margin-top: 10px; font-size: 14px; color: var(--text); } .cycle-count b { color: var(--accent); } .cycle-fertile { margin-top: 10px; padding: 8px 10px; border-radius: var(--radius-md); background: rgba(250, 204, 21, .10); border: 1px solid rgba(250, 204, 21, .30); font-size: 12.5px; color: var(--text); display: flex; flex-direction: column; gap: 2px; } .cycle-fertile.active { background: rgba(250, 204, 21, .20); border-color: rgba(250, 204, 21, .55); } .cycle-caveat { font-size: 11px; color: var(--muted); } .cycle-fertile-toggle { margin-top: 8px; background: transparent; border: 0; color: var(--accent); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; padding: 2px; } /* Mood & energy */ .cycle-mood { margin-top: 14px; text-align: left; } .cycle-mood-head { font-size: 12px; color: var(--muted); margin-bottom: 6px; } .cycle-me-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .cycle-me-label { flex: 0 0 52px; font-size: 12.5px; color: var(--muted); } .cycle-me-opts { display: flex; gap: 6px; } .cycle-me-opt { width: 34px; height: 34px; border-radius: var(--radius-sm); cursor: pointer; background: var(--panel-2); border: 1px solid var(--border); padding: 0; display: inline-flex; align-items: flex-end; justify-content: center; position: relative; overflow: hidden; } .cycle-me-opt.is-mood { font-size: 18px; align-items: center; } .cycle-me-opt.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(56, 189, 248, .35); } .cycle-energy-fill { display: block; width: 60%; border-radius: 3px 3px 0 0; background: var(--accent); } .cycle-me-opt.on .cycle-energy-fill { background: #34d399; } .cycle-trend { margin-top: 10px; display: flex; align-items: flex-end; gap: 3px; height: 52px; padding: 4px; background: var(--panel-2); border-radius: var(--radius-sm); } .cycle-trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; } .cycle-trend-mood { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .cycle-trend-mood.empty { background: var(--border); } .cycle-trend-barwrap { width: 8px; height: 32px; display: flex; align-items: flex-end; } .cycle-trend-bar { width: 100%; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 2px; } .cycle-trend-bar.empty { background: var(--border); height: 2px; } .cycle-trend-legend { margin-top: 4px; font-size: 11px; color: var(--muted); } .cycle-recent { margin-top: 12px; text-align: left; } .cycle-recent-head { font-size: 12px; color: var(--muted); margin-bottom: 4px; } .cycle-recent-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; padding: 3px 0; border-top: 1px solid var(--line); } .cycle-recent-row:first-of-type { border-top: 0; } .cycle-empty { color: var(--muted); font-size: 14px; margin-top: 8px; } .cycle-log { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; align-items: center; } .cycle-date-row { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); } .cycle-date-input { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 6px 8px; font: inherit; font-size: 13px; outline: none; } .cycle-date-input:focus { border-color: var(--accent); } .cycle-log-btn { background: #f472b6; color: #3a0b23; border: 0; border-radius: var(--radius-md); padding: 9px 16px; font-weight: 700; cursor: pointer; } .cycle-log-btn:disabled { opacity: .55; cursor: default; } @media (prefers-reduced-motion: reduce) { .cyc-marker { animation: none; } .cyc-arc { transition: none; } } /* ---------- Workout progression card ---------- */ .prog-card.loading { opacity: .6; pointer-events: none; } .prog-exercise { width: 100%; margin: 2px 0 4px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 10px; font: inherit; outline: none; } .prog-exercise:focus { border-color: var(--accent); } .prog-shared { font-size: 12px; color: var(--accent); margin: -2px 0 4px; } .prog-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0 2px; } .prog-summary .prog-metric { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .prog-summary .prog-best-val { font-size: 20px; font-weight: 700; color: var(--accent); } .prog-summary .prog-sessions { font-size: 12px; color: var(--muted); margin-left: auto; } .prog-chart { margin: 6px 0 2px; } .prog-svg { display: block; width: 100%; height: auto; overflow: visible; } .prog-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; } .prog-ylab, .prog-xlab { fill: var(--muted); font-size: 9px; } .prog-area { fill: var(--accent); opacity: .12; } .prog-line { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1200; stroke-dashoffset: 0; animation: prog-draw .9s ease-out; } .prog-dot { fill: var(--accent); transition: transform .1s ease; } .prog-dot.real { fill: #facc15; } /* tested (1-rep) max — gold diamond */ .prog-dot.last { stroke: #fff; stroke-width: 1.6; } .prog-dot.sel { stroke: #fff; stroke-width: 2.4; } .prog-hit { fill: transparent; cursor: pointer; } .prog-last { fill: var(--accent); font-size: 11px; font-weight: 700; } /* Tap-to-inspect readout under the chart. */ .prog-readout { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; padding: 7px 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-md); min-height: 18px; } .prog-ro-date { font-size: 12px; color: var(--muted); } .prog-ro-val { font-size: 16px; font-weight: 700; } .prog-ro-detail { font-size: 12.5px; color: var(--muted); } .prog-ro-tag { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: auto; } .prog-ro-tag.real { color: #3a2f04; background: #facc15; } .prog-ro-tag.est { color: var(--accent-ink); background: var(--accent); } .prog-legend { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); margin-top: 3px; } .prog-legend .prog-leg { font-size: 12px; line-height: 1; } .prog-legend .prog-leg.real { color: #facc15; margin-left: 2px; } .prog-legend .prog-leg.est { color: var(--accent); margin-left: 10px; } @keyframes prog-draw { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } } .prog-empty, .prog-hint { color: var(--muted); font-size: 12.5px; margin-top: 4px; } .prog-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .prog-seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .prog-seg-btn { background: transparent; color: var(--muted); border: 0; padding: 7px 12px; font: inherit; font-size: 12.5px; cursor: pointer; border-left: 1px solid var(--border); } .prog-seg-btn:first-child { border-left: 0; } .prog-seg-btn.on { background: var(--accent); color: var(--accent-ink); font-weight: 700; } @media (prefers-reduced-motion: reduce) { .prog-line { animation: none; } } /* ---------- Work-hours bar chart card ---------- */ .wch-card.loading { opacity: .6; pointer-events: none; } .wch-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 2px; } .wch-summary .wch-total { font-size: 24px; font-weight: 700; } .wch-summary .wch-avg { font-size: 12.5px; color: var(--muted); } .wch-summary .wch-range { font-size: 12px; color: var(--muted); margin-left: auto; } .wch-chart { margin: 6px 0 2px; } .wch-svg { display: block; width: 100%; height: auto; overflow: visible; } .wch-grid { stroke: var(--border); stroke-width: 1; } .wch-grid.base { stroke: #33456b; } .wch-ylab, .wch-xlab { fill: var(--muted); font-size: 9px; } .wch-bar { fill: var(--accent); transition: fill .1s ease; } .wch-bar.ongoing { fill: #34d399; } .wch-bar.sel { stroke: #fff; stroke-width: 1.6; } .wch-hit { fill: transparent; cursor: pointer; } /* ---------- Developer mode: diagnostics + report-to-developer ---------- */ /* The "report" flag sits on each message; visible on hover (desktop). Long-press works on touch regardless. */ .msg.reportable { position: relative; } .msg-report-btn { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: rgba(0,0,0,.25); color: #cdd8ec; font-size: 12px; line-height: 22px; cursor: pointer; opacity: 0; transition: opacity .12s; } .msg.reportable:hover .msg-report-btn { opacity: .85; } .msg-report-btn:hover { opacity: 1; background: rgba(0,0,0,.45); } /* On touch there's no hover, so keep the report button visible + finger-sized. */ @media (hover: none) { .msg-report-btn { opacity: .6; width: 28px; height: 28px; line-height: 28px; font-size: 13px; } } /* UI controls must never be text-selectable — long-press/drag was selecting button glyphs (mic, send), menu items, avatars, etc. Message text stays selectable. */ button, .tm-item, .avatar, .badge, .iconbtn { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-touch-callout: none; } /* Per-turn diagnostics — hidden unless developer mode is on. */ .msg-diag { display: none; margin: 2px 0 8px 46px; font-size: 11.5px; color: var(--muted); } body.devmode .msg-diag { display: block; } .msg-diag > summary { cursor: pointer; color: var(--muted); list-style: none; user-select: none; font-variant: small-caps; letter-spacing: .04em; } .msg-diag > summary::before { content: '⚙ '; } .msg-diag-body { margin-top: 4px; padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1.5; overflow-x: auto; } .msg-diag-body code { color: var(--accent); } .diag-calls { margin: 4px 0 0; padding-left: 18px; } .diag-args { color: var(--muted); } .diag-ms { color: var(--warn); } .diag-timing { margin-top: 3px; color: var(--muted); } .diag-err { color: var(--error); } .diag-none { color: var(--muted); font-style: italic; } .diag-thoughts-h { margin-top: 6px; } .diag-thought { margin-top: 3px; padding: 6px 8px; background: var(--bg); border-radius: 6px; white-space: pre-wrap; } /* Feedback report card (admin). */ .fb-report { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; margin-top: 10px; background: var(--panel-2); } .fb-report:first-of-type { margin-top: 8px; } .fb-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; } .fb-head .fb-id { font-weight: 700; color: var(--accent); } .fb-head .fb-from { font-weight: 600; } .fb-status { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; } .fb-status.new { background: #f59e0b; color: #3a2606; } .fb-status.seen { background: #38bdf8; color: var(--accent-ink); } .fb-status.resolved { background: #34d399; color: #05372a; } .fb-head .fb-when { color: var(--muted); font-size: 11.5px; margin-left: auto; } .fb-note { margin: 8px 0 2px; font-style: italic; color: var(--text); } .fb-thread { margin: 8px 0 2px; display: flex; flex-direction: column; gap: 6px; } .fb-msg { border-radius: 9px; padding: 6px 9px; background: var(--bg); border: 1px solid transparent; } .fb-msg.user { background: var(--panel); } .fb-msg.tool { background: var(--bg); } .fb-msg.reported { border-color: var(--warn); background: rgba(245, 158, 11, .16); } .fb-msg-role { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 2px; } .fb-msg.reported .fb-msg-role { color: var(--warn); } .fb-msg-text { font-size: 13px; white-space: pre-wrap; word-break: break-word; } /* Collapsed tool-result row in the thread (raw JSON hidden until expanded). */ .fb-tool { font-size: 11.5px; } .fb-tool > summary { cursor: pointer; color: var(--muted); list-style: none; padding: 3px 2px; } .fb-tool > summary::-webkit-details-marker { display: none; } .fb-tool > summary::before { content: '▸ '; } .fb-tool[open] > summary::before { content: '▾ '; } .fb-tool-json { margin: 4px 0 0; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--muted); max-height: 200px; overflow: auto; white-space: pre; } .fb-diag { margin-top: 8px; font-size: 11.5px; color: var(--muted); } .fb-diag > summary { cursor: pointer; color: var(--muted); list-style: none; font-variant: small-caps; letter-spacing: .04em; } .fb-diag > summary::before { content: '⚙ '; } .fb-diag-body { margin-top: 4px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1.5; overflow-x: auto; } .fb-diag-body code { color: var(--accent); } .fb-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; } .fb-resolve { background: #34d399; color: #05372a; border: 0; border-radius: var(--radius-md); padding: 8px 14px; font-weight: 700; cursor: pointer; } .fb-resolve:disabled { opacity: .6; cursor: default; } .fb-download { background: transparent; color: var(--accent); border: 1px solid var(--accent-line); border-radius: var(--radius-md); padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .fb-download:hover { border-color: var(--accent); background: var(--accent-soft); } /* Report dialog + toast. */ .report-overlay { position: fixed; inset: 0; background: rgba(3,8,18,.6); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 20px; } .report-box { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .report-title { font-weight: 700; font-size: 16px; } .report-sub { color: var(--muted); font-size: 13px; margin: 4px 0 10px; } .report-note { width: 100%; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-md); padding: 10px; font: inherit; resize: vertical; outline: none; } .report-note:focus { border-color: var(--accent); } .report-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; } .report-cancel, .report-send { border: 0; border-radius: var(--radius-md); padding: 9px 14px; font-weight: 700; cursor: pointer; } .report-cancel { background: var(--panel-2); color: var(--text); } .report-send { background: var(--accent); color: var(--accent-ink); } .report-send:disabled { opacity: .6; cursor: default; } .toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px); background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 10px 18px; font-size: 14px; z-index: 70; opacity: 0; transition: opacity .25s, transform .25s; max-width: 90vw; text-align: center; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---------- Mobile: never zoom on input focus ---------- The viewport meta locks zoom in the installed PWA; iOS Safari (a normal tab) ignores that, but it will NOT zoom into a focused field whose font-size is ≥16px. So force all form controls to 16px on small screens as a belt-and-suspenders fix. */ @media (max-width: 700px) { input, select, textarea, .receipt-field input, .receipt-field select, .receipt-item-desc, .receipt-item-qty, .receipt-item-amt-in, .email-field-input { font-size: 16px; } } /* ---- Insights: in-app usage/perf dashboard (Developer mode only) ------------- */ body:not(.devmode) #insightsBtn { display: none; } .insights-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; overflow-y: auto; } .insights-box { width: 100%; max-width: 860px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .4); } .insights-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); border-radius: 14px 14px 0 0; } .insights-title { font-weight: 700; color: var(--text-strong); margin-right: auto; } .insights-ranges { display: flex; gap: 4px; } .ins-range { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; } .ins-range:hover { border-color: var(--accent); color: var(--accent); } .ins-range.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; } .insights-live { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); } .insights-refresh, .insights-close { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 8px; width: 30px; height: 28px; cursor: pointer; font-size: 14px; } .insights-refresh:hover, .insights-close:hover { border-color: var(--accent); color: var(--accent); } .insights-body { padding: 14px 16px 20px; } .insights-loading, .insights-error { color: var(--muted); padding: 24px 4px; text-align: center; } .insights-error { color: #f87171; } .ins-meta { color: var(--muted); font-size: 12px; margin-bottom: 12px; } .ins-cards { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .ins-card { flex: 1 1 90px; min-width: 90px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; } .ins-card-v { font-size: 20px; font-weight: 700; color: var(--text-strong); } .ins-card-l { font-size: 11px; color: var(--muted); } .ins-section { margin-bottom: 18px; } .ins-section h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .ins-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .ins-bar-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 12px; } .ins-bar-label { flex: 0 0 96px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ins-bar-track { flex: 1; height: 12px; background: var(--panel-2); border-radius: 6px; overflow: hidden; } .ins-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 6px; } .ins-fill-g { background: #38bdf8; } .ins-fill-t { background: #a78bfa; } .ins-fill-a { background: #6b7280; } .ins-fill-r { background: #34d399; } .ins-fill-c { background: #fbbf24; } .ins-bar-val { flex: 0 0 auto; color: var(--text); font-variant-numeric: tabular-nums; } .ins-spark { display: flex; align-items: flex-end; gap: 3px; height: 90px; padding-top: 4px; } .ins-spark.small { height: 54px; } .ins-spark-col { flex: 1; min-width: 8px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; } .ins-spark-bar { width: 70%; min-height: 3px; background: var(--accent); border-radius: 3px 3px 0 0; } .ins-spark-bar.has-err { background: #f87171; } .ins-spark-x { font-size: 9px; color: var(--muted); margin-top: 3px; white-space: nowrap; } .ins-tools { display: flex; flex-direction: column; gap: 2px; } .ins-tool { border: 1px solid transparent; border-radius: 8px; } .ins-tool.open { border-color: var(--border); background: var(--panel-2); } .ins-tool-hd { display: flex; align-items: center; gap: 8px; padding: 6px 8px; cursor: pointer; font-size: 12px; border-radius: 8px; } .ins-tool-hd:hover { background: var(--panel-2); } .ins-tool-name { flex: 1; font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ins-tool-stat { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; } .ins-tool-stat.bad { color: #f87171; } .ins-tool-detail { padding: 6px 10px 12px; } .ins-tool-clean { color: var(--muted); font-size: 11px; } .ins-errs { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .ins-errs li { font-size: 12px; color: var(--text); } .ins-err-n { color: #f87171; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .ins-two { grid-template-columns: 1fr; gap: 12px; } .ins-bar-label { flex-basis: 72px; } }