/* Talk — web client.
   Built for older users: large type, large targets, one idea per screen, every
   control a picture AND a word. Persian by default, so the layout is written in
   logical properties (inline-start/end) and flips with `dir` rather than by hand.
   AGENTS.md wants visible surfaces put to the owner as images before they are
   built; screenshots go to the owner with every change. */

:root{
  /* D-074: the same colours as the phone (apps/mobile/src/palette.ts BASE) - navy bar, blue for
     the app's actions, green voice, rose video. */
  --bg:#f6f7fb; --panel:#fff; --ink:#121826; --muted:#4c5468; --line:#e3e6ee;
  --accent:#2558d6; --accent-ink:#fff; --call:#15803d; --video:#c8385f; --bar:#1e2a44; --bar-ink:#fff;
  --ok:#16a34a; --warn:#b45309; --bad:#b91c1c;
  --tile:#d9dee9;
  --soft:#e7edfd;       /* palette.ts soft: the link button's fill (D-117) */
  --quiet:#e9ebf0;      /* palette.ts quiet: every secondary button of the editor and the preview (D-104, D-117) */
  --frost:rgba(15,19,28,.45);   /* behind the big editor, its sheets and the preview window */
  --fs:18px;            /* base type. Nothing a guest reads is smaller than 15px */
  --tap:56px;           /* minimum height of anything you press */
}
:root:not([data-theme="light"]){ @media (prefers-color-scheme: dark){
  --bg:#0f131c; --panel:#1a1f2b; --ink:#e8ebf2; --muted:#a7afc2; --line:#2b3243;
  --accent:#8fb0ff; --accent-ink:#0f1320; --bar:#141b2e; --bar-ink:#fff;
  --ok:#4ade80; --warn:#fbbf24; --bad:#f87171;
  --tile:#232a3d; --soft:#1f2b47; --quiet:#262c39; --frost:rgba(0,0,0,.6);
}}
:root[data-theme="light"]{color-scheme:light}   /* light stays light, even on a dark device (R183) */
:root[data-theme="dark"]{
  --bg:#0f131c; --panel:#1a1f2b; --ink:#e8ebf2; --muted:#a7afc2; --line:#2b3243;
  --accent:#8fb0ff; --accent-ink:#0f1320; --bar:#141b2e; --bar-ink:#fff;
  --ok:#4ade80; --warn:#fbbf24; --bad:#f87171;
  --tile:#232a3d; --soft:#1f2b47; --quiet:#262c39; --frost:rgba(0,0,0,.6);
  color-scheme:dark;   /* native fields, scrollbars and pickers dark too (R183) */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:var(--fs)/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Vazirmatn,Roboto,"Noto Sans Arabic",sans-serif;
  -webkit-text-size-adjust:100%;
}
[hidden]{display:none!important}
a{color:var(--accent);text-decoration:none;font-weight:600}

/* ---------- icons ---------- */
.ico{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;vertical-align:-6px}
.ico.small{width:20px;height:20px;vertical-align:-4px}

/* ---------- shared ---------- */
.wrap{max-width:560px;margin:0 auto;padding:24px 18px 48px}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
h1{font-size:1.6rem;margin:0 0 6px}
h1.brand{display:flex;align-items:center;gap:8px;margin:0}
h2{font-size:1.15rem;margin:0 0 12px}
.muted,.sub,.hint,.note{color:var(--muted)}   /* .muted: the desktop link page's countdown (#linkLeft, D-116) */
.sub{font-size:1rem;margin:0 0 18px}
.hint{font-size:.95rem;margin:12px 0 0}
.note{font-size:.95rem;margin:14px 0 0;line-height:1.6}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:14px}

button{
  font:inherit;font-weight:600;padding:0 18px;min-height:var(--tap);border-radius:12px;border:2px solid transparent;
  background:var(--accent);color:var(--accent-ink);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
}
button:disabled{opacity:.45;cursor:default}
button.secondary{background:transparent;color:var(--ink);border-color:var(--line)}
button.ghost{background:transparent;color:var(--accent);border-color:transparent;min-height:44px;padding:0 10px;font-weight:600}
button.danger{background:var(--bad);color:#fff}
/* The telephone's green: «تماس تصویری» and «تماس صوتی» beside each name. The standard (the owner,
   2026-09-25): answer, join, call again = green; decline, cancel, hang up, leave = red. */
button.call{background:var(--call,#1c9a4b);border-color:var(--call,#1c9a4b);color:#fff}
/* Light green with green words beside each name: "ring", without a slab of colour. */
:root[data-theme="dark"] .section{margin:18px 0 10px;font-size:1.05rem;font-weight:600;color:var(--muted)}
button.big{display:flex;width:100%;font-size:1.1rem;min-height:62px}
button.tall{min-height:62px;flex-direction:column;gap:4px;font-size:.95rem;padding:8px}
button.small{min-height:40px;padding:0 12px;font-size:.9rem;gap:6px}
button.small .ico{width:20px;height:20px}
button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

input[type=text],input[type=password]{
  font:inherit;width:100%;min-height:var(--tap);padding:12px 14px;border-radius:12px;
  border:2px solid var(--line);background:var(--bg);color:var(--ink);
}
input:focus{outline:none;border-color:var(--accent)}
label{display:block;font-size:.95rem;color:var(--muted);margin:0 0 8px;font-weight:600}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1 1 auto}
.stack>*+*{margin-top:12px}
.err{color:var(--bad);font-size:1rem;font-weight:600;margin-top:10px}

.codeLabel{font-weight:700}
.codeNum{font-size:2.8rem;line-height:1;letter-spacing:.15em;color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}

.numcard{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}

/* ---------- incoming call ---------- */
/* Over every layer a person can have open - the big editor (52), the reader (54), the editor's sheets (56), the
   paste preview (57), the attach sheet (58), a photo (70) - so «جواب» is never under one of them (R186 review). */
#incoming{position:fixed;inset:0;z-index:72;background:var(--bg);display:none;place-items:center}
#incoming.on{display:grid}
.ring{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px;text-align:center;max-width:420px;width:100%}
.ringIcon{width:72px;height:72px;color:var(--accent);animation:shake 1.1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.ringIcon{animation:none}}
@keyframes shake{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.ringWho{font-size:1.8rem;font-weight:700;margin:0}
.ringSub{color:var(--muted);margin:0 0 18px}
.ringButtons{display:flex;flex-direction:column;gap:12px;width:100%}
.ringButtons button{min-height:72px;font-size:1.15rem}

/* ---------- call ---------- */
/* Shown by #call.on below (THE PICTURE FILLS THE SCREEN). */
#call{display:none;flex-direction:column;height:100dvh}
.bar{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--line);background:var(--panel);flex:0 0 auto;
}
.bar .title{font-weight:700;font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .spacer{flex:1}
.stat{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;display:flex;align-items:center;gap:6px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--muted);flex:0 0 auto}
.dot.good{background:var(--ok)} .dot.fair{background:var(--warn)} .dot.poor{background:var(--bad)}

.stage{flex:1;display:flex;min-height:0;position:relative}
/* A line saying what is wrong with the connection, or a tap to let sound play. */
.banner{margin:0;padding:10px 14px;background:#fde68a;color:#1c1400;font-weight:700;font-size:1rem;text-align:center;border:0;border-radius:0}
.banner.action{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;cursor:pointer;background:var(--accent);color:#fff;min-height:52px}
/* The caller's own screen while the other phone rings: over the empty stage. */
.outgoing{position:absolute;inset:0;z-index:4;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 88%,transparent);padding:16px}
.outCard{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;max-width:380px;width:100%}
.outAvatar{width:104px;height:104px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:2.6rem;font-weight:800}
.outWho{margin:0;font-size:1.7rem;font-weight:800}
.outState{margin:0;font-size:1.15rem;color:var(--muted);font-weight:600}
.outgoing.ringing .outAvatar{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@media (prefers-reduced-motion:reduce){.outgoing.ringing .outAvatar{animation:none}}
/* New messages while the chat is closed. */
.ctl{position:relative}
.badge{position:absolute;top:4px;inset-inline-end:6px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--bad);color:#fff;font-size:.8rem;font-weight:800;display:grid;place-items:center}
.newCall{margin-top:6px}
.divider{border:0;border-top:1px solid var(--line);margin:22px 0 12px}
.newCallHint{margin:0 0 10px;color:var(--muted);font-size:1rem;line-height:1.7}
.joining{display:grid;place-items:center;padding:14px 0}
.spinner{width:42px;height:42px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}
/* A quiet confirmation in the call: good news, not an error. */
.toast{margin:0 12px 8px;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ink);font-weight:700;text-align:center}
.missed{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad);font-weight:700}
/* The grid must never paint outside its own box: on a phone, three overflowing tiles
   once painted over the chat panel and a <video> swallowed the tap meant for its
   Close button. So it scrolls, and the chat stacks above it. Up to four people. */
.grid{
  flex:1;display:grid;gap:8px;padding:8px;min-height:0;overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));grid-auto-rows:1fr;
}
/* 1: fills the box. 2: side by side. 3-4: two by two. Rows and columns are 1fr, so
   the tiles are sized BY the box, never by the video inside them - a <video> with
   height:100% in an auto row once resolved to its intrinsic 480px and pushed tiles
   over each other and over the chat. The video is absolute for the same reason. */
.grid[data-count="1"]{grid-template-columns:1fr;grid-template-rows:1fr}
.grid[data-count="2"]{grid-template-columns:repeat(2,1fr);grid-template-rows:1fr}
.grid[data-count="3"],.grid[data-count="4"]{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}
/* 5-6 and 7-9. Every count the grid can be given has an explicit shape, because the
   fallback (auto-fit) combined with overflow:hidden does not wrap people onto a new
   row - it hides them. Rows are 1fr throughout, so adding a person shrinks everybody
   rather than pushing the last one out of the box. */
.grid[data-count="5"],.grid[data-count="6"]{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr)}
.grid[data-count="7"],.grid[data-count="8"],.grid[data-count="9"]{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}

.grid.screen-on{grid-template-columns:1fr;grid-template-rows:1fr auto}
/* Your own picture over the corner, like FaceTime and the phone app. Absolute, so it
   takes no cell in the grid; the end corner (right in English, left in Persian),
   same as the phone. --pip-w is set by layoutGrid() from the stage size. */
.grid{position:relative}
.tile.pip{
  position:absolute;bottom:12px;inset-inline-end:12px;z-index:3;
  width:var(--pip-w,120px);height:auto;aspect-ratio:3/4;
  border:2px solid var(--line);box-shadow:0 2px 12px rgba(0,0,0,.45);
}
.tile.pip .name{font-size:.75rem;padding:2px 6px;bottom:4px;inset-inline-start:4px;border-radius:6px}
.tile.pip .muted-mark,.tile.pip .cam-mark{width:24px;height:24px}
.tile.pip .muted-mark .ico,.tile.pip .cam-mark .ico{width:14px;height:14px}
.tile.pip .avatar{width:40px;height:40px;font-size:1rem}
.tile{position:relative;background:var(--tile);border-radius:12px;overflow:hidden;min-height:0;min-width:0;display:grid;place-items:center}
/* Every picture fitted, never cropped (the owner, 2026-09-25), on black. */
.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}
.tile .avatar{position:relative}
.tile.self video{transform:scaleX(-1)}
.tile.self.screen video{transform:none}
.tile .name{
  position:absolute;inset-inline-start:8px;bottom:8px;padding:4px 10px;border-radius:8px;
  background:rgba(0,0,0,.6);color:#fff;font-size:.9rem;font-weight:600;max-width:80%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* TOP corner: your own corner picture sits over the bottom end of the stage and
   would hide the marks of whoever is under it. */
.tile .marks{position:absolute;inset-inline-end:8px;top:8px;display:flex;gap:6px;pointer-events:none}
.tile .muted-mark,.tile .cam-mark{width:32px;height:32px;border-radius:50%;
  background:var(--bad);color:#fff;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.85)}
.tile .muted-mark .ico,.tile .cam-mark .ico{width:18px;height:18px}
.tile.pip .marks{top:4px;inset-inline-end:4px;gap:4px}
.tile .avatar{width:72px;height:72px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:1.6rem;font-weight:700}
.strip{display:flex;gap:8px;overflow-x:auto;padding-top:8px}
.strip .tile{flex:0 0 150px;height:100px;min-height:0}
.grid.screen-on .tile.screen{min-height:0}

/* ---------- chat ---------- */
.chat{
  width:320px;flex:0 0 320px;border-inline-start:1px solid var(--line);background:var(--panel);
  display:flex;flex-direction:column;min-height:0;
}
.chatHead{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 8px 14px;
          border-bottom:1px solid var(--line);font-weight:700;font-size:1rem}
.chat .log{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:12px}
.msg .body{white-space:pre-wrap;word-break:break-word;font-size:1rem}
.chat form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.chat form input{flex:1}
.chat form button{flex:0 0 auto;padding:0 14px}
/* In a call the box to write in is bigger (2026-10-05: "the message box is too small"). */
#call .chat form input,#call .chat form textarea{min-height:54px;font-size:1.1rem}

/* ---------- controls: picture over word, big ---------- */
.controls{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;
  padding:10px;border-top:1px solid var(--line);background:var(--panel);flex:0 0 auto;
}
.controls .ctl{
  flex-direction:column;gap:4px;min-height:68px;padding:8px 4px;font-size:.9rem;
  background:transparent;color:var(--ink);border-color:var(--line);border-radius:14px;
}
.controls .ctl .ico{width:28px;height:28px}
.controls .ctl.off{background:var(--bad);color:#fff;border-color:var(--bad)}
.controls .ctl.on-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.controls .ctl.danger{background:var(--bad);color:#fff;border-color:var(--bad)}

@media (max-width:760px){
  /* two people stack on a phone; three or four stay two-by-two and fill the box */
  .grid[data-count="2"]{grid-template-columns:1fr;grid-template-rows:repeat(2,1fr)}
  /* The base rule's values, but not a copy: being after .grid.screen-on, it beats it at this width - the shape a
     shared screen with 5-6 cameras gets (layoutGrid leaves a shared screen to the CSS). */
  .grid[data-count="5"],.grid[data-count="6"]{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr)}
}

/* Sideways. A phone in landscape is wide and short, so the same people want more
   columns and fewer rows - two-by-two in a 250px-tall box gives 120px tiles, while
   four across gives the full height to each. Keyed on the SHAPE of the window, not
   on a device width, because a small desktop window has the same problem. */
@media (orientation:landscape) and (max-height:560px){
  .grid[data-count="3"]{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr}
  .grid[data-count="4"]{grid-template-columns:repeat(4,1fr);grid-template-rows:1fr}
  .grid[data-count="5"],.grid[data-count="6"]{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
  .grid[data-count="7"],.grid[data-count="8"],.grid[data-count="9"]{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr)}
}

/* ---------- THE PICTURE FILLS THE SCREEN (the owner, 2026-09-27) ----------
   "the video from the other side full screen, so they can see everything; the buttons
   smaller and transparent, so they see more of the picture." The stage covers the whole
   call screen; the bar, the notes and the buttons float over it. Still FITTED, never
   cropped (2026-09-25): the black around a picture is part of seeing everything.
   Portrait: a row of see-through buttons at the bottom. Sideways: a column at the end
   side, so the picture keeps its full height. */
#call.on{display:block;position:relative;height:100dvh;overflow:hidden;background:#000;color:#fff}
#call .stage{position:absolute;inset:0;display:flex;flex-direction:row;min-height:0}
#call .grid{padding:0;gap:3px;background:#000}
#call .grid[data-count="1"] > .tile:not(.pip),#call .grid[data-count="0"] > .tile{border-radius:0}
#call .tile{background:#111;border-radius:6px}
#call .tile .name{bottom:auto;top:calc(56px + env(safe-area-inset-top,0px));background:rgba(0,0,0,.4)}
#call .tile.pip .name{top:auto;bottom:4px}
/* the bar: one line over the top of the picture, on a soft shade */
#call .bar{position:absolute;inset-inline:0;top:0;z-index:6;border:0;
  padding:calc(8px + env(safe-area-inset-top,0px)) 14px 18px;
  background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,0));color:#fff}
#call .bar .stat{color:rgba(255,255,255,.85)}
/* notes and warnings: under the bar, over the picture */
#call > .banner{position:absolute;inset-inline:12px;top:calc(52px + env(safe-area-inset-top,0px));z-index:7;border-radius:12px}
#call > #callError,#call > #callNote{position:absolute;inset-inline:12px;bottom:calc(var(--ctl-h) + 12px);z-index:7;margin:0}
#call > #callNote{background:rgba(0,0,0,.6);color:#fff}
/* the buttons: small, see-through, over the bottom of the picture */
#call{--ctl-h:calc(84px + env(safe-area-inset-bottom,0px))}
#call .controls{position:absolute;inset-inline:0;bottom:0;z-index:9;border:0;
  display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-end;gap:8px 10px;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}
/* they share the width: up to 64 px each, smaller on a narrow phone - never off the edge */
/* READABLE AT PHONE WIDTH (the owner, 2026-10-04: "the icons are not readable, the texts are
   not visible" - eight buttons squeezed into one row of 390 px left ~40 px circles with the
   words cut off). A fixed 60 px circle, as many per row as fit, the rest wrap to a second
   row (as in the phone app); a darker circle and a shadow so the word reads over any picture.
   The real height of the buttons is written to --ctl-h by app.js (fitControls). */
#call .controls .ctl{flex:0 0 68px;width:68px;height:68px;min-width:0;aspect-ratio:auto;min-height:0;padding:4px 0;gap:2px;border-radius:50%;
  font-size:.72rem;font-weight:700;line-height:1.1;color:#fff;border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);text-shadow:0 1px 2px #000}
/* Bigger pictures, and a word may take two lines («چرخاندن دوربین») - the owner, 2026-10-05. */
#call .controls .ctl span:not(.badge){max-width:92%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#call .controls .ctl .ico{width:28px;height:28px}
#call .controls .ctl.off{background:rgba(220,38,38,.72);border-color:rgba(255,255,255,.35)}
#call .controls .ctl.on-accent{background:rgba(45,74,138,.8)}
#call .controls .ctl.danger{background:rgba(220,38,38,.9);border-color:transparent}
#call .controls .ctl:focus-visible{outline:3px solid #fff;outline-offset:2px}
#call .badge{top:-2px;inset-inline-end:-2px}
/* your own picture: above the buttons, never under them */
#call .tile.pip{bottom:calc(var(--ctl-h) + 8px);inset-inline-end:10px;border-color:rgba(255,255,255,.4)}
/* SEVERAL people: the grid keeps clear of the buttons, so no face is under one. One other
   person: their picture takes the whole screen and the buttons float over it. */
#call .grid:not([data-count="0"]):not([data-count="1"]){padding-bottom:var(--ctl-h)}
/* chat: a panel over the picture, ending above the buttons - never under them */
#call .chat{position:absolute;z-index:8;top:0;bottom:var(--ctl-h);inset-inline-end:0;width:min(360px,100%);flex:none;
  background:var(--panel);color:var(--ink);border-inline-start:1px solid var(--line)}
