/**
 * על זה — the client cabinet.
 *
 * The layout is the Flowmatic cabinet's: a menu drawer on the phone and a
 * 268px menu column on the desk, one conversation in a 760px column, a sheet
 * that comes over it. The colours, the radii, the pill buttons and the solid
 * offset shadows are the landing's.
 *
 * Rules go from the narrow screen to the wide one. The phone is the main
 * screen: a small business owner reads us between other things, standing.
 */

:root {
    --ink: #0f1f3a;
    --muted: #5a6577;
    --line: #d5dbe3;
    --line-soft: #e6eaf0;
    --bg: #ffffff;
    --side: #f7f9fa;
    --wash: #eef6f2;
    --green: #0c7c59;
    --green-deep: #085c42;
    --green-soft: #cfe6db;
    --chat-you: #dcf5e6;
    --chat-us: #f1f3f6;
    --yellow: #ffd84d;
    --yellow-wash: #fff6d6;
    --head: 58px;
    --column: 760px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    /* System Arial only. No webfonts anywhere in the cabinet. */
    font-family: Arial, 'Arial Hebrew', Helvetica, sans-serif !important;
}

/**
 * `hidden` must hide. The browser rule loses to any `display` of ours, and
 * `hidden` is exactly what we hide the drawer, the pages and the sheet with.
 */
[hidden] {
    display: none !important;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

a {
    color: var(--green-deep);
}

h1,
h2,
h3,
h4 {
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.012em;
}

p {
    margin: 0;
}

/* The landing's focus ring: ink outline, yellow halo. */
:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--yellow);
    border-radius: 6px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 4px var(--yellow);
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip {
    position: absolute;
    top: -100px;
    right: 12px;
    z-index: 80;
    background: var(--ink);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
}

.skip:focus {
    top: 12px;
}

.noscript {
    padding: 24px;
    font-size: 17px;
}

/* ── buttons, pills, fields ────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 20px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.btn:hover:not(:disabled) {
    background: var(--wash);
}

.btn.primary {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.btn.primary:hover:not(:disabled) {
    background: var(--green-deep);
    border-color: var(--green-deep);
}

.btn.dark {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.btn.dark:hover:not(:disabled) {
    background: #071427;
}

.btn.quiet {
    border-color: var(--line);
}

.btn.small {
    min-height: 38px;
    padding: 7px 16px;
    font-size: 14px;
}

.btn.block {
    display: flex;
    width: 100%;
}

.btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.linkish {
    border: 0;
    background: none;
    padding: 8px 2px;
    color: var(--green-deep);
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-align: start;
}

.linkish:disabled {
    color: var(--muted);
    text-decoration: none;
    cursor: default;
}

.iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--muted);
}

.iconbtn:hover {
    background: var(--chat-us);
    color: var(--ink);
}

.iconbtn svg,
.ic {
    width: 20px;
    height: 20px;
    flex: none;
}

.pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 2px 11px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

.s-new {
    background: var(--yellow-wash);
    border-color: var(--yellow);
    color: var(--ink);
}

.s-in_progress {
    background: var(--wash);
    border-color: var(--green-soft);
    color: var(--green-deep);
}

.s-waiting_client {
    background: #fff;
    border-color: var(--ink);
    color: var(--ink);
}

.s-done {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.s-cancelled {
    background: var(--chat-us);
    border-color: var(--chat-us);
    color: var(--muted);
}

/**
 * The six states of an access. The palette has no red, so the warning pair of
 * the whole app (yellow wash, yellow line) carries "נכשל", green carries
 * "מחובר", an ink outline says the move is the client's, and grey says nobody
 * is waiting for anything.
 */
.s-pending {
    background: #fff;
    border-color: var(--ink);
    color: var(--ink);
}

.s-awaiting_verification {
    background: var(--wash);
    border-color: var(--green-soft);
    color: var(--green-deep);
}

