/* Syphon Chat in the browser: private conversations end to end (webe2e1, WE-WEB; docs\chat\webe2e\web.md). The browser's own
   device (the own-device question, the waiting screen with its code), the conversation's additions (the pill, the timer's
   chip, the engine's lines, the marks, the foot's note) and sign-out's question. Only the tokens of tokens.g.css and the
   app's own numbers (css\app.css): the rooms' look, the Vault's sizes; sized for a finger on a phone (44 and more), nothing
   wider than the window at 390. Your devices, the email code step and the security code draw themselves since weblook1
   (Chat\DevicesCard.razor.css, CodeStepDialog.razor.css, SecurityCodeDialog.razor.css and DeviceCode.razor.css). */

/* ── a private conversation's place before this browser reads it (weblook1, WL-PANES; chat\WEB-LOOK-CONTRACT.md section 3,
   docs\chat\web\look\panes.md): one hero card on Syphon's ground (app.css: .direct-body, .pane-ground, the hero card
   family). At its top, who it is with: the other player's picture as the card's disc in its ring of light with the lock on
   it (a glass badge of 26 in Syphon's violet, ringed in the panel's colour; a press on it opens their profile, the keyboard's
   ring around the disc), and beside it their name (17 semibold) over the old card's View profile, a quiet link (44 high for
   a finger). The set-up card's first step on a phone has the app's own icon (56, its rounded square) in the same light. The
   waiting card: the code as DeviceCode draws it (WL-SETTINGS' component), Start over at its foot under the card's faint
   line. While the engine opens its store: a spinner on the ground. ── */
