/* ============================================================
   Linari Worktime — design tokens (light + dark), app shell, components.
   Logical properties (inline-start/end) keep Persian RTL and English LTR identical.
   ============================================================ */

@font-face { font-family: Vazirmatn; src: url('lib/vazirmatn/Vazirmatn-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url('lib/vazirmatn/Vazirmatn-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url('lib/vazirmatn/Vazirmatn-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url('lib/vazirmatn/Vazirmatn-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
    --bg: #f4f6fa;
    --card: #ffffff;
    --surface-2: #f8f9fc;
    --text: #141a2a;
    --muted: #697386;
    --border: #e5e8ef;
    --primary: #2f5bea;
    --primary-soft: #edf1fe;
    --ok: #12825a;
    --ok-soft: #e5f5ec;
    --warn: #b36a00;
    --warn-soft: #fff3df;
    --err: #cf3440;
    --err-soft: #fdecee;
    --window: #eceff5;
    --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px rgba(16, 24, 40, .04);
    --radius: 14px;
    --sidebar: 252px;
    --topbar: 58px;
    /* Chart marks (agreement progress): validated as a set, one step darker in dark mode. */
    --chart-approved: #12825a;
    --chart-done: #2f5bea;
    --chart-fix: #cf3440;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0f131b;
        --card: #171c26;
        --surface-2: #1d2330;
        --text: #e7eaf1;
        --muted: #98a1b3;
        --border: #2a3140;
        --primary: #7c9cff;
        --primary-soft: #1f2a4a;
        --ok: #3fc48a;
        --ok-soft: #173427;
        --warn: #f0a93b;
        --warn-soft: #3a2c14;
        --err: #ff6b76;
        --err-soft: #3d1c21;
        --window: #222a38;
        --shadow: none;
        --chart-approved: #2fae78;
        --chart-done: #6a8cf5;
        --chart-fix: #ee5864;
        color-scheme: dark;
    }
}
/* Chosen explicitly with the theme switch (top bar); "light" above overrides the device setting. */
:root[data-theme="dark"] {
    --bg: #0f131b;
    --card: #171c26;
    --surface-2: #1d2330;
    --text: #e7eaf1;
    --muted: #98a1b3;
    --border: #2a3140;
    --primary: #7c9cff;
    --primary-soft: #1f2a4a;
    --ok: #3fc48a;
    --ok-soft: #173427;
    --warn: #f0a93b;
    --warn-soft: #3a2c14;
    --err: #ff6b76;
    --err-soft: #3d1c21;
    --window: #222a38;
    --shadow: none;
    --chart-approved: #2fae78;
    --chart-done: #6a8cf5;
    --chart-fix: #ee5864;
    color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* e.g. .form-row label sets display:flex, which would override hidden */

html { background: var(--bg); }   /* behind the phone's bars and any over-scroll, in the theme's colour */
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Vazirmatn, "Segoe UI", Tahoma, sans-serif;
    font-size: 15px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.icon { width: 20px; height: 20px; flex: none; }

/* ---------- App shell: sidebar (desktop) / drawer + bottom bar (phone) ---------- */
.sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--sidebar); z-index: 30;
    display: flex; flex-direction: column; background: var(--card); border-inline-end: 1px solid var(--border);
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; height: var(--topbar); padding: 0 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text); font-size: 16px; }
.brand:hover { text-decoration: none; }
.brand-mark {
    width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center;
    background: linear-gradient(135deg, var(--primary), #6f8dff); color: #fff; font-size: 15px;
}
.sidebar nav { flex: 1; overflow-y: auto; padding: 4px 10px 12px; }
.nav-group { margin-top: 10px; }
.nav-title { font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 10px 4px; letter-spacing: .02em; }
.nav-link {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
    color: var(--muted); font-weight: 500; margin: 1px 0;
}
.nav-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-link.active { background: var(--primary-soft); color: var(--primary); }
.nav-link span { flex: 1; }
.count {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--err); color: #fff;
    font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; line-height: 1;
}
.sidebar-foot { display: flex; align-items: center; gap: 6px; padding: 10px; border-top: 1px solid var(--border); }
.user-chip { flex: 1; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; color: var(--text); min-width: 0; }
.user-chip:hover, .user-chip.active { background: var(--surface-2); text-decoration: none; }
.avatar {
    width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: var(--primary-soft); color: var(--primary); font-weight: 700; position: relative;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--card); }
.avatar.xs { width: 20px; height: 20px; font-size: 10px; }
.with-avatar { display: inline-flex; align-items: center; gap: 6px; }.who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who small { color: var(--muted); font-size: 12px; }

.topbar {
    position: sticky; top: 0; z-index: 20; height: var(--topbar);
    display: flex; align-items: center; gap: 10px; padding: 0 24px;
    background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}
.topbar-title { font-weight: 600; color: var(--muted); }
.topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }
.icon-btn {
    display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 10px;
    border: 1px solid transparent; background: transparent; color: var(--muted); position: relative; cursor: pointer;
}
.icon-btn:hover { background: var(--card); border-color: var(--border); color: var(--text); text-decoration: none; }
.icon-btn.active { color: var(--primary); }
.icon-btn.lang { font-weight: 700; font-size: 13px; border-color: var(--border); background: var(--card); }
.badge {
    position: absolute; top: 2px; inset-inline-end: 2px; min-width: 17px; height: 17px;
    background: var(--err); color: #fff; border-radius: 9px; font-size: 10px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
}

body.app { padding-inline-start: var(--sidebar); }
.container { max-width: 1180px; margin: 0 auto; padding: 24px 24px 56px; }
.only-mobile { display: none !important; }
.bottom-nav, .scrim { display: none; }

@media (max-width: 999px) {
    body.app { padding-inline-start: 0; padding-bottom: 76px; }
    .only-mobile { display: inline-flex !important; }
    .only-desktop { display: none !important; }
    .topbar { padding: 0 10px; }
    .sidebar { transition: transform .22s ease; box-shadow: 0 0 40px rgba(0, 0, 0, .18); }
    [dir="rtl"] .sidebar { transform: translateX(100%); }
    [dir="ltr"] .sidebar { transform: translateX(-100%); }
    body.nav-open .sidebar { transform: none; }
    body.nav-open .scrim { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(10, 14, 24, .4); }
    .container { padding: 16px 12px 32px; }
    .bottom-nav {
        display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 20;
        background: var(--card); border-top: 1px solid var(--border);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    }
    .bottom-nav a, .bottom-nav button {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative;
        font: inherit; font-size: 11px; color: var(--muted); background: none; border: 0; padding: 4px 0; border-radius: 10px;
    }
    .bottom-nav a:hover { text-decoration: none; }
    .bottom-nav .active { color: var(--primary); }
    .bottom-nav .count { position: absolute; top: 0; inset-inline-start: 55%; }
}

/* ---------- Typography & layout ---------- */
h1 { font-size: 22px; font-weight: 700; margin: 0 0 18px; letter-spacing: -.01em; }
h2 { font-size: 16px; font-weight: 700; margin: 0 0 14px; }
h3 { font-size: 15px; font-weight: 600; margin: 18px 0 8px; }

.card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 20px; margin-bottom: 18px; box-shadow: var(--shadow);
}
.card > h2:first-child { display: flex; align-items: center; gap: 8px; }
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.grid > .card { margin-bottom: 0; }
.grid + .card, .grid + .grid { margin-top: 18px; }

.alert { padding: 11px 16px; border-radius: 12px; margin-bottom: 18px; border: 1px solid transparent; }
.alert.ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 20%, transparent); }
.alert.err { background: var(--err-soft); color: var(--err); border-color: color-mix(in srgb, var(--err) 20%, transparent); }