.s-connected {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.s-failed {
    background: var(--yellow-wash);
    border-color: var(--yellow);
    color: var(--ink);
}

.s-removed {
    background: #fff;
    border-color: var(--line);
    color: var(--muted);
}

.s-skipped {
    background: var(--chat-us);
    border-color: var(--chat-us);
    color: var(--muted);
}

.flag {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 2px 11px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
}

/* The one playful element: a yellow sticker, and only where it earns it. */
.need {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 2px 11px;
    border-radius: 6px;
    background: var(--yellow);
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 700;
    box-shadow: 2px 2px 0 var(--ink);
    transform: rotate(-2deg);
}

.field {
    margin: 0 0 14px;
}

.field label,
.field .label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 700;
}

.field input,
.field textarea,
.field select {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    background: #fff;
    /* 16px and no less: below it iOS zooms the page on focus */
    font-size: 16px;
}

.field textarea {
    resize: vertical;
    line-height: 1.5;
}

.field input[aria-invalid='true'] {
    border-color: var(--ink);
}

.field input.code {
    font-size: 24px;
    letter-spacing: 0.35em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.field .help,
.help {
    margin-top: 6px;
    font-size: 13px;
    color: var(--muted);
}

.field .static {
    margin: 0;
    padding: 11px 0 0;
    font-size: 16px;
    font-weight: 700;
}

.note {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted);
}

.note.bad {
    color: var(--ink);
    font-weight: 700;
}

.note:empty {
    margin: 0;
}

.why {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    font-weight: 700;
}

.why:empty {
    display: none;
}

.loading,
.empty {
    padding: 14px 2px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.55;
}

.errbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--line);
    border-radius: 18px;
    background: var(--chat-us);
    font-size: 15px;
}

.warnnote {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 14px;
    border-inline-start: 4px solid var(--yellow);
    border-radius: 12px;
    background: var(--yellow-wash);
    font-size: 14px;
    line-height: 1.55;
}

.notebox {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--wash);
    color: var(--green-deep);
    font-size: 15px;
    line-height: 1.55;
    font-weight: 700;
}

/* Nobody is waiting for anything: the box says so without congratulating. */
.notebox.quiet {
    background: var(--chat-us);
    color: var(--muted);
}

.sub {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
}

.meter {
    height: 8px;
    margin-top: 10px;
    border-radius: 99px;
    background: var(--line-soft);
    overflow: hidden;
}

.meter i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--green);
    transition: width 0.4s ease;
}

.meter.warn i {
    background: var(--ink);
}

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.tile {
    min-width: 0;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--chat-us);
}

.tile .k {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
}

.tile .v {
    display: block;
    margin-top: 2px;
    font-size: 15.5px;
    font-weight: 700;
}

/* ── login ─────────────────────────────────────────────────────────────── */

.login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px 16px;
    background: var(--wash);
}

.login-card {
    flex: 0 1 420px;
    min-width: 0;
    margin: 0 10px 10px 0;
    padding: 26px 22px 22px;
    border: 3px solid var(--ink);
    border-radius: 22px;
    background: #fff;
    /* The landing's solid offset shadow. */
    box-shadow: 10px 10px 0 var(--green);
}

.login-logo {
    display: block;
    width: 140px;
    height: auto;
    margin-bottom: 18px;
}

.login-card h1 {
    font-size: 25px;
    margin-bottom: 8px;
}

.login-card .hint {
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
    margin-bottom: 18px;
}

.login-card .btn {
    margin-top: 6px;
}

.login-card .links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 6px;
}

.picklist {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

/* ── the shell ─────────────────────────────────────────────────────────── */

.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

.top {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--head);
    padding: 0 14px 0 6px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.brand {
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
}

.brand img {
    display: block;
    height: 30px;
    width: auto;
}

.top .where {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top .plan {
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
}

/* On the phone the bar holds the mark and the way into the menu, nothing else. */
.top .where,
.top .plan {
    display: none;
}

.top .grow {
    flex: 1;
}

.burger {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--ink);
}

.burger:hover {
    background: var(--wash);
}

.burger svg {
    width: 24px;
    height: 24px;
}

.scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(15, 31, 58, 0.38);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
}