.direct-who { display: flex; align-items: center; gap: 18px; min-width: 0; margin-bottom: 10px; }
.direct-who-words { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.direct-who-name { font-size: 17px; line-height: 23px; font-weight: 600; color: var(--brush-text, #F4F3F9); overflow-wrap: anywhere; }
.direct-profile { display: inline-flex; align-items: center; min-height: 26px; font-size: var(--ui-type-small, 13.5px); border-radius: 4px; }
@media (pointer: coarse) { .direct-profile { min-height: 44px; margin: -9px 0; } }
.direct-person { width: 64px; height: 64px; padding: 0; margin-bottom: 0; cursor: pointer; transition: box-shadow var(--normal) var(--ease-out); }
.direct-person:focus-visible { outline-offset: 3px; }
.direct-person > .avatar { pointer-events: none; }
.direct-person:hover {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--disc) 16%, transparent), 0 10px 34px color-mix(in srgb, var(--disc) 46%, transparent);
}
.direct-person:active > .avatar { transform: translateY(1px); }
.direct-lock {
    position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center;
    justify-content: center; color: #fff; border: 3px solid var(--ui-panel-top, #121220);
    background: radial-gradient(circle at 32% 26%, #9A7BFF 0%, #6C49F9 55%, #4E2FD0 100%); box-shadow: 0 4px 12px #6C49F966;
}
.direct-lock > .icon { stroke-width: 2.4; }
/* the same lock on the other player's picture where a private conversation starts, ringed in the messages' ground */
.welcome-person > .direct-lock { border-color: var(--brush-chat-messages, #0F161F); }
.direct-app {
    width: 56px; height: 56px; border-radius: 15px; flex: 0 0 auto; margin-bottom: 4px;
    box-shadow: 0 0 0 1px #FFFFFF1F, 0 0 0 7px #7C3AED1A, 0 10px 30px #7C3AED52;
}
.direct-app > img { width: 56px; height: 56px; border-radius: 15px; }
.direct-wait { display: flex; align-items: center; justify-content: center; padding: 24px; }
.direct-card .hero-callout + .hero-actions, .direct-card .direct-quiet + .hero-actions { margin-top: 12px; }
/* the quiet line under the set-up card's buttons: its words, then Get Syphon Vault in the same line where it fits (a finger's
   room around the link on a touch screen) */
.direct-note { display: block; }
.direct-note > .direct-get { white-space: nowrap; }
@media (pointer: coarse) { .direct-note > .direct-get { display: inline-block; padding: 8px 0; margin: -8px 0; } }
.direct-card.waiting > .device-startover { margin-top: 10px; border-top-color: var(--ui-edge-faint); color: var(--ui-text-quiet); font-size: var(--ui-type-small); }

/* ── the own-device question and the waiting screen (the direct card's frame: radius 16.5, the profile's ground, a soft
   shadow; its disc 52, its title 21, its words 15.2 on 22) ── */
.device-card {
    padding: 28px; border-radius: 16.5px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
    background: var(--brush-profile-ground, #161D29); border: 1px solid var(--brush-border-subtle, #1C2532); box-shadow: 0 12px 40px #00000059;
}
.device-card.compact { padding: 20px 22px; gap: 10px; box-shadow: none; background: var(--brush-surface-raised, #141A24); }
.settings-card .device-card { padding: 16px 0 4px; background: none; border: 0; box-shadow: none; border-radius: 0; }
.settings-card .device-card + .devices-list { margin-top: 14px; }
.device-disc {
    width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
    background: var(--brush-accent-soft, #6C49F92E); border: 1px solid #6C49F966; color: var(--brush-accent-label, #978AFB);
}
.device-disc.waiting { background: #F5B5441F; border-color: #F5B54466; color: var(--brush-warning, #F5B544); }
.device-title { margin: 0; font-size: 21px; font-weight: 600; line-height: 28px; }
.device-card.compact .device-title { font-size: 17px; line-height: 24px; }
.device-text { margin: 0; color: var(--brush-text-secondary, #B4C6DB); line-height: 22px; }
.device-lead {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 20px;
    background: #FFFFFF0A; border: 1px solid var(--brush-border-subtle, #1C2532); color: var(--brush-text-secondary, #B4C6DB);
}
.device-lead > .icon { flex: 0 0 auto; margin-top: 2px; }
.device-lead.warning { background: var(--brush-warning-soft, #F5B5441F); border-color: #F5B54459; color: var(--brush-warning-text, #FBDFA6); }
.device-lead.warning > .icon { color: var(--brush-warning, #F5B544); }
.device-lead.danger { background: var(--brush-danger-soft, #F25A6C33); border-color: #F25A6C59; color: var(--brush-danger-text, #FFB9C1); }
.device-lead.danger > .icon { color: var(--brush-danger, #F25A6C); }
.device-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.device-actions > .btn { min-height: 44px; height: auto; padding-top: 8px; padding-bottom: 8px; }
.device-startover {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 8px; padding-top: 14px;
    border-top: 1px solid var(--brush-border-subtle, #1C2532); color: var(--brush-text-muted, #8999AA); font-size: 14px;
}
.device-startover > .btn { min-height: 40px; }

/* ── the conversation: the pill after the name (the Vault's Chat.E2EPill: 24 high, 8 inside, radius 12, 12.5 semibold, the
   lock 12), the timer's chip, the engine's lines (a 34 disc of Hover.Light with its mark, the words 14.4 in the secondary
   colour, the time 12.5 muted, a link), the marks after a message's time, the deleted line, the foot's note ── */
.e2e-pill {
    display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 8px; margin-left: 10px; flex: 0 0 auto; border-radius: 12px;
    background: var(--brush-hover-light, #FFFFFF14); border: 1px solid var(--brush-border, #2A3444); color: var(--brush-text-secondary, #B4C6DB);
    font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: border-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.e2e-pill:hover { color: var(--brush-text, #F4F3F9); border-color: var(--brush-border-strong, #3A4659); }
.e2e-pill > .icon { width: 12px; height: 12px; stroke-width: 2.2; }
.timer-chip { margin-right: 6px; }
.e2e-line { display: flex; align-items: flex-start; gap: 18px; margin: 6px 24px 6px 20px; min-height: 34px; }
.e2e-line.empty { margin-top: 18px; }
.e2e-line-disc {
    width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; margin-left: 3px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--brush-hover-light, #FFFFFF14); color: var(--brush-text-secondary, #B4C6DB);
}
.e2e-line.warning .e2e-line-disc { background: var(--brush-warning-soft, #F5B5441F); color: var(--brush-warning, #F5B544); }
.e2e-line-words { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; max-width: 780px; padding-top: 7px; }
.e2e-line-text { font-size: 14.4px; line-height: 20px; color: var(--brush-text-secondary, #B4C6DB); overflow-wrap: anywhere; }
.e2e-line-text.body { color: var(--brush-chat-body, #DDE3EC); }
.e2e-line-time { font-size: 12.5px; color: var(--brush-text-muted, #8999AA); white-space: nowrap; }
.e2e-line .link-button { font-size: 14px; }
.msg-mark { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 7px; color: var(--brush-text-muted, #8999AA); vertical-align: -1px; }
.msg-mark .icon { width: 12px; height: 12px; stroke-width: 2.1; }
.msg-text > .msg-mark { margin-left: 6px; }
.msg-deleted { font-size: 14.4px; line-height: 22px; font-style: italic; color: var(--brush-text-muted, #8999AA); }
.msg-picture-vault {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 12px; border-radius: 8px; font-size: 13.5px;
    background: var(--brush-surface-raised, #141A24); border: 1px solid var(--brush-border-subtle, #1C2532); color: var(--brush-text-secondary, #B4C6DB);
}
.e2e-foot {
    display: flex; align-items: flex-start; gap: 10px; margin: 6px 24px 8px 20px; padding: 9px 12px; border-radius: 10px; font-size: 14px; line-height: 20px;
    background: var(--brush-surface-raised, #141A24); border: 1px solid var(--brush-border-subtle, #1C2532); color: var(--brush-text-secondary, #B4C6DB);
    flex: 0 0 auto;
}
.e2e-foot > .icon { flex: 0 0 auto; margin-top: 2px; color: var(--brush-text-muted, #8999AA); }
.chat-frame.narrow .e2e-line { margin-left: 8px; margin-right: 12px; gap: 12px; }
.chat-frame.narrow .e2e-foot { margin: 6px 8px 8px; }
.chat-frame.narrow .e2e-pill .e2e-pill-text { display: none; }
.chat-frame.narrow .e2e-pill { width: 30px; height: 30px; justify-content: center; padding: 0; border-radius: 50%; }
.chat-frame.narrow .e2e-pill > .icon { width: 14px; height: 14px; }

/* ── sign-out's question: its two ways across the dialog, one under another, each at least 48 ── */
.sign-out-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.sign-out-choices > .btn { width: 100%; min-height: 48px; height: auto; padding: 10px 16px; justify-content: center; white-space: normal; text-align: center; }

/* ── the report question of a private message: the quote, what staff may see (the reported message ticked, up to 10 before
   it, each one line with its author and time), the reasons, the note ── */
.private-report { width: 480px; }
.report-quote {
    display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; min-width: 0;
    background: #0F151E; border: 1px solid var(--brush-border-subtle, #1C2532); border-left: 3px solid var(--brush-danger, #F25A6C);
}
.report-quote-head { font-size: 13px; color: var(--brush-text-muted, #8999AA); }
.report-quote-head b { color: var(--brush-text, #F4F3F9); font-weight: 600; }
.report-quote-text {
    font-size: 14.4px; line-height: 20px; color: var(--brush-text, #F4F3F9); overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.report-share { display: flex; flex-direction: column; gap: 6px; }
.report-pick {
    display: flex; align-items: flex-start; gap: 10px; min-height: 32px; padding: 6px 0; cursor: pointer; min-width: 0;
    font-size: 14.4px; line-height: 20px; color: var(--brush-text, #F4F3F9);
}
.report-pick input {
    appearance: none; -webkit-appearance: none; flex: 0 0 auto; display: grid; place-content: center; width: 18px; height: 18px;
    margin: 1px 0 0; border-radius: 5px; border: 1.5px solid var(--brush-border-strong, #3A4659); background: var(--brush-field, #151A22); cursor: pointer;
}
.report-pick input:checked { background: var(--brush-accent, #6C49F9); border-color: var(--brush-accent, #6C49F9); }
.report-pick input:checked::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.report-pick input:focus-visible { outline: 2px solid var(--brush-accent-bright, #8F85F9); outline-offset: 2px; }
.report-pick:has(input:disabled) { cursor: default; opacity: .5; }
.report-pick:has(input:disabled) input { cursor: default; }
.report-earlier-label { font-size: 13px; color: var(--brush-text-secondary, #B4C6DB); margin-top: 2px; }
.report-earlier { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; padding-left: 2px; }
.report-pick.earlier { font-size: 13.5px; color: var(--brush-text-secondary, #B4C6DB); }
.report-earlier-line { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-earlier-line b { color: var(--brush-text, #F4F3F9); font-weight: 600; }
.report-earlier-line time { margin: 0 4px; color: var(--brush-text-muted, #8999AA); }
.report-reasons { display: flex; flex-direction: column; }

/* ── a phone: the cards and dialogs across the width, every button of the question and the waiting screen at least 48 and
   one under another, nothing wider than the window ── */
@media (max-width: 759px) {
    .device-card { padding: 20px 18px; }
    .device-title { font-size: 19px; line-height: 26px; }
    .device-actions { flex-direction: column; }
    .device-actions > .btn { width: 100%; min-height: 48px; justify-content: center; }
    .device-startover > .btn { width: 100%; min-height: 44px; justify-content: center; }
    .dialog .dialog-band > .btn { min-height: 44px; }
    .report-pick, .private-report .radio-row { min-height: 44px; align-items: center; }
    .report-pick input { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .device-card, .e2e-pill { transition: none; animation: none; }
}