#call .outgoing{z-index:5}
@media (max-width:760px){
  #call .chat{top:auto;bottom:var(--ctl-h);inset-inline:0;width:auto;height:min(62dvh,calc(100dvh - var(--ctl-h) - 60px));border-inline-start:0;border-top:1px solid var(--line);border-radius:16px 16px 0 0}
}
/* sideways: the buttons become a column at the end side.
   THE PICTURE KEEPS THE FULL HEIGHT (the owner, 2026-09-25: "when I rotate, the web
   still uses the old layout - you fixed it on the phones, fix it here too"). Same as
   the phone app sideways: the buttons move from under the picture to a column at the
   side, two across, and the bar stays one thin line on top. */
@media (orientation:landscape) and (max-height:560px){
  /* Two columns (as in the phone app): seven buttons in one column did not fit a phone's height. */
  #call{--ctl-w:calc(140px + env(safe-area-inset-right,0px))}
  #call .controls{inset-inline:auto 0;inset-block:0;flex-direction:column;flex-wrap:wrap;justify-content:center;align-content:center;gap:6px;
    width:var(--ctl-w);padding:6px;overflow-y:auto;
    background:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}
  [dir="rtl"] #call .controls{background:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}
  #call .controls .ctl{flex:0 0 auto;width:60px;height:60px;aspect-ratio:auto;font-size:.6rem}
  #call .controls .ctl .ico{width:24px;height:24px}
  #call .tile.pip{bottom:10px;inset-inline-end:calc(var(--ctl-w) + 6px)}
  #call .grid:not([data-count="0"]):not([data-count="1"]){padding-bottom:0;padding-inline-end:var(--ctl-w)}
  #call > #callError,#call > #callNote{bottom:12px;inset-inline-end:calc(var(--ctl-w) + 6px)}
  /* The chat must not eat a short screen: beside the video, not below it. */
  #call .chat{top:0;bottom:0;inset-inline:auto var(--ctl-w);width:min(42vw,340px);height:auto;border-radius:0;border-top:0}
  #call .bar{padding-block:6px 14px;inset-inline-end:var(--ctl-w)}
  #call .tile .name{top:calc(40px + env(safe-area-inset-top,0px))}
}

/* the "check for updates" button at the bottom of the contacts (2026-09-29) */
.updateRow{margin:24px 0 8px;display:grid;gap:6px;justify-items:center;text-align:center}
.updateRow .hint{margin:0}