.scrim.open {
    opacity: 1;
    pointer-events: auto;
}

/**
 * The drawer is pinned to the PHYSICAL right edge: `translateX` is physical,
 * and mixing it with logical properties sends the drawer the wrong way in RTL.
 * Hidden also to the keyboard while it is closed, not only to the eye.
 */
.nav {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 50;
    width: min(300px, 86vw);
    display: flex;
    flex-direction: column;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
    background: var(--side);
    border-left: 1px solid var(--line);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.24s ease, visibility 0s linear 0.24s;
}

.nav.open {
    transform: none;
    visibility: visible;
    transition: transform 0.24s ease;
}

.navhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 6px 8px;
}

.navtitle {
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 700;
}

.switcher {
    margin: 0 0 10px;
}

.switcher .k {
    display: block;
    margin: 0 4px 4px;
    font-size: 12px;
    color: var(--muted);
}

.switcher select {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    background: #fff;
    font-size: 15px;
    font-weight: 700;
}

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--ink);
    font-size: 15px;
    text-decoration: none;
}

.menu a:hover {
    background: rgba(15, 31, 58, 0.05);
}

.menu a[aria-current='page'] {
    background: var(--wash);
    color: var(--green-deep);
    font-weight: 700;
}

.menu .dot {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 2px;
    background: var(--line);
}

.menu a[aria-current='page'] .dot {
    background: var(--green);
}

.menu .lbl {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu .badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--green);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
}

.nav .bottom {
    margin-top: auto;
    padding-top: 14px;
}

/**
 * How much of the month is left — at the bottom of the menu, not over the
 * conversation: a counter above the feed turns a chat into a taximeter.
 */
.fuel {
    padding: 12px 10px;
    border-top: 1px solid var(--line);
}

.fuel .row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.fuel .k {
    font-size: 12.5px;
    color: var(--muted);
}

.fuel .v {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fuel .near {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 10px;
    border-radius: 6px;
    background: var(--yellow);
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
}

.fuel .more {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--green-deep);
}

.who {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 10px 8px;
    border-top: 1px solid var(--line);
}

.who .ava {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--wash);
    color: var(--green-deep);
    font-size: 12px;
    font-weight: 700;
}

.whotext {
    min-width: 0;
}

.who .name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.who .tier {
    display: block;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.3;
}

.logout {
    margin: 4px 10px 0;
}

.main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.main:focus {
    outline: none;
}

/* ── the conversation ──────────────────────────────────────────────────── */

.chat {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.opbar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 10px 16px 0;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--wash);
    color: var(--green-deep);
    font-size: 14px;
    font-weight: 700;
}

.opbar::before {
    content: '';
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--green);
    animation: blink 1.6s infinite;
}

.feed {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px 16px 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* We put older messages back ourselves; the browser must not also help. */
    overflow-anchor: none;
}

.feed:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: -3px;
    box-shadow: none;
}

.day {
    align-self: center;
    padding: 3px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: 12.5px;
    color: var(--muted);
}

.msg {
    max-width: 88%;
    padding: 11px 16px 9px;
    border-radius: 18px;
    font-size: 15.5px;
    line-height: 1.6;
    overflow-wrap: anywhere;
    animation: rise 0.24s ease both;
}

.msg .text p + p {
    margin-top: 0.5em;
}

.msg .who {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
}

.msg .who .ic {
    width: 14px;
    height: 14px;
}

.msg .who .tag {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--wash);
    color: var(--green-deep);
    font-size: 11px;
}

.msg .t {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--muted);
}

.msg .state {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted);
}

