/* Familiar patterns (design sweep, owner request 30 September 2026): where Rounds has a component that the big consumer
   apps already have, it follows theirs rather than a bespoke version. Loaded last, after journey.css. Each block names
   the app or guideline it follows. */

/* Messages in a row from one sender are grouped (iMessage, WhatsApp, Slack). The name and avatar show once, the
   bubbles sit close together with small inner corners, and the time and seen ticks go on the last bubble only. */
.chat-messages .message-row.run-more { margin-bottom: 4px; }
.chat-messages .message-row.run-cont { margin-top: 4px; }
.chat-messages .message-row.run-cont .message-meta { display: none; }
.chat-messages .message-row.run-cont:not(.user) > .avatar { visibility: hidden; }
.chat-messages .message-row.run-more .bubble { border-bottom-left-radius: 5px; }
.chat-messages .message-row.run-cont .bubble { border-top-left-radius: 5px; }
.chat-messages .message-row.user.run-more > .user-avatar { visibility: hidden; }
.chat-messages .message-row.user.run-more .msg-foot { display: none; }
.chat-messages .message-row.user.run-more .user-bubble { border-bottom-right-radius: 5px; }
.chat-messages .message-row.user.run-cont .user-bubble { border-top-right-radius: 5px; }

/* Someone typing shows as a bubble with bouncing dots where their message will appear (iMessage, WhatsApp).
   The side chat already worked this way; the main chat now matches it. */
.thinking { align-items: flex-start; }
/* Who is typing shows in the conversation header, as in a WhatsApp group; the thread shows the avatar and dots only, and nothing until someone is typing. */
.thinking.pending { display: none; }
.thinking > div { gap: 5px; min-width: 0; }
.typing-bubble { display: inline-flex; align-items: center; align-self: flex-start; padding: 12px 15px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-xs) var(--radius-lg) var(--radius-lg) var(--radius-lg); }
.thinking .typing, .side-typing .typing { gap: 5px; padding: 2px 0; }
.thinking .typing i, .side-typing .typing i { width: 7px; height: 7px; background: var(--blue-faint); animation: rounds-typing 1.3s infinite ease-in-out; }
.thinking .typing i:nth-child(2), .side-typing .typing i:nth-child(2) { animation-delay: .16s; }
.thinking .typing i:nth-child(3), .side-typing .typing i:nth-child(3) { animation-delay: .32s; }
.thinking > div > span:last-child { font-size: var(--text-sm); line-height: 1.4; color: var(--muted); }
.thinking .typing-avatar .avatar { width: 32px; height: 32px; }
.thinking.demo-typing.from-user { flex-direction: row-reverse; }
.thinking.demo-typing.from-user > div { align-items: flex-end; }
.thinking.demo-typing.from-user .typing-bubble { align-self: flex-end; background: var(--blue-tint); border-color: transparent; border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg); }
@keyframes rounds-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .thinking .typing i, .side-typing .typing i { animation: none; opacity: .7; }
}

/* The message box is one rounded field with the focus ring on the whole field, and the send button stays grey
   until there is something to send (ChatGPT, Claude, iMessage). */
.composer { border-radius: var(--radius-xl); padding: 5px 5px 5px 16px; align-items: flex-end; }
.composer textarea:focus, .composer textarea:focus-visible { outline: none; box-shadow: none; }
.composer:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 103, 177, .16); }
.send-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; border-radius: var(--radius-circle); background: var(--blue); color: var(--white); transition: background-color .15s ease; }
.send-btn:not(:disabled):hover { background: var(--blue-hover); }
.send-btn:disabled { background: var(--line-strong); color: var(--white); opacity: 1; cursor: default; }
.send-btn .icon { width: 18px; height: 18px; }

/* Suggested replies are plain pills that send when tapped (Google Messages, Gmail smart replies). */
.suggestions > button { border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--white); color: var(--blue); font-weight: 500; padding: 6px 14px; min-height: 36px; }
.suggestions > button:hover { background: var(--blue-tint); }

/* New side-chat messages are marked by the "N new messages" divider alone (WhatsApp, Slack), not by an outline and
   dot on every bubble. The divider stays still once it is there, as in WhatsApp, rather than fading and closing up. */
.side-chat-row.unread .side-chat-bubble { background: var(--white); border-color: var(--line); box-shadow: none; }
.side-chat-row.unread .side-chat-bubble::after { display: none; }

/* A side message that arrives while the person is watching the bottom of the side chat slides in, as in iMessage and
   WhatsApp. */
.side-chat-row.arrived { animation: appear .3s ease-out; }

/* The side chat's jump button matches the main chat's, as in WhatsApp: a small round button at the bottom right that
   carries the count of new messages, so it never sits over the text of the newest message. On phones it has a 44 px
   touch area. */
.side-jump { align-self: flex-end; z-index: 3; margin: -50px 16px 12px auto; gap: 4px; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--line); background: var(--white); color: var(--blue); box-shadow: var(--shadow-md); }
.side-jump .icon { width: 17px; height: 17px; }
.side-jump span:empty { display: none; }
@media (max-width: 700px) {
  .side-jump::after, .chat-jump::after { content: ""; position: absolute; inset: -4px; }
}

