/* Ding Web: Chats and Home (chat-*.js). Loaded after styles.css by app.js.
   Colours only through variables: the theme's (styles.css), and here the
   gift papers, scratch covers and how it rings on Home, which are the same
   in every theme. */

:root {
  --scrim: rgba(0, 0, 0, 0.52);
  --on-scrim: #FFFFFF;
  --flash: rgba(120, 140, 170, 0.22);
  /* How it rings on Home (DingDelivery.homeTint): Quiet's violet, Urgent's
     orange, Alarm's red; Normal, Gift and Scratch are ink. */
  --ring-quiet: #665CE6;     --ring-urgent: #FF9500;     --ring-alarm: #FF3B30;
  /* Gift papers (Shared/GiftWrap.swift): the paper, its ribbon, words on it. */
  --paper-ruby: #C2263F;     --ribbon-ruby: #F4E9DA;     --ink-ruby: #FFFFFF;
  --paper-ocean: #2459C7;    --ribbon-ocean: #F4E9DA;    --ink-ocean: #FFFFFF;
  --paper-gold: #E7B13C;     --ribbon-gold: #7A1F2B;     --ink-gold: #3B2A00;
  --paper-mint: #26805F;     --ribbon-mint: #F2C4CE;     --ink-mint: #FFFFFF;
  --paper-midnight: #1F2350; --ribbon-midnight: #E7B13C; --ink-midnight: #FFFFFF;
  --paper-blush: #EFA6B9;    --ribbon-blush: #FFFFFF;    --ink-blush: #4A1A2C;
  --paper-kraft: #B98D5E;    --ribbon-kraft: #FFFFFF;    --ink-kraft: #2E1E0E;
  /* Scratch covers (Shared/ScratchCover.swift). */
  --cover-ink-surface: #2E3237;    --cover-ink-light: #4A4F56;    --cover-ink-deep: #1C1F23;    --cover-ink-ink: #FFFFFF;
  --cover-silver-surface: #C3C7CD; --cover-silver-light: #ECEEF1; --cover-silver-deep: #9DA2AA; --cover-silver-ink: #3E434A;
  --cover-gold-surface: #D7B25E;   --cover-gold-light: #F5E2A8;   --cover-gold-deep: #AE8634;   --cover-gold-ink: #4E3A0E;
  --cover-rose-surface: #DDAA9C;   --cover-rose-light: #F6D9CF;   --cover-rose-deep: #B98272;   --cover-rose-ink: #5C2E25;
}