/* Sides follow the landing mock and WhatsApp in Hebrew: the client writes on the left,
   we answer on the right. */
.msg.them {
    align-self: flex-start;
    background: var(--chat-us);
    border-bottom-right-radius: 6px;
}

.msg.me {
    align-self: flex-end;
    background: var(--chat-you);
    border-bottom-left-radius: 6px;
}

.msg.me.pending {
    opacity: 0.75;
}

.msg.me.failed {
    border: 1.5px solid var(--ink);
}

/* A human wrote this one, and it has to look different without shouting. */
.msg.op {
    align-self: flex-start;
    background: #fff;
    border: 2px solid var(--green);
    border-bottom-right-radius: 6px;
}

.msg.op .who {
    color: var(--green-deep);
}

.msg.sys {
    align-self: center;
    max-width: 100%;
    padding: 2px 8px;
    background: none;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}

.msg.sys .t {
    display: inline;
    margin: 0 0 0 6px;
}

.msg.err {
    align-self: center;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 100%;
    background: var(--yellow-wash);
    border: 1px solid var(--yellow);
    font-size: 14px;
}

.msg .atts {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.msg .att {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 220px;
    padding: 5px 10px 5px 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    color: var(--ink);
    text-decoration: none;
}

.msg .att img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}

.msg .att .nm {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A card takes the whole width of its place in the feed. */
.msg.wide {
    align-self: stretch;
    max-width: 100%;
    padding: 0;
    background: none;
    border-radius: 0;
}

/**
 * What is happening right now. Not a bubble: a bubble would turn a report on
 * our own work into something you answer.
 */
.think {
    align-self: flex-end;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    color: var(--muted);
}

.think .glyph {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--green);
    animation: blink 1.1s infinite;
}

.think .dots::after {
    content: '';
    animation: dots 1.4s steps(4, end) infinite;
}

@keyframes blink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
}

@keyframes dots {
    0% {
        content: '';
    }
    25% {
        content: '.';
    }
    50% {
        content: '..';
    }
    75% {
        content: '...';
    }
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

/* ── cards ─────────────────────────────────────────────────────────────── */

.card {
    padding: 16px 18px 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}

.card .cap {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.card .cap h2,
.card .cap h3 {
    flex: 1;
    min-width: 0;
    font-size: 17.5px;
    font-weight: 700;
}

.card .cap .side {
    font-size: 13px;
    color: var(--green-deep);
    white-space: nowrap;
}

.card .num {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.card .lead {
    font-size: 15.5px;
    line-height: 1.6;
}

.card .lead p + p {
    margin-top: 0.5em;
}

.card .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

.card .meta {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 12px;
}

.card > .btn {
    margin-top: 4px;
}

/* The approval is the one card that asks for something. It says so. */
.approval-card {
    border: 2px solid var(--ink);
    box-shadow: 6px 6px 0 var(--green);
}

.acts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.acts.stack {
    flex-direction: column;
    align-items: stretch;
}

.settled {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--green-deep);
    font-size: 15px;
    font-weight: 700;
}

.settled.no {
    color: var(--muted);
}

.hours-card .sentence {
    font-size: 16.5px;
    font-weight: 700;
}

.notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 18px;
    font-size: 15px;
    line-height: 1.6;
}

.notice.info {
    background: var(--wash);
    color: var(--green-deep);
}

.notice.warn {
    background: var(--yellow-wash);
    border: 1px solid var(--yellow);
    color: var(--ink);
}

.notice .text p + p {
    margin-top: 0.5em;
}

/* ── under the feed ────────────────────────────────────────────────────── */

.offhours {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 16px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.filenote {
    flex: none;
    padding: 8px 16px 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
}

.files {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px 0;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 4px 12px 4px 4px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--chat-us);
    font-size: 13px;
}

.chip img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}

.chip .nm {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip button {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted);
}

