/* Cord watch mock — app-specific styles (on top of kit/watch-kit.css).
 * Colours from Cord's dark theme: card #2C2C2E, accent #0A84FF, success #34C759, danger #FF3B30. */

/* avatars: round, per-user hue gradient + silhouette (Cord's .face, simplified) */
.cd-av { --h: 200; width: 1.95em; height: 1.95em; border-radius: 50%; flex: none; overflow: hidden; display: block;
  background: radial-gradient(circle at 35% 28%, hsl(var(--h) 70% 66%), hsl(var(--h) 55% 40%)); }
.cd-av svg { width: 100%; height: 100%; display: block; fill: rgba(255,255,255,.86); }
.cd-av-agent { background: radial-gradient(circle at 35% 28%, #6b7a90, #2d3748); }
.cd-av-agent svg { fill: #cbd5e0; }
.cd-av-sm { width: 1.35em; height: 1.35em; }
.cd-av-lg { width: 3.3em; height: 3.3em; }
.cd-av-xl { width: 3.9em; height: 3.9em; }
.cd-tile { width: 1.95em; height: 1.95em; border-radius: 0.55em; flex: none; display: grid; place-items: center; font-size: 1em; color: #fff; }
.cd-tile .ic { width: 1.05em; height: 1.05em; stroke-width: 2.3; }
.cd-tag { font-size: 11px; font-weight: 700; padding: 0.1em 0.4em; border-radius: 0.5em; background: rgba(10,132,255,.25); color: #4da3ff; vertical-align: 0.15em; }

/* messages list */
.cd-chatrow { position: relative; align-items: flex-start; padding-top: 0.55em; padding-bottom: 0.55em; }
.cd-line1 { display: flex; align-items: baseline; gap: 0.3em; min-width: 0; }
.cd-line1 .wk-row-title { flex: 1; min-width: 0; }
.cd-line1 small { flex: none; font-size: 0.78em; color: rgba(235,235,245,.55); }
.cd-prev { font-size: 0.82em; line-height: 1.22; color: rgba(235,235,245,.6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0.05em; overflow-wrap: anywhere; }
.cd-udot { position: absolute; left: 0.22em; top: 50%; width: 0.42em; height: 0.42em; margin-top: -0.21em; border-radius: 50%; background: #0A84FF; }
.cd-unread .wk-row-title { font-weight: 600; }
.cd-unread .cd-prev, .cd-unread .wk-row-sub { color: rgba(235,235,245,.85); }
.cd-meta { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 0.25em; height: 100%; padding: 0.1em 0; }
.cd-meta small { font-size: 0.86em; }
.cd-ub { font-style: normal; min-width: 1.45em; height: 1.45em; padding: 0 0.4em; border-radius: 1em; background: #0A84FF; color: #fff; font-weight: 700; font-size: 0.85em; display: grid; place-items: center; }
.cd-dot { width: 0.6em; height: 0.6em; border-radius: 50%; background: #0A84FF; display: block; }
.cd-badged { position: relative; display: inline-block; }
.cd-badge { position: absolute; top: -0.2em; right: -0.25em; min-width: 1.25em; height: 1.25em; padding: 0 0.3em; border-radius: 1em; background: #FF453A; color: #fff; font: 700 0.72em/1.25em inherit; font-style: normal; text-align: center; box-shadow: 0 0 0 0.15em #000; }
.cd-badge-o { background: #FF9F0A; color: #000; }

/* chat */
.cd-chat { padding: 0 0.15em; }
.cd-day { text-align: center; font-size: 0.72em; font-weight: 600; color: rgba(235,235,245,.5); margin: 0 0 0.45em; }
.cd-msg { display: flex; flex-direction: column; margin-bottom: 0.35em; }
.cd-msg.me { align-items: flex-end; }
.cd-msg.them { align-items: flex-start; }
.cd-from { font-size: 0.72em; font-weight: 600; margin: 0.2em 0 0.1em 0.75em; }
.cd-bub { max-width: 88%; padding: 0.42em 0.68em; font-size: 0.95em; line-height: 1.25; border-radius: 1.05em 1.05em 1.05em 0.32em; background: #2C2C2E; color: #fff; overflow-wrap: anywhere; }
.cd-msg.me .cd-bub { background: #0A84FF; border-radius: 1.05em 1.05em 0.32em 1.05em; }
.cd-bub:active { filter: brightness(1.25); }
.cd-mention { color: #4da3ff; font-weight: 600; }
.cd-mention.mine { color: #fff; text-decoration: underline; }
.cd-rx { margin-top: -0.3em; padding: 0.1em 0.4em; border-radius: 1em; background: #3A3A3C; font-size: 0.78em; box-shadow: 0 0 0 0.15em #000; position: relative; z-index: 1; }
.cd-msg.them .cd-rx { margin-left: 0.6em; }
.cd-msg.me .cd-rx { margin-right: 0.6em; }
.cd-rx small { font-size: 0.85em; color: rgba(235,235,245,.7); margin-left: 0.1em; }
.cd-typing { display: inline-flex; gap: 0.22em; padding: 0.55em 0.7em; border-radius: 1em 1em 1em 0.32em; background: #2C2C2E; margin-bottom: 0.35em; }
.cd-typing i { width: 0.4em; height: 0.4em; border-radius: 50%; background: rgba(235,235,245,.6); animation: cd-blink 1s infinite; }
.cd-typing i:nth-child(2) { animation-delay: .15s; }
.cd-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cd-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.cd-empty { color: rgba(235,235,245,.55); text-align: center; padding: 0.8em 0.5em; font-size: 0.9em; }
.cd-replybar { display: flex; justify-content: space-between; gap: 0.2em; margin: 0.65em 0.15em 0.45em; }
.cd-quick { display: flex; flex-direction: column; gap: 0.3em; }
.cd-qr { width: 100%; min-height: 2.5em; padding: 0.35em 0.8em; border-radius: 999px; background: #222224; font-size: 0.92em; text-align: center; }
.cd-qr:active { background: #333336; }

/* reply sheet / emoji / reactions */
.cd-replytop { display: flex; justify-content: center; gap: 1em; margin: 0.15em 0 0.2em; }
.cd-qrow { min-height: 2.6em; }
.cd-qrow .wk-row-title { white-space: normal; }
.cd-emojigrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3em; padding: 0 0.15em; }
.cd-emojigrid button { height: 2.6em; font-size: 1.45em; border-radius: 0.6em; background: #222224; display: grid; place-items: center; text-align: center; }
.cd-emojigrid button:active { background: #3a3a3c; transform: scale(.94); }
.cd-quote { margin: 0 0.2em 0.45em; padding: 0.4em 0.65em; border-radius: 0.8em; background: #222224; font-size: 0.88em; line-height: 1.25; max-height: 4.6em; overflow: hidden; }
.cd-quote span { display: block; font-size: 0.82em; font-weight: 600; color: #4da3ff; }
.cd-rxgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3em; margin: 0 0.1em 0.45em; }
.cd-rxgrid button { height: 2.45em; border-radius: 999px; background: #2C2C2E; font-size: 1.3em; display: grid; place-items: center; }
.cd-rxgrid button.on { background: #0A84FF; }
.cd-rxgrid button:active { transform: scale(.92); }

/* dictation */
.cd-dict { height: 100%; display: flex; flex-direction: column; padding: 0 0.6em 0.6em; }
.cd-dicttext { font-size: 1.12em; font-weight: 600; line-height: 1.22; min-height: 3.6em; }
.cd-dicttext.idle { color: rgba(235,235,245,.55); font-weight: 500; }
.cd-wave { display: flex; align-items: center; justify-content: center; gap: 0.22em; height: 2.4em; margin: auto 0 0.4em; }
.cd-wave i { width: 0.28em; height: 100%; border-radius: 1em; background: #0A84FF; animation: cd-wave .7s ease-in-out infinite alternate; transform-origin: center; }
.cd-wave i:nth-child(odd) { animation-duration: .55s; }
.cd-wave.calm i { animation: none; transform: scaleY(.15); }
@keyframes cd-wave { from { transform: scaleY(.15); } to { transform: scaleY(1); } }
.cd-dictbtns { display: flex; justify-content: space-between; padding: 0 0.6em; }

/* calls */
.cd-call { height: 100%; display: flex; flex-direction: column; align-items: center; padding: 0 0.6em 0.55em; text-align: center; }
.cd-callav { position: relative; border-radius: 50%; margin-top: 0.05em; }
.cd-ringing::before, .cd-ringing::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 0.12em solid #34C759; animation: cd-ring 1.6s ease-out infinite; }
.cd-ringing::after { animation-delay: .8s; }
@keyframes cd-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }
.cd-talking-wrap .cd-talking { box-shadow: 0 0 0 0.16em #000, 0 0 0 0.3em #34C759; }
.cd-group { display: flex; justify-content: center; margin-top: 0.1em; }
.cd-group .cd-av { width: 2.6em; height: 2.6em; box-shadow: 0 0 0 0.14em #000, 0 0 0 0.26em #34C759; }
.cd-group .cd-av + .cd-av { margin-left: -0.5em; }
.cd-callname { font-size: 1.15em; font-weight: 600; margin-top: 0.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cd-callsub { font-size: 0.82em; color: rgba(235,235,245,.6); }
.cd-timer { color: #34C759; font-variant-numeric: tabular-nums; font-weight: 600; }
.cd-callbtns { margin-top: auto; display: flex; justify-content: space-around; width: 100%; }
.cd-callbtns > span { display: flex; flex-direction: column; align-items: center; gap: 0.2em; }
.cd-callbtns small { font-size: 0.7em; color: rgba(235,235,245,.75); }
.cd-incall .cd-callav { margin-top: 0.2em; }

/* notifications */
.cd-nic { width: 1.75em; height: 1.75em; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; }
.cd-nic .ic { width: 1em; height: 1em; }
.cd-nic b { font-size: 0.95em; }
.cd-notif { align-items: flex-start; position: relative; }
.cd-spacerow .wk-row-title { white-space: normal; line-height: 1.15; }
.cd-notif .wk-row-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 0.92em; line-height: 1.2; }
.cd-notif .cd-meta { height: auto; }
.cd-mt { margin-top: 0.4em; }
.cd-push { padding: 0 0.3em; }
.cd-pushapp { display: flex; align-items: center; gap: 0.4em; margin: 0 0.35em 0.4em; }
.cd-pushapp .app-icon { width: 1.5em; height: 1.5em; }
.cd-pushapp span { font-size: 0.78em; font-weight: 600; letter-spacing: .04em; }
.cd-pushapp small { margin-left: auto; font-size: 0.75em; color: rgba(235,235,245,.55); }
.cd-pushcard { background: #222224; border-radius: 0.85em; padding: 0.5em 0.65em 0.55em; margin-bottom: 0.4em; }
.cd-pushwho { display: flex; gap: 0.4em; align-items: flex-start; }
.cd-pushwho b { font-size: 0.9em; line-height: 1.2; }
.cd-pushcard p { margin: 0.3em 0 0; font-size: 0.95em; line-height: 1.25; }

/* to-dos (Cord: 6px-radius square checkbox, green when done) */
.cd-box { width: 1.35em; height: 1.35em; border-radius: 0.38em; border: 0.11em solid #FF9F0A; display: grid; place-items: center; flex: none; }
.cd-box.on { background: #34C759; border-color: #34C759; color: #000; }
.cd-box .ic { width: 0.9em; height: 0.9em; stroke-width: 3.2; }
.cd-todo .wk-row-title { white-space: normal; line-height: 1.2; }
.cd-todo.done .wk-row-title { text-decoration: line-through; color: rgba(235,235,245,.5); }

/* spaces */
.cd-live { color: #34C759; }
.cd-join { font-weight: 700; font-size: 1.1em; color: #34C759; }
.cd-chanrow .wk-row-title { font-weight: 500; }