/* ── Menus (chat-menu.js) ── */
.ding-menu {
  position: fixed; z-index: 60; min-width: 220px; max-width: 320px; overflow-y: auto;
  padding: 6px; border-radius: 18px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
  border: 1px solid var(--glass-edge); box-shadow: var(--shadow);
  animation: menu-in 0.14s ease-out;
}
@keyframes menu-in { from { opacity: 0; transform: scale(0.97); } }
.ding-menu .menu-head { padding: 8px 10px 6px; display: flex; flex-direction: column; gap: 2px; }
.ding-menu .menu-head b { font-size: 14px; }
.ding-menu .menu-head span { font-size: 12px; color: var(--steel); line-height: 1.35; }
.ding-menu .menu-line { height: 1px; background: var(--hair); margin: 5px 6px; }
.ding-menu .menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 6px 10px 6px 4px;
  border: 0; border-radius: 11px; background: none; color: var(--ink); text-align: left; cursor: pointer; font-size: 14px;
}
.ding-menu .menu-item:hover, .ding-menu .menu-item:focus-visible { background: var(--soft); outline: none; }
.ding-menu .menu-item.danger { color: var(--danger); }
.ding-menu .menu-item:disabled { opacity: 0.4; cursor: default; }
.ding-menu .menu-tick { width: 20px; flex: none; display: grid; place-items: center; }
.ding-menu .menu-tick svg { width: 16px; height: 16px; stroke-width: 2.2; }
.ding-menu .menu-words { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ding-menu .menu-label { font-weight: 500; }
.ding-menu .menu-detail { font-size: 12px; color: var(--steel); }
.ding-menu .menu-icon { width: 18px; height: 18px; flex: none; color: var(--steel); display: grid; place-items: center; }
.ding-menu .menu-item.danger .menu-icon { color: var(--danger); }
.ding-menu .menu-icon svg { width: 17px; height: 17px; }
.ding-menu .menu-emoji { display: flex; gap: 2px; padding: 4px; justify-content: space-between; }
.ding-menu .menu-emoji button {
  width: 38px; height: 38px; border-radius: 999px; border: 0; background: none; font-size: 22px; cursor: pointer;
  display: grid; place-items: center; transition: transform 0.12s ease;
}
.ding-menu .menu-emoji button:hover { background: var(--soft); transform: scale(1.12); }
.ding-menu .menu-emoji button.on { background: var(--ink); }
.ding-menu .menu-html { padding: 4px 6px 8px; }
.ding-menu .wrap-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); margin: 6px 2px 6px; }
.ding-menu .paper-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ding-menu .paper-pick { width: 30px; height: 30px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); }
.ding-menu .paper-pick.on { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--glass-strong); }
.ding-menu .reveal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ding-menu .reveal-pick { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--hair); background: none; color: var(--ink); cursor: pointer; font-size: 13px; }
.ding-menu .reveal-pick.on { background: var(--ink); color: var(--on-ink); border-color: transparent; }
.ding-menu .swatch { width: 16px; height: 16px; border-radius: 999px; display: inline-block; background: var(--cover-surface); box-shadow: inset 0 0 0 1px var(--hair); }
.ding-menu .when-pick { display: flex; gap: 6px; align-items: center; }
.ding-menu .when-pick .field { flex: 1; min-width: 0; }

.paper-ruby { --paper: var(--paper-ruby); --ribbon: var(--ribbon-ruby); --paper-ink: var(--ink-ruby); }
.paper-ocean { --paper: var(--paper-ocean); --ribbon: var(--ribbon-ocean); --paper-ink: var(--ink-ocean); }
.paper-gold { --paper: var(--paper-gold); --ribbon: var(--ribbon-gold); --paper-ink: var(--ink-gold); }
.paper-mint { --paper: var(--paper-mint); --ribbon: var(--ribbon-mint); --paper-ink: var(--ink-mint); }
.paper-midnight { --paper: var(--paper-midnight); --ribbon: var(--ribbon-midnight); --paper-ink: var(--ink-midnight); }
.paper-blush { --paper: var(--paper-blush); --ribbon: var(--ribbon-blush); --paper-ink: var(--ink-blush); }
.paper-kraft { --paper: var(--paper-kraft); --ribbon: var(--ribbon-kraft); --paper-ink: var(--ink-kraft); }
.cover-ink { --cover-surface: var(--cover-ink-surface); --cover-light: var(--cover-ink-light); --cover-deep: var(--cover-ink-deep); --cover-words: var(--cover-ink-ink); }
.cover-silver { --cover-surface: var(--cover-silver-surface); --cover-light: var(--cover-silver-light); --cover-deep: var(--cover-silver-deep); --cover-words: var(--cover-silver-ink); }
.cover-gold { --cover-surface: var(--cover-gold-surface); --cover-light: var(--cover-gold-light); --cover-deep: var(--cover-gold-deep); --cover-words: var(--cover-gold-ink); }
.cover-rose { --cover-surface: var(--cover-rose-surface); --cover-light: var(--cover-rose-light); --cover-deep: var(--cover-rose-deep); --cover-words: var(--cover-rose-ink); }

/* ── Chats (laid out by frame.css): the list's head. ── */
#view-chats .chat-list { padding: 0 0 6px; }
.chat-list .list-top {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px 10px; background: var(--glass-strong);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid var(--hair);
}
.chat-list .list-top b { font-size: 17px; letter-spacing: -0.01em; }
.chat-list .list-top .btn { text-decoration: none; height: 32px; padding: 0 13px; font-size: 13px; }

/* Sent from here, on its way (the app's optimistic send): there at once, a
   little faded and still until the chat has it; not sent, a red edge and
   Try Again. */