.chip button:hover {
    background: #fff;
    color: var(--ink);
}

.chip .ic {
    width: 16px;
    height: 16px;
}

/**
 * The composer is a box, not a line: the field on top, the buttons under it.
 * A line with buttons on both sides squeezes the field to a slit on a phone.
 */
.compose {
    flex: none;
    padding: 8px 16px calc(10px + env(safe-area-inset-bottom));
    background: #fff;
}

.compose .box {
    padding: 12px 14px 10px;
    border: 1.5px solid var(--line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 31, 58, 0.06);
}

.compose .box:focus-within {
    border-color: var(--ink);
    box-shadow: 0 0 0 4px var(--yellow);
}

.compose textarea {
    display: block;
    width: 100%;
    min-height: 26px;
    max-height: 140px;
    padding: 2px 2px 10px;
    border: 0;
    background: none;
    resize: none;
    font-size: 16px;
    line-height: 1.45;
    overflow-y: auto;
}

.compose textarea:focus,
.compose textarea:focus-visible {
    outline: none;
    box-shadow: none;
}

.compose .row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.compose .kbd {
    display: none;
    font-size: 12px;
    color: var(--muted);
}

.round {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
}

.round:hover {
    background: var(--wash);
}

.send {
    flex: none;
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
}

.send:hover:not(:disabled) {
    background: var(--green-deep);
}

.send:disabled {
    background: var(--line-soft);
    color: var(--muted);
    cursor: default;
}

.send svg {
    width: 20px;
    height: 20px;
}

.disclaim {
    padding: 8px 4px 0;
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
    color: var(--muted);
}

/* ── the pages ─────────────────────────────────────────────────────────── */

.page {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 16px 40px;
}

.page .inner {
    max-width: var(--column);
    margin: 0 auto;
}

.page h1 {
    font-size: 26px;
    margin-bottom: 16px;
}

/**
 * The headings we move focus to after a screen change are not controls: they
 * are never in the tab order, and a ring on them is noise, not a signal.
 */
.page h1:focus,
.page h1:focus-visible,
.chat h1:focus-visible,
.deep .head h2:focus-visible,
.donebox:focus-visible,
.settled:focus-visible,
.notebox:focus-visible,
.warnnote:focus-visible,
.wayblock h3:focus-visible {
    outline: none;
    box-shadow: none;
}

.page .card,
.page .errbox {
    margin-bottom: 14px;
}

.page .card h2,
.page .card h3 {
    font-size: 17.5px;
}

.soon .lead {
    font-size: 16px;
    line-height: 1.6;
}

.seg {
    display: inline-flex;
    margin: 4px 0 14px;
}

.seg button {
    position: relative;
    min-height: 42px;
    padding: 8px 18px;
    border: 1.5px solid var(--ink);
    background: #fff;
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 700;
}

.seg button + button {
    border-inline-start: 0;
}

.seg button:first-child {
    border-radius: 0 999px 999px 0;
}

.seg button:last-child {
    border-radius: 999px 0 0 999px;
}

.seg button[aria-pressed='true'] {
    background: var(--ink);
    color: #fff;
}

.tasklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.task-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
}

a.task-row:hover {
    border-color: var(--green);
    background: #fbfdfc;
}

.task-row .num {
    flex: none;
    min-width: 2.4em;
    font-weight: 700;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.task-row .body {
    flex: 1;
    min-width: 0;
}

.task-row .t {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.4;
}

.task-row .d {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--muted);
}

.task-row .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* ── the sheet over the conversation ───────────────────────────────────── */

.deep {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(15, 31, 58, 0.42);
    animation: fade 0.16s ease;
}

.deep .pane {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 92dvh;
    border-radius: 22px 22px 0 0;
    background: #fff;
    box-shadow: 0 -12px 44px rgba(15, 31, 58, 0.22);
    padding-bottom: env(safe-area-inset-bottom);
    animation: deepUp 0.24s ease;
}