/* the time where each person is (2026-09-29) */
/* Their time: bigger and darker, easy to read (D-098). */
.contactTime{display:block;font-size:1.05rem;font-weight:700;color:var(--ink);margin-top:2px}
/* in the app now? green dot and word; grey when not (like the walkie app) */
.presence{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--muted);margin-top:3px}
.presence .pdot{width:10px;height:10px;border-radius:50%;background:var(--line);flex:0 0 auto}
.presence[data-kind="app"],.presence[data-kind="call"]{color:#1c9a4b;font-weight:700}
.presence[data-kind="app"] .pdot{background:#1c9a4b}
.presence[data-kind="call"] .pdot{background:#0e6b33}
.tzLine{margin:8px 0 0;color:var(--muted);font-size:.95rem;display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
#cTz,#myTzSel{width:100%;min-height:48px;font:inherit;padding:8px 10px;border-radius:12px;border:2px solid var(--line);background:var(--bg);color:var(--ink)}

/* ---- the phone book, matching the app --------------------------------------
   Same shape as apps/mobile: the NAME is what you touch, large and alone on its
   line; the number sits under it in small text, needed only when giving it to
   somebody else. Two buttons, each a picture and a word. */
/* Each person in their own colour (--c, set per row): a thick edge on the reading
   side, a light tint, and the avatar - one person is told from the next at a glance. */
/* The person's colour (--c) is on the avatar only; the owner found tints and coloured
   edges too busy. The boxes and the space between them separate people. */
.contactRow{
  background:var(--panel);
  border:1px solid var(--line);border-radius:16px;
  padding:14px;display:flex;flex-direction:column;gap:12px;margin-bottom:16px;
}
.contactWho{display:flex;align-items:center;gap:12px;cursor:pointer;text-align:start}
.nameBar{display:block;width:36px;height:4px;border-radius:2px;background:var(--c,var(--accent));margin:3px 0}
.contactText{flex:1;min-width:0}
.contactName{display:block;font-size:1.45rem;font-weight:600;line-height:1.25}
/* By the name, one pill as on the phone (src/designs/List.tsx): «۲ پیام تازه» in the app's blue
   (D-092), else «بی‌پاسخ» in red (D-091, white words, the phone's sign turned 135°); and when the
   last thing happened, muted, after the presence. */
.nameLine{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nameLine .contactName{min-width:0}
.missedPill,.unreadPill{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:999px;font-size:.8rem;font-weight:800;line-height:1.5}
.missedPill .ico,.unreadPill .ico{width:14px;height:14px}
.missedPill{background:var(--bad);color:#fff}
.missedPill .ico{transform:rotate(135deg)}
.unreadPill{background:var(--accent);color:var(--accent-ink)}
/* The digits read left to right, but the LINE sits under the name - on the right in
   Persian. `direction:ltr` alone also moved the block's alignment to the left edge,
   so the number floated away from its name across the row. */
.contactNum{display:block;color:var(--muted);font-size:1rem;font-weight:600;letter-spacing:2px;direction:ltr;text-align:end}
[dir=rtl] .contactNum{text-align:right}
[dir=ltr] .contactNum{text-align:left}
/* The same order in every language, as on the phone: message on the right, then voice, video (2026-10-06). */
.contactBtns{display:flex;gap:10px;direction:rtl}
.contactBtns button{flex:1;padding:0 8px;gap:6px;white-space:nowrap;font-size:1rem;line-height:1.5}
.contactBtns button .ico{width:22px;height:22px;flex:0 0 22px}
button.contactWho{color:var(--ink)}
/* A group (groups.go): the same box as a person, a people picture in the circle and
   who is in it under the name. */
.groupMembersLine{display:block;color:var(--muted);font-size:1rem;line-height:1.4;overflow-wrap:anywhere}
.memberList{display:flex;flex-direction:column;gap:2px;margin:6px 0 4px;max-height:44vh;overflow-y:auto;
  border:1px solid var(--line);border-radius:12px;padding:4px 10px}
.memberList label{display:flex;align-items:center;gap:12px;padding:10px 2px;font-size:1.15rem;font-weight:600;margin:0;cursor:pointer}
.memberList label + label{border-top:1px solid var(--line)}
.memberList input{width:24px;height:24px;flex:0 0 24px;margin:0;accent-color:var(--accent)}
.memberList .mNum{color:var(--muted);font-size:.95rem;letter-spacing:1px;margin-inline-start:auto;direction:ltr}

.sheetBackdrop{
  position:fixed;inset:0;background:#000a;display:grid;place-items:center;
  padding:20px;z-index:50;overflow-y:auto;
}
.sheetBackdrop .sheet{width:100%;max-width:420px;max-height:88vh;overflow-y:auto}
/* The page's own question (app.js pageSheet). R222: three choices stack, one under the other («فقط این دستگاه»,
 * «پایان برای همه», «انصراف»), and a choice with a line under its word (askSub) says what it does. */
.askSheet .row.askCol{flex-direction:column}
.askSheet button.askTwo{flex-direction:column;gap:2px;padding:10px 18px;line-height:1.4}
.askSheet .askSub{font-size:.92rem;font-weight:400;opacity:.92}

/* The "new version" pop-up (app.js reloadIfSafe). */
.modalBack{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.modalCard{background:var(--panel,#fff);color:var(--ink,#17171b);border-radius:18px;padding:22px;max-width:420px;width:100%;display:flex;flex-direction:column;gap:10px;text-align:center}
.modalCard h2{margin:0;font-size:22px}
.modalCard p{margin:0 0 6px;line-height:1.7}

/* "Talk was updated", once after an automatic reload (app.js). */
.updatedNote{position:fixed;top:12px;left:16px;right:16px;z-index:60;background:#1a7f4b;color:#fff;font-weight:700;
  border-radius:14px;padding:12px 14px;text-align:center;max-width:520px;margin:0 auto}

/* ======================== messages (2026-09-30, messages.go) ========================
   One conversation over the whole screen. Your own messages sit on the inline END (the
   left in Persian, the right in English), everybody else's on the START - the way
   Telegram and WhatsApp lay out each language. */
.flipRtl{transform:none}
[dir=rtl] .flipRtl{transform:scaleX(-1)}
.iconBtn{width:48px;min-width:48px;height:48px;min-height:48px;padding:0;display:inline-grid;place-items:center;border-radius:24px}
.chatView{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom)}
/* D-074: the phone's navy bar - white words, no picture circle, voice green and video rose. */
.chatHead{display:flex;align-items:center;gap:8px;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));
  background:var(--bar);color:var(--bar-ink)}
.chatHead #chatBack{color:var(--bar-ink)}
.chatTitle{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.25}
.chatTitle strong{font-size:1.2rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatTitle span{color:var(--bar-ink);opacity:.8;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatTitle .nameBar{display:block;width:36px;height:4px;border-radius:2px;opacity:1}
.chatHead #chatVoice,.chatHead #chatVideo{width:44px;height:44px;min-height:44px;border-radius:50%;color:#fff}
.chatHead #chatVoice{background:var(--call)}
.chatHead #chatVideo{background:var(--video)}
.msgList{flex:1;overflow-y:auto;padding:12px 12px 6px;display:flex;flex-direction:column;overscroll-behavior:contain}
#msgOlder{align-self:center;margin-bottom:8px;min-height:40px}
.msgEmpty{text-align:center;margin:auto}
#msgItems{display:flex;flex-direction:column;gap:6px}
.msgDay{align-self:center;background:var(--panel);border:1px solid var(--line);color:var(--muted);
  border-radius:12px;padding:2px 12px;font-size:.85rem;margin:8px 0}
.msg{max-width:min(78%,480px);align-self:flex-start;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:8px 12px 6px;position:relative;overflow-wrap:anywhere}
.msg.mine{align-self:flex-end;background:#dcebd9;border-color:#c3dcbf}
:root[data-theme="dark"] .msg.mine{background:#1f3a2a;border-color:#2c5039}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .msg.mine{background:#1f3a2a;border-color:#2c5039} }
.msg .who{display:block;font-size:.85rem;font-weight:700;color:var(--accent);margin-bottom:2px}
.msg .body{white-space:pre-wrap;line-height:1.45}
.msg .meta{display:flex;gap:4px;justify-content:flex-end;align-items:center;color:var(--muted);font-size:.75rem;margin-top:2px}
.msg .ticks{letter-spacing:-3px;font-weight:700}
.msg .ticks.read{color:#2d8cf0}
.msg.pending{opacity:.7}
.msg.failed{border-color:var(--bad);cursor:pointer}
.msg.failed .meta{color:var(--bad)}
.msg img.photo{display:block;max-width:100%;height:auto;border-radius:10px;cursor:zoom-in;background:var(--tile)}
/* A voice message reads left to right in every language - play on the left (2026-10-06). */
.voice{display:flex;align-items:center;gap:10px;min-width:210px;direction:ltr}
.voice button{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border-radius:22px;display:grid;place-items:center;
  background:var(--accent);color:var(--accent-ink);border:0}
.voice button .ico{width:20px;height:20px}
/* The voice message's waveform (D-066): its loudness as bars, those already played in the
   accent colour. The first bar is on the reading side; a tap on the bars plays from there. */
.voice .wave{flex:1;min-width:0;height:32px;display:flex;align-items:center;justify-content:space-between;gap:1px;cursor:pointer;overflow:hidden}
/* Unplayed bars: muted where color-mix is unknown (Safari before 16.2 - older iPhones), so the
   waveform never shows empty until it plays. */
.voice .wave i{flex:0 1 3px;min-width:1.5px;max-width:4px;border-radius:2px;background:var(--muted);background:color-mix(in srgb,var(--accent) 30%,transparent);transition:background-color .12s}
.voice .wave i.lit{background:var(--accent)}
.voice .len{font-size:.8rem;color:var(--muted);min-width:34px;direction:ltr}
.chatErr{margin:0 12px}
.composer{display:flex;align-items:flex-end;gap:6px;padding:8px 8px;background:var(--panel);border-top:1px solid var(--line)}
.composer textarea{flex:1;min-height:48px;max-height:140px;resize:none;border:1px solid var(--line);border-radius:22px;
  padding:11px 16px;font:inherit;background:var(--bg);color:var(--ink);line-height:1.4}
.sendBtn,.micBtn{background:var(--accent);color:var(--accent-ink);border:0}
.micBtn{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.micBtn.rec{background:var(--bad);transform:scale(1.25)}
.recBar{display:flex;align-items:center;gap:10px;padding:8px 16px;background:var(--panel);border-top:1px solid var(--line);font-weight:600}
.recBar.cancel{color:var(--bad)}
.recDot{width:12px;height:12px;border-radius:6px;background:var(--bad);animation:recBlink 1s infinite}
@keyframes recBlink{50%{opacity:.25}}
#recHint{color:var(--muted);font-weight:500;font-size:.9rem;margin-inline-start:auto}
.attachSheet{display:flex;flex-direction:column;gap:10px}
.camView{position:fixed;inset:0;z-index:60;background:#000;display:flex;flex-direction:column}
.camView video{flex:1;min-height:0;width:100%;object-fit:contain;background:#000}
.camBar{display:flex;align-items:center;justify-content:space-around;padding:16px 16px max(16px,env(safe-area-inset-bottom))}
.camBar .iconBtn{color:#fff;background:#fff2}
.shutter{width:76px;height:76px;min-height:76px;border-radius:38px;border:5px solid #fff;background:#fff6;padding:0}
.photoView{position:fixed;inset:0;z-index:70;background:#000e;display:grid;place-items:center;cursor:zoom-out}
.photoView img{max-width:100vw;max-height:100vh;object-fit:contain}
/* The first button on each person and group: «پیام», navy (how many wait is the pill by the name, D-092). */
.contactBtns .msgBtn{background:var(--bar);border-color:var(--bar);color:var(--bar-ink)}
/* D-074: voice green, video rose, filled - the phone's buttons. */
button.voiceBtn{background:var(--call);border-color:var(--call);color:#fff}
button.videoBtn{background:var(--video);border-color:var(--video);color:#fff}
.camView video.mirror{transform:scaleX(-1)}
/* Three buttons on a row (video, voice, message): the word under its picture so all
   three fit a phone's width in Persian. */
.contactBtns.three button{flex-direction:column;gap:2px;padding:6px 4px;min-height:64px;font-size:.92rem;line-height:1.2}

/* YOUR PICTURE, MOVABLE (the owner, 2026-10-04: "move it around, snap to the four corners,
   upright or sideways"). data-corner on the grid: tl / tr / bl / br (physical corners, so
   the same in Persian and English). Bottom corners stay above the buttons; sideways, the
   corners on the buttons' side stay clear of them. */
#call .grid[data-corner] .tile.pip{inset:auto;touch-action:none;cursor:grab}
#call .grid[data-corner="tl"] .tile.pip{top:64px;left:10px}
#call .grid[data-corner="tr"] .tile.pip{top:64px;right:10px}
#call .grid[data-corner="bl"] .tile.pip{bottom:calc(var(--ctl-h) + 8px);left:10px}
#call .grid[data-corner="br"] .tile.pip{bottom:calc(var(--ctl-h) + 8px);right:10px}
#call .tile.pip.dragging{transition:none;cursor:grabbing;opacity:.9}
@media (orientation:landscape) and (max-height:560px){
  #call .grid[data-corner="tl"] .tile.pip,#call .grid[data-corner="tr"] .tile.pip{top:10px}
  #call .grid[data-corner="bl"] .tile.pip,#call .grid[data-corner="br"] .tile.pip{bottom:10px}
  [dir="ltr"] #call .grid[data-corner="tr"] .tile.pip,[dir="ltr"] #call .grid[data-corner="br"] .tile.pip{right:calc(var(--ctl-w) + 6px)}
  [dir="rtl"] #call .grid[data-corner="tl"] .tile.pip,[dir="rtl"] #call .grid[data-corner="bl"] .tile.pip{left:calc(var(--ctl-w) + 6px)}
}
/* The photo flash. */
#call .shotFlash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:20;transition:opacity .25s}
#call .shotFlash.on{opacity:.8;transition:none}
/* The saved conversation opened IN A CALL (2026-10-04): the lower part of the screen, the
   call's picture still visible above it. */
.chatView.inCall{top:38%;z-index:45;border-radius:16px 16px 0 0;box-shadow:0 -4px 20px rgba(0,0,0,.4)}
.chatView.inCall .chatHead #chatVideo,.chatView.inCall .chatHead #chatVoice{display:none}
@media (orientation:landscape) and (max-height:560px){ .chatView.inCall{top:0;inset-inline-start:auto;width:min(420px,55%)} }
.fileMsg{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-width:200px;padding:4px 0}
.fileMsg .fileIco{font-size:1.6rem;width:44px;height:44px;border-radius:10px;background:var(--bg);display:grid;place-items:center;flex:0 0 44px}
.fileMsg .fileInfo{display:flex;flex-direction:column;min-width:0}
.fileMsg b{overflow-wrap:anywhere;font-weight:700}
.fileMsg small{color:var(--muted)}

/* ======================== replies (D-066) ========================
   The message an answer answers, quoted at the top of its bubble in the sender's colour; a tap
   goes to the original. The reply button sits beside the bubble, towards the middle, shown on
   hover or focus; a finger long-presses the bubble to show it (.held - the press itself stays
   the browser's, so words can still be selected and copied).
   A name in the person's colour is mixed a third with --ink: the palette (app.js CONTACT_COLORS)
   is one set for both themes, and some of it alone is too dark on a dark bubble (or too light,
   the gold, on a light one) to read. */
.msg .quote{display:flex;flex-direction:column;min-width:0;margin:2px 0 6px;padding:4px 10px;border-radius:8px;cursor:pointer;
  border-inline-start:3px solid var(--c,var(--accent));background:color-mix(in srgb,var(--c,var(--accent)) 10%,transparent);line-height:1.35}
.msg .quote .qWho{font-size:.82rem;font-weight:700;color:var(--c,var(--accent));color:color-mix(in srgb,var(--c,var(--accent)) 65%,var(--ink));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg .quote .qText{font-size:.9rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg .quote:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.msg .replyBtn{position:absolute;top:50%;inset-inline-start:calc(100% + 6px);transform:translateY(-50%);
  width:36px;min-width:36px;height:36px;min-height:36px;padding:0;border-radius:18px;display:grid;place-items:center;
  background:var(--panel);color:var(--muted);border:1px solid var(--line);opacity:0;pointer-events:none;transition:opacity .15s}
.msg .replyBtn::before{content:'';position:absolute;inset:-8px}   /* bridges the gap, so the hover holds on the way to it */
.msg.mine .replyBtn{inset-inline-start:auto;inset-inline-end:calc(100% + 6px)}
.msg .replyBtn .ico{width:18px;height:18px}
.msg:hover .replyBtn,.msg:focus-within .replyBtn,.msg.held .replyBtn{opacity:1;pointer-events:auto}
.msg.held .replyBtn{color:var(--accent);border-color:var(--accent)}
.msg .replyBtn:hover{color:var(--accent);border-color:var(--accent)}
.msg .replyBtn:focus-visible{opacity:1;pointer-events:auto;outline:3px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.msg .replyBtn{transition:none}}
/* The original, found: lit for a moment so the eye lands on it. */
.msg.flash{animation:msgFlash 1.6s ease-out}
@keyframes msgFlash{0%,35%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.msg.flash{animation:none;box-shadow:0 0 0 3px var(--accent)}}
/* Over the composer while answering: whom, a line of what, and an X. */
.replyBar{display:flex;align-items:center;gap:10px;padding-block:6px;padding-inline:14px 6px;background:var(--panel);border-top:1px solid var(--line)}
.replyBar > .ico{width:22px;height:22px;color:var(--c,var(--accent));color:color-mix(in srgb,var(--c,var(--accent)) 65%,var(--ink))}
.replyBar .rbText{flex:1;min-width:0;display:flex;flex-direction:column;padding-inline-start:10px;border-inline-start:3px solid var(--c,var(--accent));cursor:pointer;line-height:1.35}
.replyBar .rbText b{font-size:.9rem;color:var(--c,var(--accent));color:color-mix(in srgb,var(--c,var(--accent)) 65%,var(--ink));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.replyBar .rbText span{font-size:.95rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.replyBar .rbText:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.replyBar .rbClose{color:var(--muted)}
.replyBar:not([hidden]) + .composer{border-top-color:transparent}
/* In a call the conversation has the lower part of the screen only (fitInCallChat): the bar
   on one line - whom, then what - so the messages keep their room above it. */
.chatView.inCall .replyBar{padding-block:2px;gap:8px}
.chatView.inCall .replyBar .rbText{flex-direction:row;align-items:baseline;gap:8px}
.chatView.inCall .replyBar .rbText b{flex:0 1 auto;max-width:50%}
.chatView.inCall .replyBar .rbText span{flex:1 1 0;min-width:0}
.chatView.inCall .replyBar .rbClose{width:40px;min-width:40px;height:40px;min-height:40px}

/* ======================== new messages (2026-10-05) ========================
   Reading further up: a round "down" button over the bottom of the list, with how many
   others wrote since. In a conversation, its back button counts what waits in the others. */
.msgJump{position:sticky;bottom:10px;align-self:flex-end;flex:0 0 auto;margin-top:-48px;z-index:2;
  width:46px;min-width:46px;height:46px;min-height:46px;padding:0;border-radius:23px;display:grid;place-items:center;
  background:var(--panel);color:var(--ink);border:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,.18)}
.msgJump .jumpCount{position:absolute;top:-8px;inset-inline-end:-4px;min-width:22px;height:22px;border-radius:11px;padding:0 6px;
  background:var(--accent);color:var(--accent-ink);font-size:.78rem;font-weight:700;display:grid;place-items:center;line-height:1}
#chatBack{position:relative}
.backBadge{position:absolute;top:0;inset-inline-end:-2px;min-width:20px;height:20px;border-radius:10px;padding:0 5px;
  background:var(--bad);color:#fff;font-size:.72rem;font-weight:700;display:grid;place-items:center;line-height:1}

/* Device choice (2026-10-05): large, plain selects, like the other sheet fields. */
.devSelect { width: 100%; min-height: 48px; font-size: 17px; padding: 8px 12px; border-radius: 12px;
  border: 1px solid var(--line, #d6d9d2); background: var(--panel, #fff); color: var(--ink, #17201c); margin-bottom: 10px; }

/* THE CALL'S TIMER (2026-10-05): large and centred at the top, white on a dark pill - it was a
   small title in the corner and the owner never saw it. */
#call .bar{position:relative}
#callTitle.timerOn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:1.3rem;font-weight:800;
  color:#fff;background:rgba(0,0,0,.6);padding:4px 16px;border-radius:18px;font-variant-numeric:tabular-nums;
  pointer-events:none;overflow:visible;z-index:2}
/* Hide me from others (D-071) */
.privLine{display:flex;align-items:center;gap:8px;margin-top:10px;font-weight:600;cursor:pointer}
.privLine input{width:20px;height:20px;accent-color:var(--accent)}
/* Search inside the conversation (2026-10-06) */
.chatSearchBar{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.chatSearchBar input{flex:1;min-height:44px}
.chatSearchCount{color:var(--muted);font-size:.85rem;font-weight:700;white-space:nowrap}
.chatResultsAt{position:relative;height:0;flex:none}
.chatResults{position:absolute;top:0;inset-inline:0;z-index:5;max-height:60vh;overflow-y:auto;background:var(--panel);border-bottom:1px solid var(--line);
  box-shadow:0 6px 16px rgba(0,0,0,.12)}
.chatResult{display:flex;flex-direction:column;align-items:stretch;gap:2px;width:100%;text-align:start;background:none;border:0;
  border-bottom:1px solid var(--line);border-radius:0;padding:10px 16px;color:var(--ink);min-height:0;font-weight:400}
.chatResult b{font-size:.82rem;color:var(--muted)}
.chatResult mark{background:none;color:var(--accent);font-weight:900}
/* Forward and copy-photo (2026-10-06): beside the reply button, one above the other */
.msg .fwdBtn{top:calc(50% + 40px)}
/* Share outside Talk (D-095): above the reply button; copy-photo above that */
.msg .shareBtn{top:calc(50% - 40px)}
.msg .copyBtn{top:calc(50% - 80px)}
.fwdSheet{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.4);display:flex;align-items:flex-end;justify-content:center}
.fwdBox{background:var(--panel);color:var(--ink);width:min(520px,100%);max-height:75vh;overflow-y:auto;border-radius:20px 20px 0 0;padding:16px;display:grid;gap:6px}
.fwdBox h3{margin:0 0 6px;font-size:1.15rem}
.fwdRow{display:flex;align-items:center;gap:12px;justify-content:flex-start;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;color:var(--ink);font-weight:600;min-height:52px}
.fwdRow i{width:6px;height:28px;border-radius:3px;flex:none}


/* Plugins (D-081, D-083): a switch each on the number card; in a call, a button each in the bar
   (its label, then its badge - the call limit's time left, red in the last minute) and the
   panel of choices it opens. */
.plugins{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.pluginsTitle{display:flex;align-items:center;gap:8px;font-size:17px;margin:0 0 4px}
.plugin{border:2px solid var(--line);border-radius:14px;padding:10px 12px;margin-top:10px}
.plugin.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--panel))}
.plugin label.pluginHead{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:800;cursor:pointer}
.plugin .pluginAbout{margin:4px 0 0;color:var(--muted);font-size:14px}
/* An on/off switch that shows when OFF (the owner: "not visible at all when it is disabled"):
   a dark muted track, a white knob; the accent when on. */
input.switch{appearance:none;-webkit-appearance:none;width:52px;height:30px;border-radius:15px;background:var(--muted);
  position:relative;cursor:pointer;flex:none;transition:background .15s;margin:0}
input.switch::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:inset-inline-start .15s}
input.switch:checked{background:var(--accent)}
input.switch:checked::after{inset-inline-start:25px}
input.switch:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.pluginBadges{display:inline-flex;gap:6px;margin-inline-start:8px}
.pluginBadge{font:inherit;font-weight:800;font-size:15px;padding:4px 10px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:#fff;min-height:auto}
.pluginBadge.urgent{background:var(--bad);border-color:var(--bad)}
.pluginMenu{position:fixed;inset-inline:0;bottom:0;z-index:40;background:var(--panel);color:var(--ink);
  border-radius:24px 24px 0 0;padding:20px 16px 28px;box-shadow:0 -6px 24px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:12px}
.pluginMenu h3{margin:0;font-size:20px}
.pluginChoices{display:flex;flex-wrap:wrap;gap:10px}
.pluginChoice{font:inherit;font-weight:800;font-size:17px;min-width:84px;min-height:52px;border-radius:14px;
  border:2px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
.pluginChoice.on{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.pluginClear{font:inherit;font-weight:800;font-size:17px;min-height:52px;border-radius:14px;border:2px solid var(--bad);
  background:var(--panel);color:var(--bad);cursor:pointer}

/* Notifications off (D-094): the phone's red card, on top of the home page. */
.notifyCard{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 14px;padding:14px 16px;border:2px solid var(--bad);border-radius:16px;background:var(--panel,#fff);color:var(--ink);font:inherit;font-weight:600;line-height:1.6;text-align:start;cursor:pointer}
.notifyCard .ico{flex:none;width:24px;height:24px;color:var(--bad)}
.notifyCard[disabled]{cursor:default}

/* SELECT, EDIT, DELETE (D-101) - like Telegram, as on the phone. More buttons beside a message, in the
   same column: edit (your own text - a text has no copy-photo, so it takes that place), select, delete. */
.msg .editBtn{top:calc(50% - 80px)}
.msg .selectBtn{top:calc(50% + 80px)}
.msg .deleteBtn{top:calc(50% + 120px)}
.msg .deleteBtn:hover{color:var(--bad,#c0392b);border-color:var(--bad,#c0392b)}
.msg .meta .edited{font-style:italic}
/* Selecting: the top bar (how many, and what can be done with them) in the chat bar's place; a check
   box at every message's start side; a selected one marked; the buttons beside messages put away. */
.chatView.selecting > .chatHead:not(.selBar){display:none}
.selBar .selCount{flex:1;min-width:0;font-size:1.15rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selBar .iconBtn{color:var(--bar-ink)}
#msgItems.selecting .msg{margin-inline-start:34px;cursor:pointer;user-select:none;-webkit-user-select:none}
#msgItems.selecting .replyBtn{display:none}
.msg .selBox{position:absolute;top:50%;inset-inline-start:-32px;transform:translateY(-50%);width:22px;height:22px;min-height:0;margin:0;
  accent-color:var(--accent);pointer-events:none}
.msg.selected{outline:2px solid var(--accent);outline-offset:1px;background:color-mix(in srgb,var(--accent) 14%,var(--panel))}
.msg.mine.selected{background:color-mix(in srgb,var(--accent) 22%,var(--panel))}
.delRow{color:var(--bad,#c0392b);justify-content:center}
.editBar > .ico{color:var(--accent)}
.editBar .rbText{border-inline-start-color:var(--accent)}
.editBar .rbText b{color:var(--accent)}

/* PINS AND MARKDOWN (D-103; the owner, 2026-10-09: "Support pin contact, pin messages, and supporting
   code block and showing markdown" - Telegram is the model), as on the phone. */
/* A pinned person or group: a small pin before the name. */
.pinMark{display:inline-flex;color:var(--muted);font-style:normal}
.pinMark .ico{width:16px;height:16px}
/* A message's pin button, in the column of buttons beside it (above the others). */
.msg .pinBtn{top:calc(50% - 120px)}
.msg .pinBtn.on{color:var(--accent);border-color:var(--accent)}
/* The pinned message's bar under the header: a stripe, «پیام سنجاق‌شده ۱ از ۲» and its words, × at the end. */
.pinBar{display:flex;align-items:center;gap:4px;padding-inline:12px 4px;background:var(--panel);border-bottom:1px solid var(--line);min-height:52px}
.pinBarGo{flex:1;min-width:0;display:flex;align-items:stretch;gap:10px;padding:7px 0;background:none;border:0;color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.pinBarGo .pinStripe{flex:none;width:3px;border-radius:2px;background:var(--accent)}
.pinBarGo .pinTexts{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.pinBarGo b{font-size:.82rem;font-weight:800;color:var(--accent)}
.pinBarGo span span,.pinBarGo .pinTexts > span{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pinBarGo:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.pinBarUnpin{flex:none;width:40px;min-width:40px;height:40px;min-height:40px;padding:0;font-size:1.5rem;line-height:1;color:var(--muted)}
.chatView.selecting .pinBar{display:none}
/* Search by type: the chips under the box; a photo's small picture in its result. */
.chatKinds{display:flex;gap:8px;padding:8px 12px;overflow-x:auto;background:var(--panel);border-bottom:1px solid var(--line)}
.chatKinds .chip{flex:none;min-height:34px;padding:4px 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.chatKinds .chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chatResult.withThumb{display:grid;grid-template-columns:44px 1fr;column-gap:10px;align-items:center}
.chatResult.withThumb .resultThumb{grid-row:span 2;width:44px;height:44px;object-fit:cover;border-radius:6px;background:var(--line)}
/* Markdown in a message: paragraphs, quotes and list items each in their own direction (dir=auto);
   code always left to right, monospace; a code block in a dark box of its own, scrolling sideways. */
.msg .body.md{display:flex;flex-direction:column;gap:6px}
.msg .body.md p{margin:0}
.msg .body blockquote{margin:0;padding:2px 8px;border-inline-start:3px solid var(--accent);border-radius:4px;color:var(--muted);
  background:color-mix(in srgb,var(--accent) 6%,transparent)}
.msg .body ul,.msg .body ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.msg .body li{display:flex;gap:6px;white-space:pre-wrap}
.msg .body .mdN{flex:none;min-width:14px;text-align:center}
.msg .body .mdCode{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em;padding:0 3px;border-radius:4px;
  background:color-mix(in srgb,var(--ink) 9%,transparent);direction:ltr;unicode-bidi:isolate}
.msg .body .mdLink{color:var(--accent);text-decoration:underline;word-break:break-all}
.msg .body .mdBlock{direction:ltr;text-align:left;background:#1e2a44;color:#e6ebf5;border-radius:8px;overflow:hidden}
.msg .body .mdHead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px 0;font-size:.75rem;font-weight:700;color:#aab4cc}
.msg .body .mdCopy{min-height:28px;padding:2px 8px;border-radius:6px;border:1px solid #3a4766;background:transparent;color:#aab4cc;font:inherit;cursor:pointer}
.msg .body .mdCopy:hover,.msg .body .mdCopy:focus-visible{color:#fff;border-color:#aab4cc}
.msg .body .mdBlock pre{margin:0;padding:4px 10px 8px;overflow-x:auto;white-space:pre}
.msg .body .mdBlock code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;line-height:1.5}
/* The editor's blocks (D-117, R194/R196), as the approved "message gallery" draws them: a heading one size up
   and heavy (never bigger); a pullquote centred in the accent between two lines; a table with its header on a
   tint, scrolling sideways in its own box when wider than the bubble (its words never shrink or wrap); a link
   button, soft, full width, its site under its words; a formula always left to right on a soft tint. A plain
   colour first wherever color-mix() is used: the kid tablet's Chrome 91 has none (WEB.md). */
.msg .body .mdH{font-size:1.3em;font-weight:800;line-height:1.35}
.msg .body .mdPull{text-align:center;font-size:1.25em;font-weight:800;line-height:1.5;color:var(--accent);padding:2px 10px 12px;
  border-top:3px solid var(--line);border-bottom:3px solid var(--line);
  border-top:3px solid color-mix(in srgb,var(--accent) 35%,transparent);border-bottom:3px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.msg .body .mdPullMark{display:block;height:.62em;font:900 2.6em/1 Georgia,"Times New Roman",serif;color:color-mix(in srgb,var(--accent) 55%,transparent)}
.msg .body .mdPullSub{font-size:.72em;font-weight:600;line-height:1.45;color:var(--muted);margin-top:2px}
.msg .body .mdTableWrap{max-width:100%;overflow-x:auto}
.msg .body .mdTable{min-width:100%;border-collapse:separate;border-spacing:0;white-space:nowrap;border:1px solid var(--line);
  border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:12px}
.msg .body .mdTable th,.msg .body .mdTable td{padding:6px 10px;text-align:start;font-size:.95em;line-height:1.4;
  border-top:1px solid var(--line);border-inline-start:1px solid var(--line);
  border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-inline-start:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.msg .body .mdTable th{border-top:0;font-weight:800;background:var(--bg);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.msg .body .mdTable th:first-child,.msg .body .mdTable td:first-child{border-inline-start:0}
.msg .body .mdTable th:first-child{border-start-start-radius:11px}
.msg .body .mdTable th:last-child{border-start-end-radius:11px}
.msg .body .mdBtn{display:flex;align-items:center;gap:10px;min-height:56px;min-width:200px;padding:6px 14px;border-radius:15px;font-weight:400;
  background:var(--soft);color:var(--accent);border:1px solid var(--line);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);white-space:normal;cursor:pointer}
.msg .body .mdBtn:hover{border-color:var(--accent)}
.msg .body .mdBtn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.msg .body .mdBtnText{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.msg .body .mdBtnText b{font-weight:800;overflow-wrap:anywhere}
.msg .body .mdBtnText small{align-self:flex-start;font-size:.82rem;color:var(--muted)}
.msg .body .mdBtnIco{width:22px;height:22px}
.msg .body .mdFx{direction:ltr;text-align:center;padding:12px 8px;border-radius:12px;overflow-x:auto;
  background:var(--soft);background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--ink)}
.msg .body .mdFx math{font-family:"STIX Two Math","Cambria Math","Latin Modern Math",math;font-size:1.3em}
.msg .body .mdFxSrc{display:block;text-align:left;white-space:pre-wrap;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;line-height:1.5}

/* REACTIONS (D-106; the owner chose design A, "exactly like Telegram": docs/designs/reactions/A1-A3.png) in the
   web's own look (D-074) - its panel, line and accent; nothing else restyled. Every emoji in the system's colour
   font, never a text font's outline of it. */
.emo{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-weight:400;font-style:normal}
/* THE PILL: shown with the column of buttons beside the message (hover, focus, .held), fully above the
   bubble, 8px clear of it (--reactLift); fully below it when the list has no room above (.reactDown). Never
   over the bubble or a button: the column (to 138px from the bubble's middle) stands higher and lower than
   a short bubble, so while the pill reaches over it the column slides to start level with the bubble's top
   (or end level with its bottom) - --colShift, measured in app.js showReactPill. Its edge on the bubble's
   outer edge. */
.msg .replyBtn{translate:0 var(--colShift,0px)}
/* The message whose menu is shown is drawn over its neighbours, so a later bubble never covers its column. */
.msg:hover,.msg:focus-within,.msg.held{z-index:4}
.msg .reactPill{position:absolute;z-index:5;bottom:calc(100% + var(--reactLift,8px));inset-inline-start:0;
  display:flex;align-items:center;gap:2px;padding:4px 6px;border-radius:999px;white-space:nowrap;
  background:var(--panel);background:color-mix(in srgb,var(--panel) 86%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--line);box-shadow:0 6px 24px rgba(0,0,0,.16);opacity:0;pointer-events:none;transition:opacity .15s}
.msg.mine .reactPill{inset-inline-start:auto;inset-inline-end:0}
.msg.reactDown .reactPill{bottom:auto;top:calc(100% + var(--reactLift,8px))}
/* The gap between the bubble and the pill, held by the bubble's hover on the way up (as .replyBtn::before). */
.msg .reactBridge{position:absolute;inset-inline:0;bottom:100%;height:calc(var(--reactLift,8px) + 2px);pointer-events:none}
.msg.reactDown .reactBridge{bottom:auto;top:100%}
.msg:hover .reactPill,.msg:focus-within .reactPill,.msg.held .reactPill{opacity:1;pointer-events:auto}
.msg:hover .reactBridge,.msg.held .reactBridge{pointer-events:auto}
/* A pick puts the menu away until the mouse leaves the bubble (app.js reactShut). */
.msg.shut .replyBtn,.msg.shut .reactPill,.msg.shut .reactBridge{opacity:0!important;pointer-events:none!important}
#msgItems.selecting .reactPill,#msgItems.selecting .reactBridge{display:none}
.reactPill .reactPick{width:40px;min-width:40px;height:40px;min-height:40px;padding:0;border:0;border-radius:12px;
  background:transparent;color:var(--ink);font-size:26px;line-height:1;transition:transform .12s}
.reactPill .reactPick:hover{transform:scale(1.18)}
.reactPill .reactPick.on{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.reactPill .reactMore{width:36px;min-width:36px;height:36px;min-height:36px;padding:0;margin-inline-start:2px;border-radius:12px;
  border:0;background:var(--bg);color:var(--ink)}
.reactPill .reactMore .ico{width:20px;height:20px;vertical-align:0}
@media (max-width:380px){.reactPill .reactPick{width:34px;min-width:34px;font-size:23px}}
@media (prefers-reduced-motion:reduce){.msg .reactPill,.reactPill .reactPick{transition:none}.reactPill .reactPick:hover{transform:none}}
/* THE CHIPS under the content, in the bubble (A3.png): the emoji and how many; yours in the accent's soft tint. */
.msg .reacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.msg .reactChip{min-height:30px;padding:2px 10px;gap:5px;border-radius:999px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink);font-size:.9rem;font-weight:700;line-height:1}
.msg .reactChip .emo{font-size:1.1rem;line-height:1}
.msg .reactChip:hover{border-color:var(--accent)}
.msg .reactChip.me{background:color-mix(in srgb,var(--accent) 16%,var(--panel));border-color:var(--accent);color:var(--accent)}
.msg .reactChip:disabled{opacity:1;cursor:default}
/* THE WHOLE LIST: a panel of glass by the message, the search on top, the rest scrolling under it. */
.emojiSheet{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.12)}
.emojiBox{position:fixed;display:flex;flex-direction:column;overflow:hidden;border-radius:20px;color:var(--ink);
  background:var(--panel);background:color-mix(in srgb,var(--panel) 88%,transparent);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--line);box-shadow:0 12px 40px rgba(0,0,0,.24)}
.emojiBox:focus{outline:none}
.emojiBox .emojiFind{flex:none;width:auto;margin:10px 10px 4px;min-height:44px;padding:8px 14px;border-radius:12px;
  border:2px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:1rem}
.emojiScroll{flex:1;min-height:0;overflow-y:auto;padding:0 8px 10px;overscroll-behavior:contain}
.emojiScroll h4{margin:10px 6px 2px;font-size:.85rem;font-weight:800;color:var(--muted)}
.emojiGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr))}
.emojiGrid .emojiCell{min-width:0;width:auto;min-height:42px;height:42px;padding:0;border:0;border-radius:10px;
  background:transparent;color:var(--ink);font-size:28px;line-height:1}
.emojiGrid .emojiCell:hover,.emojiGrid .emojiCell:focus-visible{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.emojiGrid .emojiCell.on{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.emojiNone{text-align:center;color:var(--muted);margin:28px 0}

/* ---------- Kid mode (D-109) ----------
   THE DEVICE CARD (mock-up P1; SPEC §5/§7): a kid device - «اتاق علی», the ThinkSmart View in the child's room -
   in the book of the parents the owner allowed on /family. Warm cream and gold, so it is told from a person at a
   glance; the device drawn small at the far end (a screen with the two faces over a speaker grille); a navy
   «نگاه کن» and a light rose «تماس تصویری», each with what it does under its name; the lock line saying who sees
   it. No «پیام», no voice call: nothing is sent to a device, and everything with it is video. The fallbacks before
   each color-mix() are for browsers before Chrome 111 (critic: the GSI's own WebView may be one). */
.deviceRow{--c:#d6a100;background:#fff8e1;background:linear-gradient(180deg,color-mix(in srgb,#ffd24a 16%,var(--panel)),color-mix(in srgb,#ffd24a 6%,var(--panel)));
  border:1.5px solid rgba(214,161,0,.5);border-radius:20px}
.deviceRow .contactWho{cursor:default}
.deviceRow .contactName{font-weight:800}
.deviceChip{display:inline-flex;align-items:center;gap:5px;padding:2px 12px;border-radius:999px;font-size:.85rem;font-weight:700;
  background:#f3e6c4;background:color-mix(in srgb,#d6a100 18%,var(--panel));color:#6b5200}
.deviceChip .ico{width:16px;height:16px}
:root[data-theme="dark"] .deviceChip{color:#f3d98a}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .deviceChip{color:#f3d98a} }
/* The device itself, small: blue over orange (the two default face colours, SPEC §1) over a grille. */
.miniDevice{flex:none;width:58px;height:78px;border-radius:10px;background:#1b1d22;padding:4px;display:flex;flex-direction:column;gap:3px;
  box-shadow:0 3px 8px rgba(0,0,0,.22)}
.miniScreen{flex:1;display:flex;flex-direction:column;border-radius:5px;overflow:hidden}
.miniScreen i{flex:1;display:grid;place-items:center}
.miniScreen i::after{content:"";width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.92)}
.miniScreen i:first-child{background:#2f6fe0}
.miniScreen i:last-child{background:#f08a24}
.miniGrille{height:16px;border-radius:4px;display:block;background:#3a3d45 radial-gradient(#6b6f78 1px,transparent 1.3px) 0 0/5px 5px}
/* The two buttons: in the same order in every language, «نگاه کن» on the right (the phone's order, as .contactBtns). */
.deviceBtns{display:flex;gap:10px;direction:rtl}
.deviceBtns button{flex:1;min-width:0;min-height:76px;padding:8px 10px;gap:10px;border-radius:16px;line-height:1.25}
.deviceBtns button .ico{width:28px;height:28px;flex:0 0 28px}
.devText{display:flex;flex-direction:column;align-items:flex-start;text-align:start;min-width:0}
[dir=ltr] .deviceBtns .devText{direction:ltr}
.devText .bt{font-size:1.12rem;font-weight:800}
.devText .bs{font-size:.82rem;font-weight:600;opacity:.85}
/* On a phone (two buttons of about 160 px), the picture above the words, as the people's three buttons do
   (.contactBtns.three) - «تماس تصویری» beside its picture would break in two. */
@media (max-width:480px){
  .deviceBtns button{flex-direction:column;gap:2px;padding:8px 6px;min-height:88px}
  .deviceBtns .devText{align-items:center;text-align:center}
}
.deviceBtns button.lookInBtn{background:var(--bar);border-color:var(--bar);color:var(--bar-ink)}
.deviceBtns button.videoBtn{background:#fce8ee;background:color-mix(in srgb,var(--video) 11%,var(--panel));
  border-color:#f3c1cf;border-color:color-mix(in srgb,var(--video) 30%,transparent);color:var(--video)}
.deviceNote{display:flex;align-items:center;gap:8px;margin:0;padding:10px 14px;border-radius:12px;font-size:.92rem;color:var(--muted);
  background:rgba(0,0,0,.04);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.deviceNote .ico{width:18px;height:18px}
.deviceErr{margin:0;text-align:center;font-weight:700}   /* «این دستگاه الان در تماس است» on the card itself */

/* THE CHILD RINGING (mock-up P2; SPEC §7: "shown at once, red, louder"): #incoming.urgent - deep red, «فوری» in a
   red pill, the child's initial large in a gold ring that pulses, which device, «علی تماس می‌گیرد». Any other ring
   keeps the plain screen above. */
#incoming.urgent{background:#3a0d18;background:radial-gradient(120% 80% at 50% 38%,#6a1729 0%,#3a0d18 55%,#1d060c 100%);color:#fff}
#incoming.urgent .ringIcon{display:none}
.ringUrgent{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:8px 22px;border-radius:999px;background:#e5383b;color:#fff;
  font-weight:800;font-size:1.2rem;letter-spacing:.5px;box-shadow:0 0 0 8px rgba(229,56,59,.22)}
.ringUrgent .ico{width:24px;height:24px}
.ringFace{width:172px;height:172px;border-radius:50%;background:#fff1c2;border:8px solid #f2b705;color:#7a4b00;display:grid;place-items:center;
  font-size:4.6rem;font-weight:800;line-height:1;margin:14px 0 8px;
  box-shadow:0 0 0 20px rgba(255,255,255,.07),0 0 0 44px rgba(255,255,255,.04);animation:pulse 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.ringFace{animation:none}}
.ringDevice{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;padding:4px 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08);font-weight:700}
.ringDevice .ico{width:20px;height:20px}
#incoming.urgent .ringWho{font-size:2.1rem;font-weight:800;color:#fff}
#incoming.urgent .ringSub{color:rgba(255,255,255,.75)}

/* ---------- Kid mode ON THIS BROWSER (D-111) ----------
   The child's screens on the ThinkSmart View (docs/designs/kid/WEB.md), from the approved mock-ups K1-K6 and their
   real HTML/CSS (docs/designs/kid/kid.html, an 800 x 1280 canvas). Every size is the mock-up's number times --ku,
   that canvas mapped to this window (min of vw/800 and vh/1280; app.js kidSize sets the exact one from innerWidth/
   innerHeight, since an Android address bar makes vh taller than what is seen) - so the same screen fits the 800 x
   1280 tablet, a phone and a desktop, never fixed mock-up pixels; clamp() keeps the few that must stay pressable.
   Only html.kidMode (a kid device, app.js KID) ever shows any of it.
   OLD CHROME (91, WEB.md): no color-mix(), no :has(), no container queries, no dvh, no `inset` shorthand. */
html.kidMode{--ku:min(.125vw,.078125vh)}
html.kidMode,html.kidMode body{height:100%;overflow:hidden;overscroll-behavior:none;background:#fff7ea}
/* Talk's own screens are not the child's: hidden (the call is shown, under K4's parts). */
html.kidMode #home,html.kidMode #prejoin,html.kidMode #ended,html.kidMode #incoming,html.kidMode #chatView,
html.kidMode #groupSheet,html.kidMode #devSheet,html.kidMode #attachSheet,html.kidMode #camView,html.kidMode #photoView,
html.kidMode #tzSheet,html.kidMode #updateDlg,html.kidMode #updatedNote,html.kidMode #clipCorner,html.kidMode #clipSendBack{display:none!important}
#kid{position:fixed;top:0;left:0;right:0;bottom:0;z-index:80;overflow:hidden;background:#fff7ea;color:#2b2a4a;
  font-family:"SF Arabic Rounded","SF Pro Rounded",Vazirmatn,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans Arabic",sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* K4: the call shows through; only the hold button (and a sheet) takes a touch. */
#kid.kInCallOn{background:none;pointer-events:none}
#kid .kIco{fill:currentColor;stroke:none;display:block}
#kid button{min-height:0;gap:0;font-family:inherit}
.kScr{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;overflow:hidden}

/* --- a face: the photo, or the first letter on the person's colour (the size is --fs, set by where it is) --- */
.kFace{position:relative;display:block;flex:none;width:var(--fs);height:var(--fs);border-radius:50%;overflow:hidden;background:var(--t,#dce8ff);color:var(--c,#2f6fe0);
  box-shadow:0 0 0 calc(var(--fs) * .047) #fff,0 calc(14 * var(--ku)) calc(30 * var(--ku)) calc(10 * var(--ku)) rgba(0,0,0,.22)}
.kFace img{display:block;width:100%;height:100%;object-fit:cover}
.kFace .kLetter{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:900;font-size:calc(var(--fs) * .5);line-height:1}
.kFace > .kIco{width:56%;height:56%;margin:22%}

/* --- the tap to start (after every load: a browser allows sound, full screen and the wake lock only after a tap) --- */
.kStart{justify-content:center;padding:calc(40 * var(--ku));cursor:pointer;background:linear-gradient(180deg,#ffdf94 0%,#ffeec4 45%,#fff7ea 100%)}
.kStart.kNight{background:linear-gradient(180deg,#1f2260 0%,#2f3384 60%,#22265e 100%)}
.kStartSun{width:calc(200 * var(--ku));height:calc(200 * var(--ku));filter:drop-shadow(0 8px 18px rgba(230,140,0,.35))}
.kStartSun svg{display:block;width:100%;height:100%}
.kStartSun .kNightArt,.kNight .kStartSun .kDayArt{display:none}
.kNight .kStartSun .kNightArt{display:block}
.kNight .kStartSun{filter:drop-shadow(0 0 26px rgba(255,226,138,.45))}
.kStartName{margin:calc(18 * var(--ku)) 0 0;font-weight:800;font-size:calc(64 * var(--ku));line-height:1.2;color:#9a5a00;background:rgba(255,255,255,.62);
  border:3px solid rgba(255,255,255,.95);border-radius:999px;padding:calc(4 * var(--ku)) calc(54 * var(--ku)) calc(12 * var(--ku))}
.kStartName:empty{display:none}
.kNight .kStartName{color:#e9e6ff;background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22)}
#kid .kStartBtn{flex:none;margin-top:calc(70 * var(--ku));width:clamp(120px,calc(300 * var(--ku)),360px);height:clamp(120px,calc(300 * var(--ku)),360px);
  padding:0;border:0;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%,#3dd27a 0%,#16a34a 62%);
  box-shadow:0 0 0 calc(14 * var(--ku)) #fff,0 calc(16 * var(--ku)) 0 calc(14 * var(--ku)) #0d7a36,0 calc(34 * var(--ku)) calc(40 * var(--ku)) calc(14 * var(--ku)) rgba(0,0,0,.22);
  animation:kBreathe 2.2s ease-in-out infinite}
.kStartBtn .kIco{width:52%;height:52%;margin-left:9%}
.kStartWord{margin:calc(72 * var(--ku)) 0 0;font-weight:900;font-size:clamp(26px,calc(76 * var(--ku)),92px);line-height:1.15;color:#5c3d00;text-align:center}
.kStartSub{margin:calc(14 * var(--ku)) 0 0;font-weight:600;font-size:clamp(14px,calc(30 * var(--ku)),36px);color:#6b4a00;opacity:.85;text-align:center;max-width:92%}
.kNight .kStartWord{color:#fff1c2}
.kNight .kStartSub{color:#e9e6ff}
@keyframes kBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* --- K1 / K6: the calm top (clock, sun or moon, his name), the faces, the rooms --- */
.kHome{align-items:stretch;background:#fff7ea}
.kHome.kNight{background:#22265e}
.kSky{position:relative;flex:none;height:calc(546 * var(--ku));display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(4 * var(--ku));padding-bottom:calc(30 * var(--ku));background:linear-gradient(180deg,#ffdf94 0%,#ffeec4 62%,#fff4dc 100%)}
.kCompact .kSky{height:calc(420 * var(--ku))}
.kNight .kSky{background:linear-gradient(180deg,#1f2260 0%,#2f3384 70%,#383c93 100%)}
.kWave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:calc(70 * var(--ku));display:block;fill:#fff7ea}
.kNight .kWave{fill:#22265e}
.kCloud{position:absolute;fill:#fff;opacity:.95}
.kC1{left:5.5%;top:calc(70 * var(--ku));width:calc(170 * var(--ku))}
.kC2{right:5%;top:calc(300 * var(--ku));width:calc(130 * var(--ku));opacity:.8}
.kCompact .kC2{top:calc(230 * var(--ku))}
.kNight .kCloud{display:none}
.kStar{position:absolute;display:none;width:calc(14 * var(--ku));height:calc(14 * var(--ku));border-radius:50%;background:#fff6c9;box-shadow:0 0 12px #fff6c9}
.kNight .kStar{display:block}
.kS1{left:11%;top:calc(80 * var(--ku))}
.kS2{left:25%;top:calc(180 * var(--ku));transform:scale(.65)}
.kS3{right:14%;top:calc(110 * var(--ku));transform:scale(.7)}
.kS4{right:27%;top:calc(60 * var(--ku));transform:scale(.6)}
.kS5{left:16%;top:calc(300 * var(--ku));transform:scale(.6)}
.kS6{right:10%;top:calc(260 * var(--ku))}
.kSun,.kMoon{flex:none}
.kSun{width:calc(190 * var(--ku));height:calc(190 * var(--ku));filter:drop-shadow(0 8px 18px rgba(230,140,0,.35))}
.kCompact .kSun{width:calc(150 * var(--ku));height:calc(150 * var(--ku))}
.kMoon{display:none;width:calc(118 * var(--ku));height:calc(118 * var(--ku));filter:drop-shadow(0 0 26px rgba(255,226,138,.45))}
.kNight .kSun{display:none}
.kNight .kMoon{display:block}
.kSun svg,.kMoon svg{display:block;width:100%;height:100%}
.kClock{font-weight:800;font-size:calc(172 * var(--ku));line-height:1;letter-spacing:2px;color:#5c3d00;unicode-bidi:isolate}
.kCompact .kClock{font-size:calc(136 * var(--ku))}
.kNight .kClock{color:#fff1c2;font-size:calc(136 * var(--ku))}
.kNight.kCompact .kClock{font-size:calc(120 * var(--ku))}
.kChild{margin-top:calc(10 * var(--ku));max-width:90%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:800;font-size:calc(64 * var(--ku));line-height:1.2;
  color:#9a5a00;background:rgba(255,255,255,.62);border:3px solid rgba(255,255,255,.95);border-radius:999px;padding:calc(4 * var(--ku)) calc(54 * var(--ku)) calc(12 * var(--ku))}
.kChild:empty{display:none}
.kNight .kChild{color:#e9e6ff;background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);font-size:calc(56 * var(--ku))}
/* The faces: 1-2 in a row, 3-4 in two rows; the first is on the reading side (Dad on the right in Persian, SPEC §1). */
.kPair{--fs:calc(296 * var(--ku));flex:1 1 auto;min-height:0;width:100%;max-width:calc(1000 * var(--ku));align-self:center;
  display:flex;flex-wrap:wrap;align-content:stretch;gap:0 calc(24 * var(--ku));padding:calc(24 * var(--ku)) calc(28 * var(--ku)) calc(34 * var(--ku))}
.kPair.kN1{--fs:calc(380 * var(--ku))}
.kPair.kN3,.kPair.kN4{--fs:calc(196 * var(--ku));row-gap:calc(30 * var(--ku))}
.kCompact .kPair.kN1,.kCompact .kPair.kN2{--fs:calc(244 * var(--ku))}
.kCompact .kPair{padding-top:calc(14 * var(--ku));padding-bottom:calc(26 * var(--ku))}
#kid .kPb{position:relative;flex:1 1 40%;min-width:0;min-height:0;margin:0 0 calc(16 * var(--ku));padding:calc(12 * var(--ku));border:0;border-radius:calc(64 * var(--ku));
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;cursor:pointer;
  background:linear-gradient(180deg,var(--l) 0%,var(--c) 58%);
  box-shadow:0 calc(16 * var(--ku)) 0 var(--d),0 calc(34 * var(--ku)) calc(44 * var(--ku)) rgba(70,35,0,.22),inset 0 calc(5 * var(--ku)) 0 rgba(255,255,255,.35),inset 0 calc(-6 * var(--ku)) 0 rgba(0,0,0,.08);
  transition:transform .08s,box-shadow .08s}
#kid .kPb:active{transform:translateY(calc(10 * var(--ku)));box-shadow:0 calc(6 * var(--ku)) 0 var(--d),0 calc(14 * var(--ku)) calc(24 * var(--ku)) rgba(70,35,0,.2)}
#kid .kPb:focus-visible,#kid .kRb:focus-visible{outline:4px solid #fff;outline-offset:-10px}
.kFaceBox{position:relative;flex:none;width:var(--fs);height:var(--fs)}
.kPb .kFace{box-shadow:0 0 0 calc(var(--fs) * .047) #fff,0 calc(14 * var(--ku)) calc(30 * var(--ku)) calc(10 * var(--ku)) rgba(0,0,0,.22)}
/* «this button is a video call»: the green camera on the face, at the bottom left as the mock-ups have it. */
.kBadge{position:absolute;left:calc(var(--fs) * -.047);bottom:calc(var(--fs) * -.034);width:calc(var(--fs) * .39);height:calc(var(--fs) * .39);border-radius:50%;
  background:#16a34a;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 calc(var(--fs) * .034) #fff,0 calc(var(--fs) * .027) 0 calc(var(--fs) * .034) rgba(0,0,0,.10)}
.kBadge .kIco{width:55%;height:55%}
.kNm{margin-top:calc(var(--fs) * .135);max-width:92%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:800;line-height:1.15;
  font-size:min(calc(100 * var(--ku)),calc(var(--fs) * .34));text-shadow:0 4px 0 rgba(0,0,0,.14)}
.kRooms{flex:none;width:100%;max-width:calc(1000 * var(--ku));align-self:center;display:flex;flex-wrap:wrap;gap:0 calc(24 * var(--ku));padding:0 calc(28 * var(--ku)) calc(40 * var(--ku))}
#kid .kRb{--fs:calc(118 * var(--ku));flex:1 1 40%;min-width:0;height:calc(192 * var(--ku));margin:0 0 calc(24 * var(--ku));padding:0 calc(18 * var(--ku));border:0;
  border-radius:calc(44 * var(--ku));background:#fffaf2;color:#2b2a4a;display:flex;align-items:center;gap:calc(14 * var(--ku));cursor:pointer;
  box-shadow:0 calc(12 * var(--ku)) 0 #c9c3d6,0 calc(24 * var(--ku)) calc(30 * var(--ku)) rgba(0,0,0,.25),inset 0 calc(4 * var(--ku)) 0 #fff}
.kRb .kFace{background:#ebe3ff;box-shadow:none}
.kRb .kBadge{width:calc(var(--fs) * .47);height:calc(var(--fs) * .47);left:calc(var(--fs) * -.08);bottom:calc(var(--fs) * -.07);box-shadow:0 0 0 calc(6 * var(--ku)) #fff}
.kRn{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-weight:800;font-size:calc(40 * var(--ku));line-height:1.2}
/* For the adult, only when the page can tell (WEB.md): sound refused, the camera or microphone refused. */
.kWarns{position:absolute;left:0;right:0;bottom:calc(6 * var(--ku));display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
#kid .kWarn{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;margin:0;padding:6px 16px;border:0;border-radius:999px;
  background:rgba(30,42,68,.88);color:#fff;font-weight:700;font-size:clamp(13px,calc(24 * var(--ku)),20px);line-height:1.3}
#kid .kWarn .kIco{width:1.3em;height:1.3em}

/* --- K3 calling, K5 look-in, the kid ring: the whole screen in the parent's colour --- */
.kFull{color:#fff;background:radial-gradient(circle at 50% 36%,var(--l) 0%,var(--c) 52%,var(--d) 100%)}
/* The height the mock-up's 800 x 1280 does not use (a phone is taller for its width, a desktop shorter) goes 3 parts
   above the face and 1 part under the dots (K3) or the name (the ring): on the tablet that is the mock-up's own 240 px
   above the face; on any other screen the face, the name and the button stay together, the button at the bottom. */
#kidCalling::before,#kidRing::before{content:"";flex:3 1 0}
#kidCalling .kDots,#kidRing .kCallName{flex:1 1 auto;align-items:flex-start}
.kCallFace{--fs:min(calc(400 * var(--ku)),62vw);position:relative;flex:none;width:var(--fs);height:var(--fs)}
.kCallFace.kBig{--fs:min(calc(420 * var(--ku)),62vw)}
.kCallFace .kFace{box-shadow:0 0 0 calc(18 * var(--ku)) #fff,0 calc(18 * var(--ku)) calc(40 * var(--ku)) calc(10 * var(--ku)) rgba(0,0,0,.25)}
/* the rings that pulse out from the face, one after another */
.kPulse{position:absolute;left:0;top:0;width:100%;height:100%;box-sizing:border-box;border-radius:50%;border:calc(14 * var(--ku)) solid #fff;opacity:0;animation:kPulse 2.4s ease-out infinite}
.kPulse:nth-child(2){animation-delay:.8s}
.kPulse:nth-child(3){animation-delay:1.6s}
@keyframes kPulse{0%{transform:scale(1);opacity:.45}100%{transform:scale(1.6);opacity:0}}
.kCallName{margin:calc(80 * var(--ku)) 0 0;max-width:92%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:900;font-size:calc(96 * var(--ku));line-height:1.15;
  text-shadow:0 4px 0 rgba(0,0,0,.14)}
/* dots, not words: they bounce in turn */
.kDots{display:flex;gap:calc(34 * var(--ku));margin-top:calc(56 * var(--ku));direction:ltr}
.kDots i{display:block;width:calc(44 * var(--ku));height:calc(44 * var(--ku));border-radius:50%;background:#fff;opacity:.45;box-shadow:0 6px 0 rgba(0,0,0,.12);animation:kDot 1.2s ease-in-out infinite}
.kDots i:nth-child(2){animation-delay:.2s}
.kDots i:nth-child(3){animation-delay:.4s}
@keyframes kDot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-50%);opacity:1}}
#kid .kBigRed,#kid .kBigGreen{flex:none;margin:auto 0 calc(80 * var(--ku));padding:0;border:0;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
#kid .kBigRed{width:clamp(96px,calc(184 * var(--ku)),230px);height:clamp(96px,calc(184 * var(--ku)),230px);background:radial-gradient(circle at 50% 35%,#f05a57 0%,#e0312f 60%);
  box-shadow:0 0 0 calc(14 * var(--ku)) #fff,0 calc(16 * var(--ku)) 0 calc(14 * var(--ku)) #a11b19,0 calc(34 * var(--ku)) calc(40 * var(--ku)) calc(14 * var(--ku)) rgba(0,0,0,.25)}
#kid .kBigGreen{width:clamp(110px,calc(300 * var(--ku)),360px);height:clamp(110px,calc(300 * var(--ku)),360px);background:radial-gradient(circle at 50% 35%,#3dd27a 0%,#16a34a 62%);
  box-shadow:0 0 0 calc(14 * var(--ku)) #fff,0 calc(16 * var(--ku)) 0 calc(14 * var(--ku)) #0d7a36,0 calc(34 * var(--ku)) calc(40 * var(--ku)) calc(14 * var(--ku)) rgba(0,0,0,.25);
  margin-bottom:calc(120 * var(--ku));animation:kBreathe 1.6s ease-in-out infinite}
.kBigRed .kIco,.kBigGreen .kIco{width:58%;height:58%}
.kBigGreen .kIco{animation:shake 1.1s ease-in-out infinite}
#kidRing .kCallName{margin-top:calc(70 * var(--ku))}
/* the camera sign: green the whole call, amber while a look-in counts down, grey when no picture of him goes out */
.kCamOn{flex:none;height:calc(84 * var(--ku));min-height:34px;padding:0 calc(26 * var(--ku)) 0 calc(22 * var(--ku));border-radius:999px;display:flex;align-items:center;
  gap:calc(16 * var(--ku));direction:ltr;color:#fff;background:rgba(8,28,16,.62);border:calc(5 * var(--ku)) solid #22c55e;
  box-shadow:0 0 0 calc(6 * var(--ku)) rgba(34,197,94,.25),0 10px 24px rgba(0,0,0,.3)}
.kCamOn .kLed{display:block;width:calc(30 * var(--ku));height:calc(30 * var(--ku));min-width:12px;min-height:12px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 calc(6 * var(--ku)) rgba(34,197,94,.35),0 0 22px 6px rgba(74,222,128,.9)}
#kid .kCamOn .kIco{width:calc(54 * var(--ku));height:calc(54 * var(--ku));min-width:22px;min-height:22px}
.kCamOn.kWait{border-color:#fbbf24;background:rgba(40,28,4,.55);box-shadow:0 0 0 calc(6 * var(--ku)) rgba(251,191,36,.25),0 10px 24px rgba(0,0,0,.3)}
.kCamOn.kWait .kLed{background:#fbbf24;box-shadow:0 0 0 calc(6 * var(--ku)) rgba(251,191,36,.3)}
.kCamOn.kOff{border-color:#9ca3af;background:rgba(20,20,20,.55);box-shadow:0 10px 24px rgba(0,0,0,.3)}
.kCamOn.kOff .kLed{background:#9ca3af;box-shadow:none}
/* K5: the camera sign at the top; the banner, the count and the pips together in the height that is left (flex
   spacers, order puts them around the block: on the tablet that is the mock-up's own banner at 196 px). */
#kidLookIn .kCamOn{margin-top:calc(24 * var(--ku));order:0}
#kidLookIn > :not(.kCamOn){order:2}
#kidLookIn::before{content:"";order:1;flex:1 1 0}
#kidLookIn::after{content:"";order:3;flex:1 1 0}
.kBanner{position:relative;flex:none;width:calc(100% - 88 * var(--ku));max-width:calc(712 * var(--ku));height:calc(590 * var(--ku));margin-top:calc(54 * var(--ku));
  border-radius:calc(64 * var(--ku));background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--c);
  box-shadow:0 calc(18 * var(--ku)) 0 rgba(0,0,0,.12),0 calc(40 * var(--ku)) calc(60 * var(--ku)) rgba(0,0,0,.25)}
.kWaves{position:absolute;left:0;top:0;width:100%;height:calc(420 * var(--ku));color:var(--c)}
#kid .kNote{position:absolute;color:var(--c)}
#kid .kNoteA{right:calc(34 * var(--ku));top:calc(40 * var(--ku));width:calc(60 * var(--ku));height:calc(60 * var(--ku))}
#kid .kNoteB{left:calc(40 * var(--ku));top:calc(60 * var(--ku));width:calc(44 * var(--ku));height:calc(44 * var(--ku));opacity:.7}
#kidLookIn .kFace{--fs:min(calc(320 * var(--ku)),42vw);margin-top:calc(-34 * var(--ku));box-shadow:0 0 0 calc(14 * var(--ku)) var(--c),0 0 0 calc(26 * var(--ku)) var(--t)}
.kLookSaid{margin:calc(48 * var(--ku)) 0 0;max-width:90%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:900;font-size:calc(104 * var(--ku));line-height:1.1;color:var(--ink)}
.kCount{position:relative;flex:none;width:calc(290 * var(--ku));height:calc(290 * var(--ku));margin-top:calc(52 * var(--ku))}
.kArc{position:absolute;top:0;left:0;width:100%;height:100%;transform:rotate(-90deg)}
.kArcBack{fill:none;stroke:rgba(255,255,255,.3);stroke-width:18}
.kArcFill{fill:none;stroke:#fff;stroke-width:18;stroke-linecap:round}
.kDisc{position:absolute;top:10.3%;left:10.3%;right:10.3%;bottom:10.3%;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 calc(6 * var(--ku)) var(--l)}
.kDisc span{font-weight:900;font-size:calc(190 * var(--ku));line-height:1;color:var(--ink);margin-top:calc(-10 * var(--ku))}
.kPips{display:flex;justify-content:center;gap:calc(26 * var(--ku));margin-top:calc(36 * var(--ku))}
.kPips i{display:block;width:calc(34 * var(--ku));height:calc(34 * var(--ku));box-sizing:border-box;border-radius:50%;border:calc(5 * var(--ku)) solid #fff}
.kPips i.kDone{background:rgba(255,255,255,.35);border-color:transparent}
.kPips i.kNow{background:#fff;transform:scale(1.35)}
/* «not now»: calm, not a failure */
.kNotNow{justify-content:center;cursor:pointer;background:#fff7ea;color:#6b4a00}
.kNotNow .kFace{--fs:min(calc(300 * var(--ku)),45vw);opacity:.9;box-shadow:0 0 0 calc(14 * var(--ku)) #fff,0 calc(14 * var(--ku)) calc(30 * var(--ku)) rgba(0,0,0,.15)}
#kid .kHeart{width:calc(150 * var(--ku));height:calc(150 * var(--ku));min-width:48px;min-height:48px;margin:calc(40 * var(--ku)) 0;color:var(--c)}
.kNotNow p{margin:0;font-weight:800;font-size:clamp(20px,calc(52 * var(--ku)),64px)}

/* --- K4: over the call - the parent full screen, his own picture small in the corner, the sign, ONE red button --- */
html.kidMode #call.on{position:fixed;top:0;left:0;right:0;bottom:0;height:auto;z-index:70}
html.kidMode #call .bar,html.kidMode #call .controls,html.kidMode #call .chat,html.kidMode #call .outgoing,html.kidMode #call .pluginMenu,
html.kidMode #call #netBanner,html.kidMode #call #micBanner,html.kidMode #call #callError,html.kidMode #call #callNote,
html.kidMode #call .tile .name,html.kidMode #call .tile .marks{display:none!important}
html.kidMode #call .grid{padding:0!important;gap:0}
html.kidMode #call .tile{border-radius:0}
html.kidMode #call .tile video{object-fit:cover}
html.kidMode #call .tile.pip{top:calc(28 * var(--ku));right:calc(28 * var(--ku));left:auto;bottom:auto;width:calc(220 * var(--ku));height:calc(300 * var(--ku));
  min-width:90px;min-height:120px;border-radius:calc(36 * var(--ku));border:calc(8 * var(--ku)) solid #fff;box-shadow:0 calc(14 * var(--ku)) calc(30 * var(--ku)) rgba(0,0,0,.35)}
/* Sound refused by the browser: the call's own «tap to hear», large, where a hand finds it. */
html.kidMode #call #audioBanner{top:auto;bottom:calc(420 * var(--ku));left:10%;right:10%;min-height:64px;font-size:1.2rem;border-radius:999px;z-index:75}
.kInCall{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}
.kInCall::before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(420 * var(--ku));background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.42))}
.kInCall .kCamOn{position:absolute;top:calc(24 * var(--ku));left:50%;transform:translateX(-50%)}
.kHold{position:absolute;left:50%;bottom:calc(66 * var(--ku));width:clamp(130px,calc(296 * var(--ku)),340px);height:clamp(130px,calc(296 * var(--ku)),340px);
  transform:translateX(-50%);pointer-events:auto;touch-action:none}
.kHold .kArcBack{stroke:rgba(255,255,255,.38)}
.kHold .kArcFill{opacity:0}
#kid .kHold .kBigRed{position:absolute;top:12.8%;left:12.8%;width:74.4%;height:74.4%;margin:0;
  box-shadow:0 calc(14 * var(--ku)) 0 0 #a11b19,0 calc(30 * var(--ku)) calc(40 * var(--ku)) rgba(0,0,0,.35);transition:transform .15s}
#kid .kHold.kHolding .kBigRed{transform:scale(.94)}

/* --- the adult's corner, the PIN pad and the adult sheet --- */
.kCorner{position:absolute;top:0;left:0;z-index:4;width:max(72px,calc(120 * var(--ku)));height:max(72px,calc(120 * var(--ku)));touch-action:none}
[dir=ltr] .kCorner{left:auto;right:0}
.kSheetBack{position:absolute;top:0;left:0;right:0;bottom:0;z-index:6;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(15,19,32,.6);pointer-events:auto}
.kSheet{width:100%;max-width:clamp(320px,64vw,560px);max-height:100%;overflow:auto;padding:22px;border-radius:24px;background:#fff;color:#121826;text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.35);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Vazirmatn,Roboto,"Noto Sans Arabic",sans-serif}
.kSheet h2{margin:0 0 10px;font-size:1.4rem}
.kSheet .hint{margin:0 0 16px}
.kPinDots{display:flex;justify-content:center;gap:12px;min-height:22px;margin:8px 0}
.kPinDots i{display:block;width:18px;height:18px;border-radius:50%;background:#1e2a44}
.kPinMsg{min-height:1.5em;margin:4px 0 10px;color:#b91c1c;font-weight:700}
.kPinPad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 14px}
#kid .kPinPad button{min-height:clamp(60px,8vh,96px);padding:0;border-radius:16px;border:0;background:#eef1f8;color:#121826;font-size:clamp(1.6rem,4.5vw,2.4rem);font-weight:800}
#kid .kPinPad button:active{background:#d9deeb}
#kid .kPinPad button.kOk{background:#1e2a44;color:#fff}
.kSheetBtns{display:flex;gap:10px}
.kSheetBtns.kCol{flex-direction:column}
#kid .kSheetBtns button{min-height:58px}
/* Maintenance: over Talk's own screens, how long is left and the way back. */
.kMaint{position:fixed;top:0;left:0;right:0;z-index:95;display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 12px;
  background:#fbbf24;color:#1c1400;font-weight:800;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.kMaint button{background:#1e2a44;color:#fff}
html.kidMaint body{padding-top:58px}
@media (prefers-reduced-motion:reduce){
  .kPulse,.kDots i,#kid .kStartBtn,#kid .kBigGreen,.kBigGreen .kIco{animation:none}
  .kPulse:first-child{opacity:.3}
}

/* SOMEONE ELSE'S SCREEN FILLS A PHONE-SIZED WINDOW (R180, app.js updateScreenFull): the bar, the faces
   strip and the buttons are hidden until the screen is tapped. A wide window never gets the class. */
#call.screenFull:not(.screenChrome) .bar,
#call.screenFull:not(.screenChrome) .controls,
#call.screenFull:not(.screenChrome) .grid > .strip{display:none}
#call.screenFull:not(.screenChrome) .grid{padding:0 !important}
#call.screenFull .grid > .tile.screen{border-radius:0;cursor:pointer}
#call.screenFull:not(.screenChrome) .tile.screen .name{top:calc(8px + env(safe-area-inset-top,0px))}
#call.screenFull:not(.screenChrome) > #callNote{bottom:calc(12px + env(safe-area-inset-bottom,0px))}

/* THE CALL'S BUTTONS ARE THE PHONE'S (the owner, 2026-10-20, R181: "make the texts inside the box bigger and
   more readable in all platforms", then "make sure also the web version would be consistent"). The phone's own
   values (Call.tsx `controls`, `ctl`, `ctlText`; D-104 «soft» shape): a smoked tray 8 px in from the edges,
   corner 32; rounded squares (corner 15), see-through white, red when off, solid red to hang up; the word
   14 px bold, 17 px lines, a soft shadow, two lines at most and shrunk to 80% where a word is too wide (app.js
   fitLabel, as the phone's adjustsFontSizeToFit). The size and the row count are the phone's rule, worked out
   in app.js fitControls: --ctl-size, --ctl-ico. Sideways: a column of two at the end side, the full height. */
#call .controls{inset-inline:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));
  display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:6px;padding:8px;
  border-radius:32px;background:rgba(20,22,30,.38);border:1px solid rgba(255,255,255,.14)}
#call .controls .ctl{flex:0 0 var(--ctl-size,70px);width:var(--ctl-size,70px);height:var(--ctl-size,70px);
  border-radius:min(15px,calc(var(--ctl-size,70px) / 2));padding:0 3px;gap:1px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  color:#fff;font-size:.875rem;line-height:1.2;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.6)}
#call .controls .ctl .ico{width:var(--ctl-ico,28px);height:var(--ctl-ico,28px);flex:0 0 auto}
#call .controls .ctl span:not(.badge){max-width:100%;overflow-wrap:normal}
#call .controls .ctl.off{background:rgba(220,38,38,.75);border-color:rgba(255,255,255,.35)}
#call .controls .ctl.on-accent{background:rgba(30,42,68,.9)}
#call .controls .ctl.danger{background:rgba(220,38,38,.92);border-color:transparent}
@media (orientation:landscape) and (max-height:560px){
  #call .controls{inset-inline:auto 0;inset-block:0;width:var(--ctl-w);flex-direction:row;padding:8px;border-radius:0;border:0}
}

/* LIGHT OR DARK (R183): the three choices, as the phone's Settings - one row of three, the chosen one filled. */
.appearLine{display:grid;gap:8px;margin-top:14px}
.appearTitle{font-weight:700}
.appearChoices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.appearChoice{min-height:48px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:12px;font-weight:700}
.appearChoice[aria-checked="true"]{background:var(--bar);color:var(--bar-ink);border-color:var(--bar)}
:root[data-theme="dark"] .appearChoice[aria-checked="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
/* At night the navy fill all but vanishes on a dark card: the message button takes the light accent, as the
   phone's dark palette turns its navy light (R183). */
:root[data-theme="dark"] .contactBtns .msgBtn{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ======================== the message editor (D-117 + its 2026-10-24 amendment; R194-R196) ========================
   As the approved boards draw the web (talk-design-194 A step 10, B step 7, the shortcuts board): every button a
   picture AND a word, the box's buttons grey (--quiet) and the one main action in the accent; the format bar just
   above the box; the big editor a panel over the frosted chat (the whole window when it is phone-sized); the sheets
   in the middle on a computer and from the bottom in a phone-sized window. Colours only from the tokens above, so
   the dark look follows (R183). */
.composer{position:relative}
.composer textarea{min-width:0}
/* Each line in its own direction: a formula, a link or a table row of Latin stays left to right in a Persian message
   (the bubble draws them so too, dir=auto per block). */
#msgInput,#edInput{unicode-bidi:plaintext}
.cBtn{flex:none;min-height:48px;padding:0 12px;gap:6px;border-radius:14px;font-size:1rem;font-weight:700;white-space:nowrap;border:0}
.cBtn .ico{width:22px;height:22px}
.cBtn.quiet{background:var(--quiet);color:var(--ink)}
.cBtn.quiet:hover{background:var(--soft)}
/* A phone-sized window (B step 1, A step 1): the picture over its word, as the phone's round buttons. */
@media (max-width:640px){
  .composer{gap:4px;padding:8px 6px}
  .cBtn{flex-direction:column;justify-content:center;gap:1px;min-height:54px;min-width:52px;padding:4px 5px;font-size:.88rem;line-height:1.15}
}
.chatView.inCall .cBtn{flex-direction:column;justify-content:center;gap:1px;min-height:50px;min-width:48px;padding:3px 4px;font-size:.82rem;line-height:1.1}
/* B step 7: the quiet line under the box - a computer's keys only (a fine pointer, a wide window). */
.composeHint{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;padding:0 14px 8px;background:var(--panel);color:var(--muted);font-size:.9rem}
.composeHint .g{display:inline-flex;align-items:center;gap:6px}
@media (pointer:coarse),(max-width:719px){ .composeHint{display:none!important} }
.chatView.inCall .composeHint{display:none!important}
.kcs{display:inline-flex;align-items:center;gap:4px;direction:ltr;unicode-bidi:isolate}
.kc{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 7px;border-radius:7px;
  background:var(--panel);color:var(--ink);border:1px solid var(--line);border-bottom-width:2px;
  font:700 .8rem/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;white-space:nowrap}
.edKeysLink{background:transparent;color:var(--accent);border:0;min-height:44px;padding:0 8px;gap:6px;font-weight:700}
.edKeysLink .ico{width:22px;height:22px}
.edGrow{flex:1}

/* THE BAR: six big buttons over the selected words' box - never over the words (app.js fmtPlace). */
.fmtBar{position:absolute;z-index:6;inset-inline-start:8px;bottom:calc(100% + var(--fmtLift,8px));max-width:calc(100% - 16px);
  padding:7px;border-radius:18px;background:var(--panel);color:var(--ink);border:1px solid var(--line);box-shadow:0 12px 28px rgba(0,0,0,.2)}
.fmtBar.inPanel{bottom:auto;inset-inline-start:auto;max-width:calc(100% - 16px)}
.fmtRow{display:flex;flex-wrap:wrap;gap:6px}
.fmtBtn{position:relative;min-height:52px;padding:0 12px;gap:7px;border-radius:13px;border:2px solid transparent;
  background:var(--quiet);color:var(--ink);font-size:1rem;font-weight:700}
.fmtBtn .ico{width:21px;height:21px;color:var(--bar)}
.fmtBtn .gl{font:900 21px/1 Georgia,"Times New Roman",serif;color:var(--bar);direction:ltr}
.fmtBtn .gl-i{font-style:italic;font-weight:700}
.fmtBtn .gl-s{text-decoration:line-through;text-decoration-thickness:2px;font-weight:700}
:root[data-theme="dark"] .fmtBtn .gl,:root[data-theme="dark"] .fmtBtn .ico{color:var(--ink)}
.fmtBtn:hover{border-color:var(--line)}
/* What is already on: outlined in the accent on its soft tint (A step 10's «پررنگ»), and aria-pressed. */
.fmtBtn.on{background:var(--soft);border-color:var(--accent);color:var(--accent)}
.fmtBtn.on .gl,.fmtBtn.on .ico{color:var(--accent)}
/* Resting the pointer (or the keyboard) on a button shows its keys: «پررنگ ⌘ B». */
.fmtTip{position:absolute;bottom:calc(100% + 10px);inset-inline-start:0;z-index:2;display:inline-flex;align-items:center;gap:8px;
  padding:7px 11px;border-radius:10px;background:#141b2e;color:#fff;font-size:.9rem;font-weight:700;white-space:nowrap;pointer-events:none;
  visibility:hidden;opacity:0;transition:opacity .15s ease,visibility 0s linear .15s}
.fmtTip .kc{background:transparent;color:inherit;border-color:rgba(255,255,255,.7);height:24px;min-width:24px;font-size:.78rem}
.fmtBtn:hover .fmtTip,.fmtBtn:focus-visible .fmtTip{visibility:visible;opacity:1;transition-delay:.45s,.45s}
@media (pointer:coarse){ .fmtTip{display:none} }
.fmtLink{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.fmtBar.asking .fmtRow{display:none}
.fmtLinkIn{flex:1 1 240px;min-width:0;min-height:52px;padding:0 12px;border:2px solid var(--accent);border-radius:13px;background:var(--bg);color:var(--ink);font:inherit}
.fmtLinkIn:focus{outline:none}
.fmtLinkOk{min-height:52px;border-radius:13px;gap:6px}
.fmtLinkNo{min-height:52px;border-radius:13px;gap:6px;background:var(--quiet);color:var(--ink)}
.fmtLinkErr{flex-basis:100%;margin:2px 4px 0;color:var(--bad);font-weight:700;font-size:.95rem}
@media (max-width:640px){
  .fmtBar.inBox{inset-inline:6px;max-width:none}
  .fmtBar .fmtRow{display:grid;grid-template-columns:repeat(3,1fr)}   /* B step 1: two rows of three */
  .fmtBtn{padding:0 8px}
}

/* THE CARDS: the blocks in the box, drawn as they will arrive, «حذف» beside each (B step 5). */
.edStrip{display:flex;flex-direction:column;gap:6px;padding:8px 8px 4px;background:var(--panel);border-top:1px solid var(--line);max-height:34vh;overflow-y:auto}
.edCard{display:flex;align-items:stretch;gap:8px;padding:6px;border-radius:15px;background:var(--bg);border:1.5px solid var(--line)}
.edCardBody{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding:2px 6px;border-radius:10px;cursor:pointer}
.edCardBody:hover{background:var(--soft)}
.edCardBody:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.edCardTag{display:flex;align-items:center;gap:6px;font-size:.88rem;font-weight:800;color:var(--muted)}
.edCardTag .ico{width:17px;height:17px}
.edCardBody .edShowMsg{max-height:132px;overflow:hidden}
.edCardSum b{display:block;font-weight:800}
.edCardSum small{display:block;color:var(--muted);font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.edCardCode{display:block;direction:ltr;text-align:left;white-space:pre;overflow:hidden;padding:6px 10px;border-radius:8px;
  background:#1e2a44;color:#e6ebf5;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9rem;line-height:1.45}
.edCardDel{flex:none;flex-direction:column;gap:2px;min-width:58px;min-height:56px;padding:4px 6px;border-radius:12px;background:var(--quiet);color:var(--ink);font-size:.88rem}
.edCardDel .ico{width:20px;height:20px}
.edCardDel:hover{background:var(--bad);color:#fff}
/* The bubble's own drawing rules (.msg .body ...) without the bubble's box: the cards and the sheets' previews. */
.msg.edShowMsg{max-width:none;align-self:stretch;background:transparent;border:0;padding:0;border-radius:0}
.msg.edShowMsg .mdBtn{pointer-events:none}

/* «بزرگ کن»: THE BIG EDITOR (A step 10) - a panel over the frosted chat. */
.edBack{position:fixed;inset:0;z-index:52;display:grid;place-items:center;padding:20px;background:var(--frost);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.edPanel{width:min(880px,100%);height:min(680px,100%);display:flex;flex-direction:column;overflow:hidden;
  background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.edTop{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line)}
.edTitle{flex:1;min-width:0;margin:0 6px;font-size:1.3rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.edPill{min-height:48px;padding:0 13px;gap:6px;border-radius:15px;border:0;background:var(--quiet);color:var(--ink);font-weight:700}
.edPill .ico{width:22px;height:22px}
.edPill:disabled{opacity:.42}
.edBody{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 16px 8px}
/* Room above the first line for the bar (A step 10 draws it over the selected line). */
@media (min-width:641px){ .edBody{padding-top:82px} }
#edInput{flex:1;min-height:0;width:min(660px,100%);resize:none;border:0;outline:0;padding:6px 4px;background:transparent;color:var(--ink);
  font:inherit;font-size:1.2rem;line-height:1.65}
.edBody .edStrip{width:min(660px,100%);flex:none;max-height:32%;padding:0;border-top:0;background:transparent}
.edTools{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--line)}
.edTool{min-height:52px;padding:0 13px;gap:7px;border-radius:14px;border:0;background:var(--quiet);color:var(--ink);font-weight:700}
.edTool .ico{width:22px;height:22px}
.edSendKeys{color:var(--muted)}
.edSend{min-height:54px;padding:0 20px;gap:8px;border-radius:14px;font-size:1.1rem;font-weight:800}
@media (pointer:coarse){ #edKeys,.edSendKeys{display:none} }
@media (max-width:640px){
  .edBack{padding:0}
  .edPanel{width:100%;height:100%;border:0;border-radius:0}
  .edTop{padding:8px;gap:6px}
  .edTop .edPill,.edTools .edTool{flex-direction:column;justify-content:center;gap:1px;min-height:54px;padding:4px 7px;font-size:.88rem;line-height:1.15}
  .edTitle{font-size:1.1rem;margin:0 2px}
  #edKeys{flex-direction:column;gap:1px;padding:4px 4px;font-size:.88rem;line-height:1.15}
  .edTools{padding:8px;gap:4px}
  .edSendKeys{display:none}
  .edSend{flex-direction:column;gap:1px;min-height:58px;padding:4px 12px;font-size:.95rem}
}

/* THE SHEETS: «افزودن», the list, the table, the formula, the button, the shortcuts. */
.edSheetBack{position:fixed;inset:0;z-index:56;display:grid;place-items:center;padding:20px;overflow-y:auto;background:var(--frost);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#attachSheet{z-index:58}   /* «پیوست» from the big editor opens over it */
.edSheet{width:min(440px,100%);max-height:calc(100vh - 40px);overflow-y:auto;display:flex;flex-direction:column;gap:10px;
  padding:18px 18px 16px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:26px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.edSheet .grab,.pvWin .grab{display:none}
@media (max-width:640px){
  .edSheetBack,.pvBack{place-items:end center;padding:0 8px 8px}
  .edSheet,.pvWin{border-radius:30px}
  .edSheet .grab,.pvWin .grab{display:block;width:38px;height:5px;margin:0 auto 2px;border-radius:3px;background:var(--line)}
}
.edShTitle{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 4px;font-size:1.3rem;font-weight:800}
.edShTitle .ico{color:var(--accent)}
.edTiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.edTile{min-height:70px;justify-content:flex-start;gap:12px;padding:0 12px;border-radius:16px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);font-size:1.05rem;font-weight:700;text-align:start;line-height:1.25}
.edTile:hover{border-color:var(--accent)}
.edTile .ti{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:var(--soft);color:var(--accent)}
.edTile .ti .ico{width:24px;height:24px}
.edQuiet{min-height:56px;border-radius:15px;border:0;background:var(--quiet);color:var(--ink);font-size:1.05rem;font-weight:800}
.edPrimary{min-height:58px;border-radius:15px;gap:10px;font-size:1.1rem;font-weight:800}
.edLbl{margin:4px 4px 0;color:var(--muted);font-size:.95rem;font-weight:700}
.edIn{width:100%;min-height:56px;padding:10px 14px;border:2px solid var(--line);border-radius:15px;background:var(--bg);color:var(--ink);font:inherit;font-size:1.1rem}
.edIn:focus{border-color:var(--accent);outline:none}
.edMono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.05rem}
.edErr{margin:0;color:var(--bad);font-weight:700}
.edNote{margin:0;text-align:center;color:var(--muted);font-size:.9rem}
.edFxShow{min-height:100px;display:grid;place-items:center;padding:14px 8px;border-radius:14px;overflow-x:auto;direction:ltr;text-align:center;
  background:var(--soft);color:var(--ink)}
.edFxShow math{font-family:"STIX Two Math","Cambria Math","Latin Modern Math",math;font-size:1.6em}
.edFxShow .mdFxSrc{display:block;white-space:pre-wrap;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.95rem}
.edFxHint{margin:4px 0 0;color:var(--muted);font-size:.92rem;direction:rtl;text-align:center}
.edFxKeys{display:flex;gap:6px}
.edFk{flex:1 1 0;min-width:0;min-height:70px;flex-direction:column;gap:2px;padding:4px;border-radius:15px;border:0;background:var(--quiet);color:var(--ink)}
.edFk .fs{height:28px;display:flex;align-items:center;direction:ltr;font:500 24px/1 "STIX Two Math","Cambria Math","Times New Roman",serif}
.edFk small{font-size:.85rem;font-weight:700;white-space:nowrap}
.edFk .fs.frIco{height:30px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;line-height:1}
.frIco{display:inline-flex;flex-direction:column;align-items:center;font-size:15px;line-height:1.05}
.frIco span:first-child{border-bottom:2px solid currentColor;padding:0 3px}
.edTGrid{display:grid;grid-template-columns:repeat(5,46px);gap:7px;justify-content:center}
.edTGrid button{height:40px;min-height:40px;padding:0;border-radius:9px;border:2px solid var(--line);background:var(--bg)}
.edTGrid button.hover{border-color:var(--accent)}
.edTGrid button.on{border-color:var(--accent);background:var(--soft)}
.edTSize{text-align:center;font-size:1.35rem;font-weight:800}
.edStep{display:flex;align-items:center;gap:10px;min-height:62px;border-top:1px solid var(--line)}
.edStep > span{flex:1;font-size:1.05rem;font-weight:700}
.edStep b{min-width:40px;text-align:center;font-size:1.4rem}
.edStepBtn{width:56px;min-height:50px;padding:0;border-radius:15px;border:0;background:var(--quiet);color:var(--ink)}
.edBtnShow{min-height:60px}
/* «میان‌برها»: one list in two columns, «نوشته» and «پیام», each word in its own style. */
.edSheet.edKeysBox{width:min(860px,100%)}
.edKeysHead{display:flex;align-items:center;gap:10px}
.edKeysHead .edShTitle{flex:1;justify-content:flex-start;margin:0;flex-wrap:wrap}
.edKeysHead small{font-size:1rem;font-weight:600;color:var(--muted)}
.edKeysCols{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px}
@media (max-width:720px){ .edKeysCols{grid-template-columns:1fr} }
.edKeysCol h3{margin:4px 0 2px;color:var(--muted);font-size:.95rem}
.edKeyRow{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:50px;border-top:1px solid var(--line)}
.edKeyWord{display:inline-flex;align-items:center;gap:8px;font-size:1.05rem;font-weight:700}
.edKeyWord .ico{width:21px;height:21px;color:var(--muted)}
.edKeyRow .kc{min-width:34px;height:34px;font-size:.92rem}
.kw-b{font-weight:900}
.kw-i{font-style:italic}
.kw-s{text-decoration:line-through}
.kw-code{font-family:ui-monospace,Menlo,Consolas,monospace;padding:0 6px;border-radius:5px;background:var(--quiet)}
.kw-link{color:var(--accent);text-decoration:underline}
.kw-quote{padding-inline-start:9px;border-inline-start:3px solid var(--accent)}
.kcsOr{display:inline-flex;align-items:center;gap:8px;direction:ltr;color:var(--muted)}
.edKeysFoot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;padding-top:10px;border-top:1px solid var(--line);color:var(--muted);font-size:.95rem}
.edKeysLegend{unicode-bidi:plaintext}

/* ======================== the paste/drop preview (D-118 option 1) ======================== */
.pvBack{position:fixed;inset:0;z-index:57;display:grid;place-items:center;padding:20px;overflow-y:auto;background:var(--frost);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.pvWin{width:min(640px,100%);max-height:calc(100vh - 40px);overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:20px 22px 22px;
  background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.pvHead{display:flex;align-items:center;gap:12px;min-height:48px}
.pvIco{flex:none;width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:var(--soft);color:var(--accent)}
.pvTitle{margin:0;font-size:1.45rem;font-weight:800}
.toChip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:22px;background:var(--soft);color:var(--ink);font-weight:700}
.toChip .nm{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.2}
.toChip .nm b{font-weight:800}
.toChip .nm i{display:block;width:28px;height:4px;border-radius:2px}
.pvItems{display:flex;flex-wrap:wrap;gap:12px}
.pvItems.one{justify-content:center;border-radius:16px;overflow:hidden;background:var(--tile)}
.pvBig{display:block;max-width:100%;max-height:min(52vh,420px);object-fit:contain}
.pvTile{width:139px;min-width:0;display:flex;flex-direction:column;gap:2px}
.pvThumb{position:relative;height:139px;display:grid;place-items:center;overflow:hidden;border-radius:14px;background:var(--tile)}
.pvThumb img{width:100%;height:100%;object-fit:cover}
.pvThumb.doc{background:var(--quiet)}
.pvDoc{position:relative;display:grid;place-items:center;color:var(--muted)}
.pvDoc .ico{width:66px;height:66px;stroke-width:1.4}
.pvDoc b{position:absolute;bottom:10px;padding:1px 6px;border-radius:4px;background:var(--bad);color:#fff;font-size:.75rem;letter-spacing:.5px}
.pvTile.big .pvThumb{box-shadow:inset 0 0 0 3px var(--bad)}
.pvTile.big .pvThumb img,.pvTile.big .pvDoc{opacity:.42;filter:grayscale(.7)}
.pvBigBadge{position:absolute;inset-inline:6px;bottom:6px;display:flex;align-items:center;justify-content:center;gap:4px;padding:3px 6px;
  border-radius:8px;background:var(--bad);color:#fff;font-size:.85rem;font-weight:800;line-height:1.2}
.pvBigBadge .ico{width:16px;height:16px}
:root[data-theme="dark"] .pvBigBadge{color:#1a1f2b}
.pvName{margin-top:6px;font-size:1rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pvSize{color:var(--muted);font-size:.92rem;white-space:nowrap}
.pvSize.bad{color:var(--bad);font-weight:800}
.pvRm{min-height:44px;margin-top:6px;gap:6px;border-radius:13px;border:0;background:var(--quiet);color:var(--ink);font-size:.95rem}
.pvRm .ico{width:20px;height:20px}
.pvFrom,.pvWarn{display:flex;align-items:center;gap:8px;margin-top:-4px;font-size:1.02rem;font-weight:600}
.pvFrom{color:var(--muted)}
.pvWarn{color:var(--bad);font-weight:700}
.pvFrom .ico,.pvWarn .ico{width:22px;height:22px}
.pvCap{min-height:58px;padding:0 16px;border:2px solid var(--line);border-radius:14px;background:var(--bg);color:var(--ink);font:inherit;font-size:1.05rem}
.pvCap:focus{border-color:var(--accent);outline:none}
.pvBtns{display:flex;gap:12px;position:sticky;bottom:-22px;margin:0 -22px -22px;padding:8px 22px 22px;background:var(--panel)}   /* the two buttons always in sight */
.pvSend{flex:1;min-height:60px;gap:12px;border-radius:14px;font-size:1.15rem;font-weight:800}
.pvCancel{min-height:60px;min-width:190px;gap:10px;border-radius:14px;border:0;background:var(--quiet);color:var(--ink);font-size:1.1rem;font-weight:800}
.kq{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:26px;padding:0 7px;border-radius:7px;border:1px solid currentColor;
  font:700 .75rem/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;opacity:.8;direction:ltr}
@media (pointer:coarse){ .kq{display:none} }
@media (max-width:640px){
  .pvWin{padding:14px 16px 16px}
  .pvBtns{bottom:-16px;margin:0 -16px -16px;padding:8px 16px 16px}
  .pvItems:not(.one){display:grid;grid-template-columns:1fr 1fr}
  .pvTile{width:auto}
  .pvThumb{height:112px}
  .pvBtns{flex-direction:column}
  .pvCancel{min-width:0}
}
/* Files dragged over the chat: one big target (D-118 step 3). The chat under it takes the drop. */
.dropZone{position:absolute;inset:0;z-index:30;display:grid;place-items:center;pointer-events:none;
  background:var(--bg);background:color-mix(in srgb,var(--bg) 72%,transparent)}
.dzFrame{position:absolute;inset:16px;border:4px dashed var(--accent);border-radius:26px;background:color-mix(in srgb,var(--accent) 10%,transparent)}
.dzIn{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 20px;text-align:center}
.dzIco{width:96px;height:96px;display:grid;place-items:center;margin-bottom:6px;border-radius:48px;background:var(--accent);color:var(--accent-ink)}
.dzIco .ico{width:48px;height:48px}
.dzT{font-size:2rem;font-weight:800;line-height:1.2}
.dzS{color:var(--muted);font-size:1.15rem;font-weight:600}
.dzS b{color:var(--ink)}

/* ==================== SIGNING A COMPUTER IN WITH THE PHONE'S NUMBER (D-116 option A, drawn 2026-10-23) ==========
   Step 1: the brand, a laptop on a soft tile, «ورود به Talk روی این رایانه», four big digit boxes (one real input
   under them: typing, pasting, Persian digits, the screen reader), the green «ادامه», the shield line; beside it on
   a wide window (under it on a narrow one) the on-screen pad. Step 2: a phone in two rings, the two digits big in a
   blue box, waiting. Over the whole page, under a ring (#incoming) and a call. */
html.linkFirst #home{visibility:hidden}
.flipLtr{transform:scaleX(-1)}
[dir=rtl] .flipLtr{transform:none}
.linkScreen{position:fixed;inset:0;z-index:35;overflow-y:auto;background:var(--panel);padding:20px 24px 40px}
.linkBrand{display:flex;align-items:center;gap:10px;justify-content:flex-start;font-size:1.25rem;font-weight:800;margin-bottom:8px}
.linkBrand img{width:34px;height:34px;border-radius:9px}
.linkStep{max-width:1000px;margin:0 auto}
#linkAsk{display:flex;gap:56px;align-items:center;justify-content:center;flex-wrap:wrap;padding-top:28px}
.linkForm{flex:0 1 460px;display:flex;flex-direction:column;align-items:stretch;gap:10px}
.linkPic{width:76px;height:76px;border-radius:20px;display:grid;place-items:center;background:var(--soft);color:var(--accent);align-self:flex-start;margin-bottom:6px}
.linkPic .ico{width:42px;height:42px}
.linkForm h1{font-size:1.75rem;font-weight:800;margin:0 0 6px}
.linkLabel{font-size:1.2rem;font-weight:800}
.linkSub{margin:0 0 6px}
.linkDigits{position:relative;display:flex;gap:14px;justify-content:center;margin:4px 0 6px}
.linkBox{width:84px;height:104px;border-radius:16px;border:2px solid var(--line);background:var(--bg);display:grid;place-items:center;
  font-size:3rem;font-weight:800;color:var(--ink);pointer-events:none}
.linkBox.next{border-color:var(--accent);box-shadow:0 0 0 4px var(--soft)}
.linkDigits.focus .linkBox.next{border-color:var(--accent)}
/* The real field: over the four boxes, invisible, so a click anywhere on them types there. */
.linkNumIn{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:1px;border:0;padding:0;cursor:text;caret-color:transparent}
.linkGo{gap:12px;font-size:1.25rem;font-weight:800;min-height:64px;border-radius:16px}
.linkSafe{display:flex;align-items:center;gap:8px;margin:2px 0 0}
.linkSafe .ico{color:var(--ok)}
.linkOwnNote{margin:0}
.linkMore{display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between;margin-top:6px}
.linkMore .ghost{font-size:1.05rem;min-height:48px}
.linkFail{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;border:2px solid var(--bad);background:var(--panel);
  background:color-mix(in srgb,var(--bad) 8%,var(--panel))}
.linkFail .ico{color:var(--bad);width:28px;height:28px;flex:none;margin-top:2px}
.linkFail div{display:flex;flex-direction:column;gap:2px}
.linkFail b{font-size:1.15rem}
.linkFail.wait{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 9%,var(--panel))}
.linkFail.wait .ico{color:var(--warn)}
.linkPadBox{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px;border:1px solid var(--line);border-radius:20px;background:var(--panel)}
.linkPad{display:grid;grid-template-columns:repeat(3,84px);gap:10px}
.linkKey{min-height:72px;border-radius:14px;background:var(--bg);color:var(--ink);border:2px solid var(--line);font-size:1.7rem;font-weight:800;padding:0}
.linkKey:hover{border-color:var(--accent)}
.linkKeyOk{background:#dcf2e3;border-color:var(--call);color:var(--call);background:color-mix(in srgb,var(--call) 16%,var(--panel))}
.linkKeyOk .ico,.linkKeyDel .ico{width:30px;height:30px}
.linkPadBox .hint{margin:0;font-size:.95rem}
.linkWait{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding-top:24px}
.linkRing{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--soft);margin-bottom:8px;
  border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.linkRing > span{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--accent)}
.linkRing .ico{width:52px;height:52px}
.linkWait h1{font-size:1.75rem;font-weight:800;margin:0}
.linkSent{margin:0;color:var(--muted);font-size:1.05rem}
.linkSent b{color:var(--ink)}
.linkMatchBox{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 56px 14px;border:3px solid var(--accent);border-radius:18px;margin:8px 0 4px}
.linkMatchBox span{font-weight:800}
.linkMatch{font-size:5.2rem;line-height:1.05;font-weight:900;color:var(--accent);letter-spacing:.06em}
.linkWaiting{display:flex;align-items:center;gap:10px;margin:6px 0;font-weight:700}
.linkSpin{width:24px;height:24px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:linkSpin 1s linear infinite}
@keyframes linkSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .linkSpin{animation-duration:3s} }
button.linkBack{min-width:170px;background:var(--quiet);border-color:transparent;color:var(--ink)}
@media (max-width:760px){
  .linkScreen{padding:16px 16px 32px}
  #linkAsk{gap:20px;padding-top:8px}
  .linkForm{flex-basis:100%}
  .linkBox{width:min(22vw,78px);height:min(26vw,94px);font-size:2.5rem}
  .linkPad{grid-template-columns:repeat(3,minmax(64px,84px))}
  .linkMatch{font-size:4.2rem}
  .linkMatchBox{padding:14px 32px 12px}
}
/* Step 5 on top of the contacts: the green line, then «خوش آمدید، <name>» and the number, as drawn. */
.linkWelcome{display:flex;flex-direction:column;gap:10px;margin:6px 0 14px}
.linkOk{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:10px 14px;border-radius:12px;font-weight:700;
  background:#dcf2e3;color:#14532d}
:root[data-theme="dark"] .linkOk{background:#173a26;color:#bbf7d0}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .linkOk{background:#173a26;color:#bbf7d0} }
.linkHello{display:flex;align-items:center;gap:14px;margin:0}
.linkHello h2{margin:0;font-size:1.3rem}
.linkHello .hint{margin:2px 0 0}
.linkAvatar{width:60px;height:60px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:1.6rem;font-weight:800;color:#fff;background:var(--accent)}
/* In the number card, under light/dark (D-114): the way in for a browser. */
.linkLine{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);width:100%}
.linkUse{gap:10px;min-height:var(--tap)}
.linkLine .hint{margin:0}
.linkedNote{display:flex;align-items:center;gap:6px;justify-content:center}
.linkedNote .ico{color:var(--ok)}

/* ==================== THE FILE BUBBLE AND THE READER (D-119, option A, drawn 2026-10-24) ====================
   A .txt/.log/.csv/.json, .md or .pdf bubble: its kind on a coloured tag, the name at 18 px, kind · size, then two
   big buttons «باز کردن» (the reader) and «ذخیره». Too big to show: no «باز کردن», the red line instead. */
.fileCard{display:flex;flex-direction:column;gap:10px;min-width:min(280px,64vw);padding:4px 0 2px}
.fileCard .fileMsg{min-width:0;padding:0}
.fileTag{flex:0 0 46px;width:46px;height:54px;border-radius:9px;position:relative;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:6px;background:var(--bg);border:2px solid var(--line);font:800 .7rem/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;direction:ltr}
.fileTag i{font-style:normal;padding:3px 5px;border-radius:5px;background:#475569;color:#fff}
.fileTag.k-pdf i{background:#d64545}
.fileTag.k-md i{background:#2558d6}
.fileCard .fileInfo b{font-size:1.05rem}
.fileBtns{display:flex;gap:8px}
.fileOpen{flex:1.4;min-height:var(--tap);border-radius:14px;gap:10px;font-size:1.05rem;font-weight:800}
.fileSave{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 16px;border-radius:14px;
  background:var(--quiet);color:var(--ink);font-weight:800;text-decoration:none}
.fileSave:focus-visible,.fileOpen:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.fileBig{display:flex;align-items:center;gap:6px;margin:0;color:var(--bad);font-weight:700;font-size:.95rem}
.fileBig .ico{width:20px;height:20px}
/* The reader: a large panel over the dimmed chat (web and the desktop apps), full screen on a narrow window. */
.readerBack{position:fixed;inset:0;z-index:54;display:grid;place-items:center;padding:20px;background:var(--frost)}
.reader{width:min(1180px,100%);height:min(900px,calc(100vh - 40px));height:min(900px,calc(100dvh - 40px));display:flex;flex-direction:column;overflow:hidden;
  background:var(--panel);color:var(--ink);border-radius:22px;box-shadow:0 18px 60px rgba(0,0,0,.35)}
.rdTop{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line)}
.rdClose{min-height:var(--tap);gap:8px;border-radius:14px;background:var(--quiet);color:var(--ink);border:0;font-weight:800;padding:0 14px}
.rdClose kbd{font:700 .8rem/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;padding:4px 7px;border:1.5px solid currentColor;border-radius:7px;opacity:.8;direction:ltr}
@media (pointer:coarse){ .rdClose kbd{display:none} }
.rdTag{flex:none}
.rdTitle{display:flex;flex-direction:column;min-width:0;flex:1}
.rdTitle b{font-size:1.3rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rdTitle small{color:var(--muted);font-size:.98rem}
.rdTitle small em{font-style:normal;font-weight:800;color:var(--ink)}
.rdActs{display:flex;gap:10px}
.rdBtn{min-height:var(--tap);gap:8px;border-radius:14px;background:var(--quiet);color:var(--ink);border:2px solid transparent;font-weight:800;padding:0 16px}
.rdBtn:hover{border-color:var(--line)}
.rdBtn[aria-pressed="true"]{border-color:var(--accent)}
.rdBar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 18px;background:var(--bg);border-bottom:1px solid var(--line)}
.rdGrow{flex:1}
.rdPlain{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);padding:0 16px;border-radius:14px;border:2px solid var(--line);
  background:var(--panel);font-weight:800;cursor:pointer}
.rdPlain:focus-within{border-color:var(--accent)}
.rdPage{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rdPage > b{font-size:1.15rem;padding-inline-end:12px;border-inline-end:1px solid var(--line)}
.rdPage label{color:var(--muted);font-weight:700}
.rdPage input{width:76px;min-height:var(--tap);border-radius:14px;border:2px solid var(--accent);background:var(--panel);color:var(--ink);
  text-align:center;font:inherit;font-size:1.2rem;font-weight:800}
.rdZoom{min-width:64px;text-align:center;font-size:1.1rem}
.rdBody{flex:1;overflow:auto;position:relative;outline:none}
.rdBody:focus-visible{box-shadow:inset 0 0 0 3px var(--accent)}
/* Words: one column of 740 px, 21 px by default (the reader's own size, remembered), each paragraph in its own
   direction, never sideways. */
.rdText{max-width:740px;margin:0 auto;padding:22px 22px 60px;font-size:var(--rdSize,21px);line-height:1.75;
  font-family:Vazirmatn,"Noto Naskh Arabic","Noto Sans Arabic",Tahoma,-apple-system,"Segoe UI",sans-serif}
.rdText .rdLine{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;min-height:1em}
.rdDoc.msg{max-width:740px;margin:0 auto;padding:22px 22px 60px;background:none;border:0;border-radius:0;font-size:var(--rdSize,21px);align-self:auto}
.rdDoc.msg .body{font-size:1em;line-height:1.7}
.rdNote{max-width:560px;margin:60px auto;padding:0 20px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.rdNote .rdLock{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:#fdf1d8;color:#b45309}
.rdNote .rdLock .ico{width:44px;height:44px}
.rdNote h2{margin:0;font-size:1.45rem}
.rdNote p{margin:0;color:var(--muted)}
.rdNote .big{max-width:420px}
.rdLoading{display:flex;align-items:center;justify-content:center;gap:10px;padding:60px 0;color:var(--muted);font-weight:700}
/* A PDF: its pages one under another on grey, fitting the width at 100 %; «صفحهٔ ۳ از ۱۲» floats over them. */
.rdPdf{background:#dfe3ea;min-height:100%;padding:18px 18px 60px;display:flex;flex-direction:column;align-items:center;gap:16px}
:root[data-theme="dark"] .rdPdf{background:#0b0e15}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .rdPdf{background:#0b0e15} }
.rdPg{position:relative;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.18);flex:none}
.rdPg canvas{display:block;width:100%;height:100%}
.rdChip{position:sticky;top:10px;z-index:2;align-self:center;margin-bottom:-46px;padding:6px 16px;border-radius:999px;background:#1e2a44;color:#fff;
  font-weight:800;opacity:.92;pointer-events:none}
@media (max-width:760px){
  .readerBack{padding:0}
  .reader{width:100%;height:100vh;height:100dvh;border-radius:0}   /* vh first: Chrome < 108 and Safari < 15.4 drop dvh */
  .rdTop{flex-wrap:wrap;gap:10px;padding:10px 12px}
  .rdActs{width:100%}
  .rdActs .rdBtn{flex:1}
  .rdBar{padding:8px 12px}
  .rdText,.rdDoc.msg{padding:16px 16px 48px}
}
.reader{position:relative}
.rdToast{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;margin:0;padding:10px 18px;border-radius:12px;
  background:#1e2a44;color:#fff;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.25);max-width:calc(100% - 32px)}
.fwdMore{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;padding:6px 0}
.fwdMore small{color:var(--muted);font-weight:500}

/* «به دستگاه‌هایم» (R204 + R215, D-123; app.js clipPaint … clipSentShow). The «افزودن» sheet's first row - highlighted,
   a soft accent fill with a dashed accent edge and «تازه» (the storyboard's step 7); a held message's button (beside
   its «پاسخ»); the card that shows what was copied, faded red when it is too big; and the corner
   at the top (the start side: right in Persian) - the notice with its draining bar, the "while off" list, «فرستاده شد».
   Under the ring screen (#incoming 72), over the sheets; full width less 16px a side on a phone. */
.edMine{min-height:70px;justify-content:flex-start;gap:12px;padding:8px 12px;border-radius:16px;border:2px dashed var(--accent);
  background:var(--soft);color:var(--ink);text-align:start;line-height:1.3}
.edMine .ti{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:var(--accent);color:var(--accent-ink)}
.edMine .ti .ico{width:24px;height:24px}
.edMineWords{flex:1;min-width:0;display:flex;flex-direction:column}
.edMineWords b{font-size:1.1rem;font-weight:800}
.edMineWords small{color:var(--muted);font-size:.95rem;font-weight:600}
.clipNew{flex:none;padding:2px 10px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:.85rem;font-weight:800}
.msg .mineBtn{inset-inline-start:calc(100% + 48px)}   /* beside «پاسخ», outward: the column is full, and over it a
   top message's button would sit under the chat's header */
.msg.mine .mineBtn{inset-inline-start:auto;inset-inline-end:calc(100% + 48px)}
.msg .mineBtn .clipDot{position:absolute;top:4px;inset-inline-end:4px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.msg .mineBtn.tooBig{opacity:.5;color:var(--bad)}
.msg:hover .mineBtn.tooBig,.msg:focus-within .mineBtn.tooBig,.msg.held .mineBtn.tooBig{opacity:.55}
.clipSendBack{z-index:59}
.clipSendCard{display:flex;flex-direction:column;gap:10px;margin:0}
.clipSendCard > p{margin:0}
.clipPreview{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--bg)}
.clipPreview.bad{opacity:.75;border-color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,var(--panel))}
.clipPreview .clipText{flex:1}
.clipBad{display:flex;flex-direction:column;gap:2px;color:var(--bad);font-size:.95rem;line-height:1.6}
.clipCorner{position:fixed;top:12px;inset-inline-start:16px;z-index:66;width:min(380px,calc(100% - 32px));
  display:flex;flex-direction:column;gap:10px;pointer-events:none}
.clipNote{pointer-events:auto;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:18px;
  padding:12px 14px;box-shadow:0 12px 36px rgba(0,0,0,.22);display:flex;flex-direction:column;gap:8px;overflow:hidden;position:relative}
.clipList{max-height:min(70vh,560px);overflow-y:auto}
.clipHead{display:flex;align-items:center;gap:8px}
.clipTitle{flex:1;min-width:0;font-size:1.05rem;font-weight:800}
.clipOk{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:#fff;font-weight:900}
.clipX{flex:none;min-height:40px;width:40px;padding:0;border-radius:20px;background:transparent;color:var(--muted);border-color:var(--line);font-size:1.3rem}
.clipBody{display:flex;align-items:center;gap:10px;min-width:0}
.clipText{margin:0;white-space:pre-line;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:var(--lines,2);line-clamp:var(--lines,2);overflow:hidden}
.clipThumb{flex:none;width:56px;height:56px;object-fit:cover;border-radius:10px;background:var(--tile)}
.clipInfo{display:flex;flex-direction:column;min-width:0;color:var(--muted)}
.clipInfo b{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clipKeys,.clipSub,.clipFoot{margin:0;color:var(--muted);font-size:.95rem}
.clipBtns{display:flex;gap:8px;flex-wrap:wrap}
.clipBtns .clipBtn{flex:1 1 auto;min-height:48px}
.clipBtns .clipBtn + .clipBtn{background:transparent;color:var(--ink);border-color:var(--line)}
.clipBar{position:absolute;inset-inline:0;bottom:0;height:4px;background:var(--line)}
.clipBar i{display:block;height:100%;width:100%;background:var(--accent)}
.clipBar.run i{animation:clipDrain linear forwards}
@keyframes clipDrain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
[dir="rtl"] .clipBar i{transform-origin:right}
[dir="ltr"] .clipBar i{transform-origin:left}
@media (prefers-reduced-motion:reduce){.clipBar.run i{animation:none}}
.clipRows{display:flex;flex-direction:column}
.clipRow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 10px;padding:10px 0;border-top:1px solid var(--line)}
.clipAt{grid-column:1 / -1;color:var(--muted)}
/* In the list each row's buttons sit at its end, quiet (as the storyboard's step 9): the list is to look through. */
.clipRow .clipBtns{flex-wrap:nowrap}
.clipRow .clipBtn{min-height:44px;padding:0 14px;background:transparent;color:var(--accent);border-color:var(--accent)}
.clipDevs{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.clipDev{color:var(--muted);font-weight:700}
.clipDev.got{align-self:flex-start;padding:2px 12px;border-radius:999px;color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,var(--panel))}
.clipSent.bad{border-color:var(--bad)}
.clipSent.bad .clipTitle{color:var(--bad)}

/* ---------- families (R205, D-125 phase 1; next/families boards 2 and 3) ----------
   The door (/unlock/), a family's link (/f/) and «خانواده» in the app (family.js): one idea per screen, 56 px fields,
   the 560 px column, the phone's soft tiles. Every class starts with "fam". */
.famPage{display:flex;flex-direction:column;gap:14px;min-height:100vh;min-height:100dvh}
.famScreen{display:flex;flex-direction:column;gap:14px;flex:1}
.famScreen h1{font-size:1.6rem;margin:0}
.famCenter{text-align:center}
.famGrow{flex:1;min-height:12px}
.famStack{display:flex;flex-direction:column;gap:12px}
.famStack>*{margin-top:0}
.famStack label{margin:0 0 6px}
.famBrand{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:1.3rem;margin-top:16px}
.famBrand img{border-radius:12px}
.famHero{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.famHero b{font-size:1.45rem;font-weight:900;line-height:1.35}
.famHero small{color:var(--muted);font-size:.95rem;font-weight:600}
.famIco{width:64px;height:64px;border-radius:20px;background:var(--soft);color:var(--accent);display:grid;place-items:center;margin-bottom:4px}
.famIco .ico{width:34px;height:34px}
.famIcoBad{background:color-mix(in srgb,var(--bad) 14%,var(--panel));color:var(--bad)}
.famIcoOk{background:color-mix(in srgb,var(--ok) 16%,var(--panel));color:var(--ok)}
.famBody{font-size:1.05rem;line-height:1.7}
.famBody p{margin:0}
.famBody p+p{margin-top:12px}
.famLabel{margin:0;font-weight:700;color:var(--muted);font-size:.95rem}
.famSteps{display:flex;gap:6px;justify-content:center}
.famSteps i{width:34px;height:6px;border-radius:3px;background:var(--line)}
.famSteps i.on{background:var(--accent)}
/* A password with its eye inside the field. */
.famPass{position:relative}
.famPass input{padding-inline-end:56px}
.famEye{position:absolute;inset-inline-end:4px;top:50%;transform:translateY(-50%);width:48px;min-width:48px;min-height:48px;padding:0;
  background:transparent;color:var(--muted);border-color:transparent}
.famEye[aria-pressed="true"]{color:var(--accent)}
input.famBigNum{font-size:1.8rem;text-align:center;letter-spacing:.2em;font-weight:800;font-variant-numeric:tabular-nums}
input.famBad,.famBad{border-color:var(--bad)!important}
.famLock{display:flex;align-items:flex-start;gap:10px;background:var(--soft);border-radius:12px;padding:10px 12px;margin:0;font-size:.92rem;line-height:1.55}
.famLock .ico{color:var(--accent);margin-top:2px}
/* The founder's number (board 2 step 3). */
.famCode{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--panel);border:2px solid var(--accent);border-radius:14px;padding:12px;text-align:center}
.famCode>span{font-weight:700}
.famCode strong{font-size:2.6rem;line-height:1.1;letter-spacing:.12em;color:var(--accent);font-weight:800;font-variant-numeric:tabular-nums}
.famCode small{color:var(--muted);font-size:.88rem}
/* A tile: the install files, «دانلود برنامه‌ها», a remembered family. */
.famTiles{display:flex;flex-direction:column;gap:10px}
.famTile{display:flex;align-items:center;gap:12px;min-height:var(--tap);border:2px solid var(--line);border-radius:12px;padding:6px 14px;
  background:var(--panel);color:var(--ink);font-weight:700;text-align:start;width:100%}
button.famTile{font:inherit;font-weight:700;justify-content:flex-start}
.famTile>.ico:first-child{color:var(--accent)}
.famTileText{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.famTileText small{font-weight:600;color:var(--muted);font-size:.9rem}
.famTile .ghost{min-height:44px;padding:0 6px}
a.famBtn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:64px;border-radius:12px;background:var(--accent);color:var(--accent-ink);font-size:1.15rem}
a.famBtn img{border-radius:8px}
.famTwo{display:flex;flex-direction:column;gap:12px}
@media (min-width:640px){ .famTwo{flex-direction:row} .famTwo>*{flex:1 1 0;min-width:0} }
.famChev{color:var(--muted);transform:scaleX(-1)}
[dir=rtl] .famChev{transform:none}
.famWarn{color:var(--warn)}
.famMsg{background:var(--bg);border:1px dashed var(--muted);border-radius:12px;padding:12px 14px;line-height:1.7;white-space:pre-line;overflow-wrap:anywhere}

/* «خانواده» in the app: the row (board 3 step 1), the screen (step 2; a table at a computer's width, step 10). */
.famRow{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:8px 12px;border-radius:14px;background:var(--panel);
  border:1px solid var(--line);color:var(--ink);font-weight:400;text-align:start;justify-content:flex-start}
.famSettings{margin:10px 0 0}
.famRowIco{width:42px;height:42px;border-radius:13px;background:var(--soft);color:var(--accent);display:grid;place-items:center;flex:none}
.famRowIco .ico{width:22px;height:22px}
.famRowText b{font-size:1.05rem;font-weight:800;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.famFoot{display:none;margin-top:8px;background:var(--soft)}
/* At a computer's width «خانواده» is the foot of the list only (board 3 step 10): not the number card's row too. */
@media (min-width:761px){ .famFoot:not([hidden]){display:flex} .famSettings,.famRowNote{display:none} }
.famBar{width:4px;align-self:stretch;border-radius:2px;background:var(--c,var(--accent));flex:none;margin:4px 0}
.famView{position:fixed;inset:0;z-index:41;background:var(--bg);display:flex;flex-direction:column;overflow-y:auto;padding-bottom:env(safe-area-inset-bottom)}
.famHead{display:flex;align-items:center;gap:8px;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));background:var(--bar);color:var(--bar-ink);position:sticky;top:0;z-index:1}
.famHead h2{margin:0;font-size:1.2rem;font-weight:800}
.famHead .iconBtn{color:var(--bar-ink)}
.famMain{width:100%;max-width:560px;margin:0 auto;padding:16px 16px 40px;display:flex;flex-direction:column;gap:12px}
.famHeroIn{padding:6px 0 4px}
.famActs{display:flex;flex-direction:column;gap:10px}
.famActs .famWide{display:none}
.famGroup{padding:6px 0;margin:0}
.famGh{font-size:.95rem;font-weight:800;color:var(--muted);margin:6px 16px 4px}
.famGroup .famRow{border:0;border-radius:0;background:transparent;border-top:1px solid var(--line)}
.famGroup .famGh+.famRow,.famGroup .famRow:first-child{border-top:0}
.famPerson{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:8px 14px;border:0;border-top:1px solid var(--line);
  border-radius:0;background:transparent;color:var(--ink);font-weight:400;text-align:start;justify-content:flex-start}
.famGh+.famPerson{border-top:0}
.famRowText{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.famRowText small{color:var(--muted);font-size:.88rem;font-weight:600}
.famChip{display:inline-flex;align-items:center;border-radius:9px;padding:0 8px;font-size:.85rem;font-weight:800;background:var(--quiet);color:var(--muted)}
.famChipAdmin{background:var(--soft);color:var(--accent)}
.famChipWait{background:color-mix(in srgb,var(--warn) 16%,var(--panel));color:var(--warn)}
.famTable{display:none;width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.famTable th{background:var(--quiet);color:var(--muted);font-weight:700;text-align:start;padding:8px 12px;font-size:.9rem}
.famTable td{padding:8px 12px;border-top:1px solid var(--line);vertical-align:middle}
.famTable td b{margin-inline-end:6px}
.famTable .famNum{font-weight:800;font-variant-numeric:tabular-nums}
button.famDanger{color:var(--bad);min-height:44px}
@media (min-width:761px){
  .famMain{max-width:760px}
  .famActs{flex-direction:row}
  .famActs>*{flex:1 1 0}
  .famActs .famWide{display:flex}
  /* The door is the action button beside «دعوت» here (step 10): not a second row under «فقط مدیرها». */
  .famAdminOnly .famRow,.famAdminOnly.famQuiet{display:none}
  .famList{display:none}
  .famTable{display:table}
}
.famForm .famLabel{margin-top:4px}
.famSeg{display:flex;background:var(--quiet);border-radius:12px;padding:4px;gap:4px}
.famSegBtn{flex:1 1 0;min-height:48px;background:transparent;color:var(--muted);border-color:transparent}
.famSegBtn[aria-checked="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.famSheet .sheet>*{margin:0}
.famSheet .sheet h2{margin:0}
/* Every admin is told (board 3 step 7): a banner over the page for families.joinBannerSeconds. */
.famBanner{position:fixed;top:max(10px,env(safe-area-inset-top));inset-inline:10px;margin:0 auto;max-width:540px;z-index:60;background:var(--panel);
  border:1px solid var(--line);border-radius:22px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:14px;display:flex;flex-direction:column;gap:10px}
.famBannerHead{display:flex;gap:10px;align-items:center}
.famBanner .row>button{flex:1 1 0;min-height:50px}
.famOkBtn{background:var(--accent);color:var(--accent-ink)}
.famRmBtn{background:color-mix(in srgb,var(--bad) 14%,var(--panel));color:var(--bad)}
.famBanner .hint{margin:0}
.famWelcomeCard{border-color:color-mix(in srgb,var(--ok) 45%,var(--line));background:color-mix(in srgb,var(--ok) 12%,var(--panel));color:var(--ok)}
.famWelcomeCard b{display:flex;align-items:center;gap:8px;font-size:1.15rem}
.famWelcomeCard p{margin:4px 0 0;font-weight:600}
.famWelcomeCard button{margin-top:6px;color:var(--ok)}
.famNoNumber .famPage{min-height:auto}
/* ---------- the signed address list in the app (R207, R208; D-124; app.js part 36) ----------
   Nothing here shows while the list has one name. The moved-away screen is over everything - the kid tablet's
   screens (#kid, z-index 80) too: a browser whose id was handed over must not go on looking like Talk. */
/* Opaque: the old page behind it is no longer this device's, nothing of it should look pressable. */
.movedAway{z-index:90;background:var(--bg)}
.movedHost{font-weight:700;font-size:1.05rem;overflow-wrap:anywhere}
/* An iPhone Home Screen app on a name that is no longer first: the three steps, big. */
.addrHome p{margin:0 0 8px;font-weight:700}
.addrHome ol{margin:0;padding-inline-start:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.addrHome li{line-height:1.6}
.addrHome #addrHomeStep1{overflow-wrap:anywhere}
.addrWalkingNote{background:var(--bar);color:var(--bar-ink)}
html.kidMode #addrWalkingNote,html.kidMode #addrHome{display:none!important}
/* ---------- «نشانی‌های اتصال», the typed addresses' sheet (R224 OPTION A, R226; app.js part 37) ----------
   Mockup 02: a bottom sheet at a phone's width; mockup 04: a centred dialog from 720 px (a computer, and the Mac,
   Windows and Linux apps), the two «خودکار» boxes side by side and the field beside «افزودن». Light and dark from
   01-base.css's tokens; statuses are words (the colour only repeats them); targets 48-56 px; an address is never
   broken - a long one scrolls inside its line, never the page (no horizontal scroll at 390 px). */
.addrTypedRow{margin:10px 0 0}
html.kidMode #addrTypedRow{display:none!important}   /* the kid tablet: no settings, no row (part 37 too) */
.addrSheetBack{position:fixed;inset:0;z-index:50;background:var(--frost);display:flex;align-items:flex-end;justify-content:center}
.addrSheet{background:var(--panel);color:var(--ink);width:100%;max-height:92vh;max-height:92dvh;overflow-y:auto;overflow-x:hidden;
  border-radius:22px 22px 0 0;padding:10px 16px max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;
  box-shadow:0 -10px 30px rgba(0,0,0,.25)}
.addrGrab{align-self:center;width:44px;height:5px;border-radius:3px;background:var(--line);flex:none}
.addrSheet h2{margin:0;font-size:1.4rem;font-weight:800}
.addrSheet h2:focus{outline:none}
.addrSheet h3{margin:0;font-size:1.1rem;font-weight:800}
.addrSheet p{margin:0}
.addrAbout,.addrYours p{color:var(--muted);line-height:1.7}
.addrYours{display:flex;flex-direction:column;gap:4px}
.addrList{list-style:none;margin:0;padding:0 12px;border:1px solid var(--line);border-radius:16px}
/* A phone's width: the address and the buttons on one line (a middle row has ↑, ↓ and 🗑: three 48 px targets - the
   address scrolls inside what is left); the status words, body size, on a line of their own under them, the row's
   whole width (the stage-1 review: mockups 02 and 07 - the status is what an older reader reads first). A row whose
   «حذف» is asked: the question on that line, «بله، حذف شود» / «نه، بماند» side by side under it. */
.addrItem{display:grid;grid-template-columns:34px minmax(0,1fr) auto;grid-template-areas:"num host btns" "num pill pill";
  gap:8px 10px;align-items:center;padding:12px 0}
.addrItem.addrAsking{grid-template-areas:"num host host" "num pill pill" "num btns btns"}
.addrAsking .addrBtns{justify-content:stretch}
.addrAsking button.addrBtnWord{flex:1}
.addrNum{grid-area:num}
.addrMain{display:contents}
.addrMain .addrHost{grid-area:host;justify-self:start}
.addrMain .addrPill{grid-area:pill;justify-self:start}
.addrItem+.addrItem{border-top:1px solid var(--line)}
.addrNum{flex:none;width:34px;height:34px;border-radius:50%;background:var(--soft);color:var(--accent);display:grid;place-items:center;font-weight:800}
.addrHost{display:block;max-width:100%;white-space:nowrap;overflow-x:auto;font-weight:800;font-size:1.1rem;unicode-bidi:isolate}
.addrPill{display:inline-flex;align-items:center;gap:4px;border-radius:14px;padding:4px 12px;font-size:1rem;font-weight:700;line-height:1.55;
  background:var(--quiet);color:var(--muted)}
.addrAsk{background:color-mix(in srgb,var(--bad) 14%,var(--panel));color:var(--ink)}
.addrPill .ico{width:16px;height:16px;vertical-align:0;stroke-width:3}
.addrPill-in-use{background:var(--accent);color:var(--accent-ink)}
.addrPill-ok{background:color-mix(in srgb,var(--ok) 16%,var(--panel));color:var(--ok)}
.addrPill-not-talk{background:color-mix(in srgb,var(--bad) 14%,var(--panel));color:var(--bad)}
.addrBtns{grid-area:btns;display:flex;gap:6px;justify-content:flex-end}
button.addrBtn{width:48px;min-height:48px;padding:0;background:transparent;border-color:var(--line);color:var(--ink)}
.addrBtn-up .ico{transform:rotate(90deg)}
.addrBtn-down .ico{transform:rotate(-90deg)}
button.addrBtn-remove{color:var(--bad)}
.addrBtns button.addrBtnWord{width:auto;padding:0 16px;font-size:1rem;font-weight:800;white-space:nowrap}
.addrBtns button.addrBtn-remove-yes{background:var(--bad);border-color:var(--bad);color:#fff}
.addrEmpty{color:var(--muted);text-align:center;padding:14px;border:1px dashed var(--line);border-radius:16px}
.addrAdd{display:flex;flex-direction:column;gap:10px}
.addrAdd input[type=text]{text-align:left;font-size:1.1rem}
.addrAdd input::placeholder{text-align:right}
[dir=ltr] .addrAdd input::placeholder{text-align:left}
.addrAdd button{min-height:56px;font-size:1.1rem}
.addrWhy{color:var(--bad);font-weight:700;line-height:1.6}
.addrWhy.addrNote{color:var(--ink)}   /* what an add did (a full list made room) - said, not an error */
.addrAuto{display:flex;flex-direction:column;gap:10px}
.addrAutoBoxes{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;padding:0 14px}
.addrAutoBox{display:flex;align-items:flex-start;gap:12px;padding:12px 0;min-width:0}
.addrAutoBox+.addrAutoBox{border-top:1px solid var(--line)}
.addrAutoBox>.ico{color:var(--accent);margin-top:2px}
.addrAutoBox>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.addrAutoBox b{font-size:1.05rem;font-weight:800}
.addrAutoBox small{color:var(--muted);font-size:.92rem}
.addrFamNames{color:var(--muted);font-weight:700;display:flex;flex-wrap:wrap;gap:0 6px}
.addrFamNames .addrHost{display:inline;font-size:1rem;color:var(--muted)}
button.addrClose{width:100%;min-height:56px;background:var(--quiet);border-color:transparent}
@media (min-width:720px){
  .addrSheetBack{align-items:center;padding:24px}
  .addrSheet{max-width:760px;border-radius:22px;padding:28px 32px;gap:14px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
  .addrGrab{display:none}
  .addrSheet h2{font-size:1.6rem}
  .addrYours{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
  .addrItem,.addrItem.addrAsking{display:flex;gap:12px}
  .addrMain{flex:1;min-width:0;display:flex;align-items:center;gap:12px}
  .addrBtns{flex:none;gap:8px}
  button.addrBtn{width:52px;min-height:52px}
  .addrAdd{flex-direction:row}
  .addrAdd input[type=text]{flex:1}
  .addrAdd button{flex:none;padding:0 28px}
  .addrAutoBoxes{flex-direction:row;gap:16px;border:0;padding:0}
  .addrAutoBox{flex:1 1 0;border:1px solid var(--line);border-radius:16px;padding:16px}
  .addrAutoBox+.addrAutoBox{border-top:1px solid var(--line)}
  button.addrClose{width:auto;align-self:flex-end;padding:0 28px}
}