.msg.pending .bubble { opacity: 0.7; pointer-events: none; transition: opacity 0.25s ease; }
.msg.pending.failed .bubble { opacity: 1; box-shadow: 0 0 0 1.5px var(--danger); }
.msg.pending .meta .tag.bad { color: var(--danger); }
.msg.pending .meta .link-btn { padding: 0; font-size: 11px; font-weight: 700; color: var(--ink); }
.msg.pending .meta .link-btn:hover { text-decoration: underline; }
.sending-dot {
  width: 9px; height: 9px; border-radius: 999px; flex: none;
  border: 1.5px solid var(--hair); border-top-color: var(--steel); animation: fs-spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .sending-dot { animation: none; } }

/* A Ding: its bubble, its ⋯ beside it, its line under. */
.msg .msg-line { display: flex; align-items: center; gap: 6px; max-width: 100%; }
.msg.out .msg-line { flex-direction: row-reverse; }
.msg .msg-line .bubble { min-width: 0; }
.msg .msg-more { width: 28px; height: 28px; opacity: 0; transition: opacity 0.12s ease; background: transparent; color: var(--steel); }
.msg .msg-more svg { width: 18px; height: 18px; stroke-width: 2.4; }
.msg:hover .msg-more, .msg .msg-more:focus-visible, .msg .msg-more[aria-expanded="true"] { opacity: 1; }
.msg .msg-more:hover { background: var(--soft); color: var(--ink); }
@media (hover: none) { .msg .msg-more { opacity: 0.7; } }
.msg.flash .bubble { animation: flash 1.2s ease; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 4px var(--flash); } 100% { box-shadow: 0 0 0 0 transparent; } }
.msg .meta { flex-wrap: wrap; }
.msg .r-pill {
  display: inline-flex; gap: 1px; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: 13px; line-height: 20px;
  background: var(--glass-strong); border: 1px solid var(--hair); color: var(--ink);
}
.bubble .quote {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; align-self: flex-start;
  padding: 4px 10px; border: 0; border-radius: 999px; background: var(--soft); color: inherit; opacity: 0.85;
  font-size: 12px; cursor: pointer; text-align: left;
}
.msg.out .bubble .quote { background: var(--soft); align-self: flex-end; }
.bubble .quote svg { width: 13px; height: 13px; flex: none; stroke-width: 2.2; }
.bubble .quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bubble .text { position: relative; }
.bubble .text .t-react, .bubble .tile .t-react {
  display: inline-flex; padding: 0 6px; border-radius: 999px; font-size: 13px; line-height: 20px; margin-left: 6px;
  background: var(--glass-strong); border: 1px solid var(--hair); color: var(--ink); vertical-align: 1px;
}
.bubble .tile .t-react { position: absolute; left: 6px; top: 6px; margin: 0; z-index: 1; }
.bubble .tile .t-down, .bubble .tile .t-react-btn {
  position: absolute; top: 6px; width: 28px; height: 28px; border-radius: 999px; border: 0; z-index: 1;
  background: var(--scrim); color: var(--on-scrim); display: grid; place-items: center; cursor: pointer;
  opacity: 0; transition: opacity 0.15s ease;
}
.bubble .tile .t-down { right: 6px; }
.bubble .tile .t-react-btn { right: 38px; }
.bubble .tile .t-down svg, .bubble .tile .t-react-btn svg { width: 15px; height: 15px; stroke-width: 2.1; }
.bubble .tile:hover .t-down, .bubble .tile:hover .t-react-btn, .bubble .tile:focus-within .t-down, .bubble .tile:focus-within .t-react-btn { opacity: 1; }
@media (hover: none) { .bubble .tile .t-down, .bubble .tile .t-react-btn { opacity: 1; } }