.deep .grip {
    flex: none;
    width: 38px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 4px;
    background: var(--line);
}

.deep .head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 10px;
    border-bottom: 1px solid var(--line);
}

.deep .head h2 {
    flex: 1;
    min-width: 0;
    font-size: 17px;
    font-weight: 700;
}

.deep .head h2:focus {
    outline: none;
}

.deep .body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

@keyframes fade {
    from {
        opacity: 0;
    }
}

@keyframes deepUp {
    from {
        transform: translateY(100%);
    }
}

.task-detail .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.facts {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
    font-size: 14px;
    color: var(--muted);
}

.facts li {
    margin-bottom: 4px;
}

.block {
    margin-top: 22px;
}

.block h3 {
    margin-bottom: 10px;
    font-size: 15px;
    color: var(--muted);
}

.desc {
    font-size: 15.5px;
    line-height: 1.6;
}

.desc p + p {
    margin-top: 0.5em;
}

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.timeline li {
    position: relative;
    padding: 0 22px 16px 0;
}

.timeline li::before {
    content: '';
    position: absolute;
    right: 3px;
    top: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
}

.timeline li::after {
    content: '';
    position: absolute;
    right: 7px;
    top: 19px;
    bottom: 0;
    width: 1px;
    background: var(--line);
}

.timeline li:last-child {
    padding-bottom: 0;
}

.timeline li:last-child::after {
    display: none;
}

.timeline .when {
    font-size: 12.5px;
    color: var(--muted);
}

.timeline .what {
    font-size: 15px;
    line-height: 1.55;
}

.entries {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.entries li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
}

.entries .dur {
    flex: none;
    min-width: 3em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.entries .mid {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
}

.entries .note {
    font-size: 14.5px;
}

.entries .when {
    font-size: 12.5px;
    color: var(--muted);
}

.total {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 700;
}

.confirm .lead {
    font-size: 15.5px;
    line-height: 1.6;
    margin-bottom: 12px;
}

.confirm h3 {
    margin: 18px 0 8px;
    font-size: 16px;
}

.checks {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}

.checks li {
    position: relative;
    padding: 0 26px 0 0;
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.55;
}

.checks li::before {
    content: '✓';
    position: absolute;
    right: 2px;
    top: 0;
    color: var(--green);
    font-weight: 700;
}

.donebox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    border-radius: 18px;
    background: var(--wash);
    color: var(--green-deep);
    font-size: 15.5px;
    line-height: 1.6;
    margin-bottom: 14px;
}

.donebox:focus {
    outline: none;
}

.donebox p + p {
    margin-top: 0.4em;
}

/* ── the account ───────────────────────────────────────────────────────── */

.plan-card {
    position: relative;
    margin-top: 22px;
    border: 2px solid var(--ink);
}

.plan-card .sticker {
    position: absolute;
    top: -14px;
    left: 20px;
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--yellow);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    transform: rotate(-4deg);
    box-shadow: 3px 3px 0 var(--ink);
}

.plan-name {
    font-size: 17px;
    font-weight: 700;
}