/* ---------- Buttons ---------- */
.btn, button {
    font: inherit; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: var(--card);
    color: var(--text); padding: 7px 16px; border-radius: 10px; display: inline-flex; align-items: center; gap: 6px;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.btn:hover, button:hover { border-color: color-mix(in srgb, var(--muted) 40%, var(--border)); text-decoration: none; }
.btn.primary, button.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover, button.primary:hover { box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent); }
.btn.ok, button.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.danger, button.danger { background: var(--err); border-color: var(--err); color: #fff; }
button.link { border: 0; background: none; color: var(--muted); padding: 4px 6px; }
button:disabled { opacity: .5; cursor: not-allowed; }

.punch {
    width: 100%; justify-content: center; padding: 20px; font-size: 20px; font-weight: 700; border-radius: 16px; border: 0; color: #fff;
    box-shadow: 0 8px 24px -8px currentColor;
}
.punch.in { background: linear-gradient(135deg, #12825a, #1aa574); }
.punch.out { background: linear-gradient(135deg, #cf3440, #e5575f); }
.punch:hover { filter: brightness(1.05); }

/* ---------- Forms ---------- */
form.inline { display: inline; }
.form-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 14px; }
.form-row label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
input, select, textarea {
    font: inherit; padding: 7px 11px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--card); color: var(--text); min-height: 38px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
input[type=checkbox] { min-height: 0; width: 17px; height: 17px; accent-color: var(--primary); }
input.date { width: 130px; direction: ltr; text-align: center; }
fieldset.people { border: 1px solid var(--border); border-radius: 12px; margin: 10px 0 14px; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
fieldset.people legend { font-size: 13px; color: var(--muted); padding: 0 4px; }
fieldset.people label.check { display: flex; align-items: center; gap: 6px; }
.form-row label.check { flex-direction: row; align-items: center; align-self: flex-end; padding-bottom: 8px; }
label.block { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
label.block textarea { width: 100%; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: start; vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { color: var(--muted); font-weight: 600; font-size: 13px; background: var(--surface-2); white-space: nowrap; }
tbody tr:hover td { background: color-mix(in srgb, var(--primary-soft) 45%, transparent); }
tr.off td { background: var(--surface-2); color: var(--muted); }
td.num { direction: ltr; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Pills & text colours ---------- */
.pill { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.pill.Pending { background: var(--warn-soft); color: var(--warn); }
.pill.Approved { background: var(--ok-soft); color: var(--ok); }
.pill.Rejected { background: var(--err-soft); color: var(--err); }
.pill.Cancelled { background: var(--surface-2); color: var(--muted); }
.pill.info { background: var(--primary-soft); color: var(--primary); }

.muted { color: var(--muted); font-size: 13px; }
.dev { font-size: 12px; color: var(--muted); direction: ltr; text-align: left; }
.late { color: var(--warn); font-weight: 600; }
.deficit { color: var(--err); font-weight: 600; }
.overtime { color: var(--ok); font-weight: 600; }
/* Presence before working hours: informational only (not overtime), so no "good/bad" colour. */
.early { font-weight: 600; }

/* ---------- Stat tiles ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
/* Exactly four tiles (today's card): a tidy 2×2 instead of 3 + 1. */
.stats:has(> .stat:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
.stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.stat b { display: block; font-size: 22px; font-weight: 700; direction: ltr; text-align: start; font-variant-numeric: tabular-nums; }
[dir="rtl"] .stat b { text-align: end; }
.stat span { font-size: 12px; color: var(--muted); }

/* ---------- Month bar chart ---------- */
.chart-wrap { overflow-x: auto; }
svg.month-bars { display: block; width: 100%; min-width: 560px; height: auto; font-family: inherit; }
svg.month-bars .grid { stroke: var(--border); stroke-width: 1; }
svg.month-bars .axis { font-size: 10px; fill: var(--muted); text-anchor: end; }
svg.month-bars .daylabel { font-size: 10px; fill: var(--muted); text-anchor: middle; }
svg.month-bars .todaylabel { font-size: 9px; fill: var(--primary); text-anchor: middle; font-weight: 700; }
svg.month-bars .today .daylabel { fill: var(--primary); font-weight: 700; }
svg.month-bars .future .daylabel { fill: color-mix(in srgb, var(--muted) 50%, transparent); }
svg.month-bars .hit { fill: transparent; cursor: pointer; }
svg.month-bars g.day:hover .hit, svg.month-bars g.day.selected .hit { fill: var(--primary-soft); }
svg.month-bars .window { fill: var(--window); }
/* "My attendance": each check-in → check-out band is clickable (correction request). */
svg.month-bars .sess-hit { fill: transparent; stroke: transparent; stroke-width: 1.5; cursor: pointer; }
svg.month-bars .sess-hit:hover { stroke: var(--primary); fill: color-mix(in srgb, var(--primary) 12%, transparent); }
svg.month-bars .seg { stroke: var(--card); stroke-width: 1; }   /* 1px surface gap between segments */
.seg-work { fill: var(--ok); background: var(--ok); }
.seg-early { fill: #8fd0b1; background: #8fd0b1; }
.seg-late { fill: #e08a00; background: #e08a00; }
.seg-deficit { fill: var(--err); background: var(--err); }
.seg-leave { fill: var(--primary); background: var(--primary); }
.seg-overtime { fill: #7c4dcc; background: #7c4dcc; }
.seg-mission { fill: #139a8c; background: #139a8c; }
.seg-meeting { fill: #b04f8e; background: #b04f8e; }
.chart-legend .window-key { background: var(--window); border: 1px solid var(--border); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); margin: 10px 0; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 4px; }
.chart-tip { white-space: pre-line; background: var(--primary-soft); color: var(--text); border-radius: 10px; padding: 8px 12px; font-size: 14px; margin-top: 6px; }

/* ---------- Live notification toasts ---------- */
#toasts { position: fixed; inset-inline-end: 16px; bottom: 16px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; max-width: min(360px, calc(100vw - 32px)); }
@media (max-width: 999px) { #toasts { bottom: 84px; } }
.toast {
    position: relative; background: var(--card); border: 1px solid var(--border); border-inline-start: 4px solid var(--primary);
    border-radius: 12px; padding: 10px 34px 10px 14px; box-shadow: 0 10px 30px rgba(20, 30, 50, .18);
    cursor: pointer; font-size: 14px; white-space: pre-line; transition: opacity .5s, transform .5s; animation: toast-in .25s ease-out;
}
[dir="rtl"] .toast { padding: 10px 14px 10px 34px; }
.toast b { display: block; margin-bottom: 2px; }
.toast-close {
    position: absolute; top: 6px; inset-inline-end: 6px; width: 24px; height: 24px; padding: 0; justify-content: center;
    border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 14px;
}
.toast-close:hover { background: var(--bg); color: var(--text); }
.toast.hide { opacity: 0; transform: translateY(8px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.notif { border-bottom: 1px solid var(--border); padding: 12px 0; }
.notif:last-child { border-bottom: 0; }
.notif.unread { font-weight: 600; }

/* ---------- Sign-in page ---------- */
body.guest { min-height: 100vh; background: radial-gradient(1200px 600px at 50% -10%, var(--primary-soft), var(--bg)); }
.login-box { max-width: 400px; margin: 14vh auto; text-align: center; }
.gh { background: #24292f; color: #fff; border: 0; padding: 12px 22px; font-size: 16px; border-radius: 12px; display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 640px) {
    .hide-sm { display: none; }
    h1 { font-size: 19px; }
    .card { padding: 16px; }
}

/* Jalali datepicker sits above the sticky header and cards */
jdp-container { z-index: 2000 !important; }
/* the page's generic select padding squeezes the picker's month/year boxes */
jdp-container select { padding: 2px 4px !important; min-width: 64px; font-size: 14px; min-height: 0 !important; }

/* ---------- Page pieces ---------- */
ul.team-leaves { list-style: none; margin: 0; padding: 0; }
ul.team-leaves li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
ul.team-leaves li:last-child { border-bottom: 0; }
details.rules { margin: 0 0 14px; font-size: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
details.rules summary { cursor: pointer; }
details.rules ul { margin: 6px 0 0; padding-inline-start: 20px; color: var(--muted); }
details.rules li { margin: 3px 0; }
a.plain { color: inherit; text-decoration: none; }
a.plain:hover { text-decoration: underline; }
.rules-page h2 { margin-top: 22px; }
.rules-page h2:first-child { margin-top: 0; }
.rules-page ul { padding-inline-start: 20px; }
.rules-page li { margin: 4px 0; line-height: 1.8; }
.rules-page details.rules { background: none; border: 0; padding: 0; }

/* Dashboard: team card with two columns */
.team-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 28px; }
.team-cols h3 { margin-top: 0; font-size: 14px; color: var(--muted); font-weight: 600; }
.present-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.present-list .chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 3px; padding-inline-end: 14px;
    border-radius: 999px; background: var(--ok-soft); color: var(--text); font-size: 13px; font-weight: 500; white-space: nowrap;
}
.present-list .chip .avatar { width: 28px; height: 28px; font-size: 12px; box-shadow: 0 0 0 2px var(--ok); }
.today-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.today-head h1 { margin: 0; }

/* ---------- Page header with actions ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 18px; }
.page-head h1 { margin: 0; }
.page-head .actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Modal (not <dialog>: the Jalali datepicker must be able to sit above it) ---------- */
table.monthly-sends td:first-child, table.monthly-sends td:first-child .muted { white-space: nowrap; }
table.monthly-sends td.recipients { font-size: 12px; color: var(--muted); white-space: nowrap; text-align: start; }
ul.history { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; color: var(--muted); }
ul.history li { padding: 2px 0; }
/* Label / value pairs (status boxes, confirmation dialogs). */
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; align-items: center; }
dl.facts dt { color: var(--muted); font-size: 13px; }
dl.facts dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.modal { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: 16px; background: rgba(10, 14, 24, .45); }
.modal[hidden] { display: none !important; }
.modal-box {
    width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
    background: var(--card); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
    animation: modal-in .18s ease-out;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 0; }
.modal-head h2 { margin: 0; }
.modal-body { padding: 16px 20px 20px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.modal .form-row label { flex: 1 1 140px; }
.modal .form-row label input:not([type=checkbox]), .modal .form-row label select { width: 100%; }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
    .modal { place-items: end center; padding: 0; }
    .modal-box { border-radius: 18px 18px 0 0; max-height: 92vh; }
}

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 16px; overflow-x: auto; }
.tabs a { color: var(--muted); padding: 7px 14px; border-radius: 9px; white-space: nowrap; font-weight: 600; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.active { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.tabs button { border: 0; background: none; color: var(--muted); padding: 7px 14px; border-radius: 9px; white-space: nowrap; font-weight: 600; }
.tabs button:hover { color: var(--text); }
.tabs button.active { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.tabs .count { margin-inline-start: 4px; }
.tabs .count.zero { background: var(--border); color: var(--muted); }

/* ---------- Request cards (approvals, my requests) ---------- */
.req-list { display: grid; gap: 12px; }
.req {
    display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: start;
    border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; background: var(--card);
}
.req-title { font-weight: 600; }
.req-who { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.req-who .avatar { width: 28px; height: 28px; font-size: 13px; }
.req-meta { color: var(--muted); font-size: 13px; }
.req-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.req-review { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 10px; border-top: 1px dashed var(--border); }
.req-review input { flex: 1 1 180px; }
.empty { text-align: center; color: var(--muted); padding: 28px 12px; }
.empty .icon { width: 36px; height: 36px; opacity: .5; display: block; margin: 0 auto 6px; }
@media (max-width: 640px) {
    .req { grid-template-columns: 1fr; }
    .req-side { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------- Team board (manager report) ---------- */
.range-inline .form-row { margin: 0; }
.board { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.people { position: sticky; top: calc(var(--topbar) + 12px); padding: 8px; max-height: calc(100vh - var(--topbar) - 24px); overflow-y: auto; margin: 0; }
.person { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; color: var(--text); }
.person:hover { background: var(--surface-2); text-decoration: none; }
.person.active { background: var(--primary-soft); }
.person.active b { color: var(--primary); }
.person .avatar { position: relative; }
.person .avatar.team { background: var(--surface-2); color: var(--muted); }
.person .avatar.team .icon { width: 18px; height: 18px; }
.person .who small { font-size: 12px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--border); vertical-align: middle; }
.avatar .dot { position: absolute; bottom: 0; inset-inline-end: 0; width: 11px; height: 11px; border: 2px solid var(--card); }
.dot.present { background: var(--ok); }
.dot.leave { background: var(--primary); }
.dot.meeting { background: #b04f8e; }
.dot.late { background: #e08a00; }
.dot.off { background: color-mix(in srgb, var(--muted) 45%, transparent); }
a .dot { margin-inline-end: 6px; }
.avatar .dot, .vt-names .dot { margin: 0; }
.vt-names .dot { margin-inline-end: 4px; }

@media (max-width: 999px) {
    .board { grid-template-columns: minmax(0, 1fr); }
    .people { position: static; max-height: none; display: flex; gap: 6px; overflow-x: auto; padding: 6px; }
    .person { flex: none; }
    .person .who small { display: none; }
}


/* Values with a small bar under them, for comparing a column at a glance */
.cellbar { display: flex; flex-direction: column; gap: 3px; min-width: 90px; }
.cellbar span { font-variant-numeric: tabular-nums; direction: ltr; text-align: start; }
[dir="rtl"] .cellbar span { text-align: end; }
.cellbar i { display: block; height: 5px; border-radius: 3px; min-width: 0; opacity: .85; }
table.sortable th[data-dir="asc"]::after { content: " ▲"; font-size: 10px; }
table.sortable th[data-dir="desc"]::after { content: " ▼"; font-size: 10px; }

/* ---------- Day-by-day table: one tidy row per day ---------- */
table.days td { vertical-align: middle; }
table.days th.c, table.days td.c { text-align: center; }
table.days td.day { white-space: nowrap; }
table.days td.day b { font-weight: 600; }
table.days .zero { color: color-mix(in srgb, var(--muted) 60%, transparent); font-weight: 400; }
.num-inline { direction: ltr; unicode-bidi: isolate; font-size: 12px; }
.sess { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; padding: 2px 0; white-space: nowrap; }
.sess-block + .sess-block { border-top: 1px dashed var(--border); margin-top: 4px; padding-top: 6px; }
.sess-dev { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 11.5px; color: var(--muted); direction: ltr; unicode-bidi: isolate; justify-content: flex-end; }
[dir="ltr"] .sess-dev { justify-content: flex-start; }
.sess-add { display: inline-block; margin-inline-start: 8px; font-size: 12.5px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--primary); cursor: pointer; font: inherit; }
.link-btn:hover { text-decoration: underline; }
.link-btn.with-avatar { color: var(--text); }
.link-btn.with-avatar .icon { width: 14px; height: 14px; color: var(--muted); }
.small-note { font-size: 11.5px; }
.link-btn.sess-add { font-size: 12.5px; }
.pick-list > div { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pick-list .pick { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.sess-time { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; font-weight: 500; }
.sess-icon { color: var(--muted); display: inline-flex; cursor: help; }
.sess-icon .icon { width: 16px; height: 16px; }
.icon-btn.sm { min-width: 28px; height: 28px; padding: 0 4px; }
.icon-btn.sm .icon { width: 15px; height: 15px; }
.tag { display: inline-block; font-size: 11.5px; font-weight: 500; padding: 1px 8px; border-radius: 6px; white-space: nowrap; cursor: default; margin: 1px 0; }
.tag.info { background: var(--primary-soft); color: var(--primary); }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.err { background: var(--err-soft); color: var(--err); }
.tag.meet { background: color-mix(in srgb, #b04f8e 14%, transparent); color: #b04f8e; }
td.notes { display: table-cell; }
td.notes .tag { margin-inline-end: 4px; }

/* Today's team chart, vertical: a column per person, time of day upwards (morning at the bottom) */
.vt-wrap { overflow-x: auto; }
.vt { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: 300px auto; gap: 6px 8px; min-width: min(100%, 520px); }
.vt-axis { position: relative; }
.vt-axis span { position: absolute; inset-inline-end: 0; transform: translateY(50%); font-size: 11px; color: var(--muted); unicode-bidi: isolate; }
.vt-plot { position: relative; display: grid; gap: 10px; align-items: stretch; border-bottom: 1px solid var(--border); }
.vt-grid { position: absolute; inset-inline: 0; height: 1px; background: var(--border); }
.vt-now { position: absolute; inset-inline: 0; height: 2px; background: var(--primary); z-index: 2; }
/* One slim stacked bar per person, centred in its column. The working window is the bar's empty track, so a
   short day shows as unfilled track; touching segments read as one bar (2px card-coloured seams, outer ends
   rounded only). */
.vt-col { position: relative; display: block; border-radius: 8px; transition: background .15s; }
.vt-col:hover { background: var(--primary-soft); text-decoration: none; }
.vt-window, .vt-seg { position: absolute; inset-inline: 0; margin-inline: auto; width: min(26px, 62%); }
.vt-window { background: var(--window); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--border); }
.vt-seg { border-radius: 6px; min-height: 4px; box-sizing: border-box; transition: filter .15s; }
.vt-seg.jb { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.vt-seg.ja { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 2px solid var(--card); }
.vt-seg:hover { filter: brightness(1.12); }
.vt-names { grid-column: 2; display: grid; gap: 10px; }
.vt-names a { font-size: 12px; line-height: 1.25; text-align: center; color: var(--text); overflow: hidden; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vt-names .dot { width: 7px; height: 7px; margin-inline-end: 4px; }

/* ---------- Chat (/Chat) ---------- */
/* Owner, 2026-10-10: the chat uses the whole width (no 1180px page cap) and a Teams-like density —
   14px text, tighter bubbles, 2px between one person's messages and more space where the sender changes. */
@media (min-width: 1000px) {
    .container:has(> .chat) { max-width: none; padding: 12px 16px; }
    .container:has(> .chat) .chat { height: calc(100vh - var(--topbar) - 24px); }
}
.chat { display: grid; grid-template-columns: 300px 1fr; height: calc(100vh - var(--topbar) - 48px); min-height: 420px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.chat-side { display: flex; flex-direction: column; border-inline-end: 1px solid var(--border); min-height: 0; }
.chat-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 8px; }
.chat-side-head h2 { margin: 0; font-size: 17px; }
.chat-side-actions { display: flex; gap: 6px; }
.chat-side-actions .btn { padding: 5px 10px; font-size: 13px; }
.chat-filter { margin: 0 12px 8px; }
.chat-convs { list-style: none; margin: 0; padding: 0 6px 8px; overflow-y: auto; flex: 1; }
.chat-conv { display: flex; gap: 10px; align-items: center; padding: 9px 8px; border-radius: 10px; cursor: pointer; }
.chat-conv:hover { background: var(--surface-2); }
.chat-conv.active { background: var(--primary-soft); }
.chat-conv-text { flex: 1; min-width: 0; }
.chat-conv-text .row1, .chat-conv-text .row2 { display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.chat-conv-text .row1 b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-conv-text small { color: var(--muted); font-size: 11px; flex: none; }
.chat-conv-text .row2 span { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-conv.unread .row2 span { color: var(--text); font-weight: 600; }
.chat-none { padding: 16px; }
.avatar.group { background: var(--surface-2); color: var(--muted); }
.avatar .presence { position: absolute; bottom: -1px; inset-inline-end: -1px; width: 11px; height: 11px; border-radius: 50%;
    border: 2px solid var(--card); background: var(--border); }
.avatar .presence.online, .chat-avail .presence.online { background: var(--ok); }
.avatar .presence.away, .avatar .presence.brb, .chat-avail .presence.away, .chat-avail .presence.brb { background: var(--warn); }
.avatar .presence.call, .avatar .presence.busy, .avatar .presence.dnd, .chat-avail .presence.busy, .chat-avail .presence.dnd { background: var(--err); }
.avatar .presence.dnd::after, .chat-avail .presence.dnd::after { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 1.5px; margin-top: -.75px; background: #fff; border-radius: 1px; }
.chat-avail { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.chat-avail .check { display: flex; align-items: center; gap: 8px; }
.chat-avail .presence { position: relative; display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; }
.chat-status-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.chat-status-quick button { min-height: 0; padding: 3px 10px; border-radius: 14px; font-size: 13px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
/* Mentions: "@" in the list header (count = unread mentions) and its list. */
.chat-mentions-btn { position: relative; font-weight: 700; font-size: 16px; }
.chat-mentions-btn .count { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
.chat-mention-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 65vh; overflow-y: auto; }
.chat-mention-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 10px; cursor: pointer; }
.chat-mention-item:hover { background: var(--surface-2); }
.chat-mention-item.unread { background: var(--primary-soft); }
.chat-mention-item .avatar { flex: none; width: 32px; height: 32px; font-size: 13px; }
.chat-mention-text { flex: 1; min-width: 0; line-height: 1.45; }
.chat-mention-text .row1 { display: flex; justify-content: space-between; gap: 8px; }
.chat-mention-text .row1 b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-mention-text small { color: var(--muted); font-size: 11px; flex: none; }
.chat-mention-text .row2 { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Picture viewer (in the page; ← / → between the chat's pictures). Always dark, whatever the theme. */
.chat-viewer { position: fixed; inset: 0; z-index: 2000; background: rgba(8, 10, 16, .92); display: flex; align-items: center; justify-content: center; direction: ltr; }
.chat-viewer[hidden] { display: none; }
.chat-viewer img { max-width: calc(100vw - 140px); max-height: calc(100vh - 110px); object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); user-select: none; }
.chat-viewer-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: #e8eaf0; font-size: 13px; }
.chat-viewer-count { min-width: 44px; opacity: .8; }
.chat-viewer-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }
.chat-viewer-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; min-height: 0; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .1); color: #fff; font-size: 18px; text-decoration: none; cursor: pointer; }
.chat-viewer-btn:hover, .chat-viewer-nav:hover { background: rgba(255, 255, 255, .22); }
.chat-viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; min-height: 0; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .1); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.chat-viewer-nav.prev { left: 16px; }
.chat-viewer-nav.next { right: 16px; }
.chat-viewer-nav[hidden] { display: none; }
@media (max-width: 640px) {
    .chat-viewer img { max-width: 100vw; max-height: calc(100vh - 120px); border-radius: 0; }
    .chat-viewer-nav { top: auto; bottom: 16px; transform: none; }
}
/* "Me" at the top of the chat list: my presence and status message; a click sets them. */
.chat-me { display: flex; align-items: center; gap: 10px; margin: 0 12px 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px;
    background: none; color: var(--text); text-align: start; min-height: 0; }
.chat-me:hover { background: var(--surface-2); }
.chat-me-text, .chat-member-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.chat-me-text b { font-size: 13px; }
.chat-me-text small, .chat-member-text small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-member-text small.state-online { color: var(--ok); }
.chat-member-text small.state-call, .chat-member-text small.state-busy, .chat-member-text small.state-dnd { color: var(--err); }

.chat-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.chat-head-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.chat-head-text small { color: var(--muted); font-size: 12px; }
.chat-back { display: none; font-size: 22px; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 12px 20px; display: flex; flex-direction: column; gap: 2px; background: var(--bg); }
.chat-msg.first { margin-top: 10px; }
/* Group chats: the others' messages (always on the LEFT) carry the sender's picture at the start of each run. */
.chat-msg.has-av { padding-left: 40px; }
.chat-msg-av { position: absolute !important; left: 0; top: 0; width: 32px; height: 32px; font-size: 13px; }
.chat-empty { margin: auto; }
.chat-older { align-self: center; margin-bottom: 8px; font-size: 12px; }
.chat-day { align-self: center; margin: 10px 0 6px; padding: 2px 10px; border-radius: 10px; background: var(--card); color: var(--muted); font-size: 12px; }
/* Like every messenger, in both languages: my messages on the RIGHT, the others' on the LEFT (owner, 2026-10-10).
   Flex start / end follow the page direction, so right-to-left pages swap them. */
.chat-msg { position: relative; display: flex; flex-direction: column; align-items: flex-start; max-width: min(85%, 960px); align-self: flex-start; }
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
[dir="rtl"] .chat-msg { align-self: flex-end; align-items: flex-end; }
[dir="rtl"] .chat-msg.mine { align-self: flex-start; align-items: flex-start; }
.chat-bubble { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 5px 12px 4px; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; }
.chat-msg.mine .chat-bubble { background: var(--primary-soft); border-color: transparent; }
.chat-msg.deleted .chat-body { color: var(--muted); font-style: italic; }
.chat-msg.flash .chat-bubble { box-shadow: 0 0 0 3px var(--warn); }
.chat-sender { font-size: 12px; font-weight: 700; color: var(--primary); margin-bottom: 2px; }
.chat-reply { border-inline-start: 3px solid var(--primary); padding: 2px 8px; margin-bottom: 4px; border-radius: 4px; background: var(--surface-2);
    font-size: 12px; cursor: pointer; display: flex; flex-direction: column; max-width: 100%; }
.chat-reply span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-body { white-space: normal; line-height: 1.5; }
.chat-body .mention { color: var(--primary); font-weight: 600; }
.chat-body .mention.me { background: var(--warn-soft); color: var(--warn); border-radius: 4px; padding: 0 2px; }
.chat-meta { font-size: 11px; line-height: 1.3; color: var(--muted); margin-top: 1px; text-align: end; direction: ltr; }
.chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.chat-reaction { padding: 1px 7px; min-height: 0; font-size: 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); }
.chat-reaction.mine { border-color: var(--primary); background: var(--primary-soft); }
/* Message actions (Teams-style): one floating bar / menu / picker attached to the page (position: fixed), placed by
   chat.js next to the message and kept inside the window — never clipped by the scrolling list. */
.chat-bar, .chat-menu, .chat-picker { position: fixed; z-index: 1400; background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.chat-bar[hidden], .chat-menu[hidden], .chat-picker[hidden] { display: none; }
.chat-bar { display: flex; align-items: center; gap: 2px; padding: 3px 5px; white-space: nowrap; direction: ltr; }
.chat-bar button, .chat-picker button { min-height: 0; border: 0; background: none; padding: 4px 6px; border-radius: 8px; font-size: 18px; line-height: 1; color: var(--text); }
.chat-bar button:hover, .chat-picker button:hover, .chat-menu button:hover { background: var(--surface-2); }
.chat-bar .sep { width: 1px; height: 20px; background: var(--border); margin: 0 3px; }
.chat-picker { display: grid; grid-template-columns: repeat(4, auto); padding: 4px; }
.chat-menu { display: flex; flex-direction: column; min-width: 150px; padding: 4px; }
.chat-menu button { min-height: 0; border: 0; background: none; padding: 8px 12px; border-radius: 8px; text-align: start; font-size: 14px; color: var(--text); }
.chat-menu button.danger { color: var(--err); background: none; }
/* Files & pictures in a message */
.chat-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.chat-img img { display: block; max-width: 280px; max-height: 260px; border-radius: 10px; object-fit: cover; background: var(--surface-2); }
.chat-file { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface-2); color: var(--text); text-decoration: none; max-width: 280px; }
.chat-file span:last-child { display: flex; flex-direction: column; min-width: 0; }
.chat-file b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.chat-file small { color: var(--muted); font-size: 11px; direction: ltr; }
.chat-file-icon { font-size: 20px; }
/* Markdown */
.chat-body code { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12.5px; background: var(--surface-2); padding: 1px 4px; border-radius: 4px; direction: ltr; unicode-bidi: isolate; }
.chat-body ul, .chat-body ol { margin: 2px 0; padding-inline-start: 22px; }
.chat-body li { margin: 1px 0; }
.chat-body blockquote { margin: 2px 0; padding-inline-start: 8px; border-inline-start: 3px solid var(--border); color: var(--muted); }
.chat-body .chat-h1 { font-size: 17px; font-weight: 700; } .chat-body .chat-h2 { font-size: 15px; font-weight: 700; } .chat-body .chat-h3 { font-weight: 700; }
.chat-body hr { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }
.chat-code { margin: 4px 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface-2); max-width: min(640px, 70vw); }
.chat-code-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 8px; font-size: 11px; color: var(--muted);
    border-bottom: 1px solid var(--border); direction: ltr; }
.chat-code-copy { min-height: 0; border: 0; background: none; color: var(--primary); font-size: 11px; padding: 2px 4px; }
.chat-code pre { margin: 0; padding: 8px 10px; overflow-x: auto; text-align: left; }
.chat-code code { background: none; padding: 0; white-space: pre; font-size: 12.5px; }
.chat-seen { align-self: flex-end; font-size: 11px; color: var(--muted); margin: -2px 4px 4px; }
[dir="rtl"] .chat-seen { align-self: flex-start; }   /* under my (right-hand) message */
.chat-compose { position: relative; padding: 8px 20px 14px; background: var(--bg); }
/* Teams-style: ONE rounded box — the text grows on top of the line, icons + divider + send arrow at its end;
   an accent line under the box while typing. */
.chat-compose-row { display: flex; gap: 6px; align-items: flex-end; padding: 4px 6px 4px 12px; background: var(--card);
    border: 1px solid var(--border); border-radius: 8px; box-shadow: inset 0 -2px 0 transparent; transition: box-shadow .15s, border-color .15s; }
[dir="rtl"] .chat-compose-row { padding: 4px 12px 4px 6px; }
.chat-compose-row:focus-within { border-color: var(--border); box-shadow: inset 0 -2px 0 var(--primary); }
.chat-compose-tools { display: flex; align-items: center; gap: 2px; flex: none; height: 38px; }
.chat-tool { display: inline-grid; place-items: center; width: 34px; height: 34px; min-height: 0; padding: 0; border: 0; border-radius: 6px;
    background: none; color: var(--muted); cursor: pointer; }
.chat-tool:hover { background: var(--surface-2); color: var(--primary); }
.chat-tool svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.chat-tool svg .dot { fill: currentColor; stroke: none; }
.chat-tool-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.chat-send { color: var(--primary); }
[dir="rtl"] .chat-send svg { transform: scaleX(-1); }   /* the arrow points the way the text runs */
.chat-emoji { position: absolute; bottom: 100%; inset-inline-start: 12px; z-index: 5; width: min(340px, calc(100% - 24px)); max-height: 220px; overflow-y: auto;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); padding: 6px;
    background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.chat-emoji[hidden] { display: none; }
.chat-emoji button { min-height: 0; border: 0; background: none; font-size: 20px; padding: 4px; border-radius: 6px; }
.chat-emoji button:hover { background: var(--surface-2); }
.chat-pending { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.chat-pending[hidden] { display: none; }
.chat-chip { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); font-size: 12px; max-width: 220px; }
.chat-chip img { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; }
.chat-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-chip.uploading { opacity: .6; }
.chat-chip button { min-height: 0; border: 0; background: none; padding: 0 2px; color: var(--muted); }
.chat { position: relative; }
.chat.dropping::after { content: attr(data-drop); position: absolute; inset: 8px; z-index: 20; display: grid; place-items: center; pointer-events: none;
    border: 3px dashed var(--primary); border-radius: var(--radius); background: color-mix(in srgb, var(--card) 80%, transparent); color: var(--primary); font-size: 18px; font-weight: 700; }
.chat-compose textarea { flex: 1; resize: none; min-height: 38px; max-height: 160px; line-height: 1.5; padding: 8px 0; border: 0; background: none;
    box-shadow: none; outline: none; font-size: 14px; }
.chat-compose textarea:focus { box-shadow: none; outline: none; border: 0; }
.chat-quote { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; padding: 4px 10px;
    border-inline-start: 3px solid var(--primary); background: var(--surface-2); border-radius: 6px; font-size: 13px; }
.chat-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-mention-pop { position: absolute; bottom: 100%; inset-inline-start: 12px; min-width: 220px; z-index: 5; padding: 4px;
    background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.chat-mention-pop button, .chat-person { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 6px 8px; border-radius: 8px; text-align: start; }
.chat-mention-pop button.active, .chat-person:hover { background: var(--surface-2); }
.chat-mention-pop { max-height: 300px; overflow-y: auto; }
.chat-mention-pop .avatar { width: 24px; height: 24px; font-size: 11px; }
.chat-people { display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; }
.chat-member-list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.chat-member-list li { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 8px; }
.chat-member-list li:hover { background: var(--surface-2); }
.chat-member-list li > span:not(.avatar) { flex: 1; min-width: 0; }   /* the name grows; the avatar keeps its round size */
.chat-member-list .avatar { flex: none; width: 32px; height: 32px; font-size: 13px; }
.chat-member-list button.text { border: 0; background: none; color: var(--err); font-size: 12px; }
@media (max-width: 999px) {
    .chat { grid-template-columns: 1fr; height: calc(100vh - var(--topbar) - 120px); }
    .chat .chat-main { display: none; }
    .chat.show-main .chat-side { display: none; }
    .chat.show-main .chat-main { display: flex; }
    .chat-back { display: inline-grid; }
    .chat-msg { max-width: 90%; }
    .chat-img img { max-width: 220px; }
}
/* Voice messages */
/* Always left-to-right (button on the left, progress from left to right), like every messenger. */
.chat-voice { display: flex; align-items: center; gap: 10px; min-width: 220px; padding: 2px 0 4px; direction: ltr; }
.chat-voice-play, .chat-rec-pause { width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 50%; border: 0; flex: none;
    background: var(--primary); color: #fff; display: grid; place-items: center; line-height: 0; }
.chat-voice-play svg, .chat-rec-pause svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.chat-rec-pause { width: 34px; height: 34px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.chat-rec.paused .chat-rec-pause { color: var(--err); }
.chat-rec.paused .chat-rec-dot { animation: none; background: var(--muted); }
.chat-voice-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--border); cursor: pointer; overflow: hidden; }
.chat-voice-bar i { display: block; height: 100%; width: 0; background: var(--primary); border-radius: 3px; }
.chat-voice-time { font-size: 12px; color: var(--muted); direction: ltr; min-width: 34px; }
.chat-rec { display: flex; align-items: center; gap: 10px; padding: 6px 4px; }
.chat-rec[hidden] { display: none; }
.chat-rec .muted { flex: 1; }
.chat-rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--err); animation: chat-rec-blink 1s infinite; }
@keyframes chat-rec-blink { 50% { opacity: .25; } }
.chat-compose-row[hidden] { display: none; }
/* Group picture */
.chat-group-photo { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.chat-group-photo > div { display: flex; gap: 8px; flex-wrap: wrap; }
.avatar.big { width: 72px; height: 72px; font-size: 28px; }
.text-danger { color: var(--err); }
.chat-conv-text .row2 span.draft { color: var(--err); font-style: italic; }
/* Fluent "Flat" emoji images (chat.js emojify): text-sized in messages, bigger alone and in the pickers. */
img.emoji { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -0.3em; margin: 0 .05em; }
.chat-body.jumbo img.emoji { width: 2.6em; height: 2.6em; vertical-align: middle; }
.chat-bar button.emoji img.emoji, .chat-picker button.emoji img.emoji { width: 24px; height: 24px; vertical-align: middle; margin: 0; }
.chat-emoji button img.emoji { width: 24px; height: 24px; margin: 0; }
.chat-reaction img.emoji { width: 16px; height: 16px; vertical-align: -3px; }
.chat-emoji { inset-inline-start: auto; inset-inline-end: 20px; }   /* opens above its button, now at the end of the composer */
/* Group settings: the admins carry a badge; admins can name others admin; a click on a member opens a direct chat. */
.chat-admin-badge { display: inline-block; margin-inline-start: 6px; padding: 0 7px; border-radius: 10px; font-size: 11px; font-weight: 600;
    line-height: 18px; background: var(--primary-soft); color: var(--primary); vertical-align: 1px; }
.chat-member-text.link { cursor: pointer; }
.chat-member-text.link:hover b { color: var(--primary); }
.chat-member-list button.chat-admin-btn { color: var(--primary); }
.chat-head-text { cursor: default; }/* ---------- Voice calls (call.js): a floating panel on every page ---------- */
.call { position: fixed; z-index: 1900; bottom: 20px; inset-inline-end: 20px; width: 300px; max-width: calc(100vw - 32px); }
.call[hidden] { display: none; }
.call.with-video { width: min(720px, calc(100vw - 32px)); }
.call-card { background: #1f2430; color: #f2f4f8; border-radius: 16px; padding: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.call-who { display: flex; align-items: center; gap: 12px; }
.call-who .avatar { width: 46px; height: 46px; font-size: 18px; flex: none; }
.call-card.ringing .call-who .avatar { animation: call-pulse 1.4s infinite; }
@keyframes call-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 100% { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0); } }
.call-who > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.call-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-who small { color: #b7bdca; font-size: 12px; direction: ltr; text-align: start; }
.call-actions { display: flex; justify-content: center; gap: 14px; margin-top: 14px; }
.call-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; min-height: 0; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.call-btn:hover { background: rgba(255, 255, 255, .22); }
.call-btn.on { background: #fff; color: #1f2430; }
.call-btn.ok { background: #16a34a; } .call-btn.ok:hover { background: #15803d; }
.call-btn.danger { background: #dc2626; } .call-btn.danger:hover { background: #b91c1c; }
.call-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.call-btn.danger svg, .call-btn.ok svg { fill: currentColor; stroke: none; }
.call-btn.small { position: absolute; top: 8px; inset-inline-end: 8px; width: 34px; height: 34px; background: rgba(0, 0, 0, .45); }
.call-btn.small svg { width: 18px; height: 18px; }
.call-video { position: relative; margin-top: 12px; border-radius: 10px; overflow: hidden; background: #000; }
.call-video[hidden] { display: none; }
.call-video video { display: block; width: 100%; max-height: 60vh; object-fit: contain; }
@media (max-width: 999px) { .call { bottom: 84px; } }
/* Calls in the chat: an icon line; missed / declined in red; "call back" in direct chats. */
.chat-call-msg { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.chat-call-msg svg { width: 16px; height: 16px; fill: currentColor; }
.chat-call-msg.miss { color: var(--err); }
.chat-call-again { min-height: 0; padding: 1px 10px; margin-inline-start: 8px; border-radius: 12px; font-size: 12px; border: 1px solid var(--border); background: var(--card); color: var(--primary); }
.chat-call-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
/* Month chart: leave waiting for approval — dashed, see-through, on top of what the day already shows. */
.seg-pending { fill: color-mix(in srgb, var(--primary) 28%, transparent); stroke: var(--primary); stroke-width: 1; stroke-dasharray: 3 2;
    background: color-mix(in srgb, var(--primary) 28%, transparent); border: 1px dashed var(--primary); box-sizing: border-box; }
/* "↓ 3 new messages" while reading older ones (like Teams). */
.chat-main { position: relative; }
.chat-new-pill { position: absolute; z-index: 6; left: 50%; transform: translateX(-50%); bottom: 96px; min-height: 0; padding: 6px 14px; border: 0; border-radius: 16px;
    background: var(--primary); color: #fff; font-size: 13px; font-weight: 600; box-shadow: var(--shadow); cursor: pointer; }
.chat-new-pill[hidden] { display: none; }
.chat-bar .bar-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; vertical-align: middle; }
/* Call panel: dragged by its top row, resized from its corner while showing a screen, foldable to a bar. */
.call-who { cursor: move; touch-action: none; user-select: none; }
.call.with-video { resize: both; overflow: hidden; min-width: 320px; min-height: 240px; height: min(480px, 80vh); }
.call.with-video .call-card { height: 100%; display: flex; flex-direction: column; box-sizing: border-box; }
.call.with-video .call-video { flex: 1; min-height: 0; }
.call.with-video .call-video video { height: 100%; max-height: none; }
.call-video-tools { position: absolute; top: 8px; inset-inline-end: 8px; display: flex; gap: 6px; }
.call-video-tools .call-btn.small { position: static; }
.call-show-video { display: block; width: 100%; margin-top: 10px; min-height: 0; padding: 6px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 13px; cursor: pointer; }
.call-show-video[hidden] { display: none; }
/* Muted chats: bell in the header, crossed bell next to the name in the list. */
.mute-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.chat-mute-btn.on { color: var(--err); }
.chat-conv-text .row1 b .mute-icon { width: 13px; height: 13px; color: var(--muted); vertical-align: -1px; }
/* A chat's files, pictures and links (header button). */
.chat-media-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.modal-box.wide { width: min(760px, calc(100vw - 32px)); }
.chat-media-tabs { display: flex; gap: 6px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.chat-media-tabs button { min-height: 0; padding: 8px 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-weight: 600; }
.chat-media-tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }
.chat-media-tabs small { color: var(--muted); font-weight: 400; }
.chat-media-body { max-height: 62vh; overflow-y: auto; }
.chat-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.chat-media-thumb { aspect-ratio: 1; min-height: 0; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
.chat-media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-media-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.chat-media-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 4px; border-bottom: 1px solid var(--border); align-items: center; }
.chat-media-list .chat-media-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chat-media-list small { grid-column: 1; color: var(--muted); font-size: 12px; }
.chat-media-list button.text { grid-column: 2; grid-row: 1 / span 2; border: 0; background: none; color: var(--primary); font-size: 12px; }
/* Side header: title + icon buttons on one row in every language. */
.chat-side-head { flex-wrap: nowrap; }
.chat-side-head h2 { white-space: nowrap; }
.chat-side-actions { flex: none; align-items: center; }
.chat-head-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Forward: the label on a forwarded message, and the chat picker. */
.chat-fwd { font-size: 12px; color: var(--muted); font-style: italic; margin-bottom: 2px; }
.chat-forward-preview { padding: 8px 10px; margin-bottom: 10px; border-inline-start: 3px solid var(--primary); background: var(--surface-2); border-radius: 6px; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-forward-list { list-style: none; margin: 10px 0 0; padding: 0; max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.chat-forward-list li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.chat-forward-list li:hover { background: var(--surface-2); }
.chat-forward-list li.picked { background: var(--primary-soft); }
.chat-forward-list .avatar { width: 30px; height: 30px; font-size: 12px; flex: none; }
.chat-forward-list .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-forward-list .tick { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border); display: grid; place-items: center; color: #fff; font-size: 13px; flex: none; }
.chat-forward-list li.picked .tick { background: var(--primary); border-color: var(--primary); }
/* Live connection lost (#32): a small bar at the top while it reconnects. */
.live-banner { position: fixed; z-index: 2100; top: 8px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 16px;
    background: var(--warn); color: #fff; font-size: 13px; font-weight: 600; box-shadow: var(--shadow); }
.live-banner[hidden] { display: none; }
/* A message still being sent, or not sent (#34). */
.chat-msg.sending .chat-bubble { opacity: .7; }
.chat-msg.failed .chat-bubble { border-color: var(--err); }
.chat-failed { color: var(--err); font-weight: 600; }
.chat-retry { min-height: 0; padding: 0 6px; margin-inline-start: 4px; border: 0; background: none; color: var(--primary); font-size: 11px; text-decoration: underline; cursor: pointer; }
/* Select mode: a tick circle beside each message, the picked ones highlighted, a bar instead of the composer. */
.chat-select-bar { display: none; align-items: center; gap: 8px; padding: 8px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; }
.chat-select-bar span { flex: 1; font-weight: 600; }
.chat-select-bar button { min-height: 0; padding: 6px 14px; }
.chat.selecting .chat-select-bar { display: flex; }
.chat.selecting .chat-compose-row, .chat.selecting .chat-quote { display: none; }
.chat.selecting .chat-msg[data-id] { cursor: pointer; padding-inline-start: 30px; }
.chat.selecting .chat-msg[data-id]::before { content: ""; position: absolute; inset-inline-start: 4px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
    border-radius: 50%; border: 1.5px solid var(--border); background: var(--card); }
.chat.selecting .chat-msg.picked::before { background: var(--primary); border-color: var(--primary); box-shadow: inset 0 0 0 3px var(--card); }
.chat.selecting .chat-msg.picked .chat-bubble { outline: 2px solid var(--primary); }
/* Login: Google button under the GitHub one. */
.login-or { margin: 18px 0 8px; font-size: 13px; }
.login-box a.google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 10px 14px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); font-weight: 600; text-decoration: none; }
.login-box a.google:hover { background: var(--surface-2); }
.login-box a.google svg { width: 20px; height: 20px; }
/* Guests (invited from outside, chat only): a badge by the name; the invite form in group settings. */
.chat-guest-badge { display: inline-block; margin-inline-start: 6px; padding: 0 7px; border-radius: 10px; font-size: 11px; font-weight: 600; line-height: 18px;
    background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); vertical-align: 1px; }
.chat-invite { display: flex; gap: 8px; flex-wrap: wrap; }
.chat-invite input { flex: 1 1 160px; min-width: 0; }
.chat-invite-hint { margin-top: 0; font-size: 12px; }

/* ---------- Phone app: "turn notifications on / install" (push.js) ---------- */
.app-banner {
    position: fixed; inset-inline-start: 16px; bottom: 16px; z-index: 999; max-width: min(420px, calc(100vw - 32px));
    background: var(--card); border: 1px solid var(--border); border-inline-start: 4px solid var(--primary); border-radius: 12px;
    padding: 12px 14px; box-shadow: 0 10px 30px rgba(20, 30, 50, .18); font-size: 14px; display: flex; flex-direction: column; gap: 10px;
}
.app-banner[hidden] { display: none; }
.app-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 999px) { .app-banner { bottom: 84px; inset-inline-end: 16px; max-width: none; } }

/* ---------- Chat on the phone (owner, 2026-10-16: "as tidy as Teams") ---------- */
.chat-head-text b, .chat-head-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .chat-back svg { transform: scaleX(-1); }
.chat-more-btn { display: none; }
.chat-more-btn svg { width: 20px; height: 20px; fill: currentColor; }
.chat-more-menu { min-width: 200px; }
@media (max-width: 999px) {
    /* The chat edge to edge: no card around it, no page margins. */
    .page-chat .container { padding: 0; }
    .page-chat .chat { height: calc(100dvh - var(--topbar) - 64px - env(safe-area-inset-bottom)); min-height: 0;
        border: 0; border-radius: 0; box-shadow: none; }
    /* In a chat: the site's top bar and bottom menu step aside; the chat fills what is visible (above the keyboard). */
    body.chat-in-conv { padding-bottom: 0; }
    body.chat-in-conv .topbar, body.chat-in-conv .bottom-nav, body.chat-in-conv .app-banner { display: none; }
    body.chat-in-conv .chat { position: fixed; inset-inline: 0; top: var(--vv-top, 0px); height: var(--vv-h, 100dvh); z-index: 15; }
    body.chat-in-conv .call { bottom: 96px; }
    body.chat-in-conv #toasts { bottom: 76px; }

    /* Header: back, picture, name on one line, call, ⋯ */
    .chat-head { gap: 6px; min-height: 56px; padding: 6px 6px 6px 4px; padding-top: calc(6px + env(safe-area-inset-top)); background: var(--card); }
    .chat-head .avatar { width: 38px; height: 38px; }
    .chat-head-text b { font-size: 16px; }
    .chat-head .icon-btn { min-width: 40px; height: 40px; padding: 0; }
    .chat-head .icon-btn svg { width: 22px; height: 22px; }
    .chat-more-btn { display: inline-grid; }
    #chat-search-btn, #chat-group-btn, #chat-media-btn, #chat-mute-btn, #chat-hide-btn { display: none !important; }

    /* Messages: the whole width, soft bubbles without borders, a little larger text. */
    .chat-msgs { padding: 8px 10px; background: var(--card); }
    .chat-msg { max-width: 82%; }
    .chat-bubble { border: 0; background: var(--surface-2); border-radius: 16px; padding: 7px 12px 5px; font-size: 15px; }
    .chat-msg.mine .chat-bubble { background: var(--primary-soft); }
    .chat-day { background: var(--surface-2); }

    /* Composer: one rounded line; code button left for the computer; mic until there is something to send. */
    .chat-compose { padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--border); }
    .chat-compose-row { border-radius: 22px; padding: 2px 4px 2px 14px; background: var(--surface-2); border-color: transparent; }
    [dir="rtl"] .chat-compose-row { padding: 2px 14px 2px 4px; }
    .chat-compose-row:focus-within { box-shadow: none; border-color: var(--primary); }
    #chat-input { font-size: 16px; background: transparent; }   /* 16px: iPhone does not zoom in on focus */
    #chat-code-btn, .chat-tool-sep { display: none; }
    .chat-compose-row:not(.has-text) .chat-send { display: none; }
    .chat-compose-row.has-text #chat-mic { display: none; }
    .chat-tool { width: 38px; height: 38px; }
    .chat-tool svg { width: 23px; height: 23px; }
    .chat-send { background: var(--primary); color: #fff; border-radius: 50%; }
    .chat-send:hover { background: var(--primary); color: #fff; }

    /* Chat list: bigger pictures and names, full-width rows. */
    .chat-side-head { padding: 12px 14px 6px; }
    .chat-side-head h2 { font-size: 20px; }
    .chat-filter { margin: 0 12px 8px; border-radius: 20px; background: var(--surface-2); border-color: transparent; }
    .chat-convs { padding: 0 0 8px; }
    .chat-conv { padding: 10px 14px; gap: 12px; border-radius: 0; }
    .chat-conv .avatar { width: 48px; height: 48px; font-size: 18px; }
    .chat-conv-text .row1 b { font-size: 15.5px; }
    .chat-conv-text .row2 span { font-size: 14px; }
    .chat-conv-text small { font-size: 12px; }
    .chat-conv-text { display: flex; flex-direction: column; gap: 3px; }
}
/* Long press on phones (chat.js): no native text selection / callout on messages; the header becomes the
   picked messages' action bar. */
.chat-select-head { display: none; }
.chat-select-head svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chat-select-head .icon-btn[hidden] { display: none; }
@media (hover: none) {
    .chat-msg { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
    .chat.selecting .chat-head > :not(.chat-select-head) { display: none !important; }
    .chat.selecting .chat-head { background: var(--primary-soft); }
    .chat.selecting .chat-select-head { display: flex; flex: 1; align-items: center; gap: 2px; }
    .chat-select-head b { flex: 1; font-size: 18px; padding-inline-start: 6px; }
    .chat-select-head .icon-btn { color: var(--text); }
    .chat.selecting .chat-select-bar { display: none; }
    .chat.selecting .chat-compose-row { display: flex; }
    .chat.selecting .chat-msg[data-id] { padding-inline-start: 0; }
    .chat.selecting .chat-msg[data-id]::before { display: none; }
    .chat.selecting .chat-msg.picked .chat-bubble { outline: 2px solid var(--primary); }
}
/* Search in chat */
.chat-search-btn svg, .chat-search-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.chat-search-q { width: 100%; margin-bottom: 8px; }
.chat-search-here { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.chat-search-here[hidden] { display: none; }
.chat-search-list mark { background: var(--warn-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.chat-search-row { color: var(--primary); }
.chat-search-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: none; }
@media (max-width: 999px) { .chat-search-icon { width: 48px; height: 48px; } }
/* A reply's one-line quote of a long message must shorten (…), never widen its bubble past the message and the
   screen (2026-10-16: the chat list scrolled sideways on phones). */
.chat-bubble { max-width: 100%; }
.chat-reply { max-width: 100%; min-width: 0; overflow: hidden; }
.chat-msgs { overflow-x: hidden; }

/* ---------- Support tickets (/Tickets, owner 2026-10-17) ---------- */
.ticket-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ticket-filters input[type=search] { flex: 1; min-width: 200px; }
.ticket-list { list-style: none; margin: 0; padding: 0; }
.ticket-list li + li { border-top: 1px solid var(--border); }
.ticket-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 4px; color: var(--text); }
.ticket-row:hover { background: var(--surface-2); text-decoration: none; }
.ticket-code { font-weight: 700; color: var(--primary); white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.ticket-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ticket-main b { overflow-wrap: anywhere; }
.ticket-main small { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.ticket-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ticket-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ticket-tags i { font-style: normal; font-size: 12px; color: var(--primary); background: var(--primary-soft); border-radius: 8px; padding: 0 6px; direction: ltr; }
.ticket-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.ticket-col { background: var(--surface-2); border-radius: 12px; padding: 8px; min-height: 200px; display: flex; flex-direction: column; gap: 8px; }
.ticket-col.over { outline: 2px dashed var(--primary); }
.ticket-col h3 { margin: 2px 4px 4px; font-size: 14px; display: flex; justify-content: space-between; }
.ticket-card { display: flex; flex-direction: column; gap: 4px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; color: var(--text); cursor: grab; }
.ticket-card:hover { text-decoration: none; border-color: var(--primary); }
.ticket-title { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.ticket-page { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
.ticket-thread { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ticket-thread .card { margin: 0; }
.ticket-thread header { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 6px; }
.ticket-body { line-height: 1.7; overflow-wrap: anywhere; }
.ticket-comment.internal { background: var(--warn-soft); border-color: var(--warn); }
.ticket-comment.from-customer { border-inline-start: 4px solid var(--primary); }
.ticket-event { font-size: 12px; color: var(--muted); padding: 0 8px; }
.ticket-event.internal { opacity: .85; }
.ticket-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ticket-img img { display: block; max-width: 220px; max-height: 180px; border-radius: 8px; object-fit: cover; }
.ticket-reply textarea { width: 100%; }
.ticket-reply-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 8px; }
.ticket-reply-bar button { margin-inline-start: auto; }
.ticket-confirm form { display: inline-block; margin-inline-end: 8px; }
.ticket-fields label.block { margin-bottom: 8px; }
.ticket-fields select, .ticket-fields input { width: 100%; }
.ticket-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 12px 0 0; font-size: 13px; }
.ticket-facts dt { color: var(--muted); }
.ticket-facts dd { margin: 0; overflow-wrap: anywhere; }
.customer-card.inactive { opacity: .6; }
.customer-people { list-style: none; padding: 0; margin: 0 0 10px; }
.customer-people li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; }
@media (max-width: 999px) {
    .ticket-page { grid-template-columns: 1fr; }
    .ticket-row { flex-wrap: wrap; }
}
/* Tickets, help-desk look (owner, 2026-10-17, ideas from Radcom's panel) */
.ticket-heading, body:has(.ticket-table) .page-head h1 { border-inline-start: 4px solid var(--primary); padding-inline-start: 10px; }
.ticket-table { width: 100%; }
.ticket-table th { font-weight: 600; color: var(--muted); font-size: 13px; }
.ticket-table tbody tr { cursor: pointer; }
.ticket-table tbody tr:nth-child(odd) { background: var(--surface-2); }
.ticket-table tbody tr:hover { background: var(--primary-soft); }
.ticket-table td { vertical-align: middle; }
.ticket-table td a { color: inherit; }
.ticket-title-cell { min-width: 220px; }
.ticket-title-cell a { font-weight: 600; }
.ticket-title-cell .pill, .ticket-title-cell small { margin-inline-start: 6px; }
.ticket-when { white-space: nowrap; font-size: 13px; }
.ticket-rating { font-size: 20px; text-align: center; }
.ticket-pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; }
.ticket-pager-size label { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; }
.ticket-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ticket-pages a, .ticket-pages .gap { min-width: 32px; height: 32px; display: inline-grid; place-items: center; padding: 0 8px; border-radius: 999px;
    border: 1px solid var(--border); color: var(--text); font-size: 13px; }
.ticket-pages a:hover { text-decoration: none; border-color: var(--primary); }
.ticket-pages a.current { background: var(--primary); border-color: var(--primary); color: #fff; }
.ticket-pages .gap { border: 0; }
.ticket-pager-info { width: 100%; text-align: center; font-size: 12px; }
.ticket-head-card h2 { margin: 0 0 10px; font-size: 18px; }
.ticket-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 10px; }
.ticket-meta b { color: var(--text); font-weight: 500; }
.ticket-msg { display: flex; gap: 12px; align-items: flex-start; }
.ticket-msg > .avatar { width: 48px; height: 48px; font-size: 18px; flex: none; }
.ticket-bubble { flex: 1; min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 12px 16px; box-shadow: var(--shadow); }
.ticket-bubble header { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.ticket-msg.from-requester .ticket-bubble { background: var(--primary-soft); border-color: transparent; }
.ticket-msg.from-team { padding-inline-start: 40px; }
.ticket-msg.internal .ticket-bubble { background: var(--warn-soft); border-color: var(--warn); }
.ticket-signature { margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--border); border-inline-start: 3px solid var(--err); padding-inline-start: 8px;
    display: flex; flex-direction: column; font-size: 12px; color: var(--muted); }
.ticket-signature b { color: var(--text); font-size: 13px; }
.ticket-event { text-align: center; font-size: 12px; color: var(--muted); }
.ticket-event span { background: var(--surface-2); border-radius: 999px; padding: 2px 12px; }
.ticket-side-title { margin: 0 0 10px; font-size: 15px; padding-bottom: 8px; border-bottom: 2px solid var(--primary); display: inline-block; }
.ticket-side-note { font-size: 12px; margin: 12px 0 0; border-top: 1px solid var(--border); padding-top: 10px; }
.ticket-side-panel { display: flex; flex-direction: column; gap: 14px; }
.ticket-side-panel .card { margin: 0; }
.ticket-edit summary { cursor: pointer; }
.ticket-edit[open] summary { margin-bottom: 10px; }
.ticket-faces { display: flex; gap: 10px; margin-bottom: 8px; }
.ticket-faces label { cursor: pointer; }
.ticket-faces input { display: none; }
.ticket-faces span { font-size: 30px; display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 2px solid transparent; filter: grayscale(.6); }
.ticket-faces input:checked + span { border-color: var(--primary); filter: none; background: var(--primary-soft); }
.ticket-rate textarea { width: 100%; margin-bottom: 8px; }
.ticket-related { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ticket-related li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.ticket-related a { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 999px) {
    /* The table folds into one card per ticket. */
    .ticket-table thead { display: none; }
    .ticket-table, .ticket-table tbody, .ticket-table tr, .ticket-table td { display: block; width: 100%; }
    .ticket-table tr { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: var(--card) !important; }
    .ticket-table td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 10px; }
    .ticket-table td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 12px; }
    .ticket-table td.ticket-title-cell { display: block; font-size: 15px; padding-bottom: 6px; }
    .ticket-table td.ticket-when br { display: none; }
    .ticket-table td.ticket-rating:empty { display: none; }
    .ticket-msg.from-team { padding-inline-start: 0; }
    .ticket-msg > .avatar { width: 36px; height: 36px; font-size: 14px; }
    .agreement-table td.agreement-criterion { display: block; }
    .agreement-table td.agreement-criterion::before { display: block; }
}
/* Agreements (#42): the ticket look, plus clauses by section and the signing panel. */
.agreement-intro { margin-top: 0; }
.agreement-counts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.agreement-counts b { color: var(--text); }
.agreement-parties { width: 100%; margin-bottom: 10px; }
.agreement-parties td small { margin-inline-start: 6px; }
.agreement-sign-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.agreement-amend summary { display: inline-block; list-style: none; cursor: pointer; }
.agreement-amend form { margin-top: 8px; }
.agreement-amending { background: var(--warn-soft); color: var(--warn); padding: 6px 10px; border-radius: 8px; }
.agreement-versions a { margin-inline-start: 10px; }
.agreement-terms summary { cursor: pointer; color: var(--primary); }
.agreement-clauses-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.agreement-section { margin: 18px 0 6px; font-size: 14px; }
.agreement-table tbody tr { cursor: default; }
.agreement-table td.agreement-criterion { font-size: 12px; color: var(--muted); min-width: 260px; }
.agreement-select { padding: 2px 6px; font-size: 12px; border-radius: 999px; border-width: 1px; }
.agreement-select.Approved { background: var(--ok-soft); color: var(--ok); }
.agreement-select.Pending { background: var(--warn-soft); color: var(--warn); }
.agreement-select.Rejected { background: var(--err-soft); color: var(--err); }
.agreement-select.Cancelled { background: var(--surface-2); color: var(--muted); }
.agreement-removed { margin-top: 12px; font-size: 13px; }
.agreement-removed summary { cursor: pointer; color: var(--muted); }
.agreement-event .agreement-event-body { white-space: normal; }
/* Progress: one 100% bar per section or phase, clauses by state; 2px surface gaps between the parts. */
.agreement-progress-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.agreement-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 2px; }
.agreement-switch button { background: none; border: 0; border-radius: 999px; padding: 3px 12px; font-size: 13px; color: var(--muted); cursor: pointer; }
.agreement-switch button[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.agreement-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 6px; font-size: 12px; color: var(--muted); }
.agreement-legend span { display: inline-flex; align-items: center; gap: 6px; }
.agreement-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.agreement-bars { display: flex; flex-direction: column; gap: 2px; }
.agreement-bars + .agreement-bars { margin-top: 6px; }
.agreement-bar-row { display: grid; grid-template-columns: minmax(140px, 300px) 1fr auto; align-items: center; gap: 12px; width: 100%;
    background: none; border: 0; border-radius: 8px; padding: 6px 8px; text-align: start; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.agreement-bar-row:hover, .agreement-bar-row:focus-visible { background: var(--surface-2); }
.agreement-bar-row.total { font-weight: 600; border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0; padding-bottom: 10px; }
.agreement-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agreement-bar { display: flex; gap: 2px; height: 12px; border-radius: 4px; overflow: hidden; min-width: 120px; }
.agreement-bar i, .agreement-legend i { display: block; min-width: 3px; }
.agreement-bar-value { white-space: nowrap; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.agreement-bar .approved, .agreement-legend .approved { background: var(--chart-approved); }
.agreement-bar .done, .agreement-legend .done { background: var(--chart-done); }
.agreement-bar .fix, .agreement-legend .fix { background: var(--chart-fix); }
.agreement-bar .open, .agreement-legend .open { background: var(--border); }
.agreement-progress-note { font-size: 12px; margin: 8px 0 0; }
/* Clause filters: one row over all the section tables, kept in view while scrolling. */
.agreement-filters { position: sticky; top: var(--topbar); z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 10px 0 4px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.agreement-filters input[type="search"] { flex: 1 1 220px; min-width: 0; }
.agreement-filters select { max-width: 230px; }
.agreement-filters.filtered { border-color: var(--primary); }
.agreement-filters [data-f-count] { font-size: 12px; margin-inline-start: auto; }
@media (max-width: 640px) {
    .agreement-bar-row { grid-template-columns: 1fr auto; }
    .agreement-bar-row .agreement-bar { grid-column: 1 / -1; grid-row: 2; }
    /* On a phone the filters would cover the screen if they stayed on top: they scroll with the page, two per row. */
    .agreement-filters { position: static; }
    .agreement-filters input[type="search"] { flex: 1 1 100%; }
    .agreement-filters select { flex: 1 1 40%; max-width: none; }
}
.agreement-import-rows { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 12px; white-space: pre; }
/* File picker (wwwroot/files.js): a drop box with cards instead of the browser's bare "Choose Files". */
.files-drop { margin-top: 6px; }
.files-drop-area { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
    padding: 22px 16px; border: 2px dashed var(--border); border-radius: 14px; background: var(--surface-2); cursor: pointer;
    transition: border-color .15s, background .15s; }
.files-drop-area:hover, .files-drop.over .files-drop-area { border-color: var(--primary); background: var(--primary-soft); }
.files-drop-area svg { width: 30px; height: 30px; fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.files-drop-area b { font-size: 15px; }
.files-drop-area .muted { font-size: 12px; }
.files-list { display: flex; flex-wrap: wrap; gap: 8px; }
.files-drop.has-files .files-list { margin-top: 10px; }
.files-card { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); max-width: 260px; }
.files-card img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: none; }
.files-icon { width: 44px; height: 44px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 700;
    background: var(--primary-soft); color: var(--primary); direction: ltr; }
.files-name { display: flex; flex-direction: column; min-width: 0; }
.files-name b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; }
.files-name small { color: var(--muted); font-size: 11px; direction: ltr; text-align: start; }
.files-remove { min-height: 0; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--muted); flex: none; }
.files-remove:hover { background: var(--err-soft); color: var(--err); }
.files-drop.compact.over { outline: 2px dashed var(--primary); border-radius: 12px; }
.files-attach { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.files-attach svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Project / site / section (2026-10-17) */
.ticket-fields .ticket-where { flex-direction: column; gap: 8px; }
.ticket-fields .ticket-where label, .ticket-fields .ticket-where select { width: 100%; }
.ticket-section { display: inline-block; margin-inline-start: 6px; font-size: 11px; padding: 0 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.ticket-video { display: block; max-width: 100%; width: 360px; max-height: 300px; border-radius: 10px; background: #000; }
.project-row.inactive { opacity: .6; }
.project-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: -4px 0 12px; font-size: 13px; }
.project-key-new { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.project-key-new code { font-size: 14px; user-select: all; overflow-wrap: anywhere; }
/* Reminders (#36) */
.reminder-form textarea { width: 100%; }
.reminder-form .reminder-text { display: block; margin-bottom: .6rem; }
.reminder-list { list-style: none; margin: 0; padding: 0; }
.reminder-list li { padding: .7rem 0; border-bottom: 1px solid var(--border); display: grid; gap: .3rem; }
.reminder-list li:last-child { border-bottom: 0; }
.reminder-list li.fired .reminder-when b { color: var(--err); }
.reminder-del { color: var(--err); }
.reminder-when { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.reminder-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.reminder-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.reminder-list.done .reminder-body { color: var(--muted); }

/* Group settings (owner, 2026-10-18): the members list scrolls by itself, the rest of the box stays put. */
#chat-group .chat-member-list { max-height: min(40vh, 360px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: 10px; padding: 4px; }
#chat-group #chat-group-add { max-height: 140px; overflow-y: auto; overscroll-behavior: contain; }
.chat-invite-state { display: block; font-size: 12px; color: var(--muted); }
.chat-invite-state.failed { color: var(--err); }
.chat-member-list button.chat-resend-btn { color: var(--primary); }

/* A person's card from a group message (#37): message or call them. */
.chat-person-card { position: fixed; z-index: 1600; width: 240px; background: var(--card); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .25); padding: 14px; display: grid; gap: 10px; }
.chat-person-card .pc-who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.chat-person-card .pc-who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-person-card .pc-who small { color: var(--muted); }
.chat-person-card .avatar { width: 44px; height: 44px; flex: none; }
.chat-person-card .acts { display: flex; gap: 8px; }
.chat-person-card .acts button { flex: 1; }
.chat-msg [data-user] { cursor: pointer; }

/* Calendar and the daily secretary (#40) */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.cal-layout.week { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1000px) { .cal-layout { grid-template-columns: 1fr; } }
.cal-day-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cal-day-title h2 { margin: 0; display: flex; gap: 8px; align-items: center; }
.cal-legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.cal-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 4px; vertical-align: -1px; }
.lg-meet { background: var(--primary-soft); } .lg-gcal { background: color-mix(in srgb, #0b8043 30%, var(--card)); }
.lg-task { border: 1.5px dashed var(--primary); } .lg-rem { background: var(--warn-soft); }
.cal-cols { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 6px; }
.cal-card { overflow-x: auto; }
.cal-layout.week .cal-cols { min-width: 760px; }
.cal-col-head { display: block; text-align: center; font-weight: 600; padding: 4px 0 6px; color: var(--text); }
.cal-col-head small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
.cal-col-head.today { color: var(--primary); }
.cal-allday { font-size: 12px; background: var(--surface-2); border-radius: 6px; padding: 2px 8px; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-allday.off { color: var(--muted); text-align: center; }
.cal-grid { position: relative; border-top: 1px solid var(--border); }
.cal-hour { position: absolute; inset-inline: 0; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); }
.cal-hour span { position: absolute; inset-inline-start: 0; top: -8px; background: var(--card); padding-inline-end: 6px; }
.cal-hour.half { border-top-style: dashed; opacity: .5; }
.cal-off { position: absolute; inset-inline: 0; background: var(--surface-2); opacity: .7; }
.cal-cols .cal-col:first-child .cal-off, .cal-cols .cal-col:first-child .cal-lunch, .cal-cols .cal-col:first-child .cal-item { inset-inline-start: 44px; }
.cal-lunch { position: absolute; inset-inline: 0; background: repeating-linear-gradient(-45deg, var(--surface-2), var(--surface-2) 6px, transparent 6px, transparent 12px);
    border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); }
.cal-item { position: absolute; inset-inline: 0 4px; border-radius: 8px; padding: 3px 8px; font-size: 12px; overflow: hidden; line-height: 1.5;
    border: 1px solid transparent; display: flex; gap: 6px; align-items: flex-start; color: var(--text); text-decoration: none; }
.cal-item:hover { text-decoration: none; filter: brightness(1.05); z-index: 2; }
.cal-item b { font-weight: 600; }
.cal-item small { color: var(--muted); white-space: nowrap; }
.cal-item .grow { flex: 1; min-width: 0; overflow: hidden; }
.cal-layout.week .cal-item small { display: none; }
.cal-item.meet { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.cal-item.gcal { background: color-mix(in srgb, #0b8043 14%, var(--card)); border-color: color-mix(in srgb, #0b8043 40%, transparent); }
.cal-item.leave { background: var(--surface-2); border-color: var(--border); color: var(--muted); }
.cal-item.task { background: var(--card); border: 1.5px solid var(--primary); }
.cal-item.task.suggested { border-style: dashed; }
.cal-item.task.urgent { border-color: var(--err); } .cal-item.task.high { border-color: var(--warn); }
.cal-item.task.done { opacity: .55; }
.cal-item.rem { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); padding-block: 0; z-index: 1; }
.cal-now { position: absolute; inset-inline: 0; border-top: 2px solid var(--err); z-index: 3; pointer-events: none; }
.cal-now::before { content: ""; position: absolute; inset-inline-start: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--err); }
.src { display: inline-block; font-size: 11px; padding: 0 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.prio { display: inline-block; font-size: 11px; padding: 0 7px; border-radius: 999px; white-space: nowrap; }
.prio.urgent { background: var(--err-soft); color: var(--err); } .prio.high { background: var(--warn-soft); color: var(--warn); }
.prio.normal { background: var(--surface-2); color: var(--muted); }
.plan-when { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 0; }
.plan-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 12px; }
.plan-stats div { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; }
.plan-stats b { display: block; font-size: 17px; }
.plan-stats small { color: var(--muted); }
.bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin: 4px 0 2px; }
.bar i { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.plan-rule { font-size: 12px; }
.plan-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.queue { list-style: none; margin: 0; padding: 0; }
.queue .queue-head { margin: 10px 0 2px; font-size: 12.5px; color: var(--muted); border: 0; padding: 0; }
.queue li { display: grid; gap: 3px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.queue .t { display: flex; gap: 6px; align-items: center; }
.queue .t b, .queue .t a { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.queue .meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--muted); }
.queue .when { color: var(--primary); } .queue .moved, .queue .late { color: var(--warn); }
.q-acts { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.q-acts button.text { border: 0; background: none; color: var(--primary); font-size: 12px; padding: 2px 4px; }
.q-edit { width: 100%; font-size: 12px; }
.q-edit summary { cursor: pointer; color: var(--muted); display: inline; }
.q-edit .form-row { margin-top: 6px; }
.cal-foot { font-size: 12px; }
label.block { display: block; margin-bottom: 10px; } label.block input, label.block textarea { width: 100%; }