/* A to-do's line: Accept and Decline, its tick, who's done it. */
.msg .todo-line { display: flex; align-items: center; gap: 8px; margin: 5px 6px 0; font-size: 12px; font-weight: 600; color: var(--ink); }
.msg .todo-line.muted { color: var(--steel); }
.msg .todo-word { color: var(--steel); }
.msg .t-chip { height: 28px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--hair); background: var(--glass-strong); color: var(--ink); font-weight: 600; font-size: 12px; cursor: pointer; }
.msg .t-chip.ink { background: var(--ink); color: var(--on-ink); border-color: transparent; }
.msg .todo-tick { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 2px; color: var(--ink); font: inherit; cursor: pointer; }
.msg .todo-tick svg { width: 18px; height: 18px; stroke-width: 1.9; }
.msg .todo-tick.done { color: var(--steel); }

/* Yours, waiting to go. */
.msg.waiting .bubble { opacity: 0.72; border-style: dashed; }
.msg.out.waiting .bubble { background: var(--glass-strong); color: var(--ink); border: 1px dashed var(--steel); }
.msg.out.waiting .voice .play-btn { background: var(--ink); color: var(--on-ink); }

/* A gift sent to you, wrapped: tap the bow. */
.bubble.wrapped { padding: 0; background: none; border: 0; overflow: visible; }
.gift-wrap {
  position: relative; width: 240px; max-width: 100%; height: 150px; border-radius: 18px; overflow: hidden;
  background: var(--paper); color: var(--paper-ink); box-shadow: var(--shadow);
  animation: wiggle 4s ease-in-out infinite;
}
@keyframes wiggle { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-2deg); } 94% { transform: rotate(2deg); } 97% { transform: rotate(-1deg); } }
.gift-wrap .gift-ribbon { position: absolute; background: var(--ribbon); }
.gift-wrap .gift-ribbon.v { left: 50%; top: 0; bottom: 0; width: 16px; transform: translateX(-50%); }
.gift-wrap .gift-ribbon.h { top: 42%; left: 0; right: 0; height: 16px; transform: translateY(-50%); }
.gift-wrap .gift-bow {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -62%); width: 70px; height: 48px; border: 0; padding: 0;
  background: none; color: var(--ribbon); cursor: pointer; transition: transform 0.15s ease;
}
.gift-wrap .gift-bow:hover { transform: translate(-50%, -62%) scale(1.08); }
.gift-wrap .gift-bow svg { width: 100%; height: 100%; fill: currentColor; stroke: var(--paper); stroke-width: 1.2; }
.gift-wrap .gift-tag {
  position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: var(--ribbon); color: var(--paper);
}
.gift-wrap .gift-words { position: absolute; left: 12px; right: 12px; bottom: 10px; display: flex; flex-direction: column; line-height: 1.25; }
.gift-wrap .gift-words b { font-size: 14px; }
.gift-wrap .gift-words span { font-size: 12px; opacity: 0.85; }
.gift-wrap.opening { animation: unwrap 0.6s ease forwards; }
@keyframes unwrap { 40% { transform: scale(1.06) rotate(-2deg); } 100% { transform: scale(0.6); opacity: 0; } }
.bubble { position: relative; }
.gift-burst { position: absolute; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; z-index: 5; }
.gift-burst i {
  position: absolute; font-style: normal; font-size: 20px; left: -10px; top: -12px; opacity: 0;
  animation: burst 1.1s cubic-bezier(.2,.8,.3,1) var(--d) forwards;
}
@keyframes burst {
  0% { transform: translate(0, 0) scale(0.4) rotate(0); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r)); opacity: 0; }
}

/* A scratch card sent to you: rub it off. */
.scratch { position: relative; min-width: 220px; min-height: 140px; border-radius: 18px; overflow: hidden; background: var(--glass-strong); }
.scratch .scratch-under { padding: 12px 14px; color: var(--ink); display: flex; flex-direction: column; gap: 8px; min-height: 140px; justify-content: center; }
.scratch .scratch-cover { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; transition: opacity 0.4s ease; }
.scratch .scratch-words {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; pointer-events: none;
  font-weight: 700; font-size: 15px; color: var(--cover-words); transition: opacity 0.2s ease;
}
.scratch.rubbing .scratch-words { opacity: 0; }
.scratch.scratched .scratch-cover { opacity: 0; pointer-events: none; }
.bubble.wrapped .scratch { box-shadow: var(--shadow); }