.price {
    margin-top: 6px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

.price .per {
    font-size: 15px;
    font-weight: 400;
    color: var(--muted);
}

.vat {
    margin-top: 2px;
    font-size: 13px;
    color: var(--muted);
}

.cancel-zone {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

.cancel-zone .btn {
    margin-top: 10px;
}

/* ── the connections ───────────────────────────────────────────────────── */

.conn-head .sentence {
    margin-top: 12px;
    font-size: 16.5px;
    font-weight: 700;
}

/**
 * A connection row carries the reason it exists: an access is worth giving
 * only if the client can see what it is for, so the line comes before the
 * detail, not inside it.
 */
.conn-row .d {
    line-height: 1.5;
}

.conn-row .way {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 2px 11px;
    border-radius: 999px;
    background: var(--chat-us);
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 700;
}

/* Mid-conversation, so it stays the height of a short bubble. */
.access-card {
    padding: 14px 16px 16px;
}

.access-card .cap {
    margin-bottom: 0;
}

.access-card .cap h2,
.access-card .cap h3 {
    font-size: 16px;
}

.surface-detail .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.surface-detail .lead {
    margin-top: 12px;
    font-size: 15.5px;
    line-height: 1.6;
}

.surface-detail .tiles {
    margin-top: 12px;
}

.waylist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.way {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.way .cap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.way h4 {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.35;
}

.way .sub {
    margin-top: 6px;
}

.way .btn {
    margin-top: 12px;
}

/* A way that is not ready yet: visible, explained, and out of reach. */
.way.quiet {
    background: var(--side);
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 9px;
    border: 1.5px solid var(--green-soft);
    border-radius: 999px;
    background: var(--wash);
    color: var(--green-deep);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.chip.soon {
    border-color: var(--line);
    background: var(--chat-us);
    color: var(--muted);
}

.stepshead {
    margin-top: 16px;
    font-size: 15px;
    font-weight: 700;
}

.steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 0;
    padding-inline-start: 22px;
    font-size: 15px;
    line-height: 1.55;
}

/* An account number or an address that a client has to compare, letter by
   letter, must not be cut in half by a line break. */
.steps bdi,
.removal bdi {
    white-space: nowrap;
}

.copyrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--wash);
}

.copyrow .k {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--green-deep);
}

/* An address must not push the sheet wider than the phone. */
.copyrow .val {
    min-width: 0;
    font-weight: 700;
    word-break: break-all;
}

.copyrow .said {
    flex-basis: 100%;
    font-size: 13px;
    color: var(--green-deep);
}

.copyrow .said:empty {
    display: none;
}

.removal {
    margin-top: 16px;
    padding-inline-start: 12px;
    border-inline-start: 3px solid var(--green-soft);
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
}

.surface-acts {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}

.surface-acts .acts {
    margin-top: 0;
}

/* ── the desk ──────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
    .compose .kbd {
        display: inline;
    }
}

@media (min-width: 1024px) {
    /**
     * The menu is the FIRST column, and in right-to-left writing that is the
     * right edge — exactly where the burger stands on the phone.
     */
    .app {
        display: grid;
        grid-template-columns: 268px minmax(0, 1fr);
        grid-template-rows: var(--head) minmax(0, 1fr);
        height: 100dvh;
    }

    .top {
        grid-column: 1 / -1;
        padding: 0 20px;
    }

    .top .where,
    .top .plan {
        display: inline;
    }

    .burger,
    .navclose {
        display: none;
    }

    .nav {
        position: static;
        grid-row: 2;
        grid-column: 1;
        width: auto;
        transform: none;
        visibility: visible;
        transition: none;
        z-index: auto;
        padding-top: 16px;
    }

    .scrim {
        display: none;
    }

    .main {
        grid-row: 2;
        grid-column: 2;
        min-height: 0;
    }

    /* The conversation runs in a 760px column, set by padding so the feed's
       own scrollbar stays at the edge of the window, where it belongs. */
    .feed,
    .files,
    .offhours,
    .filenote,
    .compose {
        padding-inline: max(22px, calc((100% - var(--column)) / 2));
    }

    .opbar {
        margin-inline: max(22px, calc((100% - var(--column)) / 2));
    }

    .feed {
        padding-block: 26px 10px;
    }

    .page {
        padding: 28px 22px 48px;
    }

    .deep {
        align-items: center;
        padding: 24px;
    }

    .deep .pane {
        width: min(680px, 100%);
        max-height: 84dvh;
        border: 2px solid var(--ink);
        border-radius: 22px;
        box-shadow: 10px 10px 0 var(--green);
        padding-bottom: 0;
        animation: rise 0.2s ease;
    }

    .deep .grip {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}