:root {
  color-scheme: light;
  --wine: #7f172a;
  --wine-deep: #5f0d1d;
  --wine-soft: #f8eef0;
  --ink: #201e20;
  --muted: #756f72;
  --line: #e9e4e5;
  --panel: #ffffff;
  --quiet: #f8f7f7;
  --shadow: 0 14px 38px rgba(50, 19, 26, .075);
  --topbar: 76px;
  --rail: 82px;
  --sidebar: 123px;
  font-family: Aptos, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; background: #fff; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow: hidden; background: #fff; color: var(--ink); }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid rgba(127, 23, 42, .35); outline-offset: 2px; }
/* Reported directly: "none of the buttons are responsive... missing the click effect" - every
   button on this page relied only on whatever its own specific class did on :hover, and none of
   those (nor this base rule) had a :active state at all, so a press gave no feedback the click
   even registered. One rule, targeting every real <button> regardless of which other class it
   also carries, so it never needs repeating per component. Deliberately scoped to `button` only,
   not a broader `[role=button]` selector - a few custom controls (AVI's own character, see
   avi-widget.css) already use `transform` for real positioning, and a blanket transform here
   would clobber that instead of adding to it; each of those gets its own composed :active rule
   instead. */
button:not(:disabled):active { transform: scale(.96); filter: brightness(.92); }
@media (prefers-reduced-motion: no-preference) { button { transition: transform .08s ease, filter .08s ease; } }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { position: fixed; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.app-shell { height: 100%; display: grid; grid-template: var(--topbar) minmax(0, 1fr) / var(--rail) var(--sidebar) minmax(0, 1fr); background: #fff; }
.topbar { grid-column: 1 / -1; display: flex; align-items: center; min-width: 0; padding: 0 22px 0 18px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.97); z-index: 30; }
.brand { width: calc(var(--rail) + var(--sidebar) - 18px); flex: 0 0 auto; border: 0; background: transparent; display: flex; align-items: center; gap: 13px; text-align: left; padding: 0; }
.brand-mark { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid var(--wine); border-radius: 12px; box-shadow: 0 7px 18px rgba(127,23,42,.12); position: relative; }
.brand-mark::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(127,23,42,.22); border-radius: 8px; transform: rotate(45deg); }
.brand-mark span { color: var(--wine); font-size: 18px; font-weight: 650; z-index: 1; }
.brand-leaf { width:48px; height:48px; display:block; object-fit:contain; border:0; background:transparent; }
.brand-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand-copy strong { color: var(--wine-deep); font-size: 18px; line-height: 1; letter-spacing: .22em; }
.brand-copy small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size: 11px; letter-spacing: .015em; }
.global-search { height: 42px; flex: 1 1 520px; max-width: 720px; min-width: 180px; display: flex; align-items: center; gap: 10px; padding: 0 11px 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--quiet); color: #8d8588; }
.global-search:focus-within { background: white; border-color: rgba(127,23,42,.42); box-shadow: 0 0 0 3px rgba(127,23,42,.06); }
.global-search svg { width: 18px; height: 18px; }
.global-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; }
.global-search input::placeholder { color: #999194; }
kbd { border: 1px solid #ded8da; border-radius: 5px; padding: 2px 6px; background: white; color: #948d90; font-size: 11px; font-family: inherit; }
.top-actions { margin-left: auto; padding-left: 18px; display: flex; align-items: center; gap: 9px; }
.icon-button { width: 39px; height: 39px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: white; position: relative; }
.icon-button:hover { border-color: rgba(127,23,42,.28); color: var(--wine); background: #fdfafb; }
.notification-dot { position: absolute; width: 7px; height: 7px; top: 7px; right: 8px; border: 2px solid white; border-radius: 50%; background: var(--wine); }
.avis-trigger { height: 39px; padding: 0 14px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(127,23,42,.34); border-radius: 10px; background: white; color: var(--wine); font-size: 13px; font-weight: 650; }
.avis-trigger:hover { background: var(--wine-soft); }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--wine); box-shadow: 0 0 0 4px rgba(127,23,42,.11); }
.profile-button { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 0 0 0 4px; border: 0; background: transparent; text-align: left; }
.profile-control { display: grid; grid-template-columns: auto; justify-items: start; min-width: 0; }
.top-logout { margin: 2px 0 0 4px; color: var(--wine); font-size: 11px; font-weight: 650; line-height: 1; text-decoration: none; }
.top-logout:hover { text-decoration: underline; }
.profile-copy { display: flex; flex-direction: column; min-width: 0; }
.profile-copy strong { font-size: 12px; font-weight: 650; }
.mobile-menu { display: none; margin-right: 10px; }

.app-rail { grid-row: 2; padding: 18px 11px 12px; display: flex; flex-direction: column; align-items: stretch; gap: 7px; border-right: 1px solid var(--line); background: #fff; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; -webkit-overflow-scrolling:touch; z-index: 20; }
.rail-item { min-height: 57px; padding: 7px 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #716b6d; }
.rail-item svg { width: 19px; height: 19px; }
.rail-item img { width:48px; height:48px; display:block; object-fit:contain; }
.rail-item span { font-size: 10px; line-height: 1; }
.rail-item:hover { color: var(--wine); background: var(--wine-soft); }
.rail-item.active { border-color: rgba(127,23,42,.22); color: var(--wine); background: #fff; box-shadow: 0 7px 18px rgba(76,25,34,.08); }
.rail-item.active svg { stroke-width: 2; }
.rail-end { margin-top: auto; }

.mail-nav { grid-row: 2; padding: 20px 16px 16px; min-width: 0; border-right: 1px solid var(--line); background: #fff; overflow-y: auto; overscroll-behavior:contain; scrollbar-gutter:stable; -webkit-overflow-scrolling:touch; z-index: 19; }
.compose-button { width: 100%; height: 45px; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--wine); border-radius: 11px; background: var(--wine); color: white; box-shadow: 0 9px 22px rgba(127,23,42,.15); font-size: 14px; font-weight: 650; }
.compose-button:hover { background: var(--wine-deep); }
.compose-button svg { width: 18px; height: 18px; }
.compose-button-icon { width: auto; height: auto; padding: 6px; border: 0; border-radius: 10px; background: transparent; box-shadow: none; }
.compose-button-icon:hover { background: var(--wine-soft); }
.compose-button-icon:active .compose-icon { background-color: rgb(35,97,99); }
.compose-icon { width: 76px; height: 87px; display: block; background-color: #a60505; -webkit-mask-image: url(/compose-icon.png); mask-image: url(/compose-icon.png); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.account-switcher { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.account-switcher select { position: absolute; inset: 0; width: 100%; opacity: 0; }
.account-switcher > svg { display: none; }
.folder-group { margin-top: 10px; }
.folder-group + .folder-group { margin-top: 20px; }
.nav-label { margin: 0 10px 7px; color: #9a9295; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.folder-item { width: 100%; height: 38px; padding: 0 10px; display: flex; align-items: center; gap: 11px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #565052; font-size: 13px; text-align: left; }
.folder-item svg { width: 17px; height: 17px; color: #837b7e; }
.folder-item span { flex: 1; }
.folder-item strong { color: #9a9294; font-size: 11px; }
.folder-item:hover { color: var(--wine); background: white; }
.folder-item.active { border-color: rgba(127,23,42,.18); background: white; color: var(--wine); box-shadow: 0 5px 16px rgba(70,28,36,.05); font-weight: 650; }
.folder-item.active svg { color: var(--wine); stroke-width: 2; }
.domain-card { margin-top: 24px; padding: 13px; border: 1px solid rgba(127,23,42,.2); border-radius: 11px; background: #fff; }
.domain-card > div { display: flex; gap: 9px; align-items: flex-start; }
.domain-card svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--wine); }
.domain-card span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.domain-card strong { font-size: 11px; }
.domain-card small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.domain-card button { margin: 10px 0 0 26px; padding: 0; border: 0; background: transparent; color: var(--wine); font-size: 11px; font-weight: 650; }

.main-surface { grid-column: 3 / 4; grid-row: 2; min-width: 0; min-height: 0; overflow:hidden; background:#fff; }
.view-panel { height: 100%; }
.app-shell.landing-active { grid-template-rows:auto auto minmax(0,1fr); }
.app-shell.landing-active .topbar { display:none; }
.app-shell.landing-active .app-rail,.app-shell.landing-active .mail-nav,.app-shell.landing-active .main-surface { grid-row:3; }
.app-shell.landing-active .main-surface { display:grid; grid-template-rows:auto minmax(520px,1fr); overflow-y:auto; background:#fff; }
.corporate-landing { height:auto; min-height: 0; padding: clamp(18px,2.5vw,36px); overflow:visible; background:#fff; }
.landing-hero { position:relative; isolation:isolate; grid-column:1/-1; grid-row:1; width:100%; aspect-ratio:2048/749; overflow:hidden; contain:layout paint; background:#fff; }
.landing-hero::before { content:""; position:absolute; z-index:-1; inset:0; background:#fff; }
.landing-hero-image { width:100%; height:100%; position:absolute; inset:0; display:block; object-fit:contain; object-position:center top; background:#fff; }
.landing-hero-bar { position:absolute; z-index:2; inset:0 0 auto; min-height:68px; padding:clamp(10px,2vw,28px) clamp(14px,2.5vw,34px); display:flex; align-items:flex-start; justify-content:space-between; gap:24px; background:transparent; pointer-events:none; }
.landing-logo { width:clamp(165px,23vw,390px); height:auto; aspect-ratio:723/262; object-fit:contain; object-position:left top; background:transparent!important; filter:none; image-rendering:auto; }
.landing-search { width:clamp(150px,22vw,320px); display:flex; align-items:center; gap:8px; border-bottom:1px solid #2d4e49; color:#164b43; pointer-events:auto; filter:drop-shadow(0 1px 2px rgba(255,255,255,.95)); }
.landing-search input { width:100%; min-width:0; padding:7px 2px; border:0; outline:0; background:transparent; color:#173c37; font-size:13px; }
.landing-search svg { width:18px; height:18px; flex:0 0 auto; }
.landing-sectors { position:relative; z-index:3; grid-column:1/-1; grid-row:2; min-width:0; padding:12px clamp(12px,2vw,28px); border-bottom:1px solid var(--line); background:#fff; }
.landing-heading { max-width: 760px; margin-bottom: clamp(16px,2vw,24px); }
.landing-heading h1 { margin: 6px 0 10px; color: #321a20; font-size: clamp(30px,4.5vw,54px); line-height: 1; letter-spacing: -.045em; }
.landing-heading > p:last-child { margin: 0; color: var(--muted); font-size: 14px; }
.landing-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: clamp(7px,1vw,15px); }
.landing-tile { position:relative; min-width:0; aspect-ratio:1.5; padding:0; overflow:hidden; display:block; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 12px 30px rgba(34,20,23,.11); text-align:left; transition:transform .22s ease,box-shadow .22s ease; }
.landing-tile img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .5s ease; }
.landing-tile > span { position:absolute; z-index:2; inset:0 0 auto; min-height:58px; padding:11px 14px 13px; display:flex; flex-direction:column; gap:3px; color:#fff; background:linear-gradient(180deg,rgba(20,12,14,.82),rgba(20,12,14,.5) 68%,transparent); pointer-events:none; }
.landing-tile strong { font-size:clamp(12px,1.15vw,17px); line-height:1.15; }
.landing-tile small { color:rgba(255,255,255,.82); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.landing-tile:hover,.landing-tile:focus-visible { transform:translateY(-5px); box-shadow:0 22px 45px rgba(34,20,23,.27); }
.landing-tile:hover img { transform:scale(1.035); }
.landing-tile.selected { outline:3px solid #bc953e; outline-offset:3px; }
.landing-mail-heading { margin:clamp(20px,3vw,34px) 0 10px; padding-top:18px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); }
.landing-mail-heading h2 { margin:2px 0 0; color:var(--wine-deep); font-size:clamp(22px,2.5vw,32px); }
.landing-mail-heading .compose-button { width:auto; min-width:150px; }
.app-shell.landing-active .mail-workspace { height:clamp(520px,72dvh,900px); min-height:520px; border-top:1px solid var(--line); }
.corporate-menu { position:fixed; z-index:75; top:calc(var(--topbar) + 12px); right:12px; width:min(310px,calc(100vw - 24px)); padding:13px; display:grid; gap:5px; border:1px solid rgba(127,23,42,.2); border-radius:16px; background:rgba(255,255,255,.97); box-shadow:0 24px 65px rgba(38,18,23,.24); transform:translateX(calc(100% + 24px)); opacity:0; visibility:hidden; transition:transform .24s ease,opacity .2s ease,visibility .2s; }
.app-shell.corporate-menu-open .corporate-menu { transform:translateX(0); opacity:1; visibility:visible; }
.corporate-menu header { padding:3px 4px 10px; display:flex; align-items:center; justify-content:space-between; color:var(--wine-deep); }
.corporate-menu header button { width:30px; height:30px; border:0; border-radius:50%; background:var(--quiet); font-size:20px; }
.corporate-menu > button { min-height:44px; padding:0 12px; border:1px solid transparent; border-radius:9px; background:transparent; color:#4d4548; text-align:left; font-size:12px; font-weight:650; }
.corporate-menu > button:hover,.corporate-menu > button.selected { border-color:rgba(127,23,42,.2); background:var(--wine-soft); color:var(--wine); }
.mail-workspace { height:100%; display:grid; grid-template-columns:minmax(310px,34%) minmax(0,1fr); min-height:0; overflow:hidden; }
.message-list-panel { min-width:0; min-height:0; overflow:hidden; display:grid; grid-template-rows:auto auto minmax(0,1fr); border-right:1px solid var(--line); background:white; }
.list-header { min-height: 84px; padding: 19px 18px 14px 21px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.eyebrow { margin: 0 0 5px; color: var(--wine); font-size: 10px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.list-header h1, .hub-header h1, .avis-stage h1, .placeholder-card h1 { margin: 0; font-size: 24px; line-height: 1.12; font-weight: 640; letter-spacing: -.025em; }
.list-header-actions { display: flex; gap: 7px; }
.icon-button.subtle { width: 34px; height: 34px; border-color: transparent; background: transparent; }
.icon-button.subtle:hover { border-color: var(--line); background: var(--quiet); }
.list-toolbar { height: 42px; padding: 0 17px 8px 21px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line); }
.list-toolbar button { padding: 5px 7px; border: 0; background: transparent; color: #7f787b; font-size: 11px; }
.list-toolbar button:hover { color: var(--wine); }
.select-all input { width: 15px; height: 15px; accent-color: var(--wine); }
.message-total { margin-left: auto; color: #9a9395; font-size: 10px; white-space: nowrap; }
.message-list { min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; -webkit-overflow-scrolling:touch; touch-action:pan-y; }
.message-card { width: 100%; min-height: 116px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; padding: 14px 15px 13px 14px; border: 0; border-bottom: 1px solid #eee9ea; border-left: 3px solid transparent; background: white; text-align: left; cursor: pointer; }
.message-card:focus-visible { outline: 2px solid rgba(127,23,42,.35); outline-offset: -2px; }
.message-card:hover { background: #fcf9fa; }
.message-card.selected { border-left-color: var(--wine); background: var(--wine-soft); }
.message-card.unread { background: #fdfafb; }
.message-card.unread .message-sender, .message-card.unread .message-subject { font-weight: 720; color: #241f21; }
.message-check { padding-top: 2px; }
.message-check input { width: 14px; height: 14px; accent-color: var(--wine); }
.message-card-content { min-width: 0; }
.message-card-top { display: flex; align-items: center; gap: 8px; }
.message-sender { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: 580; }
.message-time { color: #979093; font-size: 10px; white-space: nowrap; }
.message-subject { margin: 8px 0 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #4d4749; font-size: 12px; }
.message-preview { margin: 0; display: -webkit-box; overflow: hidden; color: #8a8385; font-size: 11px; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.message-flags { margin-top: 8px; display: flex; align-items: center; gap: 6px; color: #999194; }
.message-flags svg { width: 13px; height: 13px; }
.importance { display: inline-flex; padding: 2px 5px; border-radius: 4px; background: var(--wine-soft); color: var(--wine); font-size: 8px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.list-loading { padding: 18px; }
.list-loading span { height: 86px; margin-bottom: 9px; display: block; border-radius: 8px; background: linear-gradient(90deg,#f5f2f3 20%,#fcfbfb 40%,#f5f2f3 60%); background-size: 220% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position-x: -220%; } }
.list-state { padding: 54px 24px; text-align: center; color: var(--muted); }
.list-state svg { width: 28px; height: 28px; color: var(--wine); }
.list-state h3 { margin: 13px 0 7px; color: var(--ink); font-size: 15px; }
.list-state p { margin: 0; font-size: 12px; line-height: 1.5; }

.reader-panel { min-width: 0; min-height: 0; background: #fff; }
.reader-empty { height: 100%; padding: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.reader-empty[hidden], .message-reader[hidden] { display: none; }
.empty-emblem { width: 65px; height: 65px; display: grid; place-items: center; border: 1px solid rgba(127,23,42,.25); border-radius: 18px; color: var(--wine); box-shadow: var(--shadow); }
.empty-emblem svg { width: 27px; height: 27px; }
.reader-empty h2 { margin: 19px 0 7px; font-size: 18px; font-weight: 620; }
.reader-empty p { max-width: 360px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.message-reader { height: 100%; min-height: 0; display: grid; grid-template-rows: 56px minmax(0, 1fr); }
.reader-toolbar { padding: 0 19px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.reader-back { display: none; }
.reader-tools { display: flex; align-items: center; gap: 3px; }
.tool-button { height: 34px; padding: 0 9px; display: flex; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #6e6769; font-size: 11px; }
.tool-button svg { width: 16px; height: 16px; }
.tool-button:hover { border-color: var(--line); background: var(--quiet); color: var(--wine); }
.tool-button.danger:hover { color: #a10e25; }
.reader-toolbar > .icon-button:last-child { margin-left: auto; }
.reader-content { min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; -webkit-overflow-scrolling:touch; touch-action:pan-y; padding:31px clamp(24px,4vw,61px) 56px; }
.reader-heading { display: flex; gap: 20px; align-items: flex-start; }
.reader-heading > div { flex: 1; min-width: 0; }
.reader-label { color: var(--wine); font-size: 9px; font-weight: 750; letter-spacing: .14em; }
.reader-heading h2 { max-width: 850px; margin: 8px 0 0; font-size: clamp(20px, 2.3vw, 28px); line-height: 1.22; font-weight: 620; letter-spacing: -.025em; overflow-wrap: anywhere; }
.reader-heading time { padding-top: 20px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.sender-row { margin-top: 25px; display: flex; align-items: center; gap: 11px; }
.sender-avatar { width: 39px; height: 39px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; background: var(--wine-soft); color: var(--wine); font-size: 12px; font-weight: 750; text-transform: uppercase; }
.sender-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sender-copy strong { font-size: 13px; }
.sender-copy button { max-width: 100%; padding: 0; display: flex; align-items: center; gap: 3px; border: 0; background: transparent; color: var(--muted); font-size: 11px; }
.sender-copy button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sender-copy button svg { width: 13px; height: 13px; }
.sender-row > .icon-button { margin-left: auto; }
.recipient-details { margin: 13px 0 0 50px; padding: 12px 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fbfafa; font-size: 11px; }
.recipient-details dt { color: #9a9295; }
.recipient-details dd { margin: 0; overflow-wrap: anywhere; color: #5e5759; }
.attachment-list { margin: 19px 0 0 50px; display: flex; flex-wrap: wrap; gap: 8px; }
.attachment-chip { padding: 7px 10px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 7px; background: white; color: #5f585b; font-size: 10px; }
.attachment-chip svg { width: 14px; height: 14px; color: var(--wine); }
.thread-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--wine-soft); color: var(--wine); font: 700 10px/16px Aptos, "Segoe UI", sans-serif; }
.thread-strip { margin: 13px 0 0 50px; border: 1px solid var(--line); border-radius: 8px; background: #fbfafa; overflow: hidden; }
.thread-strip[hidden] { display: none; }
.thread-strip-head { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--wine); font: 700 10px/1 Aptos, "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.thread-strip-head svg { width: 13px; height: 13px; }
.thread-strip-list { max-height: 168px; overflow-y: auto; }
.thread-strip-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 0; border-top: 1px solid var(--line); background: white; color: #5e5759; font-size: 11px; text-align: left; cursor: pointer; }
.thread-strip-item:first-child { border-top: 0; }
.thread-strip-item:hover { background: var(--wine-soft); }
.thread-strip-sender { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #241f21; }
.thread-strip-time { flex: none; color: #9a9295; }
.message-body-wrap { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 25px; }
.message-frame { width: 100%; min-height: 120px; border: 0; background: white; }
.plain-message { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #393537; font: 14px/1.62 Aptos, "Segoe UI", sans-serif; }

@media (min-width: 761px) {
  .mail-workspace { grid-template-columns: minmax(310px, 1fr); }
  .reader-panel { display: none; }
  /* Reported directly: an opened received email "goes on a static blur window instead of an free
     floating window". This fixed-inset panel, dimmed behind by a blurred ::after backdrop, is the
     same "static blur" pattern the compose window was just moved off of (see .compose-dialog) -
     it now instead floats like the rest of the app's windows: draggable by its toolbar (see
     placeReaderWindow/bindReaderWindow), no backdrop dimming the rest of the page, and clear of
     the message list beneath it purely by z-index rather than by blocking interaction with it. */
  .mail-workspace.message-open .reader-panel { position: fixed; z-index: 95; inset: 0; margin: auto; width: min(880px, calc(100vw - 32px)); height: min(760px, calc(100vh - 32px)); display: block; overflow: hidden; border: 1px solid rgba(127,23,42,.28); border-radius: 15px; box-shadow: 0 28px 90px rgba(43,16,22,.3); }
  .mail-workspace.message-open .reader-panel.reader-panel-moved { inset: auto; margin: 0; }
  .message-reader { background: #fff; }
  .reader-back { display: grid; }
  .reader-toolbar { cursor: grab; touch-action: none; }
  .reader-toolbar.dragging { cursor: grabbing; }
}

.account-dialog { width: min(480px, calc(100vw - 32px)); padding: 0; border: 1px solid rgba(127,23,42,.3); border-radius: 15px; background: #fff; box-shadow: 0 30px 90px rgba(43,16,22,.3); }
.account-dialog::backdrop { background: rgba(35,25,28,.38); backdrop-filter: blur(3px); }
.account-dialog-shell { padding: 22px; }
.account-dialog-shell header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.account-dialog-shell header > div { display: flex; align-items: center; gap: 11px; }
.account-dialog-shell header span:not(.avatar) { display: flex; flex-direction: column; gap: 2px; }
.account-dialog-shell header small, .account-help { color: var(--muted); font-size: 12px; }
.account-dialog-shell h2 { margin: 0 0 6px; font-size: 20px; }
.account-help { margin: 0 0 20px; }
.account-dialog-shell > label { display: grid; gap: 6px; margin-top: 14px; color: #5f585b; font-size: 12px; font-weight: 650; }
.account-dialog-shell input, .account-dialog-shell textarea { width: 100%; padding: 10px 11px; border: 1px solid #ded8da; border-radius: 8px; color: var(--ink); background: #fff; resize: vertical; }
.account-dialog-actions { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logout-button { color: var(--wine); font-size: 13px; font-weight: 650; text-decoration: none; }

.hub-view, .avis-view, .placeholder-view { min-height: 0; overflow-y: auto; background: #fff; }
.hub-view { padding: clamp(24px, 4vw, 54px); }
.hub-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.hub-header h1 { font-size: clamp(26px, 3vw, 38px); }
.hub-header > div > p:last-child { margin: 9px 0 0; color: var(--muted); font-size: 14px; }
.access-badge { padding: 9px 12px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(127,23,42,.26); border-radius: 9px; color: var(--wine); font-size: 11px; white-space: nowrap; }
.access-badge svg { width: 14px; height: 14px; }
.signature-access-button{background:#fff;cursor:pointer;font-family:"Neo Sans","Neo-Sans",Arial,sans-serif}
.signature-access-button:hover,.signature-access-button:focus-visible{background:#f8eef0;outline:2px solid rgba(127,23,42,.2);outline-offset:2px}
.sector-layout { margin-top: 35px; display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 23px; align-items: start; }
.sector-grid { display: grid; grid-template-columns: repeat(4, minmax(135px, 1fr)); gap: 13px; }
.sector-tile { min-height: 142px; padding: 17px; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid rgba(127,23,42,.3); border-radius: 10px; background: white; box-shadow: 0 9px 24px rgba(60,19,27,.07); text-align: left; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.sector-tile:hover { transform: translateY(-2px); border-color: var(--wine); box-shadow: 0 14px 30px rgba(80,18,31,.11); }
.sector-tile.active { border-color: var(--wine); background: #fdf9fa; box-shadow: 0 0 0 2px rgba(127,23,42,.08), 0 13px 29px rgba(80,18,31,.09); }
.sector-tile > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(127,23,42,.22); border-radius: 8px; color: var(--wine); }
.sector-tile svg { width: 17px; height: 17px; }
.sector-tile strong { margin-top: 19px; font-size: 12px; line-height: 1.25; }
.sector-tile small { margin-top: 5px; color: var(--muted); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.sector-detail { min-height: 328px; position: sticky; top: 0; padding: 25px; border: 1px solid rgba(127,23,42,.28); border-radius: 12px; background: white; box-shadow: var(--shadow); }
.sector-symbol { width: 49px; height: 49px; display: grid; place-items: center; border-radius: 12px; background: var(--wine); color: white; }
.sector-detail .eyebrow { margin-top: 32px; }
.sector-detail h2 { margin: 0; font-size: 23px; font-weight: 640; }
.sector-detail p:last-of-type { color: var(--muted); font-size: 13px; line-height: 1.6; }
.sector-actions { margin-top: 25px; display: grid; gap: 8px; }
.sector-actions button { height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #5d5658; font-size: 11px; }
.sector-actions button:hover { border-color: rgba(127,23,42,.4); color: var(--wine); }

.avis-view { display: grid; place-items: center; padding: 40px 24px; background: radial-gradient(circle at 50% 36%, rgba(127,23,42,.055), transparent 36%), #fff; }
.avis-stage { width: min(780px, 100%); text-align: center; }
.avis-orbit { width: 91px; height: 91px; margin: 0 auto 25px; display: grid; place-items: center; position: relative; border: 1px solid var(--wine); border-radius: 50%; color: var(--wine); box-shadow: 0 18px 50px rgba(127,23,42,.12); }
.avis-orbit::before, .avis-orbit::after { content: ""; position: absolute; border: 1px solid rgba(127,23,42,.18); border-radius: 50%; }
.avis-orbit::before { inset: 9px; }
.avis-orbit::after { inset: 23px; transform: rotate(45deg); border-radius: 9px; }
.avis-orbit span { font-size: 25px; font-weight: 680; z-index: 1; }
.avis-stage h1 { color: var(--wine-deep); font-size: clamp(42px, 7vw, 68px); letter-spacing: .16em; }
.avis-expansion { margin: 8px 0 0; color: #524b4e; font-size: 14px; letter-spacing: .05em; }
.avis-intro { max-width: 600px; margin: 19px auto 28px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.avis-command { overflow: hidden; border: 1px solid rgba(127,23,42,.34); border-radius: 14px; background: white; box-shadow: var(--shadow); text-align: left; }
.avis-command textarea { width: 100%; padding: 19px; resize: vertical; border: 0; outline: 0; color: var(--ink); font-size: 15px; line-height: 1.5; }
.avis-command > div { min-height: 51px; padding: 8px 10px 8px 17px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid var(--line); }
.avis-command > div span { color: #958d90; font-size: 10px; }
.avis-command button { height: 35px; padding: 0 13px; display: flex; align-items: center; gap: 7px; border: 0; border-radius: 8px; background: var(--wine); color: white; font-size: 12px; font-weight: 650; }
.avis-command button svg { width: 15px; height: 15px; }
.avis-result { margin-top: 16px; padding: 20px; border: 1px solid rgba(127,23,42,.22); border-radius: 12px; background: white; box-shadow: 0 9px 26px rgba(72,22,31,.06); white-space: pre-wrap; text-align: left; font-size: 14px; line-height: 1.6; }

.documents-view { padding: 34px; overflow-y: auto; background: #fcfbfb; }
.documents-header, .documents-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.documents-header h1 { margin: 3px 0; color: var(--wine-deep); font-size: 30px; }
.documents-header p:last-child { margin: 0; color: var(--muted); font-size: 12px; }
.documents-toolbar { margin: 25px 0 14px; }
.documents-toolbar input { width: min(560px, 100%); height: 40px; padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; outline: 0; }
.document-list { display: grid; gap: 10px; color: var(--muted); font-size: 12px; }
.document-card { padding: 14px; display: grid; grid-template-columns: 74px minmax(0,1fr) auto; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 5px 18px rgba(72,22,31,.04); }
.document-card img { width: 74px; height: 74px; }
.document-card .document-image-thumbnail { border-radius: 8px; object-fit: cover; }
.document-card .document-qr { object-fit: contain; }
.document-card h2 { margin: 0 0 5px; color: var(--ink); font-size: 15px; }
.document-card code { color: var(--wine); font-size: 10px; }
.document-card p { margin: 5px 0; color: var(--muted); font-size: 10px; }
.document-card a { color: var(--wine); font-size: 11px; font-weight: 650; }
.repository-badge { padding: 5px 8px; border-radius: 20px; background: #f2edef; color: var(--wine); font-size: 9px; font-weight: 700; }
.repository-badge.museum { background: #edf3ef; color: #276b49; }
.document-card-controls { display: flex; align-items: flex-end; flex-direction: column; gap: 8px; }
.document-card-controls .secondary-button { height: 30px; padding-inline: 9px; }
.document-dialog { width: min(650px, calc(100vw - 30px)); padding: 0; border: 1px solid rgba(127,23,42,.3); border-radius: 14px; }
.document-dialog::backdrop { background: rgba(35,25,28,.4); backdrop-filter: blur(3px); }
.document-dialog-shell > header, .document-dialog-shell > footer { padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.document-dialog-shell header > div { display: flex; flex-direction: column; gap: 3px; }
.document-dialog-shell header small, .document-dialog-shell footer span { color: var(--muted); font-size: 10px; }
.document-fields { padding: 18px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.document-fields label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 10px; }
.document-fields input, .document-fields select { min-height: 38px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: white; }
.document-fields .museum-choice { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.document-fields .museum-choice input { min-height: auto; }
.document-dialog-shell > footer { border-top: 1px solid var(--line); border-bottom: 0; }

.finance-view { padding: 34px; overflow-y: auto; background: radial-gradient(circle at 90% 0, rgba(127,23,42,.13), transparent 34%), linear-gradient(145deg, #fff 0%, #f8f4f5 100%); }
.connect-view { padding: 34px; overflow-y: auto; background: radial-gradient(circle at 8% 0, rgba(21,125,99,.12), transparent 30%), linear-gradient(145deg, #fff, #f7f4f5); }
.connect-header, .team-chat > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.connect-header h1 { margin: 3px 0 5px; font-size: clamp(28px,4vw,44px); }
.connect-header p { margin: 0; color: var(--muted); }
.connect-layout { position: relative; margin-top: 24px; }
.team-chat { border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 12px 35px rgba(52,27,33,.08); }
.team-chat { min-width:0; display:flex; flex-direction:column; height:calc(100dvh - 230px); min-height:460px; overflow:hidden; }
.team-chat > header { padding: 18px 20px; border-bottom: 1px solid var(--line); flex:0 0 auto; }
.private-message-target { min-width:0; padding:12px 14px; display:flex; align-items:end; gap:10px; border-bottom:1px solid var(--line); flex:0 0 auto; }
.private-message-target label { min-width:0; flex:1; display:grid; gap:5px; color:var(--muted); font-size:10px; font-weight:700; }
.private-message-target select { width:100%; min-width:0; min-height:40px; padding:7px 9px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); }
.team-chat header div { display: grid; gap: 3px; }
.team-chat small, .connect-tools-body p { color: var(--muted); }
.team-message-list { flex:1; min-width:0; min-height:0; max-height:none; height:auto; padding:18px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; -webkit-overflow-scrolling:touch; touch-action:pan-y; background:#faf8f9; }
.team-message-list article { width: min(76%,620px); margin: 0 0 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 4px 16px 16px; background: #fff; }
.team-message-list article.own { margin-left: auto; border-radius: 16px 4px 16px 16px; border-color: rgba(127,23,42,.25); background: #f9edef; }
.team-message-list article header { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.team-message-list article time { color: var(--muted); }
.team-message-list article p { margin: 7px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-attachments { margin-top:9px; display:flex; flex-wrap:wrap; gap:8px; }
.message-attachments a { min-width:0; max-width:min(190px,100%); padding:7px; display:grid; gap:5px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--wine); font-size:10px; text-decoration:none; }
.message-attachments img { width:100%; max-height:120px; object-fit:contain; }
.message-attachments video { width:100%; max-height:160px; background:#000; }
.team-chat form { min-width:0; padding: 14px; border-top: 1px solid var(--line); flex:0 0 auto; }
.team-chat textarea { width:100%; min-width:0; min-height:clamp(84px,12dvh,160px); max-height:min(12cm,40dvh); overflow-y:auto; resize: vertical; padding: 12px; border: 1px solid var(--line); border-radius: 12px; font: inherit; }
.team-chat form > div, .connect-tools-body section > div { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.team-chat .message-file-row { min-width:0; align-items:center; justify-content:flex-start; }
.team-chat .message-file-row input { min-width:0; max-width:100%; }
.team-chat .message-file-row small { font-size:10px; overflow-wrap:anywhere; }

/* Reported directly: "Mount the workspace tool into the toolbox left side down as a row not as a
   column", then "make the Workspace tools window move" - the floating tools window used to
   default to the top-right corner with its two sections (WhatsApp Connector, Phone &
   Connectors) stacked; it now defaults to the bottom-left, next to the toolbox rail/sidebar it
   was reported alongside, with those two sections side by side instead of stacked. Still fully
   draggable afterward (bindFloatingPanelDrag) - this only changes where it starts. */
/* Reported directly: "the workspace window must be closed by default and opening must above the
   video window." Raised above .conference-dialog's z-index:96 so an opened panel is never hidden
   behind an open video call window, and stays below only the toast notifications (z-index:100). */
.connect-tools { position:fixed; left:calc(var(--rail) + var(--sidebar) + 20px); bottom:20px; width:min(640px,calc(100vw - var(--rail) - var(--sidebar) - 40px)); max-height:calc(100dvh - var(--topbar) - 40px); display:flex; flex-direction:column; border:1px solid #9f1831; border-radius:12px; background:#fff; box-shadow:0 28px 70px rgba(13,8,10,.32); overflow:hidden; z-index:97; }
.connect-tools-head { flex:0 0 auto; padding:0 10px 0 16px; height:46px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid rgba(127,23,42,.24); background:#fff; box-shadow:0 6px 18px rgba(18,10,12,.06); cursor:grab; font:700 12px/1 Aptos,"Segoe UI","Helvetica Neue",Arial,sans-serif; color:var(--ink); }
.connect-tools-head.dragging { cursor:grabbing; }
.connect-tools-head button { width:26px; height:26px; flex:0 0 auto; border:0; background:transparent; display:grid; place-items:center; cursor:pointer; color:var(--muted); }
.connect-tools-body { min-height:0; padding:14px; display:flex; flex-direction:row; align-items:stretch; gap:14px; overflow:auto; }
.connect-tools-body > section { flex:1 1 0; min-width:0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.connect-tools-body h2 { margin: 4px 0 7px; font-size: 15px; }
.connect-tools-body label { display: grid; gap: 6px; margin: 15px 0 10px; font-size: 12px; font-weight: 700; }
.connect-tools-body input { min-height: 43px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.contact-list { max-height: 160px; margin-top: 12px; overflow-y: auto; display: grid !important; justify-content: stretch !important; gap: 6px !important; }
.contact-list label { margin: 0; padding: 8px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 9px; background: #faf8f9; font-size: 10px; font-weight: 500; }
.contact-list input { min-height: auto; }
/* Video conference: a real floating, draggable, resizable call window (dialog + bindDialogDrag,
   the same pattern as the Letter Creator and Contact Incubator) rather than an inline page
   section. Reported directly: "The white column at the right video screen emigrate to below the
   dark buttons of the video screen into 2 new row", then "distribute all the buttons into exact
   aligned block of 2 rows" - the room/invite panel used to sit beside the video as its own
   column; every button (video controls and room/invite actions alike) now sits below the video
   in one single 8-column grid (.conference-buttons-grid) that resolves to exactly 2 rows - see
   the HTML comment above #conferenceDialog. */
.conference-dialog { position:fixed; inset:0; z-index:96; width:min(1180px,94vw); height:min(760px,88dvh); margin:auto; padding:0; overflow:hidden; border:1px solid #9f1831; border-radius:14px; background:#171017; box-shadow:0 32px 100px rgba(13,8,10,.5); box-sizing:border-box; }
.conference-dialog-shell { height:100%; display:flex; flex-direction:column; }
.conference-dialog-header { flex:0 0 auto; padding:0 10px 0 20px; height:56px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:#1c151a; border-bottom:1px solid rgba(255,255,255,.1); cursor:grab; color:#fff; }
.conference-dialog-header.dragging { cursor:grabbing; }
.conference-dialog-identity { display:flex; align-items:center; gap:8px; min-width:0; }
.conference-dialog-identity img { width:28px; height:33px; flex:0 0 auto; object-fit:contain; }
.conference-dialog-identity span { display:flex; flex-direction:column; gap:1px; min-width:0; }
.conference-dialog-identity strong { font-size:13px; letter-spacing:.03em; }
.conference-dialog-identity small { font-size:10.5px; color:rgba(255,255,255,.55); }
.conference-dialog-header .icon-button { border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.06); color:#fff; }
.conference-dialog-header .icon-button:hover { border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.14); color:#fff; }
.conference-dialog-body { flex:1; min-height:0; display:flex; flex-direction:column; overflow-y:auto; background:#fff; }

/* AVI - the animated, voice-driven face of A.V.I.S AI - now lives entirely in the shared
   /avi/widget.css (src/avi-widget.mjs), included via <link> in index.html/admin.mjs/marketplace
   pages, instead of here. */
.conference-video-column { position:relative; flex:0 0 auto; display:flex; flex-direction:column; }
/* No background image is forced any more (see privateConferenceCamera in app.js, which blurs the
   real frame behind the recognised person until a slot below is chosen) - the gallery floats over
   the video, matching the guest call page's own gallery (conference.html, conference.js). Each
   slot is a wrapper div holding two sibling buttons (select, replace) rather than a nested
   button-in-button, which HTML forbids. */
.conference-video-background-controls { position:absolute; top:10px; right:10px; z-index:2; }
/* Reported directly: "The 6 video background images should be hidden in on[e] button" - the
   gallery is now a popover, opened by a single toggle button instead of always floating over
   the video. */
.conference-bg-toggle {
  -webkit-appearance:none; appearance:none; width:36px; height:36px;
  border:1px solid #a60505; border-radius:0; background:#fff; color:#a60505; box-sizing:border-box;
  font-size:16px; line-height:1; cursor:pointer;
  box-shadow:0 2px 4px rgba(0,0,0,.3), 0 6px 14px rgba(0,0,0,.2);
}
.conference-bg-toggle:hover { background:#fbebec; }
.conference-bg-toggle[aria-expanded="true"] { background:#a60505; color:#fff; }
.conference-bg-toggle[disabled] { opacity:.4; cursor:not-allowed; pointer-events:none; box-shadow:none; }
.conference-bg-gallery { position:absolute; top:calc(100% + 6px); right:0; padding:8px; border:1px solid #a60505; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.3), 0 6px 14px rgba(0,0,0,.2); display:grid; grid-template-columns:repeat(3, 36px); gap:6px; }
.conference-bg-gallery[hidden] { display:none; }
.conference-bg-slot { position:relative; width:36px; height:36px; }
.conference-bg-slot-select {
  -webkit-appearance:none; appearance:none; width:100%; height:100%;
  border:1px solid #a60505; border-radius:0; background:#fff no-repeat center/cover; color:#a60505; box-sizing:border-box;
  cursor:pointer; box-shadow:0 2px 4px rgba(0,0,0,.3), 0 6px 14px rgba(0,0,0,.2);
}
.conference-bg-slot-select::before { content:"+"; font:700 16px/1 Aptos,"Segoe UI","Helvetica Neue",Arial,sans-serif; }
.conference-bg-slot.has-image .conference-bg-slot-select::before { content:""; }
.conference-bg-slot-select:hover { background-color:#fbebec; }
.conference-bg-slot-select[aria-pressed="true"] { border-color:#a60505; box-shadow:0 0 0 2px #a60505, 0 2px 4px rgba(0,0,0,.3); }
.conference-bg-slot-replace {
  -webkit-appearance:none; appearance:none; position:absolute; bottom:-4px; right:-4px; width:16px; height:16px;
  border:1px solid #a60505; border-radius:50%; background:#fff; color:#a60505; box-sizing:border-box;
  font:700 9px/1 Aptos,"Segoe UI","Helvetica Neue",Arial,sans-serif; cursor:pointer; padding:0;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.conference-bg-slot-replace:hover { background:#fbebec; }
.conference-bg-slot-select[disabled],.conference-bg-slot-replace[disabled],.conference-bg-slot:has(input:disabled) .conference-bg-slot-select,.conference-bg-slot:has(input:disabled) .conference-bg-slot-replace { opacity:.4; cursor:not-allowed; pointer-events:none; box-shadow:none; }
/* Reported directly, after seeing the deployed result on an iPad: the buttons rendered as
   unstyled, glossy native pink controls instead of the intended white/red/shadow design.
   display:contents (used previously to merge two wrapper divs' buttons into one visual row) has
   long-standing WebKit bugs where a <button>/<a> inside a display:contents ancestor can lose
   its cascaded styling entirely and fall back to native chrome - exactly what the screenshot
   showed. Fixed at the root: every button is now a literal, direct child of one real grid
   container (no display:contents anywhere), and -webkit-appearance/appearance are reset
   explicitly below so no native control chrome can ever show through on any browser. */
.conference-room-row { flex:0 0 auto; display:flex; flex-direction:column; }
/* Reported directly: "compress and organise all the buttons into only 2 rows" - room code, date,
   invite title and the short link now sit inline in one compact row instead of stacked full-width
   blocks. Reported again: "The first raw is fully wide instead same width as the buttones... make
   the first raw same wide and quality as the buttones and exactly symmetric distances." Matches
   .conference-buttons-grid exactly: same 70% width, same centring, same 10px gap and 14px side
   padding, and the same real spacing (no more of the old edge-to-edge "frame on frame" adjacency
   that made the buttons look like a table before #248 - it had never been removed from this row). */
.conference-inputs-row { width:70%; margin:0 auto; padding:14px 14px 0; box-sizing:border-box; display:flex; flex-wrap:wrap; gap:10px; background:#fff; }
.conference-inputs-row input { flex:1 1 150px; margin:0; padding:11px 14px; box-sizing:border-box; border:1px solid #a60505; border-radius:0; background:#fff; color:#a60505; font:700 11px/1 Aptos,"Segoe UI","Helvetica Neue",Arial,sans-serif; box-shadow:0 2px 4px rgba(0,0,0,.3), 0 6px 14px rgba(0,0,0,.2); }
.conference-inputs-row input::placeholder { color:#a60505; opacity:.62; }
/* Reported directly: "by click comes an ugly frame out" - the browser's default blue focus
   ring/outline on the date-time field. Replaced with a focus style in the dialog's own palette. */
.conference-inputs-row input:focus { outline:none; border-color:#a60505; box-shadow:0 0 0 2px rgba(166,5,5,.35), 0 2px 4px rgba(0,0,0,.3), 0 6px 14px rgba(0,0,0,.2); }
@media(max-width:1024px),(hover:none) and (pointer:coarse) { .conference-inputs-row { width:100%; } }
.conference-participants { flex:0 0 auto; padding:10px 14px; display:flex; align-items:center; gap:8px; overflow-x:auto; border-top:1px solid var(--line); background:transparent; }
.conference-participants:empty { display:none; }
.conference-participant { flex:0 0 auto; display:flex; align-items:center; gap:7px; padding:5px 12px 5px 5px; border-radius:20px; background:var(--quiet); }
.conference-participant-avatar { width:24px; height:24px; border-radius:50%; background:#7f172a; display:grid; place-items:center; font-size:9px; font-weight:700; color:#fff; flex:0 0 auto; }
.conference-participant span:last-child { font-size:11px; color:var(--ink); white-space:nowrap; }
.conference-participant.is-connecting .conference-participant-avatar { background:#4d4548; }
.conference-participant.is-failed .conference-participant-avatar { background:#c0293f; }
.phone-display { min-height:42px; display:flex !important; align-items:center; justify-content:flex-end !important; padding:8px 11px; border:1px solid var(--line); border-radius:9px; font-variant-numeric:tabular-nums; }
.phone-keypad { display:grid !important; grid-template-columns:repeat(3,1fr); gap:7px !important; }
.phone-keypad button { min-height:38px; border:1px solid var(--line); border-radius:9px; background:#fff; }
/* Reported directly: "The video screen window must be a clean view with no frame video screen
   only" and "Make the screen and buttons all in white." Video: borderless/shadowless, on a white
   ground - matching the guest (weblink) call page's own frameless video, just re-themed light. */
/* Reported directly, then corrected: "make sure that the screens from participants melting
   seamless together without any space" originally made every tile fill its cell edge to edge via
   object-fit:cover - but grid-auto-rows:1fr forced every row to the same height regardless of a
   tile's real content, so cover was free to crop whenever a stream's real aspect ratio (a
   portrait phone/iPad camera especially) didn't match that forced row height. Reported again,
   much more insistently: "the zoom is 4 times bigger than should be... There is large black ugly
   frames... The windows must be larger for be edge to edge not the person." Rows now size to
   their content (grid-auto-rows:auto) and each tile's own aspect-ratio is set from its stream's
   real dimensions once known (conferenceVideo in app.js) - object-fit:contain is the safety net
   for the brief moment before that happens, or for a max-height-clamped extreme case; once the
   tile's own shape matches the stream, contain and cover render identically (nothing to crop or
   letterbox), so the never-crops choice costs nothing in the common case. */
.video-grid { flex:1; min-height:280px; width:100%; min-width:0; padding:16px; display:grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); grid-auto-rows:auto; align-content:center; gap: 0; background:#fff; overflow-y:auto; }
.video-grid video { display:block; width:100%; height:auto; max-width:100%; aspect-ratio:16/9; max-height:80dvh; object-fit:contain; border:0; border-radius:0; background:#f2eef0; box-shadow:none; }
.video-grid video[data-auto-muted] { cursor:pointer; }
.video-grid.fill-video video { object-fit:cover; }
/* Reported directly: "distribute all the buttons into exact aligned block of 2 rows." Every
   button in the dialog - camera/mic/share/tracking/framing/record/leave, Start call/Create
   invitation, and every invite-action link - is a literal child of this one grid, 8 equal
   columns wide: exactly 16 buttons resolve to exactly 2 full rows, a genuinely exact aligned
   block rather than an approximate flex-wrap. Reported directly again, after seeing this with
   its buttons touching edge to edge (the earlier "frame on frame with no distance" request):
   "very ugly buttones moreover looks just like a table badly done" - a shared border grid with
   zero gap between cells IS what a plain data table looks like, whatever colour it's painted.
   Real breathing room between buttons (and around the whole grid) is what actually reads as
   deliberate/premium rather than a spreadsheet - see .conference-tool below. Reported again:
   "make it into 2 raws and make all buttons in one block and the 2 raws the same hight. Shorten
   in its width the buttons so all enters into one block with 2 rows and covers about 70% of the
   width of the video screen" - the block is narrowed to 70% and centred, and grid-template-rows:
   repeat(2,1fr) pins the layout to exactly two rows that share the row height equally (grid items
   stretch by default), so an icon button and a text-only button sit at the same height whichever
   row they land in, instead of each row sizing only to its own tallest child. */
.conference-buttons-grid { width:70%; margin:0 auto; padding:14px; display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(2,1fr); gap:10px; background:#fff; }
/* Reported directly: "All the buttons make in Square white buttons having fine red frames and
   red text. No rounded corners" - kept: still square, still a fine 1px red frame, still red
   text, no border-radius. Reported again: "make the buttons impressive luxury... work little
   with black shadow" and, once more, "Make a black shadow on all the buttones" - a clearly black
   two-layer shadow (a tighter contact shadow plus a softer, wider one, both black rather than the
   earlier barely-there tint) reads as a genuinely raised surface rather than the earlier single
   flat line - the same technique real card/button UI uses, without resorting to gradients or
   gloss (the native-control fallback this whole redesign replaced was exactly that kind of
   glossy look, and is worth staying well clear of). Hover lifts the shadow further, still
   white/red - hovering must never look pressed - and appearance/-webkit-appearance stay reset so
   no browser's native button chrome can ever paint over any of this (see the comment above
   .conference-room-row). */
.conference-tool {
  -webkit-appearance:none; appearance:none;
  padding:14px 10px 12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  border:1px solid #a60505; border-radius:0; background:#fff; color:#a60505; box-sizing:border-box;
  font:700 10px/1.15 Aptos,"Segoe UI","Helvetica Neue",Arial,sans-serif; letter-spacing:.02em;
  text-decoration:none; text-align:center; cursor:pointer; position:relative; z-index:1;
  box-shadow:0 2px 4px rgba(0,0,0,.3), 0 6px 14px rgba(0,0,0,.2);
  transition:background .12s ease,color .12s ease,box-shadow .12s ease,transform .06s ease;
}
.conference-tool:hover:not(:disabled) { background:#fbebec; box-shadow:0 3px 6px rgba(0,0,0,.35), 0 8px 18px rgba(0,0,0,.25); transform:translateY(-1px); z-index:2; }
.conference-tool:disabled, .conference-tool.disabled { opacity:.4; cursor:not-allowed; pointer-events:none; box-shadow:none; }
.conference-tool-icon { width:20px; height:20px; stroke-width:1.8; }
.conference-tool-icon.conference-tool-icon-off { display:none; }
.conference-tool[aria-pressed="false"] .conference-tool-icon:not(.conference-tool-icon-off) { display:none; }
.conference-tool[aria-pressed="false"] .conference-tool-icon-off { display:block; }
.conference-tool[aria-pressed="false"]:not(.conference-tool-leave) { background:#a60505; border-color:#a60505; color:#fff; }
.conference-tool-icon-record { fill:currentColor; stroke:none; }
.conference-tool.recording .conference-tool-icon-record:not(.conference-tool-icon-off) { display:none; }
.conference-tool.recording .conference-tool-icon-record.conference-tool-icon-off { display:block; }
.conference-tool.recording { background:#a60505; border-color:#a60505; color:#fff; }
/* Reported directly: "The text change to dark green colour (same as video button) ones pressed" -
   the exact rgb(35,97,99) the letter composer's own video icon already turns on press
   (.letter-postoffice-action:active span{color:rgb(35,97,99)}), applied the same way here: only
   the text/border recolour, the white ground stays white, so a press never becomes a solid dark
   block - matching that existing button's behaviour precisely. Placed after the aria-pressed/
   recording rules so a live press always wins over whatever a toggle's resting tint would
   otherwise show. The inset shadow and 1px downward shift read as physically depressing, distinct
   from the hover-only lift above. */
.conference-tool:active:not(:disabled) {
  color:rgb(35,97,99); border-color:rgb(35,97,99); background:#fff;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.4); transform:translateY(1px); z-index:2;
}
@media(max-width:1024px),(hover:none) and (pointer:coarse) { .conference-buttons-grid { width:100%; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); } }
@media(max-width:560px) { .conference-buttons-grid { grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(8,1fr); } }
.finance-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.finance-hero h1 { margin: 4px 0 7px; color: var(--wine-deep); font-size: clamp(27px, 4vw, 43px); letter-spacing: -.035em; }
.finance-hero p:last-child { margin: 0; color: var(--muted); }
.finance-status { padding: 7px 11px; border: 1px solid rgba(127,23,42,.25); border-radius: 30px; background: rgba(255,255,255,.8); color: var(--wine); font-size: 10px; font-weight: 700; }
.account-types { margin: 28px 0 18px; display: grid; grid-template-columns: repeat(5,minmax(115px,1fr)); gap: 8px; }
.account-types button { min-height: 48px; padding: 9px; border: 1px solid rgba(127,23,42,.18); border-radius: 10px; background: rgba(255,255,255,.78); color: #594f52; font-size: 11px; font-weight: 650; }
.account-types button.active { border-color: var(--wine); background: var(--wine); color: white; }
.finance-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.finance-tile { min-height: 155px; padding: 24px; display: flex; align-items: center; gap: 20px; overflow: hidden; border: 1px solid rgba(127,23,42,.14); border-radius: 15px; color: white; box-shadow: 0 12px 28px rgba(49,20,28,.11); text-align: left; transition: transform .18s ease, box-shadow .18s ease; }
.finance-tile:hover { transform: translateY(-2px); box-shadow: 0 17px 34px rgba(49,20,28,.17); }
.finance-tile.family { background: linear-gradient(135deg,#74172a,#ad344b); }
.finance-tile.sponsor { background: linear-gradient(135deg,#453238,#775866); }
.finance-tile.transfer { background: linear-gradient(135deg,#154b5b,#298197); }
.finance-tile.cards { background: linear-gradient(135deg,#171c28,#4d5568); }
.finance-tile.business { background: linear-gradient(135deg,#594417,#9d7932); }
.finance-tile.pos { background: linear-gradient(135deg,#24543f,#3e8e6b); }
.tile-symbol { width: 72px; height: 72px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 18px; background: rgba(255,255,255,.14); font-size: 36px; }
.finance-tile > span:last-child { display: flex; flex-direction: column; gap: 7px; }
.finance-tile strong { font-size: 17px; }
.finance-tile small { color: rgba(255,255,255,.82); font-size: 11px; line-height: 1.45; }
.finance-notice { margin: 16px 0 28px; padding: 13px 15px; display: flex; gap: 12px; border: 1px solid #d9c797; border-radius: 10px; background: #fffaf0; color: #65562f; font-size: 10px; line-height: 1.5; }
.corporate-block { margin-top: 20px; }
.corporate-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; }
.corporate-heading h2 { margin: 3px 0 0; color: var(--wine-deep); }
.corporate-heading > span { color: var(--muted); font-size: 10px; }
.corporate-previews { margin-top: 13px; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.corporate-previews article { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: 0 8px 24px rgba(49,20,28,.08); }
.corporate-previews iframe { width: 100%; height: 210px; border: 0; background: #eee9ea; pointer-events: none; }
.corporate-previews a { padding: 12px 14px; display: flex; justify-content: space-between; gap: 10px; color: var(--wine); text-decoration: none; }
.corporate-previews a span { color: var(--muted); font-size: 9px; }
.file-preview-dialog { width: min(940px, calc(100vw - 30px)); height: min(820px, calc(100dvh - 30px)); padding: 0; border: 1px solid rgba(127,23,42,.3); border-radius: 14px; }
.file-preview-dialog::backdrop { background: rgba(35,25,28,.42); backdrop-filter: blur(3px); }
.file-preview-shell { height: 100%; display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.file-preview-shell header, .file-preview-shell footer { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.file-preview-shell iframe { width: 100%; height: 100%; border: 0; background: #f5f3f3; }
.file-preview-shell footer { justify-content: flex-end; gap: 10px; border-top: 1px solid var(--line); border-bottom: 0; }
.file-preview-shell .send-button { text-decoration: none; }

.placeholder-view { display: grid; place-items: center; padding: 30px; }
.placeholder-card { max-width: 430px; padding: 42px; border: 1px solid rgba(127,23,42,.28); border-radius: 14px; box-shadow: var(--shadow); text-align: center; }
.placeholder-icon { width: 52px; height: 52px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 12px; background: var(--wine-soft); color: var(--wine); }
.placeholder-card p:last-of-type { color: var(--muted); font-size: 13px; line-height: 1.55; }
.placeholder-card button { margin-top: 13px; padding: 10px 15px; border: 1px solid var(--wine); border-radius: 8px; background: white; color: var(--wine); font-size: 12px; font-weight: 650; }

/* Reported directly: forwarding (or replying to) an open message "goes on a static blur window
   instead of a free floating window". The compose dialog is a non-modal .show() window like the
   Letter Creator and Contact Incubator, which both sit at z-index:95 - but this was left at the
   z-index the page uses for ordinary in-flow content (30), well below the open message reader's
   own floating panel (z-index:80) and its dimming backdrop (z-index:79). Replying or forwarding
   from an open message left the compose window stacked entirely behind that backdrop: fixed in
   place beneath the blur, impossible to reach, not the floating window it is everywhere else. */
.compose-dialog { position:fixed; z-index:95; inset:0; width:min(1080px,calc(100vw - 32px)); min-width:min(760px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:0; overflow:hidden; border:1px solid rgba(127,23,42,.36); border-radius:14px; background:white; box-shadow:0 30px 90px rgba(43,16,22,.24); }
.compose-dialog.compose-dialog-moved { inset:auto; margin:0; }
.compose-dialog::backdrop { background: rgba(35,25,28,.35); backdrop-filter: blur(3px); }
.compose-shell > header { height:62px; padding:0 15px 0 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); cursor:move; touch-action:none; user-select:none; }
.compose-shell > header :is(button,input,a) { cursor:pointer; }
.compose-shell > header > div { display: flex; align-items: center; gap: 10px; }
.compose-mark { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 8px; background: var(--wine); color: white; }
.compose-mark svg { width: 17px; height: 17px; }
.compose-shell > header > div > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.compose-shell > header strong { font-size: 13px; }
.compose-shell > header small { color: var(--muted); font-size: 10px; }
.compose-grid { display: grid; grid-template-columns: minmax(0, 1fr) 285px; min-height: min(690px, calc(100dvh - 106px)); }
.compose-fields { min-width: 0; display: grid; grid-template-rows: repeat(4, auto) minmax(240px, 1fr) auto; padding: 10px 23px 17px; }
.compose-fields > label { min-height: 47px; display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--line); }
.compose-fields > label > span { color: #817a7c; font-size: 11px; }
.compose-fields input { min-width: 0; border: 0; outline: 0; color: var(--ink); font-size: 13px; }
.bcc-toggle { padding: 4px; border: 0; background: transparent; color: var(--wine); font-size: 10px; }
.rich-compose { min-height: 290px; display: grid; grid-template-rows: auto minmax(230px,1fr); }
.compose-toolbar { padding: 7px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; border-bottom: 1px solid var(--line); }
.compose-toolbar select, .compose-toolbar button { min-height: 30px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font-size: 10px; }
.compose-toolbar select { max-width: 125px; }
.compose-toolbar input[type="color"] { width: 32px; height: 30px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.compose-toolbar button:hover { border-color: var(--wine); color: var(--wine); }
.compose-document { min-height: 230px; overflow-y: auto; }
.compose-body { min-height: 40px; padding: 19px 0; outline: 0; color: #332f30; font-size: 14px; line-height: 1.58; }
.compose-body:empty::before { content: attr(data-placeholder); color: #999194; pointer-events: none; }
.compose-signature { width: 100%; padding: 14px 0 0; overflow-x: auto; background: #fff; white-space: normal; }
.compose-signature table { max-width: none !important; }
/* Reported directly: a forwarded email "loos its formatting and shrinks into a simply text
   instead keeps all the historical formatting" - the quoted content below is now real HTML (see
   setComposeForwarded in app.js), not a single pre-wrapped plain-text block, so white-space:
   pre-wrap is dropped in favour of letting its own <p>/<br> elements set line breaks. */
.compose-forwarded { margin-top:18px; padding:14px 0 0; border-top:1px solid var(--line); color:#5d5659; font-size:11px; line-height:1.45; overflow-wrap:anywhere; }
.compose-forwarded > p { margin:0 0 4px; }
.compose-forwarded-body { margin-top:10px; }
.compose-forwarded-body img { max-width:100%; height:auto; }
.compose-forwarded-body table { max-width:100%; }
.compose-inline-files { min-height:34px; margin-top:3mm; padding:0 0 4px; display:flex; align-items:flex-start; flex-wrap:wrap; gap:7px; border-top:0; }
.compose-document.is-file-drop { outline:2px dashed rgba(127,23,42,.46); outline-offset:-6px; background:#fff9fa; }
#composeAttachmentList, #teamMessageAttachmentList { display: flex; flex-wrap: wrap; gap: 6px; }
.compose-attachment-card { position:relative; width:102px; padding:0; display:flex; flex-direction:column; align-items:stretch; gap:3px; border:0; border-radius:0; background:transparent; color:var(--ink); font-size:7px; }
.compose-attachment-card > strong { position:relative; width:102px; height:102px; display:grid; place-items:center; border:0; border-radius:0; background:#777; color:#fff; font-size:8px; }
.compose-attachment-card > strong[role="button"] { cursor:pointer; }
.compose-attachment-card > strong.pdf { background:#b42332; }
.compose-attachment-card > strong img,.compose-attachment-card > strong video { width:100%; height:100%; border:0; border-radius:0; object-fit: contain; background:transparent; }
.compose-attachment-card > span { display:block; width:102px; font-size:7px; line-height:1.2; overflow-wrap:anywhere; }
.compose-attachment-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; text-shadow:0 1px 3px rgba(0,0,0,.7); pointer-events:none; }
.compose-attachment-remove { position:absolute; top:-6px; right:-6px; width:18px; height:18px; padding:0; display:grid; place-items:center; border:1px solid #e7dfe2; border-radius:50%; background:#fff; color:#5d5257; font-size:13px; line-height:1; cursor:pointer; z-index:1; }
.compose-attachment-remove:hover { border-color:#b42332; background:#fbeaec; color:#b42332; }
.compose-footer { padding-top: 10px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 9px 15px; border-top: 1px solid var(--line); }
.attach-button { min-height: 34px; padding: 0 11px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--wine); cursor: pointer; font-size: 10px; font-weight: 650; }
.attach-button:hover { border-color: var(--wine); }
.send-authority { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.send-authority input { accent-color: var(--wine); }
.compose-footer > div { display: flex; gap: 7px; }
.secondary-button, .send-button { height: 37px; padding: 0 14px; border-radius: 8px; font-size: 11px; font-weight: 650; }
.secondary-button { border: 1px solid var(--line); background: white; color: #6d6668; }
.send-button { display: flex; align-items: center; gap: 7px; border: 1px solid var(--wine); background: var(--wine); color: white; }
.send-button:disabled { opacity: .6; cursor: wait; }
.send-button svg { width: 15px; height: 15px; }
.compose-avis { padding: 28px 22px; border-left: 1px solid rgba(127,23,42,.19); background: #fdf9fa; }
.mini-avis { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--wine); border-radius: 12px; color: var(--wine); box-shadow: 0 8px 20px rgba(127,23,42,.08); }
.compose-avis .eyebrow { margin-top: 26px; }
.compose-avis h2 { margin: 0; color: var(--wine-deep); font-size: 23px; letter-spacing: .12em; }
.compose-avis > p:not(.eyebrow) { margin: 9px 0 16px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.quick-actions button { padding: 5px 8px; border: 1px solid rgba(127,23,42,.2); border-radius: 6px; background: white; color: var(--wine); font-size: 9px; }
.compose-avis > label { margin-top: 18px; display: block; }
.compose-avis > label > span { display: block; margin-bottom: 6px; color: #7b7476; font-size: 10px; }
.compose-avis textarea { width: 100%; padding: 10px; resize: vertical; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: white; color: var(--ink); font-size: 11px; line-height: 1.45; }
.compose-avis textarea:focus { border-color: rgba(127,23,42,.4); }
.ai-generate { width: 100%; height: 38px; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--wine); border-radius: 8px; background: white; color: var(--wine); font-size: 11px; font-weight: 650; }
.ai-generate:disabled { opacity: .6; cursor: wait; }
.voice-button { width: 100%; min-height: 35px; margin-top: 8px; border: 1px solid rgba(127,23,42,.24); border-radius: 8px; background: #fff; color: var(--wine); font-size: 11px; font-weight: 650; }
.compose-ai-activity { margin-top: 10px; padding: 9px; border-radius: 7px; background: #f2edef; color: #625a5d; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.compose-ai-activity.working { border-left: 3px solid #9b7a31; }
.compose-ai-activity.complete { border-left: 3px solid #278052; }
.compose-ai-activity.error { border-left: 3px solid #b42332; color: #8d182b; }
.preview-dialog { width: min(900px, calc(100vw - 32px)); height: min(820px, calc(100dvh - 32px)); padding: 0; border: 1px solid rgba(127,23,42,.3); border-radius: 15px; background: #fff; box-shadow: 0 30px 90px rgba(43,16,22,.3); }
.preview-dialog::backdrop { background: rgba(35,25,28,.4); backdrop-filter: blur(3px); }
.preview-shell { height: 100%; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto auto; }
.preview-shell header, .preview-shell footer { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.preview-shell header > div { display: flex; flex-direction: column; gap: 3px; }
.preview-shell header small, .preview-shell footer span { color: var(--muted); font-size: 11px; }
#composePreviewFrame { width: 100%; height: 100%; border: 0; background: #fff; }
.preview-envelope { margin: 0; padding: 11px 18px; display: grid; grid-template-columns: 55px minmax(0,1fr); gap: 4px 10px; border-bottom: 1px solid var(--line); font-size: 11px; }
.preview-envelope dt { color: var(--muted); }
.preview-envelope dd { margin: 0; overflow-wrap: anywhere; color: var(--ink); }
.preview-attachments { padding: 12px 18px; display: flex; flex-wrap: wrap; gap: 7px; border-top: 1px solid var(--line); }
.preview-shell footer { border-top: 1px solid var(--line); border-bottom: 0; }
.compose-avis > small { margin-top: 10px; display: block; color: #9b9396; font-size: 9px; line-height: 1.4; text-align: center; }

.login-dialog { width:min(478px,calc(100vw - 8px)); max-height:calc(100dvh - 8px); padding:12px clamp(8px,3vw,24px) 32px; overflow-x:hidden; overflow-y:auto; border:0; border-radius:0; background:transparent; box-shadow:none; scrollbar-width:thin; }
.login-dialog::backdrop { background: rgba(28,20,22,.14); backdrop-filter: blur(2px); }
.login-brand-lockup { padding:0 0 12px 2px; display:grid; gap:4px; color:#fff; font-family:Aptos,"Segoe UI","Helvetica Neue",Arial,sans-serif; letter-spacing:0; text-shadow:0 3px 9px rgba(0,0,0,.9),0 1px 2px rgba(0,0,0,.95); }
.login-brand-lockup strong { position:relative; width:max-content; padding-bottom:6px; color:#fff; font-size:45px; font-weight:700; line-height:1; letter-spacing:0; -webkit-text-stroke:.6px rgba(127,23,42,.9); }
.login-brand-lockup strong::after { content:""; position:absolute; left:2px; bottom:0; width:38px; height:2px; background:#a60505; box-shadow:46px 0 0 rgba(166,5,5,.7); }
.login-brand-lockup small { color:#fff; font-size:11px; font-weight:600; line-height:1.35; letter-spacing:0; -webkit-text-stroke:.25px rgba(127,23,42,.78); }
.login-back { margin: 0 0 18px; padding: 0; border: 0; background: transparent; color: var(--wine); font-weight: 650; }
#loginAuthenticator h2 { margin: 0 0 7px; font-size: 20px; }
#loginAuthenticator > p:not(.eyebrow) { color: var(--muted); font-size: 13px; line-height: 1.5; }
.login-shell { padding:34px; display:grid; gap:15px; border:1px solid rgba(127,23,42,.78); border-radius:0; background:rgba(255,255,255,.35); box-shadow:0 24px 70px rgba(0,0,0,.34),0 4px 14px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.58); backdrop-filter:blur(7px) saturate(112%); -webkit-backdrop-filter:blur(7px) saturate(112%); }
#loginCredentials { display:grid; gap:16px; }
.login-shell .eyebrow { margin: 8px 0 -7px; }
.login-password-control { position: relative; display: block; }
.login-password-control input { padding-right: 45px; }
.login-password-control button { position: absolute; top: 50%; right: 5px; width: 34px; height: 34px; padding: 0; transform: translateY(-50%); border: 0; border-radius: 0; background: transparent; color: var(--wine); cursor: pointer; }
.login-password-control button svg { width:18px; height:18px; }
.login-actions { display:flex; align-items:center; gap:14px; }
.lost-password { color: var(--wine); font-size: 11px; font-weight: 650; text-decoration: none; }
.lost-password:hover,.lost-password:focus-visible { text-decoration: underline; }
.login-shell label { display: grid; gap: 6px; }
.login-shell label span { color: #716a6c; font-size: 10px; font-weight: 650; }
.login-shell input { width: 100%; height: 43px; padding: 0 12px; border: 1px solid rgba(127,23,42,.18); border-radius: 0; outline: 0; background:rgba(255,255,255,.72); color: var(--ink); font-family:Aptos,"Segoe UI","Helvetica Neue",Arial,sans-serif!important; font-size:14px!important; font-style:normal!important; font-weight:400!important; letter-spacing:0!important; }
.login-shell input:focus { border-color: var(--wine); box-shadow: 0 0 0 3px rgba(127,23,42,.08); }
/* Reported directly: "Fix the login on google. My Mac is not recognising the email nor the
   password automatic." The username/password fields now stay in the page (read-only) through
   the authenticator step instead of being hidden, so a password manager can still see them at
   the moment the form actually submits (see showAuthenticatorStep in app.js) - this just shows
   that they're locked rather than editable at that point. */
.login-shell input:read-only { background:rgba(255,255,255,.4); color: var(--muted); }
.login-error-inline { margin:0; color:#831329; font-size:11px; font-weight:600; line-height:1.4; }
.login-submit { min-width:112px; height:43px; padding:0 18px; border:1px solid var(--wine); border-radius:0; background:var(--wine); color:#fff; font-size:12px; font-weight:680; }
.login-submit:disabled { opacity: .65; cursor: wait; }

body.login-active .landing-sectors,body.login-active .app-rail,body.login-active .mail-nav,body.login-active .main-surface { visibility:hidden; }
body.login-active { padding-bottom:0; }
body.login-active .app-shell.landing-active { height:100dvh; grid-template-rows:1fr; }
body.login-active .landing-hero { height:100dvh; aspect-ratio:auto; grid-row:1; }
body.login-active .landing-hero-image { object-fit:cover!important; object-position:center center!important; background:transparent!important; }

.security-view { height:100%; overflow:auto; padding:clamp(24px,4vw,58px); background:#fff; }
.security-heading { max-width:980px; margin:0 auto 28px; padding-bottom:22px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.security-heading h1 { margin:4px 0 6px; color:var(--wine-deep); font-size:clamp(25px,3vw,36px); font-weight:650; letter-spacing:0; }
.security-heading > div > p:last-child { margin:0; color:var(--muted); font-size:13px; }
.security-state { display:flex; align-items:center; gap:7px; color:#246743; font-size:12px; font-weight:650; white-space:nowrap; }
.security-state svg { width:18px; height:18px; }
.security-methods { max-width:980px; margin:0 auto; display:grid; gap:14px; }
.security-method { padding:24px; display:grid; grid-template-columns:44px minmax(0,1fr); gap:18px; border:1px solid rgba(127,23,42,.22); border-radius:0; background:#fff; box-shadow:0 12px 30px rgba(0,0,0,.08); }
.security-method-icon { width:44px; height:44px; display:grid; place-items:center; border:1px solid rgba(127,23,42,.35); color:var(--wine); }
.security-method-copy h2 { margin:3px 0 7px; color:var(--ink); font-size:19px; letter-spacing:0; }
.security-method-copy > p:not(.eyebrow):not(.security-support) { max-width:720px; margin:0 0 16px; color:var(--muted); font-size:12px; line-height:1.55; }
.security-fields { display:grid; grid-template-columns:minmax(220px,1fr) minmax(180px,.7fr); gap:12px; max-width:620px; }
.security-fields label,.authenticator-enrolment label { display:grid; gap:6px; color:#716a6c; font-size:10px; font-weight:650; }
.security-fields label small { color:var(--muted); font-size:9px; font-weight:400; line-height:1.35; }
.security-fields input,.authenticator-enrolment input { width:100%; height:42px; padding:0 11px; border:1px solid var(--line); border-radius:0; outline:0; background:#fff; font:inherit; font-size:13px; letter-spacing:0; }
.security-fields input:focus,.authenticator-enrolment input:focus { border-color:var(--wine); box-shadow:0 0 0 3px rgba(127,23,42,.07); }
.security-action { min-height:40px; margin-top:12px; padding:0 16px; border:1px solid var(--wine); border-radius:0; background:var(--wine); color:#fff; font-size:12px; font-weight:650; }
.security-action.secondary { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:#fff; color:var(--wine); }
.security-action:disabled { opacity:.6; cursor:wait; }
.security-action svg { width:18px; height:18px; }
.authenticator-enrolment { margin-top:18px; padding-top:18px; display:grid; grid-template-columns:180px minmax(0,360px); gap:20px; border-top:1px solid var(--line); }
.authenticator-enrolment img { width:180px; height:180px; display:block; border:0; background:transparent; }
.authenticator-enrolment p { margin:0 0 12px; color:var(--muted); font-size:12px; line-height:1.5; }
.authenticator-enrolment label + label { margin-top:10px; }
.security-support { min-height:17px; margin:10px 0 0; color:var(--muted); font-size:11px; }

.toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: grid; gap: 8px; pointer-events: none; }
.toast { max-width: 360px; padding: 12px 15px; border: 1px solid rgba(127,23,42,.28); border-radius: 9px; background: white; box-shadow: 0 16px 38px rgba(50,20,27,.18); color: #4d4648; font-size: 12px; animation: toast-in .2s ease; }
.toast.error { border-color: #bc354b; color: #831329; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.mobile-scrim { display: none; }

@media (max-width: 1180px) {
  :root { --sidebar: 226px; --rail: 74px; }
  .profile-copy, .brand-copy small, .tool-button span { display: none; }
  .brand { width: calc(var(--rail) + var(--sidebar) - 18px); }
  .sector-grid { grid-template-columns: repeat(3, minmax(135px, 1fr)); }
}

/* Below the floating-dialog breakpoint used across the app (see .letter-creator-dialog),
   the floating tools panel and call window fall back to plain stacked/full-screen layout. */
@media (max-width: 1024px) {
  .connect-tools { position:static; width:100%; max-height:none; margin-top:18px; box-shadow:0 8px 24px rgba(52,27,33,.08); }
  .connect-tools-head { cursor:default; }
  .connect-tools-body { flex-direction:column; }
  .conference-dialog { width:min(640px,94vw); height:min(560px,88dvh); }
}

@media (max-width: 900px) {
  .security-heading { align-items:flex-start; flex-direction:column; }
  .security-method { grid-template-columns:1fr; }
  .security-fields,.authenticator-enrolment { grid-template-columns:1fr; }
  .authenticator-enrolment img { width:min(180px,100%); height:auto; aspect-ratio:1; }
  :root { --topbar: 66px; --rail: 64px; }
  body { padding-bottom: calc(var(--rail) + env(safe-area-inset-bottom)); }
  .app-shell { height: calc(100dvh - var(--rail) - env(safe-area-inset-bottom)); grid-template: var(--topbar) minmax(0, 1fr) / minmax(0, 1fr); }
  .topbar { grid-column: 1; padding: 0 13px; }
  .mobile-menu { display: grid; }
  .brand { width: auto; flex: 0 1 auto; }
  .brand-mark { width: 37px; height: 37px; border-radius: 10px; }
  .brand-copy { display: none; }
  .global-search { margin-left: 12px; }
  .global-search kbd, .avis-trigger { display: none; }
  .top-actions { padding-left: 9px; }
  .top-actions > .icon-button, .profile-copy { display: none; }
  .avatar { width: 36px; height: 36px; }
  .app-rail { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--rail) + env(safe-area-inset-bottom)); padding: 6px max(7px, env(safe-area-inset-left)) env(safe-area-inset-bottom); flex-direction: row; justify-content: space-around; border: 0; border-top: 1px solid var(--line); background: rgba(255,255,255,.98); }
  .rail-item { flex: 1; min-height: 50px; max-width: 100px; }
  .rail-item img { width:38px; height:38px; }
  .rail-end { display:flex; margin-top:0; }
  .mail-nav { position: fixed; top: var(--topbar); bottom: calc(var(--rail) + env(safe-area-inset-bottom)); left: 0; width: min(300px, 84vw); padding: 19px 16px; transform: translateX(-102%); transition: transform .22s ease; box-shadow: 18px 0 50px rgba(39,19,24,.15); }
  .app-shell.nav-open .mail-nav { transform: translateX(0); }
  .mobile-scrim { position: fixed; inset: var(--topbar) 0 calc(var(--rail) + env(safe-area-inset-bottom)) 0; z-index: 18; background: rgba(33,25,28,.32); }
  .app-shell.nav-open + .mobile-scrim, .app-shell.nav-open ~ .mobile-scrim { display: block; }
  .main-surface { grid-column: 1; grid-row: 2; }
  .app-shell.landing-active { height:calc(100dvh - var(--rail) - env(safe-area-inset-bottom)); grid-template-rows:auto auto minmax(0,1fr); }
  .mail-workspace { grid-template-columns: minmax(290px, 42%) minmax(0, 1fr); }
  .reader-content { padding-inline: 24px; }
  .reader-tools { gap: 0; }
  .tool-button { padding: 0 7px; }
  .sector-layout { grid-template-columns: 1fr; }
  .sector-detail { position: static; }
  .sector-grid { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
}

@media (max-width: 700px) {
  .global-search { flex-basis: auto; height: 39px; }
  .global-search input::placeholder { color: transparent; }
  .corporate-landing { padding:18px 0 0; background:#fff; }
  .landing-hero-image { width:100%; height:100%; object-fit:contain; object-position:center top; }
  .landing-hero-bar { min-height:58px; padding:8px 14px; }
  .landing-logo { width:min(47vw,230px); }
  .landing-search { width:min(38vw,190px); }
  .landing-heading { padding:0 18px; }
  .landing-heading h1 { color:#321a20; font-size:clamp(31px,10vw,48px); }
  .landing-heading > p:last-child { color:var(--muted); }
  .landing-sectors { padding:8px 0; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
  .landing-grid { width:max-content; display:grid; grid-template-columns:repeat(6,minmax(150px,42vw)); gap:8px; padding-inline:8px; }
  .landing-tile { width:100%; display:block; border-radius:10px; box-shadow:none; }
  .landing-tile:hover,.landing-tile:focus-visible { transform:none; }
  .landing-tile > span { min-height:58px; padding:10px 12px 12px; }
  .landing-tile strong { font-size:20px; }
  .landing-mail-heading { margin:22px 16px 10px; }
  .landing-mail-heading .compose-button { min-width:132px; }
  .app-shell.landing-active .mail-workspace { height:max(520px,calc(100dvh - var(--rail))); min-height:520px; }
  .corporate-menu { top:auto; right:0; bottom:0; left:0; width:100%; max-height:72dvh; overflow-y:auto; border-radius:20px 20px 0 0; transform:translateY(105%); }
  .app-shell.corporate-menu-open .corporate-menu { transform:translateY(0); }
  .mail-workspace { display: block; }
  .message-list-panel, .reader-panel { height: 100%; }
  .reader-panel { display: none; }
  .mail-workspace.message-open .message-list-panel { display: none; }
  .mail-workspace.message-open .reader-panel { display: block; }
  .reader-back { display: grid; }
  .reader-toolbar { padding: 0 10px; gap: 5px; }
  .reader-tools { flex: 1; justify-content: center; }
  .tool-button { width: 35px; justify-content: center; }
  .tool-button span { display: none; }
  .reader-content { padding: 23px 17px 50px; }
  .reader-heading { display: block; }
  .reader-heading time { display: block; padding-top: 8px; }
  .recipient-details, .attachment-list, .thread-strip { margin-left: 0; }
  .message-frame { min-height: 120px; }
  .hub-view { padding: 24px 16px 38px; }
  .hub-header { align-items: flex-start; flex-direction: column; }
  .sector-layout { margin-top: 24px; }
  .sector-grid { grid-template-columns: repeat(2, minmax(125px, 1fr)); gap: 10px; }
  .sector-tile { min-height: 128px; padding: 14px; }
  .sector-tile strong { margin-top: 14px; }
  .avis-view { padding: 28px 15px; align-items: start; }
  .avis-orbit { width: 72px; height: 72px; margin-bottom: 18px; }
  .avis-stage h1 { font-size: 42px; }
  .avis-expansion { font-size: 11px; }
  .avis-intro { font-size: 13px; }
  .avis-command > div { align-items: flex-end; }
  .avis-command > div span { max-width: 170px; }
  .compose-dialog { width: 100vw; max-width: none; max-height: 100dvh; height: 100dvh; border: 0; border-radius: 0; }
  .compose-shell { height: 100%; display: grid; grid-template-rows: 62px minmax(0, 1fr); }
  .compose-grid { min-height: 0; grid-template-columns: 1fr; overflow-y: auto; }
  .compose-fields { min-height: 620px; padding-inline: 16px; }
  .compose-footer { align-items: flex-start; flex-direction: column; }
  .compose-footer > div { width: 100%; }
  .compose-footer button { flex: 1; justify-content: center; }
  .compose-avis { border: 0; border-top: 1px solid rgba(127,23,42,.19); }
  .documents-view { padding: 20px 14px; }
  .documents-header, .documents-toolbar { align-items: stretch; flex-direction: column; }
  .document-card { grid-template-columns: 58px minmax(0,1fr); }
  .document-card img { width: 58px; height: 58px; }
  .repository-badge { grid-column: 2; justify-self: start; }
  .document-fields { grid-template-columns: 1fr; }
  .finance-view { padding: 22px 14px; }
  .connect-view { padding: 22px 14px; }
  .connect-header { align-items: flex-start; flex-direction: column; }
  .team-chat { height:auto; min-height:0; }
  .private-message-target { align-items:stretch; flex-direction:column; }
  .team-message-list { flex:none; max-height:min(20cm,50dvh); padding:12px; }
  .conference-dialog-header { align-items:flex-start; flex-direction:column; gap:4px; height:auto; padding:10px 14px; }
  .team-message-list article { width: 88%; }
  /* Reported directly: "Mobile should be 2 video screen nebst each other not as a column" -
     two tiles side by side instead of stacked, even at phone width. */
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .finance-hero, .corporate-heading { align-items: flex-start; flex-direction: column; }
  .account-types { grid-template-columns: 1fr 1fr; }
  .finance-tiles, .corporate-previews { grid-template-columns: 1fr; }
  .finance-tile { min-height: 125px; padding: 18px; }
  .corporate-previews iframe { height: 180px; }
  .login-shell { padding: 26px 22px; }
  .toast-region { right: 12px; bottom: calc(var(--rail) + 12px); left: 12px; }
  .toast { max-width: none; }
}

@media (max-width: 390px) {
  .topbar { padding-inline: 9px; }
  .mobile-menu { margin-right: 6px; }
  .global-search { margin-left: 6px; }
  .profile-button { display: none; }
  .message-card { min-height: 108px; }
  .sector-grid { grid-template-columns: 1fr 1fr; }
  .sector-tile { min-width: 0; }
  .sector-tile strong { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* Composer signature styles: inline email styles are blocked by the page CSP. */
.compose-signature .genesis-signature-style-0 { font-family:Arial,Helvetica,sans-serif;color:#172353; }
.compose-signature .genesis-signature-style-1 { font-size:7.2px;line-height:8.8px;margin-bottom:3.2px; }
.compose-signature .genesis-signature-style-2 { width:500px;max-width:500px;table-layout:fixed;border-collapse:collapse;font-family:Arial,Helvetica,sans-serif;color:#172353;background:#fff; }
.compose-signature .genesis-signature-style-3 { width:160px;max-width:160px;min-width:160px;padding:0 20px 0 0;vertical-align:top;overflow:hidden; }
.compose-signature .genesis-signature-style-4 { display:block;width:140px;max-width:140px;min-width:140px;height:auto;border:0;margin:0; }
.compose-signature .genesis-signature-style-5 { width:340px;max-width:340px;min-width:340px;padding:2px 0 0;vertical-align:top;overflow:hidden; }
.compose-signature .genesis-signature-style-6 { font-size:8px;line-height:9.6px;font-weight:700;letter-spacing:.24px;color:#172353;white-space:nowrap; }
.compose-signature .genesis-signature-style-7 { font-size:5.6px;line-height:7.2px;letter-spacing:.36px;color:#89672c;white-space:nowrap; }
.compose-signature .genesis-signature-style-8 { margin-top:3.2px;font-size:5.6px;line-height:7.2px;color:#172353; }
.compose-signature .genesis-signature-style-9 { margin-top:3.2px;border-collapse:collapse;font-size:5.6px;line-height:7.2px; }
.compose-signature .genesis-signature-style-10,.compose-signature .genesis-signature-style-13 { color:#89672c;padding:0 5px 0 0;font-size:4.8px;letter-spacing:.28px;white-space:nowrap; }
.compose-signature .genesis-signature-style-11,.compose-signature .genesis-signature-style-14 { padding:0;white-space:nowrap; }
.compose-signature .genesis-signature-style-12,.compose-signature .genesis-signature-style-15 { color:#172353;text-decoration:none;white-space:nowrap; }
.compose-signature .genesis-signature-style-16 { padding-top:3.2px;font-size:5.6px;line-height:7.2px;white-space:nowrap; }
.compose-signature .genesis-signature-style-17,.compose-signature .genesis-signature-style-19,.compose-signature .genesis-signature-style-20,.compose-signature .genesis-signature-style-22 { color:#172353;text-decoration:none; }
.compose-signature .genesis-signature-style-18,.compose-signature .genesis-signature-style-21 { color:#b79b5a; }

/* Bounded modal with a persistent action footer and independently scrollable content. */
.compose-dialog { height: min(900px, calc(100dvh - 32px)); max-height: calc(100dvh - 32px); }
.compose-shell { height: 100%; min-height: 0; display: grid; grid-template-rows: 62px minmax(0,1fr) auto; overflow: hidden; }
.compose-grid { min-height: 0; overflow: hidden; }
.compose-fields { display: block; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 20px; }
.rich-compose { display: block; min-height: 0; }
.compose-document { min-height: 210px; overflow: visible; }
.compose-body { min-height: 40px; white-space: pre-wrap; overflow-wrap: anywhere; }
.compose-body p { margin: 0 0 1em; }
.compose-avis { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.compose-footer { padding: 10px 20px; background: white; max-height: 38dvh; overflow-y: auto; }
.compose-footer > div { flex-wrap: wrap; }
.compose-inline-files { max-height: 160px; overflow-y: auto; }
@media (max-width: 760px) {
 .compose-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
 .compose-shell { grid-template-rows: 56px minmax(0,1fr) auto; }
 .compose-shell > header { height: 56px; }
 .compose-grid { display: block; overflow-y: auto; }
 .compose-fields, .compose-avis { overflow: visible; min-height: 0; }
 .compose-fields { padding-inline: 12px; }
 .compose-avis { padding: 18px 12px; }
 .compose-footer { padding: 8px 12px max(8px, env(safe-area-inset-bottom)); grid-template-columns: 1fr; gap: 6px; }
 .compose-footer > div { gap: 5px; }
 .compose-footer button { padding-inline: 9px; }
}

.compose-signature > .genesis-signature-style-0 { zoom:.7; }

.compose-notice { grid-column:1/-1; font-size:12px; color:#526059; overflow-wrap:anywhere; }
.compose-notice.error { color:#a01530; font-weight:600; }
.compose-recipient-field{position:relative;min-height:47px}
.recipient-entry{min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:5px;padding:5px 0}
.recipient-entry>input{flex:1 1 150px;min-height:30px}
.recipient-chips{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.recipient-chip{min-height:28px;max-width:290px;display:inline-flex;align-items:center;gap:7px;padding:4px 7px;border:1px solid #cfc5c8;border-radius:4px;background:#f7f3f4;color:var(--ink);font:600 11px/1.2 Aptos,"Segoe UI",sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recipient-chip[aria-pressed=true]{border-color:var(--wine);background:var(--wine);color:#fff}
.recipient-chip>span{font-size:15px;line-height:1}
.recipient-suggestions{position:absolute;z-index:20;top:calc(100% - 3px);left:70px;right:38px;max-height:240px;overflow:auto;padding:5px;border:1px solid #d8cfd1;border-radius:5px;background:#fff;box-shadow:0 12px 28px rgba(24,15,18,.2)}
.recipient-suggestions[hidden]{display:none}
.recipient-suggestions button{width:100%;display:grid;gap:2px;padding:8px 10px;border:0;border-radius:3px;background:#fff;color:var(--ink);text-align:left}
.recipient-suggestions button:is(:hover,:focus-visible){background:var(--wine-soft);outline:0}
.recipient-suggestions strong{font-size:12px}
.recipient-suggestions small{color:var(--muted);font-size:10px}

/* Attachment thumbnails retain the full image/page, with a readable filename. */
.compose-attachment-card > strong { width:52px; height:52px; flex:0 0 52px; overflow:hidden; }
.compose-attachment-card > strong img { object-fit:contain; background:white; }
.compose-attachment-card > strong video { object-fit:cover; background:#111; pointer-events:none; }
.compose-attachment-card > span { overflow-wrap:anywhere; min-width:0; }
.compose-attachment-card { min-width:0; max-width:100%; }

.compose-dialog { container-type:inline-size; max-width:calc(100vw - 32px); }
.compose-resize { position:absolute; right:0; bottom:0; width:24px; height:24px; padding:0; border:0; background:white; color:var(--wine); cursor:nwse-resize; touch-action:none; z-index:2; }
.compose-footer { padding-right:28px; }
.compose-dialog.is-maximized { inset:16px!important; width:auto!important; height:auto!important; max-width:none; max-height:none; margin:0; }
@container (max-width:760px) {
 .compose-grid { display:block; overflow-y:auto; }
 .compose-fields,.compose-avis { overflow:visible; }
 .compose-footer { grid-template-columns:1fr; }
 .compose-footer > div { flex-wrap:wrap; }
}
.file-preview-content { min-height:0; overflow:auto; padding:16px; text-align:center; background:#eee; }
.file-preview-content img,.file-preview-content canvas { max-width:100%; height:auto; background:white; }
.file-preview-content video { display:block; width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 190px); margin:auto; background:#000; }
.file-preview-dialog.media-only { width:fit-content; height:fit-content; max-width:96vw; max-height:94vh; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; }
.file-preview-dialog.media-only .file-preview-shell { position:relative; display:block; height:auto; background:transparent; }
.file-preview-dialog.media-only .file-preview-shell > header { display:none; }
.file-preview-dialog.media-only .file-preview-shell > footer { position:fixed; right:16px; bottom:16px; padding:0; border:0; background:transparent; opacity:.18; transition:opacity .15s ease; }
.file-preview-dialog.media-only:hover .file-preview-shell > footer,.file-preview-dialog.media-only:focus-within .file-preview-shell > footer { opacity:1; }
.file-preview-dialog.media-only .file-preview-content { max-width:96vw; max-height:94vh; padding:0; border:0; background:transparent; }
.file-preview-dialog.media-only .file-preview-content img,.file-preview-dialog.media-only .file-preview-content canvas,.file-preview-dialog.media-only .file-preview-content video { display:block; max-width:96vw; max-height:94vh; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.file-preview-content audio { width:min(680px,100%); margin:34px auto; }
.file-preview-content[hidden], #filePreviewFrame[hidden] { display:none; }
#filePreviewPages { margin-right:auto; display:flex; align-items:center; gap:10px; }
#filePreviewPages[hidden] { display:none; }
@media(max-width:900px) {
 .compose-dialog,.compose-dialog.compose-dialog-moved,.compose-dialog.is-maximized { inset:0!important; left:0!important; top:0!important; width:100vw!important; min-width:0; max-width:100vw; height:100dvh!important; max-height:100dvh; margin:0!important; border-radius:0; }
 #composeResize,#composeMaximize { display:none; }
}

/* Simplified AVISCloud registration with prefix-search ISO results. */
.document-fields-simple{grid-template-columns:1fr 1fr}
.document-file-first,.document-iso-search,.document-automatic-data{grid-column:1/-1}
.document-iso-search{position:relative}
.document-iso-results{display:grid;position:relative;z-index:3;max-height:260px;overflow:auto;margin-top:6px;padding:6px;border:1px solid #d9cfd2;border-radius:10px;background:#fff;box-shadow:0 12px 30px rgba(45,22,29,.12)}
.document-iso-results[hidden]{display:none}
.document-iso-results button{display:grid;grid-template-columns:130px 1fr auto;gap:10px;align-items:center;width:100%;padding:10px;border:0;border-bottom:1px solid #eee8ea;background:#fff;color:#332f30;text-align:left}
.document-iso-results button:last-child{border-bottom:0}
.document-iso-results button:hover,.document-iso-results button:focus{background:#f8f1f3;outline:2px solid rgba(127,23,42,.12)}
.document-iso-results strong{color:#7f172a}.document-iso-results small{color:#756f72}
.document-automatic-data{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px;border:1px solid #e3dade;border-radius:10px;background:#faf8f9}
.document-automatic-data input{background:#f2eef0;color:#5e5759}
@media(max-width:720px){.document-fields-simple,.document-automatic-data{grid-template-columns:1fr}.document-iso-results button{grid-template-columns:1fr;gap:2px}}

/* Per-user AVISCloud quota, AI logistics and administrator sharing. */
.document-quota{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;max-width:560px;margin-top:12px;padding:10px 12px;border:1px solid #e1d8db;border-radius:10px;background:#fff}
.document-quota span{color:#6d6568;font-size:12px}.document-quota progress{grid-column:1/-1;width:100%;height:8px;accent-color:#7f172a}
.avis-ai-logistics{display:flex;gap:10px;align-items:center;margin:0 0 14px;padding:10px 12px;border-left:3px solid #7f172a;background:#faf6f7;color:#51494c}.avis-ai-logistics strong{color:#7f172a}
.document-ai-route{display:block;max-width:240px;color:#756f72;line-height:1.35}
.document-access-selector{width:min(290px,100%);padding:7px;border:1px solid #ded5d8;border-radius:9px;background:#fff}.document-access-selector summary{cursor:pointer;color:#7f172a;font-weight:700}.document-access-users{display:grid;gap:6px;max-height:180px;overflow:auto;margin:9px 0}.document-access-users label{display:flex;align-items:center;gap:7px;margin:0;padding:5px;border-radius:6px;background:#faf8f9}.document-access-users input{width:auto}
@media(max-width:720px){.document-quota{grid-template-columns:1fr}.avis-ai-logistics{align-items:flex-start;flex-direction:column}}

.document-preview-button{display:flex;align-items:center;justify-content:center;align-self:start;padding:0;border:0;border-radius:10px;background:transparent;cursor:pointer;overflow:hidden}
.document-preview-button:hover,.document-preview-button:focus-visible{outline:3px solid rgba(127,23,42,.22);outline-offset:3px}
.document-preview-button img{display:block;pointer-events:none}
.document-preview-instruction{display:block;margin-top:8px;color:#7f172a;font-weight:650}

/* Internal workspace refinement. The public landing hero remains unchanged. */
.app-shell:not(.landing-active) .brand-leaf{width:58px;height:58px;object-fit:contain}
.app-shell:not(.landing-active) :is(.mail-workspace,.avis-stage,.placeholder-card,.team-chat,.connect-tools-body>section,.document-dialog-shell,.preview-envelope){background:#fff}
.app-shell:not(.landing-active) :is(.team-chat,.connect-tools-body>section,.placeholder-card,.document-dialog-shell,.preview-envelope){border:1px solid rgba(127,23,42,.55);border-radius:0;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.connect-view{background:#fff}
.rail-item img{object-fit:contain;image-rendering:auto}
.rail-item.active img{filter:none!important}
.global-search-results{position:fixed;z-index:90;top:64px;left:calc(var(--rail) + var(--sidebar) + 20px);width:min(720px,calc(100vw - var(--rail) - var(--sidebar) - 44px));max-height:min(560px,70vh);overflow:auto;border:1px solid rgba(127,23,42,.55);border-radius:0;background:#fff;box-shadow:0 12px 28px rgba(0,0,0,.2);padding:8px}
.global-search-results[hidden]{display:none}
.global-search-results header{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--line)}
.global-search-results header small,.global-search-status{color:var(--muted);font-size:11px}.global-search-status{margin:0;padding:12px}
.global-search-row,.global-search-ai{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;background:#fff;padding:9px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;color:var(--ink)}
.global-search-row:hover,.global-search-row:focus-visible{background:#f9f5f6}.global-search-row>span{min-width:0}.global-search-row strong,.global-search-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.global-search-row small{margin-top:2px;color:var(--muted);font-size:11px}.global-search-row em{color:var(--wine);font-size:10px;font-style:normal;font-weight:700;text-transform:uppercase}
.global-search-ai{justify-content:center;border-bottom:0;color:#fff;background:var(--wine);font-weight:700;text-align:center}
.contact-list{gap:1px!important}.contact-list label{min-height:20px;margin:0;padding:3px 6px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:#fff;font-size:9px;cursor:pointer}.contact-list label:hover,.contact-list label:focus-visible{background:#f9f5f6;outline:1px solid rgba(127,23,42,.35)}.contact-list label.selected{background:var(--wine-soft)}.contact-list label>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-list label .contact-row-edit{flex:0 0 auto;padding:2px 5px;border:1px solid transparent;border-radius:3px;background:transparent;color:var(--muted);font-size:10px;line-height:1}.contact-list label .contact-row-edit:hover,.contact-list label .contact-row-edit:focus-visible{border-color:rgba(127,23,42,.35);color:var(--wine);background:#fff}
.contact-incubator-editor form{display:flex;flex-direction:column;min-height:0}.contact-incubator-editor form>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)}.contact-incubator-editor form>footer{position:sticky;bottom:0;z-index:2;display:flex;justify-content:flex-end;gap:12px;padding-top:14px;margin-top:14px;border-top:1px solid var(--line);background:#fff}.contact-incubator-editor h2{margin:2px 0 0}.contact-editor-grid{display:grid;grid-template-columns:1fr;gap:10px}.contact-editor-grid label{display:grid;gap:5px;font-size:11px;font-weight:700}.contact-editor-grid input,.contact-editor-grid select,.contact-editor-grid textarea{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:0;background:#fff;font:inherit}.contact-editor-notes{grid-column:1/-1}
.contact-editor-section{grid-column:1/-1;margin:6px 0 -2px;padding-top:12px;border-top:1px solid var(--line);color:var(--wine);font-size:10px;font-weight:750;letter-spacing:.14em;text-transform:uppercase}.contact-editor-grid>.contact-editor-section:first-child{padding-top:0;border-top:0;margin-top:0}
.contact-editor-empty{margin:0 0 4px;color:var(--muted);font-size:12px;line-height:1.6}
@media(max-width:720px){.global-search-results{top:58px;left:8px;width:calc(100vw - 16px)}}

/* Contact Incubator - its own launcher in the app rail (below AVISCloud) and popup window, kept out of the Messages tools panel */
/* No display: here - a native <dialog> is already display:none until [open] is set by
   show()/showModal(); overriding that on the dialog element itself (rather than an inner
   wrapper) makes it render at all times regardless of open state, including before sign-in. */
/* Non-modal (opened via .show(), never .showModal()): a real floating window, not a modal box -
   no ::backdrop, and the rest of the page stays interactive while it's open. An explicit
   z-index keeps it above everything else now that it isn't promoted to the browser's top layer.
   height is explicit (not just max-height, relying on fit-content auto sizing) - a non-modal,
   position:fixed dialog with inset:0 and no explicit height is reported to collapse to near-zero
   height on iPad Safari/WebKit (renders as a hairline), even though the equivalent fit-content
   sizing works fine in Chromium; Letter Creator, which always had an explicit height, never hit
   this. The resize handle still lets the user make it taller if they need to. */
/* "Add a tool to the messaging and emails that authorise direct recording of a video and make
   photos for instantly sending." A floating window like every other tool in this app (no blur
   backdrop - see the compose and reader-panel fixes above), draggable by its header via
   bindDialogDrag, matching the rest of the floating-window family at z-index:95. */
.capture-dialog{position:fixed;inset:0;z-index:95;margin:auto;width:min(560px,94vw);max-height:min(720px,92dvh);padding:0;overflow:hidden;border:1px solid rgba(127,23,42,.36);border-radius:14px;background:#fff;box-shadow:0 30px 90px rgba(43,16,22,.24);box-sizing:border-box}
.capture-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);cursor:grab;touch-action:none;user-select:none}
.capture-header.dragging{cursor:grabbing}
.capture-header strong{font:600 15px Aptos,'Segoe UI',Arial,sans-serif;color:#211d1f}
.capture-stage{position:relative;display:grid;place-items:center;min-height:320px;background:#161213}
.capture-stage video,.capture-stage img{display:block;width:100%;max-height:60dvh;object-fit:contain;background:#000}
.capture-status{position:absolute;top:10px;left:50%;transform:translateX(-50%);margin:0;padding:5px 12px;border-radius:20px;background:rgba(0,0,0,.6);color:#fff;font:600 12px Aptos,'Segoe UI',Arial,sans-serif;pointer-events:none}
.capture-status:empty{display:none}
.capture-footer{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
@media(max-width:640px){.capture-dialog{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}.capture-stage{min-height:0;flex:1}}

/* Reported directly: "the Contact incubator window must be smaller 50% computer the raws less
   hight and no option for full screen" - full-screen let the form grow past what its own close
   affordances could reach, so it's dropped for this dialog entirely (see bindContactIncubatorDrag
   in app.js, which never passes it a fullscreenButton), and the default footprint is roughly half
   the previous 760x620 desktop box by area. */
.contact-incubator-dialog{position:fixed;inset:0;z-index:95;width:min(540px,calc(100vw - 28px));height:min(460px,calc(100dvh - 28px));max-height:calc(100dvh - 28px);margin:auto;padding:0;overflow:hidden;border:1px solid #9f1831;border-radius:12px;background:#fff;box-shadow:0 32px 100px rgba(13,8,10,.46);box-sizing:border-box}
.contact-incubator-shell{height:100%;max-height:calc(100dvh - 28px);display:flex;flex-direction:column}
.contact-incubator-header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);cursor:grab;touch-action:none;user-select:none}.contact-incubator-header.dragging{cursor:grabbing}.contact-incubator-header strong{font-size:18px;letter-spacing:.04em;color:var(--wine-deep)}
.dialog-header-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
/* Native resize:both isn't touch-operable on iOS/iPadOS (no drag affordance renders), so both
   floating windows use this custom pointer-driven handle instead, on every device. */
/* Reported directly: the composer's resize handle "not responsive" on the right/bottom edge. A
   28px hit target is below Apple's own 44px minimum recommended touch target - a finger landing
   even a couple of px outside it never starts a pointerdown on the handle at all, which reads as
   "nothing happens" rather than a visible near-miss. Widened to a real touch-sized target; the
   striped gradient (percentage-based stops) scales to the new box automatically. */
.dialog-resize-handle{position:absolute;z-index:5;right:1px;bottom:1px;width:44px;height:44px;cursor:nwse-resize;touch-action:none;background:linear-gradient(135deg,transparent 0 45%,rgba(127,23,42,.3) 46% 53%,transparent 54% 63%,rgba(127,23,42,.7) 64% 71%,transparent 72%)}
.letter-creator-dialog.dialog-fullscreen,.letter-gallery-dialog.dialog-fullscreen,.conference-dialog.dialog-fullscreen{inset:0!important;left:auto!important;top:auto!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;min-width:0!important;min-height:0!important;margin:0!important;border-radius:0!important}
.letter-creator-dialog.dialog-fullscreen .dialog-resize-handle,.letter-gallery-dialog.dialog-fullscreen .dialog-resize-handle,.conference-dialog.dialog-fullscreen .dialog-resize-handle{display:none}
/* Apple Contacts-style two-pane layout: the searchable list (left) never hides behind the editor
   (right) - each pane scrolls independently instead of the previous all-or-nothing panel toggle. */
.contact-incubator-body{min-height:0;flex:1 1 auto;display:flex;overflow:hidden}
.contact-incubator-contacts{flex:0 0 168px;display:flex;flex-direction:column;min-height:0;padding:12px;border-right:1px solid var(--line);overflow:hidden}
.contact-incubator-contacts .contact-actions{flex:0 0 auto;display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.contact-incubator-contacts .contact-actions .secondary-button{width:100%;height:26px;padding:0 6px;font-size:8.5px}
.contact-incubator-contacts .contact-list{flex:1 1 auto;overflow-y:auto;min-height:0}
.contact-incubator-editor{flex:1 1 auto;min-width:0;min-height:0;overflow-y:auto;padding:18px}
.contact-incubator-identity{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.contact-avi-section{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.contact-avi-section .letter-avi-log{min-height:60px;max-height:116px}
.contact-search-field{display:grid;gap:4px;margin:0 0 8px;color:var(--muted);font-size:9px;font-weight:700;text-transform:uppercase}.contact-search-field input{width:100%;min-height:32px;padding:0 8px;border:1px solid #ddd4d6;border-radius:6px;background:#fff;color:var(--ink);font:11px/1.2 inherit;text-transform:none}
.contact-incubator-body .eyebrow{color:var(--wine);font-size:10px;font-weight:750;letter-spacing:.14em;text-transform:uppercase}
.contact-incubator-body h2{margin:2px 0 6px}
.identity-logo-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center}
.identity-logo-preview{width:96px;height:96px;display:grid;place-items:center;border:1px dashed rgba(127,23,42,.35);border-radius:8px;background:var(--wine-soft);overflow:hidden}
.identity-logo-preview img{width:100%;height:100%;object-fit:contain}
.identity-logo-summary{display:flex;flex-direction:column;gap:8px}
.identity-logo-summary p{margin:0;color:#5f585b;font-size:12px;line-height:1.5}
.identity-logo-editor{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.identity-logo-describe{display:grid;gap:5px;font-size:11px;font-weight:700;color:var(--wine-deep)}
.identity-logo-describe textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:#fff;font:inherit;font-size:12px;resize:vertical}
.identity-status{margin:10px 0 0;color:var(--muted);font-size:11px;line-height:1.5;min-height:14px}
.identity-status.error{color:#a01530;font-weight:600}
.identity-alias{margin:8px 0 0;padding:7px 10px;border-radius:6px;background:var(--wine-soft);color:var(--wine-deep);font-size:11px;font-weight:650}
@media(max-width:1024px),(hover:none) and (pointer:coarse){.contact-incubator-dialog{width:min(440px,94vw);height:min(420px,88dvh);max-height:min(560px,92dvh)}}
@media(max-width:720px){.identity-logo-row{grid-template-columns:1fr}.identity-logo-preview{width:72px;height:72px}}

/* A.V.I.S Letter Creator */
/* Reported directly: "Move the icons back into a column as it is not good way the column should
   be maximum small." A prior pass put the Letter Creator (robot) and video conference launchers
   side by side in a row; back to stacked as a column, as they always were, but drawn smaller
   than the original column too, so the pair stays as compact as possible at the bottom of the
   left mail toolbox. */
.letter-creator-launcher{width:100%;min-height:72px;margin-top:16px;display:grid;place-items:center;border:0;border-radius:0;background:transparent;box-shadow:none}
.letter-creator-launcher img{width:52px;height:52px;object-fit:contain;transition:transform .18s ease}.letter-creator-launcher:is(:hover,:focus-visible) img{transform:translateY(-2px)}
.connect-workspace-launcher{margin-top:6px}.connect-workspace-launcher img{width:52px;height:52px}
/* Non-modal (.show(), never .showModal()): a real floating window, not a modal box - no
   ::backdrop, and the rest of the page stays interactive while it's open. */
.letter-creator-dialog{position:fixed;inset:0;z-index:95;width:min(1460px,calc(100vw - 28px));height:min(900px,calc(100dvh - 28px));min-width:min(880px,calc(100vw - 28px));min-height:min(620px,calc(100dvh - 28px));max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);margin:auto;padding:0;overflow:hidden;border:1px solid #9f1831;border-radius:12px;background:#fff;box-shadow:0 32px 100px rgba(13,8,10,.46)}
.letter-creator-dialog.visual-keyboard{top:var(--letter-visual-top,0px)!important;bottom:auto!important;height:var(--letter-visual-height,100dvh)!important;max-height:var(--letter-visual-height,100dvh)!important;resize:none}.letter-creator-dialog.visual-keyboard .letter-ai-panel{padding-top:14px;padding-bottom:14px}
.letter-creator-shell{height:100%;display:grid;grid-template-columns:minmax(230px,270px) minmax(0,1fr) minmax(190px,210px);min-height:0}
.letter-ai-panel{min-width:0;min-height:0;padding:25px 20px;display:flex;flex-direction:column;overflow-y:auto;border-right:1px solid rgba(127,23,42,.22);background:#fff}
/* Reported directly as "drag has a block to the right side": the only draggable strip was
   .letter-window-header, which sits solely in the middle workspace column - grabbing from the left
   AI panel or the right template panel (each its own full-height sidebar with no header of its
   own) did nothing, reading as a dead zone. Both panels' own top strip is a drag handle now too. */
.letter-ai-brand{display:flex;flex-direction:column;gap:3px;color:var(--wine);cursor:grab;touch-action:none;user-select:none}.letter-ai-brand.dragging{cursor:grabbing}.letter-ai-brand strong{font-size:24px;letter-spacing:.22em}.letter-ai-brand small{font-size:10px;font-style:italic}
.letter-ai-panel>p{color:#5f585b;font-size:12px;line-height:1.55}
/* Phase 3: the manual recipient search/date fields and the prompt-box + "Ask A.V.I.S" button are
   gone - this is now AVI's own scrollback conversation, styled like an ordinary chat log rather
   than a form. Reported directly, with an annotated screenshot: never shown any more (see the
   `hidden` attribute on this section in index.html and its own comment there) now that the
   floating AVI widget drives the same conversation - kept only so submitLetterAviMessage's own
   already-working DOM writes still have somewhere real to land. */
.letter-avi-section{display:none}
.letter-avi-log{min-height:120px;max-height:clamp(180px,32vh,360px);padding:10px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;border:1px solid rgba(127,23,42,.22);border-radius:8px;background:var(--wine-soft)}
.letter-avi-message{max-width:92%;padding:7px 10px;border-radius:9px;font-size:11px;line-height:1.45;word-break:break-word;white-space:pre-wrap}
.letter-avi-message-avi{align-self:flex-start;background:#fff;color:var(--ink);border:1px solid rgba(127,23,42,.18)}
.letter-avi-message-user{align-self:flex-end;background:var(--wine);color:#fff}
.letter-avi-input-row{display:flex;align-items:center;gap:6px}
.letter-avi-input-row input{flex:1;min-width:0;min-height:36px;padding:0 10px;border:1px solid #ddd4d6;border-radius:6px;background:#fff;font:inherit;font-size:12px;color:var(--ink)}
.letter-avi-input-row input:disabled{opacity:.6}
.letter-avi-input-row #letterAviMic,.letter-avi-input-row #contactAviMic{width:36px;height:36px;padding:0;flex:0 0 auto;min-height:0;margin:0}
.letter-avi-input-row #letterAviMic svg,.letter-avi-input-row #contactAviMic svg{width:15px;height:15px}
.letter-avi-input-row button[type=submit]{flex:0 0 auto;min-height:36px;padding:0 14px;border:1px solid var(--wine);border-radius:6px;background:var(--wine);color:#fff;font-size:11px;font-weight:700;cursor:pointer}
.letter-avi-input-row button[type=submit]:disabled{opacity:.5;cursor:not-allowed}
.letter-voice-button{min-height:34px;border:1px solid rgba(127,23,42,.22);border-radius:7px;background:#fff;color:var(--wine-deep);font-size:11px;font-weight:650;width:100%;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:7px}
.letter-voice-button svg{width:15px;height:15px}
.letter-voice-button:disabled{cursor:not-allowed;opacity:.5}
.letter-ai-status{font-size:10px!important;text-align:center}.letter-ai-status.working{color:var(--wine)}.letter-ai-status.error{color:#a01530;font-weight:700}
.letter-signing-section{margin-top:16px;padding-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border-top:1px solid var(--line)}.letter-prep-action{min-width:0;padding:4px 1px;display:grid;grid-template-rows:44px auto auto;place-items:center;gap:3px;border:0;background:transparent;color:var(--ink);font-size:9px;line-height:1.15;text-align:center}.letter-prep-action strong{font-size:9px}.letter-prep-action small{color:var(--muted);font-size:8px}.letter-prep-action:is(:hover,:focus-visible){color:var(--wine);outline:1px solid rgba(127,23,42,.25);outline-offset:3px}.letter-upload-preview{position:relative;width:100%;height:44px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--wine);background:#fff;color:#c2b8bb;font-size:10px}.letter-upload-preview img{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);object-fit:contain}.letter-upload-preview.has-image>span{display:none}.letter-qr-mark{position:relative;width:42px;height:42px;border:4px solid #171315;background:repeating-conic-gradient(#171315 0 25%,transparent 0 50%) 50%/8px 8px}.letter-qr-mark::after{content:"";position:absolute;inset:5px auto auto 5px;width:8px;height:8px;border:3px solid #fff;background:#171315;box-shadow:19px 0 0 -1px #171315,0 19px 0 -1px #171315}
/* Codex review finding (P2, round 3 of the same underlying issue): the wrap/auto-height treatment
   below was first added only at <=1024px, then extended to 1025-1180px when Codex found the same
   overflow there too - and a third round found it recurring again above 1180px (e.g. ~858px of
   actual workspace width at a common 1366px desktop viewport, not nearly enough for 8 unwrapped
   labeled buttons plus the full 5-button Postoffice with its visible label). Chasing each new
   breakpoint individually was the actual bug: an 8-button toolbar simply doesn't reliably fit on one
   line at ANY width once sidebars, identity content and the Postoffice controls are also competing
   for the same row, including the very widest desktop layout. flex-wrap and the auto-growing header
   row now apply unconditionally instead of behind a media query, so the header reflows whenever it
   genuinely needs to - which is harmless at any width that does have room, since wrapped content
   simply doesn't wrap when it fits - and the two narrower media queries below no longer need their
   own copies of the same three declarations. */
.letter-workspace{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(78px,auto) auto minmax(0,1fr);background:#efeded;box-shadow:inset 0 0 0 2px #b3122d}.letter-window-header{position:relative;padding:0 16px 0 20px;display:flex;flex-wrap:wrap;row-gap:4px;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid rgba(127,23,42,.24);background:#fff;box-shadow:0 6px 18px rgba(18,10,12,.08);cursor:grab;touch-action:none;user-select:none;z-index:2}.letter-window-header.dragging{cursor:grabbing}.letter-window-header>div,.letter-window-identity{display:flex;align-items:center;gap:8px;min-width:0}.letter-window-identity>img{width:32px;height:38px;flex:0 0 auto;object-fit:contain}.letter-window-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px}.letter-window-header span{display:flex;flex-direction:column;gap:2px}.letter-window-header strong{font-size:13px}.letter-window-header small{color:var(--muted);font-size:10px}
.letter-window-icon-button{width:44px;height:44px;padding:0;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;cursor:pointer}.letter-window-icon-button:hover{background:var(--quiet)}.letter-window-icon-button svg{width:28px;height:28px;color:#a60505}.letter-window-icon-button-labeled{width:auto;min-width:48px;height:60px;padding:4px 6px;grid-template-rows:30px auto;gap:2px;color:#a60505;font-size:7px;font-weight:700;line-height:1.1;text-align:center}.letter-window-icon{width:28px;height:28px;display:block;background-color:#a60505;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.letter-window-icon-save{-webkit-mask-image:url(/letter-handling/save.png?rev=1);mask-image:url(/letter-handling/save.png?rev=1)}.letter-window-icon-save-as{-webkit-mask-image:url(/letter-handling/save-as.png?rev=1);mask-image:url(/letter-handling/save-as.png?rev=1)}.letter-window-icon-delete{-webkit-mask-image:url(/letter-handling/delete.png?rev=1);mask-image:url(/letter-handling/delete.png?rev=1)}.letter-window-icon-print{-webkit-mask-image:url(/letter-handling/print.png?rev=1);mask-image:url(/letter-handling/print.png?rev=1)}.letter-window-icon-back{-webkit-mask-image:url(/letter-handling/back.png?rev=1);mask-image:url(/letter-handling/back.png?rev=1)}.letter-window-icon-contact{-webkit-mask-image:url(/letter-handling/contact.png?rev=1);mask-image:url(/letter-handling/contact.png?rev=1)}.letter-window-icon-svg{background-color:transparent;display:grid;place-items:center}
/* Reported directly: "mount the Contact icon so in case AVI makes problems, then the contact icon
   will authorize a search manually and push manually for insert into the letter" - a manual
   fallback for AVI's own recipient search/insert, anchored under the header button it opens from
   (letterManualContact), the same dropdown-under-anchor pattern .recipient-suggestions already
   uses in Compose. .letter-creator-dialog itself clips overflow, so this stays small enough to
   never need to escape the dialog's own bounds.
   Codex review findings (P2, two rounds): a right:0-against-its-own-small-anchor position only
   worked while Contact stayed at the header's far right. Once the toolbar wraps - which, per the
   round above this one, can now happen at ANY width, not just below some breakpoint - Contact can
   become the first button in a wrapped row near the header's left edge, and right:0 then pushes
   this fixed-width popup mostly outside the dialog's own overflow:hidden bounds. The anchor is
   position:static (removing it as a containing block) so the picker's position:absolute resolves
   against the next positioned ancestor instead - .letter-window-header, made positioned below and
   spanning the dialog's full width - and left/right:16px keeps it inside the dialog regardless of
   where the wrapped Contact button lands. This applies unconditionally for the same reason the
   wrap fix itself does: harmless at any width, since it only ever constrains the picker to well
   within the (usually much wider than 260px) header. */
.letter-contact-picker-anchor{position:static}
.letter-contact-picker{position:absolute;z-index:40;top:calc(100% + 6px);left:16px;right:16px;width:auto;max-height:320px;overflow:auto;padding:8px;border:1px solid #d8cfd1;border-radius:8px;background:#fff;box-shadow:0 12px 28px rgba(24,15,18,.2)}
.letter-contact-picker[hidden]{display:none}
.letter-contact-picker input{box-sizing:border-box;width:100%;padding:8px 10px;border:1px solid #d8cfd1;border-radius:5px;font:12px/1.3 Aptos,"Segoe UI",sans-serif;margin-bottom:6px}
.letter-contact-picker-results{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.letter-contact-picker-results button{width:100%;display:grid;gap:2px;padding:8px 10px;border:0;border-radius:5px;background:#fff;color:var(--ink);text-align:left;cursor:pointer}
.letter-contact-picker-results button:is(:hover,:focus-visible){background:var(--wine-soft);outline:0}
.letter-contact-picker-results strong{font-size:12px}
.letter-contact-picker-results small{display:block;color:var(--muted);font-size:10px}
.letter-contact-picker-empty{color:var(--muted);font-size:11px;padding:8px 4px}
.letter-format-toolbar{min-height:44px;padding:6px 12px;display:flex;flex-wrap:wrap;align-items:center;gap:5px;border-bottom:1px solid #d9d3d5;background:#fff;box-shadow:0 4px 12px rgba(18,10,12,.05);z-index:1}.letter-format-toolbar select,.letter-format-toolbar button{height:30px;flex:0 0 auto;padding:4px 8px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);font-size:10px}.letter-format-toolbar select:first-child{width:132px}.letter-format-toolbar select:nth-child(2){width:68px}.letter-format-toolbar select:nth-child(3){width:64px}.letter-format-toolbar button{width:30px;padding:4px;display:grid;place-items:center}.letter-format-toolbar button svg{width:15px;height:15px}.letter-format-toolbar input[type=color]{width:31px;height:30px;flex:0 0 auto;padding:2px;border:1px solid var(--line);border-radius:5px;background:#fff}.letter-toolbar-divider{width:1px;height:20px;flex:0 0 auto;margin:0 2px;background:var(--line)}
.letter-canvas{min-height:0;padding:24px;overflow:auto;display:grid;justify-items:center;align-items:start;gap:24px;zoom:var(--letter-zoom,1)}.letter-canvas.letter-canvas-wide{grid-template-columns:repeat(auto-fit,minmax(min(720px,100%),max-content));justify-content:center}.letter-zoom-control{display:flex;align-items:center;gap:3px}.letter-zoom-control select{width:60px}.letter-page{position:relative;width:min(100%,720px);aspect-ratio:1190/1684;background:#fff;box-shadow:0 16px 42px rgba(18,10,12,.2)}.letterhead-template{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;pointer-events:none;user-select:none}.letter-page-body{position:absolute;z-index:1;inset:5% 7.7% 5%;overflow-y:auto;scrollbar-gutter:stable;scrollbar-width:thin;outline:0;color:#272326;background:transparent;font:11pt/1.15 Aptos,"Segoe UI",sans-serif}.letter-page-body p{margin:0 0 1em}.letter-page-body ul,.letter-page-body ol{padding-left:1.5em}
.letter-template-panel{min-width:0;padding:20px 15px;overflow-y:auto;border-left:1px solid rgba(127,23,42,.22);background:#fff}.letter-template-panel>header{display:flex;flex-direction:column;gap:3px;margin-bottom:15px;cursor:grab;touch-action:none;user-select:none}.letter-template-panel>header.dragging{cursor:grabbing}.letter-template-panel>header strong{font-size:18px;text-transform:uppercase}.letter-template-panel>header small{color:var(--muted);font-size:10px}.letter-document-name{display:grid;gap:4px;margin-bottom:14px;color:var(--muted);font-size:9px;font-weight:700;text-transform:uppercase}.letter-document-name input{width:100%;padding:8px;border:1px solid #cfc5c8;border-radius:5px;background:#fff;color:var(--ink);font:12px/1.2 inherit;text-transform:none}.letter-template-add{width:100%;margin-top:14px;min-height:30px;padding:6px;border:1px solid #bdaeb2;border-radius:5px;background:var(--wine);color:#fff;font:700 9px/1 inherit;cursor:pointer;border-color:var(--wine)}.letter-template-status{min-height:28px;margin:10px 0 0;color:var(--muted);font-size:9px;line-height:1.35}
.letter-postoffice{min-width:0;margin-left:auto;display:flex;align-items:center;gap:9px}.letter-postoffice>strong{color:var(--ink);font-size:11px;text-transform:uppercase}.letter-postoffice-tools{display:grid;grid-template-columns:repeat(5,46px);gap:4px}.letter-postoffice-action{position:relative;width:46px;height:62px;padding:4px 2px;display:grid;grid-template-rows:38px auto;place-items:center;gap:2px;border:0;border-radius:0;background:transparent;color:var(--wine-deep);font-size:7px;font-weight:700;line-height:1;text-align:center;cursor:pointer}.letter-postoffice-icon{width:42px;height:38px;display:block;background-color:#a60505;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.letter-postoffice-icon-video{-webkit-mask-image:url(/connect-workspace-icon.png);mask-image:url(/connect-workspace-icon.png)}.letter-postoffice-icon-2nd-signature{-webkit-mask-image:url(/letter-handling/second-signature.png?rev=1);mask-image:url(/letter-handling/second-signature.png?rev=1)}.letter-postoffice-icon-email{-webkit-mask-image:url(/letter-handling/email.png?rev=1);mask-image:url(/letter-handling/email.png?rev=1)}.letter-postoffice-icon-signal{-webkit-mask-image:url(/letter-handling/signal.png?rev=1);mask-image:url(/letter-handling/signal.png?rev=1)}.letter-postoffice-icon-whatsapp{-webkit-mask-image:url(/letter-handling/whatsapp.png?rev=1);mask-image:url(/letter-handling/whatsapp.png?rev=1)}.letter-postoffice-select{cursor:pointer}.letter-postoffice-select select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.letter-postoffice-action:is(:hover,:focus-visible){outline:0}.letter-postoffice-action:active .letter-postoffice-icon{background-color:rgb(35,97,99)}.letter-postoffice-action:active span:not(.letter-postoffice-icon){color:rgb(35,97,99)}
.letter-resource-dialog{width:min(880px,calc(100vw - 28px));max-width:880px;max-height:min(720px,calc(100dvh - 28px));padding:0;overflow:hidden;border:1px solid var(--wine);border-radius:10px;background:#fff;box-shadow:0 28px 80px rgba(13,8,10,.42)}.letter-resource-dialog::backdrop{background:rgba(24,15,18,.46);backdrop-filter:blur(2px)}.letter-resource-shell{height:min(660px,calc(100dvh - 40px));display:grid;grid-template-rows:62px minmax(0,1fr) auto}.letter-resource-shell>header,.letter-resource-shell>footer{padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line)}.letter-resource-shell>header>div{display:grid;gap:2px}.letter-resource-shell>header small,.letter-resource-shell>footer>span{color:var(--muted);font-size:10px}.letter-resource-shell>footer{border-top:1px solid var(--line);border-bottom:0}.letter-resource-body{min-height:0;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 300px}.letter-resource-browser{min-width:0;min-height:0;height:100%;padding:16px;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;border-right:1px solid var(--line)}.letter-resource-browser label,.letter-qr-body label{display:grid;gap:6px;color:var(--ink);font-size:11px;font-weight:700}.letter-resource-browser input,.letter-qr-body textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font:inherit}.letter-asset-list{min-height:0;overflow-y:auto;display:grid;align-content:start;gap:7px}.letter-asset-option{width:100%;min-width:0;padding:7px;display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:10px;border:1px solid var(--line);border-radius:6px;background:#fff;text-align:left}.letter-asset-option[aria-selected=true]{border-color:var(--wine);background:var(--wine-soft)}.letter-asset-option img{width:58px;height:44px;object-fit:contain;background:#fff}.letter-asset-option span{min-width:0;display:grid;gap:3px}.letter-asset-option strong,.letter-asset-option small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.letter-asset-option strong{font-size:11px}.letter-asset-option small{color:var(--muted);font-size:9px}.letter-resource-preview{min-width:0;padding:16px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px}.letter-red-preview{min-height:220px;display:grid;place-items:center;padding:14px;overflow:hidden;border:2px solid var(--wine);border-radius:7px;background:#fff;color:var(--muted);font-size:11px;line-height:1.4;text-align:center}.letter-red-preview img{max-width:100%;max-height:100%;object-fit:contain}.letter-resource-preview p,.letter-qr-body p{margin:0;color:var(--muted);font-size:10px}.letter-qr-body{min-height:0;padding:22px;display:grid;grid-template-columns:minmax(260px,1fr) auto 300px;grid-template-rows:auto auto;align-items:start;gap:14px;overflow:auto}.letter-qr-body .letter-red-preview{grid-column:3;grid-row:1/-1;min-height:300px}.letter-qr-body>p{grid-column:1/3}.letter-qr-body .secondary-button{align-self:end}.letter-qr-preview img{width:min(100%,260px);aspect-ratio:1;object-fit:contain}
@media(max-width:1180px) and (min-width:1025px){.letter-creator-shell{grid-template-columns:230px minmax(0,1fr) 190px}.letter-ai-panel{padding:20px 16px}.letter-canvas{padding:18px}.letter-postoffice>strong{display:none}.letter-postoffice-tools{grid-template-columns:repeat(5,42px)}.letter-postoffice-action{width:42px}}
@media(max-width:1024px),(hover:none) and (pointer:coarse){.letter-creator-dialog{width:min(880px,94vw);height:min(720px,92dvh);min-width:0;min-height:0;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}.letter-creator-shell{grid-template-columns:220px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}.letter-template-panel{grid-column:1/-1;min-height:116px;max-height:148px;padding:12px 16px;display:flex;align-items:center;gap:8px;overflow-x:auto;border-top:1px solid var(--line);border-left:0}.letter-template-panel>header{min-width:110px;margin:0}.letter-postoffice>strong{display:none}.letter-postoffice-tools{grid-template-columns:repeat(5,40px)}.letter-postoffice-action{width:40px}.letter-resource-dialog{width:calc(100vw - 20px)}
  /* Codex review finding (P2) had the same root cause here as the ≤560px case its own comment
     describes: adding Undo A.V.I.S made .letter-window-actions a 7th button in a row already
     tight at 6 - verified by rendering the real dialog across this whole 561-1024px range and
     measuring the Close button's box against the dialog's own, which found it clipped outside the
     dialog at every width tested in that range, not just the narrower one Codex called out. The
     postoffice buttons already go icon-only here (see .letter-postoffice-action above, unchanged);
     the toolbar buttons now do too, the same compact treatment the ≤560px breakpoint already
     gives them. */
  .letter-window-icon-button-labeled{width:44px;min-width:44px;height:44px;padding:0}
  .letter-window-icon-button-labeled span:not(.letter-window-icon){display:none}
}
@media(max-width:720px){.letter-creator-shell{display:flex;flex-direction:column;overflow-y:auto}.letter-ai-panel{flex:0 0 auto;overflow:visible;border:0;border-bottom:1px solid var(--line)}.letter-signing-section{margin-top:18px}.letter-workspace{flex:0 0 auto;min-height:700px}.letter-template-panel{flex:0 0 auto;min-height:126px;max-height:none;overflow-x:auto;border-bottom:1px solid var(--line)}.letter-format-toolbar{position:sticky;top:0}.letter-page-body{font-size:10pt}.letter-resource-dialog{inset:0;width:100vw;max-width:none;max-height:none;margin:0;border-radius:0}.letter-resource-shell{height:100dvh}.letter-resource-body{grid-template-columns:1fr;overflow-y:auto}.letter-resource-browser{min-height:330px;border-right:0;border-bottom:1px solid var(--line)}.letter-resource-preview{min-height:300px}.letter-qr-body{grid-template-columns:1fr;grid-template-rows:auto auto auto auto}.letter-qr-body .letter-red-preview{grid-column:1;grid-row:auto;min-height:260px}.letter-qr-body>p{grid-column:1}.letter-resource-shell>footer>span{display:none}}
/* Codex review finding (P2): adding Undo A.V.I.S made .letter-window-actions a 7th unwrapped
   44px-wide button in a row that used to fit 6 - on a ~450-480px screen the row ran past the
   header's own available width and, since the dialog clips overflow, pushed Full size/Close
   entirely outside the visible dialog with no way to reach them. .letter-window-actions now gets
   its own full-width row (wrapping too, as a second line of defence) instead of sharing row 1
   with the identity block, so it has the whole header width to lay 7 buttons out in - verified by
   rendering the real dialog at 460px and measuring the Close button's box against the dialog's own
   (it used to sit past the dialog's right edge entirely; it doesn't any more). */
/* Codex review finding (P2): the manual Contact icon's own 561-1024px fix (above) left this
   narrower, more specific ≤560px breakpoint untouched - it still pinned .letter-workspace's header
   row to a literal 146px, sized for exactly 7 icon-only actions on one wrapped line. The 8th action
   this PR adds wraps to a second line here too, and a fixed 146px can't grow to fit it, so the
   identity/actions/postoffice rows below started overlapping. minmax(146px,auto) lets the row grow
   past its 146px floor instead of clipping, the same fix already applied to the 561-1024px range. */
@media(max-width:560px){.letter-workspace{grid-template-rows:minmax(146px,auto) auto minmax(0,1fr)}.letter-window-header{min-height:146px;padding:6px 9px;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:6px}.letter-window-identity{grid-column:1;grid-row:1}.letter-postoffice{grid-column:1;grid-row:3;margin:0}.letter-postoffice-tools{width:100%;grid-template-columns:repeat(5,minmax(0,1fr))}.letter-postoffice-action{width:100%;height:44px;grid-template-rows:30px}.letter-postoffice-action .letter-postoffice-icon{width:38px;height:30px}.letter-postoffice-action span:not(.letter-postoffice-icon){display:none}.letter-window-actions{grid-column:1;grid-row:2;flex-wrap:wrap;justify-content:flex-end}.letter-window-icon-button-labeled{width:44px;height:44px;padding:0;grid-template-rows:unset}.letter-window-icon-button-labeled span:not(.letter-window-icon){display:none}.letter-canvas{padding:12px}.letter-workspace{min-height:680px}.letter-template-panel{padding:10px}.letter-template-panel>header{min-width:92px}}
@media print{body>:not(#letterCreatorDialog){display:none!important}#letterCreatorDialog{position:static;width:auto;height:auto;display:block;border:0;box-shadow:none}#letterCreatorDialog :is(.letter-ai-panel,.letter-template-panel,.letter-window-header,.letter-format-toolbar){display:none}#letterCreatorDialog :is(.letter-creator-shell,.letter-workspace,.letter-canvas){display:block;padding:0;background:#fff}#letterCreatorDialog .letter-page{width:210mm;height:297mm;border:0;box-shadow:none}}


/* Letter resource dialogs and certified distribution */
.letter-resource-dialog{position:fixed;inset:0;width:min(940px,calc(100vw - 28px));height:min(620px,calc(100dvh - 28px));min-width:min(560px,calc(100vw - 20px));min-height:min(420px,calc(100dvh - 20px));max-width:calc(100vw - 12px);max-height:calc(100dvh - 12px);margin:auto;resize:none}
.letter-resource-dialog.letter-qr-dialog{width:min(780px,calc(100vw - 28px));height:min(460px,calc(100dvh - 28px))}
.letter-resource-shell{height:100%;min-height:0}
.letter-resource-shell>header{cursor:move;touch-action:none;user-select:none}
.letter-resource-shell>header.dragging{cursor:grabbing}
.letter-resource-body{grid-template-columns:minmax(0,1fr) minmax(280px,320px)}
.letter-resource-preview{grid-template-rows:auto auto auto;align-content:start}
.letter-red-preview{width:100%;min-height:0;aspect-ratio:1;align-self:start}
.letter-dialog-resize-handle{position:absolute;z-index:5;right:1px;bottom:1px;width:28px;height:28px;cursor:nwse-resize;touch-action:none;background:linear-gradient(135deg,transparent 0 45%,rgba(127,23,42,.3) 46% 53%,transparent 54% 63%,rgba(127,23,42,.7) 64% 71%,transparent 72%)}
.letter-qr-body{padding:18px;grid-template-columns:minmax(0,1fr) 130px 260px;grid-template-rows:auto auto;align-items:start;gap:12px}
.letter-qr-body textarea{min-height:148px;resize:none;font:10px/1.35 ui-monospace,SFMono-Regular,Consolas,monospace}
.letter-qr-body .letter-red-preview{grid-column:3;grid-row:1/-1;width:260px;min-height:0;aspect-ratio:1}
.letter-qr-body>p{grid-column:1/3}
.letter-footer-certification{position:absolute;z-index:2;right:1cm;bottom:1cm;width:54px;height:54px;display:block;color:#342e31;font-size:6px;line-height:1;text-transform:uppercase;letter-spacing:0}
.letter-footer-certification[hidden]{display:none}
.letter-footer-certification img{display:block;width:54px;height:54px;object-fit:contain;background:#fff}.letter-footer-certification small{position:absolute;right:0;bottom:calc(100% + 2px);width:70px;text-align:right}
.letter-recipient-picker-body{padding:22px;display:grid;gap:16px;align-content:start}
.letter-recipient-picker-body label{display:grid;gap:6px;color:var(--ink);font-size:11px;font-weight:700}
.letter-recipient-picker-body select{width:100%;padding:10px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font:inherit}
.letter-recipient-picker-body p{margin:0;color:var(--muted);font-size:11px}
.letter-footer-reference{position:absolute;z-index:2;left:1cm;bottom:5mm;color:#342e31;font-size:8px;font-weight:700;letter-spacing:.02em}
.letter-footer-reference[hidden]{display:none}
.letter-footer-pagenum{position:absolute;z-index:2;left:0;right:0;bottom:5mm;color:#342e31;font-size:8px;text-align:center;pointer-events:none}
.letter-footer-pagenum[hidden]{display:none}

.letter-gallery-dialog{position:fixed;inset:0;z-index:95;width:min(760px,calc(100vw - 28px));height:min(700px,calc(100dvh - 28px));max-height:calc(100dvh - 28px);margin:auto;padding:14px 20px 16px;grid-template-rows:auto auto minmax(0,1fr);gap:8px;overflow:hidden;border:1px solid #9f1831;border-radius:12px;background:#fff;box-shadow:0 32px 100px rgba(13,8,10,.46);box-sizing:border-box}
/* display must only ever apply while [open] - every other dialog in this file leaves display
   alone entirely and relies on the UA stylesheet's dialog:not([open]){display:none}, because an
   unconditional author-origin display declaration on the <dialog> element itself beats that UA
   rule regardless of specificity. Setting display:grid unscoped here meant the gallery rendered
   fully visible at all times, even freshly closed or never shown - "closing" it (removing [open])
   had no visual effect at all, which is exactly what was reported as "the X isn't working". */
.letter-gallery-dialog[open]{display:grid}
.letter-gallery-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-16px -20px 0;padding:14px 18px;border-bottom:1px solid rgba(127,23,42,.24);cursor:grab;touch-action:none;user-select:none}
.letter-gallery-header.dragging{cursor:grabbing}
.letter-gallery-header>div{display:flex;align-items:center;gap:10px}
.letter-gallery-header img{width:30px;height:36px;object-fit:contain}
.letter-gallery-header span{display:flex;flex-direction:column;gap:2px}
.letter-gallery-header strong{font-size:14px}
.letter-gallery-header small{color:var(--muted);font-size:10px}
/* The grid scrolls to hold the server's full quota of templates instead of paginating - no
   separate footer, no page count, just scroll up and down like any other list. */
.letter-gallery-grid{min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-content:start}
/* One border, no nested frame around the action row inside it - the icon buttons carry no border
   of their own (see .letter-template-icons .icon-button below) until hovered. A light border-color
   change is the only "selected" signal; no background wash on hover, which used to read as a stray
   pink box sitting over the card underneath it. */
.letter-gallery-grid .letter-template-row{position:relative;padding:10px;display:grid;justify-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;text-align:center;cursor:pointer}
.letter-gallery-grid .letter-template-row:hover{border-color:rgba(127,23,42,.35)}
.letter-gallery-grid .letter-template-row.active{border-color:var(--wine)}
.letter-gallery-grid .letter-template-sheet{width:140px;height:198px;aspect-ratio:1190/1684;display:flex;flex-direction:column;gap:10px;padding:13px 11px;border:0;background:#fff center/cover no-repeat;box-shadow:0 5px 12px rgba(20,11,13,.12)}
.letter-gallery-grid .letter-template-row[data-template-row=corporate] .letter-template-sheet{background:url("/letterhead-template.png?rev=47aa5fec6af3") center/contain no-repeat}
.letter-gallery-grid .letter-template-sheet i{height:2px;display:block;background:#d8d2d3}
.letter-gallery-grid .letter-template-row[data-template-row=corporate] .letter-template-sheet i{visibility:hidden}
.letter-gallery-grid .letter-template-sheet i:nth-child(2){width:72%}
.letter-gallery-grid .letter-template-sheet.preview-unavailable{display:grid;place-items:center;background-image:none!important}
.letter-gallery-grid .letter-template-sheet.preview-unavailable::after{content:"Preview unavailable";padding:0 10px;color:var(--muted);font-size:9px;font-weight:700;text-align:center}
.letter-gallery-grid .letter-template-sheet.preview-unavailable i{display:none}
.letter-gallery-grid .letter-template-name{width:100%;max-width:220px;padding:5px 6px;overflow:hidden;border:1px solid transparent;border-radius:5px;background:transparent;color:#242022;font:700 11px/1.3 inherit;text-align:center;text-overflow:ellipsis;white-space:nowrap}
.letter-gallery-grid .letter-template-name:hover,.letter-gallery-grid .letter-template-name:focus{border-color:#cfc5c8;background:#fff}
.letter-gallery-grid .letter-template-meta{color:var(--muted);font-size:8px}
.letter-gallery-grid .letter-template-icons{display:flex;align-items:center;gap:4px}
.letter-gallery-grid .letter-template-icons .icon-button{width:28px;height:28px;border:0;border-radius:6px;background:transparent;color:var(--wine-deep)}
.letter-gallery-grid .letter-template-icons .icon-button:hover{background:var(--quiet)}
.letter-gallery-grid .letter-template-icons .icon-button svg{width:15px;height:15px}
.letter-gallery-grid .letter-template-icons .icon-button.active{color:var(--wine)}
.letter-gallery-grid .letter-template-icons .icon-button:disabled{cursor:default}
.letter-gallery-grid .letter-template-icons .icon-button.letter-template-delete:hover{color:#a01530;background:#fdecee}
.letter-gallery-grid .letter-template-icons label.icon-button input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.letter-template-add-tile{width:100%;min-height:198px;display:grid;place-items:center;gap:6px;padding:10px;border:1px dashed #cfc5c8;border-radius:8px;background:transparent;color:var(--wine-deep);font-size:11px;font-weight:700;cursor:pointer}
.letter-template-add-tile:hover{border-color:var(--wine);background:var(--wine-soft)}
.letter-template-add-tile svg{width:22px;height:22px}
@media(max-width:560px){.letter-gallery-dialog{inset:0!important;width:100vw!important;height:100dvh!important;max-width:none;max-height:none;margin:0!important;border-radius:0}.letter-gallery-grid{grid-template-columns:1fr}}
@media(max-width:720px){
  .letter-resource-dialog,.letter-resource-dialog.letter-qr-dialog{inset:0!important;width:100vw!important;height:100dvh!important;min-width:0;min-height:0;max-width:none;max-height:none;margin:0!important}
  .letter-dialog-resize-handle{display:none}
  .letter-resource-shell>header{cursor:default;touch-action:auto}
  .letter-red-preview{width:min(100%,320px);margin-inline:auto}
  .letter-qr-body .letter-red-preview{width:min(100%,280px);min-height:0}
}

/* Editable signing assets and final PDF distribution. */
.letter-local-file-button{padding:10px 12px;display:flex!important;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--wine);border-radius:6px;background:var(--wine-soft);cursor:pointer}.letter-local-file-button span{color:var(--wine);font-weight:800}.letter-local-file-button small{color:var(--muted);font-size:9px;font-weight:500}.letter-placed-asset{position:relative;z-index:2;display:block;min-width:48px;max-width:320px;padding:24px 4px 4px;border:1px dashed transparent;cursor:move;touch-action:none;user-select:none}.letter-placed-asset:is(:hover,:focus-visible){border-color:var(--wine);outline:0}.letter-placed-asset img{width:100%;height:auto;display:block;pointer-events:none}.letter-asset-controls{position:absolute;inset:0;pointer-events:none}.letter-asset-resize{position:absolute;right:-5px;bottom:-5px;width:16px;height:16px;border:2px solid #fff;background:var(--wine);box-shadow:0 0 0 1px var(--wine);cursor:nwse-resize}.letter-asset-wrap{position:absolute;z-index:3;top:2px;left:0;right:0;display:flex;justify-content:center;gap:3px}.letter-asset-wrap button{width:22px;height:18px;padding:0;border:1px solid var(--wine);border-radius:3px;background:#fff;color:var(--wine);font-size:9px;font-weight:700;line-height:1;cursor:pointer}.letter-asset-wrap button:hover{background:var(--wine-soft)}.letter-asset-wrap button[aria-pressed=true]{background:var(--wine);color:#fff}.letter-pdf-dialog{width:min(1040px,calc(100vw - 28px));height:min(820px,calc(100dvh - 28px));max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);margin:auto;padding:0;overflow:hidden;border:1px solid var(--wine);border-radius:10px;background:#fff;box-shadow:0 28px 80px rgba(13,8,10,.42)}.letter-pdf-dialog::backdrop{background:rgba(24,15,18,.52);backdrop-filter:blur(3px)}.letter-pdf-shell{height:100%;display:grid;grid-template-rows:62px minmax(0,1fr) auto auto}.letter-pdf-shell>header,.letter-pdf-shell>footer{padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line)}.letter-pdf-shell>header>div{display:grid;gap:2px}.letter-pdf-shell>header small{color:var(--muted);font-size:10px}.letter-pdf-preview{min-height:0;padding:14px;background:#e9e7e8}.letter-pdf-preview iframe{width:100%;height:100%;border:1px solid var(--line);background:#fff}.letter-pdf-status{margin:0;padding:9px 18px;color:var(--muted);font-size:10px;border-top:1px solid var(--line)}.letter-pdf-shell>footer{justify-content:flex-end;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:0}
@media(max-width:720px){.letter-pdf-dialog{inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border-radius:0}.letter-pdf-shell>footer{display:grid;grid-template-columns:1fr 1fr}.letter-pdf-shell>footer button{min-width:0}.letter-local-file-button{align-items:flex-start;flex-direction:column}}

.letter-page>.letter-placed-asset{position:absolute;inset:auto;z-index:4;margin:0;max-width:320px}
.letter-page>.letter-placed-asset[data-wrap=behind]{z-index:0}

/* AVISCloud / Local PC signing asset finder. */
.letter-resource-browser{grid-template-rows:auto auto auto minmax(0,1fr)}
.letter-asset-source-selector{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--wine);border-radius:6px;overflow:hidden}
.letter-asset-source-selector.has-draw{grid-template-columns:1fr 1fr 1fr}
.letter-asset-source-selector button{min-height:38px;border:0;border-right:1px solid var(--wine);background:#fff;color:var(--wine);font:700 11px/1 Aptos,"Segoe UI",sans-serif}
.letter-asset-source-selector button:last-child{border-right:0}
.letter-asset-source-selector button[aria-selected=true]{background:var(--wine);color:#fff}
.letter-local-asset-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.letter-local-asset-controls[hidden]{display:none}
.letter-local-asset-controls .letter-local-file-button{min-width:0;min-height:48px;padding:8px 10px;align-items:flex-start;flex-direction:column;justify-content:center}
.letter-asset-draw{display:grid;gap:8px}
.letter-asset-draw[hidden]{display:none}
.letter-asset-draw canvas{width:100%;height:140px;border:1px solid var(--wine);border-radius:6px;background:#fff;cursor:crosshair;touch-action:none}
.letter-asset-draw-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.letter-asset-draw-actions button{min-height:38px;border:1px solid var(--wine);border-radius:6px;background:#fff;color:var(--wine);font:700 11px/1 Aptos,"Segoe UI",sans-serif;cursor:pointer}
.letter-asset-draw-actions button:last-child{background:var(--wine);color:#fff}
.letter-asset-list{grid-row:4;height:100%;max-height:100%;overflow-y:scroll;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;scrollbar-gutter:stable}
.letter-asset-more{width:100%;min-height:38px;margin:0;padding:10px;border:1px solid var(--wine);border-radius:6px;background:#fff;color:var(--wine);font:700 10px/1.2 Aptos,"Segoe UI",sans-serif;text-align:center}
@media(max-width:720px){.letter-local-asset-controls{grid-template-columns:1fr}.letter-resource-body{grid-template-rows:minmax(0,1fr);overflow:hidden}.letter-resource-browser{min-height:0;grid-template-rows:auto auto auto minmax(0,1fr)}.letter-resource-preview{display:none}}
.contact-import-review-dialog{width:min(560px,calc(100vw - 30px));max-height:calc(100vh - 30px);padding:0;border:1px solid rgba(127,23,42,.3);border-radius:14px;overflow:hidden}.contact-import-review-dialog::backdrop{background:rgba(35,25,28,.4);backdrop-filter:blur(3px)}.contact-import-review-shell{display:flex;flex-direction:column;max-height:calc(100vh - 30px)}.contact-import-review-shell>header{padding:15px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.contact-import-review-shell>header strong{font-size:13px}.contact-import-review-body{padding:16px 20px;overflow-y:auto;display:grid;gap:14px}.contact-import-review-body>p#contactImportReviewSummary{margin:0;color:var(--ink);font-size:12px;line-height:1.5}.contact-import-review-group{display:grid;gap:6px}.contact-import-review-group strong{font-size:11px;color:var(--wine-deep)}.contact-import-review-group ul{margin:0;padding:0;list-style:none;display:grid;gap:2px;max-height:120px;overflow-y:auto}.contact-import-review-group li{padding:4px 8px;border-radius:5px;background:var(--wine-soft);font-size:11px;color:var(--ink)}.contact-import-review-group p.small{margin:0;color:var(--muted);font-size:10px}.contact-import-review-group label{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink)}.contact-import-review-shell>footer{padding:14px 20px;display:flex;justify-content:flex-end;gap:10px;border-top:1px solid var(--line)}
.contact-sync-consent-dialog{width:min(420px,calc(100vw - 30px));padding:0;border:1px solid rgba(127,23,42,.3);border-radius:14px;background:#fff;box-shadow:0 30px 90px rgba(43,16,22,.3)}.contact-sync-consent-dialog::backdrop{background:rgba(35,25,28,.4);backdrop-filter:blur(3px)}.contact-sync-consent-shell{display:flex;flex-direction:column;gap:16px;padding:22px 20px}.contact-sync-consent-shell>p{margin:0;color:var(--ink);font-size:13px;line-height:1.55}.contact-sync-consent-shell>footer{display:flex;justify-content:flex-end;gap:10px}