/* ── The composer (chat-composer.js) ── */
.composer.over { box-shadow: inset 0 0 0 2px var(--ink); border-radius: 0 0 var(--radius) var(--radius); }
.composer-reply {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 6px 6px 6px 12px; border-radius: 14px;
  background: var(--soft); font-size: 13px;
}
.composer-reply .reply-glyph svg { width: 15px; height: 15px; stroke-width: 2.2; display: block; }
.composer-reply .reply-words { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.c-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--hair); background: var(--glass-strong); color: var(--ink); font-size: 12px; font-weight: 600; cursor: pointer;
}
span.c-chip { padding: 0 4px 0 0; cursor: default; overflow: hidden; }
span.c-chip > button, span.c-chip > .c-plain { display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 4px 0 12px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
span.c-chip > .c-plain { cursor: default; }
.c-chip svg { width: 15px; height: 15px; flex: none; }
.c-chip .c-x { width: 22px; height: 22px; border-radius: 999px; border: 0; background: var(--soft); color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.c-chip .c-x svg { width: 11px; height: 11px; stroke-width: 2.4; }
.composer .ring-pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 0 10px 0 14px; background-image: none; white-space: nowrap; max-width: 46%;
}
.composer .ring-pill .ring-words { overflow: hidden; text-overflow: ellipsis; }
.composer .ring-pill svg { width: 14px; height: 14px; flex: none; stroke-width: 2.2; }
.composer .ring-pill.lit { background: var(--ink); color: var(--on-ink); border-color: transparent; }
.composer .plus { width: 40px; height: 40px; }
.composer .plus svg { width: 18px; height: 18px; }
.composer-panel {
  margin-bottom: 10px; padding: 10px; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--hair);
}
.composer-panel .panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.composer-panel .panel-head b { flex: 1; font-size: 14px; }
.composer-panel .panel-head .field { flex: 1; }
.composer-panel .when-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.composer-panel .when-pick { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.composer-panel .when-pick input { flex: 2 1 200px; min-width: 0; }
.composer-panel .when-pick select { flex: 1 1 130px; min-width: 0; appearance: auto; }
.composer-panel select.field.slim { height: 36px; }
.gif-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto; }
.gif-cell { border: 0; padding: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: var(--soft); cursor: pointer; }
.gif-cell img { width: 100%; height: 100%; object-fit: cover; }
.gif-cell:hover { outline: 2px solid var(--ink); outline-offset: -2px; }
.gif-empty { grid-column: 1 / -1; padding: 24px 0; text-align: center; }
.gif-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.gif-foot .muted { margin-left: auto; }

/* + → Place (place-search.js): its search, quick ones, Closest / Top Rated
   / Open Now, a row each (photo, name, stars, how far, open now, address,
   Add), in a composer's panel (a chat's, Home's, To-dos'). */