/* Windows with a form keep their main button in view at the bottom while the form scrolls (Stripe, Apple, Google). */
.modal-scroll { --sheet-pad-r: 29px; --sheet-pad-b: 31px; --sheet-pad-l: 39px; scroll-padding-bottom: 96px; }
.modal-scroll form > .modal-actions, .modal-scroll form > .onboard-footer {
  position: sticky; bottom: calc(-1 * var(--sheet-pad-b)); z-index: 2;
  margin: 22px calc(-1 * var(--sheet-pad-r)) calc(-1 * var(--sheet-pad-b)) calc(-1 * var(--sheet-pad-l));
  padding: 14px var(--sheet-pad-r) calc(14px + var(--sheet-safe, 0px)) var(--sheet-pad-l);
  background: var(--white); border-top: 1px solid var(--line);
}

/* On phones, windows open as sheets from the bottom of the screen with rounded top corners (iOS sheets, Material
   bottom sheets, as in WhatsApp, YouTube and Google Maps). Sheets with nothing to fill in show a grab handle and
   close with a downward swipe. */
@media (max-width: 700px) {
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal, .modal.wide, .modal.onboarding, .modal.onboarding.wide {
    width: 100%; max-width: 100%; max-height: calc(100dvh - 16px - env(safe-area-inset-top));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-bottom: 0; box-shadow: 0 -12px 40px rgba(23, 55, 85, .18);
    animation: rounds-sheet-up .3s cubic-bezier(.2, .8, .2, 1);
  }
  .modal-scroll { --sheet-pad-r: 13px; --sheet-pad-b: 23px; --sheet-pad-l: 24px; --sheet-safe: env(safe-area-inset-bottom); padding-bottom: calc(23px + env(safe-area-inset-bottom)); }
  .modal.swipeable::before { content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: var(--radius-xs); background: var(--line-strong); z-index: 3; }
  .modal.swipeable .modal-scroll { padding-top: 30px; }
  .keys-link { display: none !important; }
}
@keyframes rounds-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
/* A window that redraws while open (a new setup step, a choice in the share window) stays where it is. */
.modal-backdrop .modal.settled { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .modal { animation: none; } }

/* Settings that take effect at once are on/off switches (iOS Settings, Material). */
input.switch {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; margin: 0; cursor: pointer;
  width: 46px !important; height: 28px !important; border-radius: var(--radius-pill); background: var(--line-strong); transition: background-color .2s ease;
}
input.switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: var(--radius-circle); background: var(--white); box-shadow: 0 1px 3px rgba(20, 40, 60, .3); transition: transform .2s ease; }
input.switch:checked { background: var(--blue); }
input.switch:checked::before { transform: translateX(18px); }
input.switch:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.switch-hit { margin: -8px 0; }
@media (prefers-reduced-motion: reduce) { input.switch, input.switch::before { transition: none; } }

/* Actions that delete or clear things are red (Apple Human Interface Guidelines, Material), matching the existing
   Delete plan button. */
.danger { color: var(--danger) !important; }
.btn.secondary.danger { border-color: var(--danger-line); }
.btn.secondary.danger:hover:not(:disabled) { background: var(--danger-tint); }
.danger-bg { background: var(--danger) !important; border-color: var(--danger) !important; color: var(--white) !important; }
.danger-bg:hover:not(:disabled) { background: var(--danger-deep) !important; }

/* Icon-only buttons name themselves on hover (YouTube, Google, Slack). Touch screens keep their own labels. */
@media (hover: hover) and (min-width: 701px) {
  .topbar .icon-btn, .conversation-head .icon-btn, .huddle-close, .msg-actions > button { position: relative; }
  .topbar .icon-btn::after, .conversation-head .icon-btn::after, .huddle-close::after, .modal-close::after, .msg-actions > button::after {
    content: attr(aria-label); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 40;
    padding: 4px 9px; border-radius: var(--radius-xs); background: rgba(24, 38, 52, .9); color: var(--white); font-size: var(--text-xs); font-weight: 500;
    line-height: 1.4; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .1s ease;
  }
  .topbar .icon-btn:last-child::after, .huddle-close::after, .modal-close::after { left: auto; right: 0; transform: none; }
  .msg-actions > button::after { top: auto; bottom: calc(100% + 6px); }
  .topbar .icon-btn:hover::after, .conversation-head .icon-btn:hover::after, .huddle-close:hover::after, .modal-close:hover::after, .msg-actions > button:hover::after,
  .topbar .icon-btn:focus-visible::after, .conversation-head .icon-btn:focus-visible::after, .huddle-close:focus-visible::after, .modal-close:focus-visible::after, .msg-actions > button:focus-visible::after { opacity: 1; transition-delay: .4s; }
}

