/* Shared finishing layer for every screen and sheet. */
:root {
  color-scheme: dark;
  --muted: #a0acc9;
  --action: linear-gradient(120deg, #5363bd, #7652ac);
  --radius-control: 14px;
  --radius-card: 24px;
}
body, button, input, textarea, [contenteditable] { font-family: "Outfit", "Segoe UI", system-ui, sans-serif; }
button, input, textarea { font-weight: 400; }
button { touch-action: manipulation; }
.ui-icon { display: block; width: 21px; height: 21px; flex-shrink: 0; }
.ui-icon .icon-wash { fill: currentColor; fill-opacity: .12; }
.ui-icon .icon-detail { color: #c2acf3; }
#composer > .iconBtn:not(#emojiBtn) { color: #a9c8ff; background: linear-gradient(145deg, #19233b, #15192e); border-color: #384363; }
#composer > .iconBtn:not(#emojiBtn):hover { border-color: var(--accent2); background: var(--raised); }
#composer > .iconBtn .ui-icon { width: 23px; height: 23px; }
.callCtl .ui-icon { width: 25px; height: 25px; }
.callCtl .icon-detail { color: inherit; }
.callCtl.acc { background: #287451; }
.callCtl.end { background: #943e51; }
.callCtl[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #fff7; }
@media (min-width: 1100px) {
  body.couple #chat { position: relative; isolation: isolate; }
  body.couple #chat::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url('/brand/just-us-edge-art.png') center / 100% 100% no-repeat; opacity: .46; }
}
.iconBtn { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-control); }
body.couple #chat > header::before { width: 44px; flex-shrink: 0; }
.primary, #sendBtn, .badge, .msg.me { background: var(--action); }
.msg.emoji-only, .msg.unsent { background: none; }
.primary, .ghost, #sendBtn { min-height: 48px; border-radius: var(--radius-control); font-weight: 600; font-size: 15px; }
.primary { box-shadow: none; }
.pill { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; }
.card { border-radius: var(--radius-card); padding: 24px; gap: 16px; }
.card h2 { font-size: 22px; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; }
.card p { font-size: 14px; line-height: 1.65; }
.card input { min-width: 0; min-height: 50px; border-radius: var(--radius-control); font-size: 16px; }
.card input::placeholder { color: var(--muted); opacity: 1; }
.sheetWrap { padding: 16px 16px calc(16px + var(--sab)); backdrop-filter: blur(8px); }
.sheetWrap .card { max-height: calc(100dvh - 32px - var(--sat) - var(--sab)); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 24px 80px #0006; }
.sheet-heading { display: flex; align-items: center; gap: 12px; }
.sheet-heading h2 { flex: 1; min-width: 0; }
.sheet-close { background: transparent; }
.option-row { display: flex; align-items: center; text-align: left; gap: 12px; padding: 12px 14px; min-height: 52px; border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--ink); background: var(--bg2); font-size: 15px; font-weight: 500; }
.option-row .ui-icon { color: var(--accent); }
.option-row:hover { background: var(--raised); }
.option-row.danger, .option-row.danger .ui-icon { color: var(--danger); }
.primary.danger { background: #713944; color: #fff3f4; }
.option-note { border-top: 1px solid var(--line); padding-top: 14px; }
.linkBox { border-style: solid; border-radius: var(--radius-control); line-height: 1.7; padding: 14px; }
.hit { padding: 12px 14px; border-radius: var(--radius-control); }
.hit:hover { background: var(--raised); }
.hitText .us-emoji, .preview .us-emoji { width: 23px; height: 23px; }
.searchResults, .emoji-grid, .sheetWrap .card, #chatList, #msgScroll { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.emoji-choice { border-radius: 18px; }
.emoji-choice .emoji-label { color: var(--muted); font-weight: 500; }
.message-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 4px; width: fit-content; max-width: min(100%, calc(76% + 44px)); }
.message-row.me { align-self: flex-end; }
.message-row.them { align-self: flex-start; }
.message-row > .msg { grid-column: 2; grid-row: 1; max-width: 100%; min-width: 0; }
.message-row > .msg.emoji-only { display: flex; flex-wrap: wrap; }
.message-row > .reaction-add { grid-column: 1; grid-row: 1; align-self: center; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 9px; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--muted); }
.message-row > .reaction-add:hover, .message-row > .reaction-add:focus-visible { background: var(--surface); border-color: var(--line); color: var(--accent); }
.reaction-add .ui-icon { width: 20px; height: 20px; }
.message-row > .reaction-bar { grid-column: 2; grid-row: 2; justify-self: start; max-width: 100%; margin: -3px 0 5px 6px; gap: 4px; z-index: 1; }
#recBar { flex-wrap: wrap; }
#recBar .primary { border-radius: var(--radius-control); }
#viewerClose { position: absolute; top: calc(16px + var(--sat)); right: 16px; z-index: 1; }
#toast { line-height: 1.5; border-radius: var(--radius-control); box-shadow: 0 10px 30px #0005; }
@media (max-width: 540px) {
  #composer { display: grid; grid-template-columns: repeat(4, 44px) 1fr auto; gap: 6px; padding: 10px 12px calc(10px + var(--sab)); }
  #input { grid-column: 1 / -1; grid-row: 1; width: 100%; }
  #attachBtn { grid-column: 1; grid-row: 2; }
  #micBtn { grid-column: 2; grid-row: 2; }
  #callBtn { grid-column: 3; grid-row: 2; }
  #emojiBtn { grid-column: 4; grid-row: 2; }
  #sendBtn { grid-column: 6; grid-row: 2; min-height: 44px; padding: 10px 16px; }
  #composer.recording { display: flex; }
  .sheetWrap { padding: 10px 10px calc(10px + var(--sab)); }
  .sheetWrap .card { padding: 20px; }
  .screen .card { padding: 24px; border-radius: var(--radius-card); }
  .emoji-choice .us-emoji { width: 68px; height: 68px; }
}