.pl-field { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.pl-field > svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--steel); pointer-events: none; }
.pl-field .field { flex: 1; min-width: 0; padding-left: 34px; }
.pl-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 8px; }
.pl-chips::-webkit-scrollbar { display: none; }
.pl-chip { flex: none; }
.pl-chip.on { background: var(--ink); color: var(--on-ink); border-color: transparent; }
.pl-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.pl-list { max-height: min(360px, 46vh); overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; transition: opacity 0.2s; }
.pl-list.dim { opacity: 0.55; }
.pl-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 14px; }
.pl-row:hover { background: var(--soft); }
.pl-open {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.pl-pic {
  width: 60px; height: 60px; flex: none; border-radius: 12px; overflow: hidden; background: var(--soft);
  display: grid; place-items: center; color: var(--steel);
}
.pl-pic img { width: 100%; height: 100%; object-fit: cover; }
.pl-pic svg { width: 24px; height: 24px; }
.pl-words { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pl-words > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-name { font-size: 14px; font-weight: 600; }
.pl-line { font-size: 13px; color: var(--steel); }
.pl-line b { color: var(--ink); font-weight: 600; }
.pl-addr { font-size: 12px; color: var(--steel); opacity: 0.8; }
.pl-add { flex: none; gap: 4px; height: 32px; padding: 0 12px; }
.pl-add svg { width: 14px; height: 14px; stroke-width: 2.4; }
.pl-note { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 10px 4px; margin: 0; font-size: 13px; }
.pl-note span { color: var(--steel); }
.pl-note .btn { margin-top: 4px; }
.pl-foot { text-align: center; margin: 6px 0 0; }
.pl-where { margin: 8px 4px 0; }
@media (max-width: 520px) {
  .pl-pic { width: 52px; height: 52px; }
  .pl-add span { display: none; }
  .pl-add { width: 36px; padding: 0; justify-content: center; }
}

/* ── Home ("Ding"): who it goes to, the comb, the composer docked under. ── */
#view-home.home { display: flex; flex-direction: column; gap: 12px; height: var(--fit-h, calc(100dvh - 40px)); min-height: 420px; }
#view-home[hidden] { display: none !important; }
.home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 4px 4px 0; }
.home-who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 260px; }
.home-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); }
.home-names { font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-tools { display: flex; gap: 8px; align-items: center; flex: 0 1 420px; }
.home-tools .home-search { flex: 1; min-width: 0; }
.home-tools .btn { flex: none; }
.home-comb { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 12px; }
/* Faces right on the page, as the app's Home has them: no card round them. */
#view-home .home-comb.panel {
  background: none; border-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.home-comb .empty { padding: 40px 20px; }
.comb-rows { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; }
.comb-row { display: flex; justify-content: center; margin-top: calc(var(--cell) * -0.03); }
.comb-row:first-child { margin-top: 0; }
.comb-face {
  width: var(--cell); padding: 4px 4px 6px; border: 0; background: none; color: var(--ink); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px; border-radius: 18px;
}
.comb-face:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.comb-pic {
  position: relative; width: calc(var(--cell) * 0.72); height: calc(var(--cell) * 0.72); border-radius: 999px; display: block;
  box-shadow: var(--shadow); transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.comb-pic .avatar { font-size: calc(var(--cell) * 0.2); }
.comb-face:hover .comb-pic { transform: scale(1.05); }
.comb-face.on .comb-pic { box-shadow: 0 0 0 3px var(--glass-strong), 0 0 0 6px var(--ring-tint, var(--ink)), var(--shadow); transform: scale(1.06); }
.comb-tick {
  position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center;
  background: var(--ink); color: var(--on-ink); box-shadow: 0 0 0 2px var(--glass-strong);
}
.comb-tick svg { width: 14px; height: 14px; stroke-width: 2.8; }
.comb-name { font-size: 12px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comb-face.on .comb-name { font-weight: 800; }
.home-sent {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-radius: 18px; align-self: center; max-width: 760px; width: 100%;
  background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--shadow); animation: rise 0.2s ease;
}
.home-sent .sent-tick { width: 30px; height: 30px; border-radius: 999px; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; flex: none; }
.home-sent .sent-tick svg { width: 16px; height: 16px; stroke-width: 2.6; }
.home-sent .sent-words { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.home-sent .sent-words span { font-size: 12px; color: var(--steel); }
.home-sent.going .sent-tick { background: var(--soft); }
.home-sent.going .sending-dot { width: 14px; height: 14px; border-width: 2px; }
.home-sent.failed .sent-tick { background: var(--danger); color: #fff; }
.home-sent.failed .sent-tick svg { stroke-width: 2.8; }
.home-dock { display: flex; justify-content: center; }
.home-composer-box { width: 100%; max-width: 820px; }
.composer.home-composer {
  border-top: 0; padding: 12px 14px; border-radius: var(--radius);
  background: var(--glass); -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid var(--glass-edge); box-shadow: var(--shadow);
}
.home-composer .composer-row { align-items: center; }
.home-composer .mic, .home-composer .send { width: 60px; height: 60px; margin-bottom: 0; }
.home-composer .mic { --halo: 10px; }
.home-composer .mic svg, .home-composer .send svg { width: 26px; height: 26px; }

/* Phone width: the list or the chat, the whole screen; Home a column. */
@media (max-width: 760px) {
  .msg .msg-line { gap: 2px; }
  .msg .msg-more { width: 26px; height: 26px; }
  .composer .ring-pill { padding: 0 8px 0 10px; max-width: 38%; }
  .composer-row { gap: 6px; }
  .home-head { align-items: stretch; gap: 8px; }
  .home-tools { flex: 1 1 100%; }
  .home-comb { padding: 12px 4px; }
  .composer.home-composer { padding: 10px; }
  .home-composer .mic, .home-composer .send { width: 52px; height: 52px; }
  .gift-wrap { width: 220px; }
}
@media (max-width: 400px) {
  .home-tools .btn { padding: 0 11px; font-size: 13px; }
  .composer .plus { width: 36px; height: 36px; }
  .message-field { padding: 9px 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .gift-wrap, .gift-wrap.opening, .gift-burst i, .ding-menu, .msg.flash .bubble { animation: none !important; }
}
.composer textarea { font: inherit; color: inherit; }

/* Home's Send To at rest: only the one picked, big and centred; a tap opens
   everyone (user, 2026-10-30). Open, the comb scrolls and drags. */
.comb-picked {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 4px;
  min-height: 100%; animation: comb-settle 0.28s ease;
}
@keyframes comb-settle { from { opacity: 0; transform: scale(0.94); } }
.comb-picked .comb-name { font-size: 15px; }
.comb-picked.many .comb-name { font-size: 13px; }
.comb-picked .comb-face.on .comb-pic { transform: none; }
/* "Change" on who it goes to, small, its lower left (user, 2026-10-31). */
.comb-change {
  position: absolute; left: -14px; bottom: -2px; height: 26px; padding: 0 11px 0 9px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 12px; font-weight: 700; line-height: 1;
  background: var(--ink); color: var(--on-ink); box-shadow: 0 0 0 2.5px var(--glass-strong);
}
.comb-change svg { width: 11px; height: 11px; fill: currentColor; stroke: none; flex: none; }
/* How it rings, in its colour on Home: the ring round who it goes to and
   one round the ring pill (the composer's data-ring), so the two read as one. */
#view-home:has(.home-composer[data-ring="silent"]) { --ring-tint: var(--ring-quiet); }
#view-home:has(.home-composer[data-ring="once"]) { --ring-tint: var(--ring-urgent); }
#view-home:has(.home-composer[data-ring="repeat"]) { --ring-tint: var(--ring-alarm); }
.home-composer .ring-pill {
  box-shadow: 0 0 0 2px var(--glass-strong), 0 0 0 4.5px var(--ring-tint, var(--ink)); transition: box-shadow 0.2s ease;
}
#view-home:has(.home-composer[data-ring="repeat"]) .home-composer .ring-pill {
  box-shadow: 0 0 0 2px var(--glass-strong), 0 0 0 5px var(--ring-tint);
}
.home-comb:not(.compact) { cursor: grab; user-select: none; -webkit-user-select: none; }
.home-comb img { -webkit-user-drag: none; user-drag: none; }
.home-comb.dragging { cursor: grabbing; }
.home-comb.dragging .comb-face { pointer-events: none; }
.home-comb:not(.compact) .comb-rows { animation: comb-settle 0.22s ease; }
@media (max-width: 760px) {
  .comb-picked { --cell: 150px; }
  .comb-picked.many { --cell: 104px; }
}

/* Home's Send To open, as the Watch's apps (user, 2026-10-30): a honeycomb
   every way round who's picked; chat-home.js sizes each face for where it
   is (the middle biggest, smaller and drawn in toward the edges). */
.home-comb.watch { position: relative; overflow: auto; padding: 0; scrollbar-width: none; overscroll-behavior: contain; }
.home-comb.watch::-webkit-scrollbar { display: none; }
.comb-field { position: relative; animation: comb-settle 0.22s ease; }
.comb-field .comb-face {
  position: absolute; transform-origin: 50% calc(4px + var(--cell) * 0.36);
  will-change: transform;
}
.comb-field .comb-name { opacity: clamp(0, calc((var(--s, 1) - 0.72) * 5), 1); }
@media (prefers-reduced-motion: reduce) { .comb-field { animation: none; } }