/* A tap shows a brief press on touch screens (iOS, Material), since the browser's own tap highlight is turned off. */
@media (hover: none) {
  .btn, .icon-btn, .nav-item, .chat-tab, .suggestions > button, .text-link, .choice-card { transition: transform .08s ease, opacity .08s ease; }
  .btn:active:not(:disabled), .icon-btn:active:not(:disabled), .nav-item:active, .suggestions > button:active, .text-link:active, .choice-card:active { transform: scale(.97); opacity: .85; }
}
@media (hover: none) and (prefers-reduced-motion: reduce) {
  .btn:active:not(:disabled), .icon-btn:active:not(:disabled), .nav-item:active, .suggestions > button:active, .text-link:active, .choice-card:active { transform: none; }
}

/* The keyboard shortcuts window, opened with "?" (YouTube, Gmail, Slack). */
.shortcut-list h3 { margin: 22px 0 8px; font-size: var(--text-md); }
.shortcut-list dl { margin: 0; border-top: 1px solid var(--line); }
.shortcut-list dl > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.shortcut-list dt { order: 2; white-space: nowrap; color: var(--muted); font-size: var(--text-sm); }
.shortcut-list dd { margin: 0; color: var(--ink); }
kbd { display: inline-block; min-width: 26px; padding: 2px 7px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--radius-xs); background: var(--bg); color: var(--ink); font: 600 .8125rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }

/* Once a conversation has started, the greeting steps aside so the chat has the full height (ChatGPT, Claude), and
   Check in sits in the conversation's header. */
.conversation-head .head-checkin { flex: none; min-height: 36px; padding: 7px 13px; font-size: var(--text-base); gap: 6px; }
.conversation-head .head-checkin .icon { width: 16px; height: 16px; }

/* Pointing at or tapping a dot on a check-in chart shows its date and answer (Apple Health, Stripe). */
.icc-chart-frame { position: relative; min-width: 460px; }
.icc-chart-frame > .icc-chart { min-width: 0; }
.icc-pt { position: absolute; width: 24px; height: 24px; min-width: 0; min-height: 0; margin: -12px 0 0 -12px; padding: 0; border: 0; border-radius: var(--radius-circle); background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.icc-pt::before { content: ""; position: absolute; inset: 5px; border-radius: var(--radius-circle); box-shadow: 0 0 0 3px rgba(0, 103, 177, .28); opacity: 0; transition: opacity .1s ease; }
.icc-tip { position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); z-index: 2; padding: 4px 9px; border-radius: var(--radius-xs); background: rgba(24, 38, 52, .92); color: var(--white); font-size: var(--text-xs); font-weight: 500; line-height: 1.4; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .1s ease; }
.icc-pt.below .icc-tip { bottom: auto; top: calc(100% + 2px); }
.icc-pt.edge-left .icc-tip { left: 0; transform: none; }
.icc-pt.edge-right .icc-tip { left: auto; right: 0; transform: none; }
.icc-pt:hover .icc-tip, .icc-pt:focus .icc-tip, .icc-pt:active .icc-tip, .icc-pt:hover::before, .icc-pt:focus::before, .icc-pt:active::before { opacity: 1; }

/* On narrower screens Check in shows as an icon with a tooltip, so the conversation's title keeps its room. */
@media (max-width: 1180px) and (min-width: 701px) {
  .conversation-head .head-checkin { width: 44px; min-width: 44px; padding: 0; }
  .head-checkin-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 1180px) and (min-width: 701px) and (hover: hover) {
  .conversation-head .head-checkin { position: relative; }
  .conversation-head .head-checkin::after { content: attr(aria-label); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 40; padding: 4px 9px; border-radius: var(--radius-xs); background: rgba(24, 38, 52, .9); color: var(--white); font-size: var(--text-xs); font-weight: 500; line-height: 1.4; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .1s ease; }
  .conversation-head .head-checkin:hover::after, .conversation-head .head-checkin:focus-visible::after { opacity: 1; transition-delay: .4s; }
}

/* While the device is offline, a quiet bar under the conversation's header says so (WhatsApp's "Connecting",
   Slack's offline bar). It never covers the message box. */
.offline-banner { flex: none; padding: 8px 16px; background: var(--soft); border-bottom: 1px solid var(--line); color: var(--ink); font-size: var(--text-base); line-height: 1.4; text-align: center; }

/* Chart dots are easier to tap on touch screens. */
@media (hover: none) { .icc-pt { width: 32px; height: 32px; margin: -16px 0 0 -16px; } .icc-pt::before { inset: 9px; } }
/* At tablet widths the header already holds the side chat button, so Check in stays in the sidebar there, as before. */
@media (max-width: 980px) and (min-width: 701px) { .conversation-head .head-checkin { display: none; } }
/* Message actions on touch screens open with a tap on the bubble, as in WhatsApp and iMessage, never from the sticky
   hover a tap leaves behind. Otherwise tapping a button under a plan (Keep the earlier one, Let's change it) showed the
   reply bar right over it, and the tap could land on Reply instead (browser check, 1 October 2026). */
@media (hover: none) { .message-row:not(.actions-open) .msg-actions:not(:focus-within) { opacity: 0; pointer-events: none; } }