/* Roger watch mock — app-specific styles (on top of kit/watch-kit.css).
 * Dark watchOS look with a teal #30D5C8 accent. Roger's bubbles are #2C2C2E,
 * yours are teal with dark text; green #30D158 = yes/done, red #FF453A = no/stop. */

/* avatars */
.rg-av { --c: #30D5C8; width: 1.95em; height: 1.95em; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 24%, #000); color: var(--c); }
.rg-av .ic { width: 1.05em; height: 1.05em; }
.rg-av-roger { background: radial-gradient(circle at 30% 25%, #8ff5ec, #30D5C8 48%, #13968c); color: #00302b; }
.rg-av-roger .ic { width: 1em; height: 1em; }

/* chats list */
.rg-model { display: flex; align-items: center; justify-content: center; gap: 0.4em; width: 100%; min-height: 2.4em; margin: -0.1em 0 0.35em;
  font-size: 0.78em; font-weight: 600; color: rgba(235,235,245,.7); border-radius: 999px; background: rgba(48,213,200,.1); }
.rg-model:active { background: rgba(48,213,200,.22); }
.rg-live { width: 0.5em; height: 0.5em; border-radius: 50%; background: #30D158; box-shadow: 0 0 0 0.18em rgba(48,209,88,.25); flex: none; display: inline-block; }
.rg-threadrow { position: relative; align-items: flex-start; padding-top: 0.55em; padding-bottom: 0.55em; }
.rg-line1 { display: flex; align-items: baseline; gap: 0.3em; min-width: 0; }
.rg-line1 .wk-row-title { flex: 1; min-width: 0; white-space: normal; line-height: 1.15; }
.rg-line1 small { flex: none; font-size: 0.78em; color: rgba(235,235,245,.55); }
.rg-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; }
.rg-prev .rg-rt { color: inherit; }
.rg-udot { position: absolute; left: 0.22em; top: 50%; width: 0.42em; height: 0.42em; margin-top: -0.21em; border-radius: 50%; background: #30D5C8; }
.rg-unread .wk-row-title { font-weight: 600; }
.rg-unread .rg-prev { color: rgba(235,235,245,.88); }
.rg-badged { position: relative; display: inline-block; }
.rg-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; }
.rg-badge-t { background: #30D5C8; color: #00302b; }

/* chat */
.rg-chat { padding: 0 0.15em; }
.rg-day { text-align: center; font-size: 0.72em; font-weight: 600; color: rgba(235,235,245,.5); margin: 0 0 0.45em; }
.rg-msg { display: flex; flex-direction: column; margin-bottom: 0.35em; }
.rg-msg.me { align-items: flex-end; }
.rg-msg.them { align-items: flex-start; }
.rg-bub { max-width: 90%; 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; }
.rg-msg.me .rg-bub { background: #30D5C8; color: #00211e; border-radius: 1.05em 1.05em 0.32em 1.05em; font-weight: 500; }
.rg-rt { color: #30D5C8; font-weight: 700; }
.rg-ask { border: 0.08em solid rgba(48,213,200,.45); font-weight: 600; }
.rg-askfrom { display: flex; align-items: center; gap: 0.25em; font-size: 0.78em; font-weight: 600; color: #30D5C8; margin-bottom: 0.1em; }
.rg-askfrom .ic, .rg-askhead .ic { width: 0.9em; height: 0.9em; }
.rg-askbtn { margin-top: 0.3em; min-height: 2.2em; padding: 0 1.1em; border-radius: 999px; background: #30D5C8; color: #00302b; font-weight: 700; font-size: 0.9em; }
.rg-askbtn:active { filter: brightness(1.2); transform: scale(.96); }
.rg-answered { margin-top: 0.25em; font-size: 0.78em; font-weight: 600; color: #30D158; display: flex; align-items: center; gap: 0.25em; padding-left: 0.5em; }
.rg-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; }
.rg-typing i { width: 0.4em; height: 0.4em; border-radius: 50%; background: rgba(48,213,200,.85); animation: rg-blink 1s infinite; }
.rg-typing i:nth-child(2) { animation-delay: .15s; }
.rg-typing i:nth-child(3) { animation-delay: .3s; }
.rg-typing-sm { margin: 0; }
@keyframes rg-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* "Working on…" mini job card */
.rg-jobcard { display: flex; flex-direction: column; gap: 0.2em; width: 92%; margin: 0 0 0.4em; padding: 0.5em 0.65em 0.55em; border-radius: 0.85em;
  background: linear-gradient(160deg, rgba(48,213,200,.16), rgba(48,213,200,.05)); box-shadow: inset 0 0 0 1px rgba(48,213,200,.25); text-align: left; }
.rg-jobcard:active { transform: scale(.97); }
.rg-jobhead { display: flex; align-items: center; gap: 0.35em; font-size: 0.75em; font-weight: 700; color: #30D5C8; text-transform: uppercase; letter-spacing: .03em; }
.rg-jobhead .ic { width: 1.1em; height: 1.1em; display: block; }
.rg-jobcard b { font-size: 0.95em; }
.rg-jobcard small { font-size: 0.75em; color: rgba(235,235,245,.6); }
.rg-bar { display: block; height: 0.3em; border-radius: 1em; background: rgba(255,255,255,.14); overflow: hidden; margin: 0.15em 0 0.05em; }
.rg-bar i { display: block; height: 100%; border-radius: 1em; transition: width .4s; }
.rg-spin { width: 0.95em; height: 0.95em; border-radius: 50%; border: 0.14em solid rgba(48,213,200,.25); border-top-color: #30D5C8; animation: rg-spin .8s linear infinite; display: inline-block; flex: none; box-sizing: border-box; }
@keyframes rg-spin { to { transform: rotate(360deg); } }

.rg-replybar { margin: 0.6em 0 0.35em; }
.rg-talk { min-height: 2.6em; color: #00302b; }
.rg-quick { display: flex; flex-direction: column; gap: 0.3em; }
.rg-qr { width: 100%; min-height: 2.45em; padding: 0.35em 0.8em; border-radius: 999px; background: #222224; font-size: 0.92em; text-align: center; }
.rg-qr:active { background: #333336; }

/* dictation */
.rg-dict { height: 100%; display: flex; flex-direction: column; padding: 0 0.6em 0.6em; }
.rg-dicttext { font-size: 1.1em; font-weight: 600; line-height: 1.22; min-height: 3.6em; }
.rg-dicttext.idle { color: rgba(235,235,245,.55); font-weight: 500; }
.rg-wave { display: flex; align-items: center; justify-content: center; gap: 0.2em; height: 2.2em; margin: auto 0 0.4em; }
.rg-wave i { width: 0.26em; height: 100%; border-radius: 1em; background: #30D5C8; animation: rg-wave .7s ease-in-out infinite alternate; }
.rg-wave i:nth-child(odd) { animation-duration: .55s; }
.rg-wave i:nth-child(3n) { animation-duration: .8s; }
.rg-wave.calm i { animation: none; transform: scaleY(.15); }
@keyframes rg-wave { from { transform: scaleY(.15); } to { transform: scaleY(1); } }
.rg-dictbtns { display: flex; justify-content: space-between; align-items: center; padding: 0 0.5em; }
.rg-dictstate { font-size: 0.75em; font-weight: 600; color: rgba(235,235,245,.6); }

/* quick question */
.rg-askhead { display: flex; align-items: center; gap: 0.3em; font-size: 0.78em; font-weight: 600; color: #30D5C8; margin: 0 0.5em 0.15em; }
.rg-q { font-size: 1.3em; font-weight: 700; line-height: 1.12; margin: 0 0.4em 0.2em; letter-spacing: -0.01em; }
.rg-why { font-size: 0.8em; line-height: 1.25; color: rgba(235,235,245,.62); margin: 0 0.5em 0.55em; }
.rg-answer { width: 100%; min-height: 2.9em; margin: 0 0 0.35em; border-radius: 1em; background: color-mix(in srgb, #30D5C8 24%, #000);
  color: #5ce6db; font-size: 1.12em; font-weight: 700; text-align: center; transition: transform .12s, filter .12s; }
.rg-answer:active { transform: scale(.96); filter: brightness(1.3); }
.rg-answer-alt { background: #222224; color: #fff; font-weight: 600; }
.rg-done { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0.1em 0.2em 0; }
.rg-donecheck { width: 2.6em; height: 2.6em; border-radius: 50%; background: #30D158; color: #000; display: grid; place-items: center; margin-bottom: 0.3em; animation: wk-zoom .3s; }
.rg-donecheck .ic { width: 1.4em; height: 1.4em; stroke-width: 3; }
.rg-done > b { font-size: 1.05em; margin-bottom: 0.3em; }
.rg-donereply { min-height: 2.6em; font-size: 0.88em; line-height: 1.25; color: rgba(235,235,245,.85); margin: 0 0.3em 0.55em; }

/* jobs */
.rg-jring { --sz: 2.2em; position: relative; width: var(--sz); height: var(--sz); flex: none; display: block; }
.rg-jring .wk-ring { width: 100%; height: 100%; }
.rg-jring-in { position: absolute; inset: 0; display: grid; place-items: center; }
.rg-jring-in b { font-size: 0.72em; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.rg-jring-in .ic { width: 0.95em; height: 0.95em; }
.rg-jobrow { gap: 0.6em; }
.rg-jobrow .wk-row-title { white-space: normal; line-height: 1.15; }
.rg-jobsub { font-size: 0.82em; color: rgba(235,235,245,.6); line-height: 1.2; margin-top: 0.05em; }
.rg-jobsub b { font-weight: 600; }
.rg-chip { --c: #30D5C8; align-self: flex-start; font-size: 0.75em; font-weight: 700; padding: 0.15em 0.55em; border-radius: 1em; background: color-mix(in srgb, var(--c) 22%, #000); color: var(--c); white-space: nowrap; }
.rg-jobtop { display: flex; align-items: center; gap: 0.6em; margin: 0 0.35em 0.5em; }
.rg-jobtop .rg-jring-in b { font-size: 1.05em; }
.rg-jobtop .rg-jring-in .ic { width: 1.4em; height: 1.4em; }
.rg-jobmeta { display: flex; flex-direction: column; gap: 0.2em; min-width: 0; }
.rg-jobmeta span:not(.rg-chip) { font-size: 0.85em; line-height: 1.2; }
.rg-jobname { font-size: 0.95em; line-height: 1.15; }
.rg-jobmeta small { font-size: 0.72em; color: rgba(235,235,245,.55); }
.rg-btnrow { display: flex; gap: 0.35em; }
.rg-btnrow .wk-pill { flex: 1; padding-left: 0.4em; padding-right: 0.4em; }
.rg-toast { margin: 0 0.2em 0.45em; padding: 0.4em 0.6em; border-radius: 0.8em; background: #222224; font-size: 0.82em; line-height: 1.25; }
.rg-steps { list-style: none; margin: 0 0.3em; padding: 0; }
.rg-step { display: flex; align-items: center; gap: 0.5em; min-height: 2em; font-size: 0.9em; border-bottom: 1px solid rgba(255,255,255,.07); }
.rg-step > span { width: 1.2em; height: 1.2em; flex: none; display: grid; place-items: center; border-radius: 50%; border: 0.1em solid rgba(255,255,255,.25); }
.rg-step > span .ic { width: 0.8em; height: 0.8em; stroke-width: 3; }
.rg-step-ok > span { background: #30D158; border-color: #30D158; color: #000; }
.rg-step-ok { color: rgba(235,235,245,.6); }
.rg-step-running > span, .rg-step-stuck > span, .rg-step-waiting > span, .rg-step-stopped > span { border: 0; }
.rg-step-stuck > span { color: #FF9F0A; }
.rg-step-waiting > span { color: #FFD60A; }
.rg-step-running, .rg-step-stuck, .rg-step-waiting { font-weight: 600; }

/* today */
.rg-next { display: flex; flex-direction: column; width: 100%; margin: 0 0 0.3em; padding: 0.5em 0.7em; border-radius: 0.85em; background: #222224; text-align: left; }
.rg-nextev { background: linear-gradient(160deg, rgba(48,213,200,.2), rgba(48,213,200,.07)); }
.rg-nextev b { font-size: 1.1em; line-height: 1.15; }
.rg-next small { font-size: 0.8em; color: rgba(235,235,245,.6); }
.rg-nexttag { display: flex; align-items: center; gap: 0.3em; font-size: 0.75em; font-weight: 700; color: #30D5C8; margin-bottom: 0.1em; }
.rg-nexttag .ic { width: 1em; height: 1em; }
.rg-nexttag-o { color: #FF9F0A; }
.rg-nexttodo { flex-direction: row; align-items: center; gap: 0.55em; min-height: 2.9em; }
.rg-nexttodo > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.rg-nexttodo b { font-weight: 600; line-height: 1.2; }
.rg-nexttodo:active, .rg-trow.rg-todo:active { transform: scale(.97); }
.rg-box { width: 1.35em; height: 1.35em; border-radius: 50%; border: 0.11em solid #FF9F0A; display: grid; place-items: center; flex: none; }
.rg-box.on { background: #30D158; border-color: #30D158; color: #000; }
.rg-box .ic { width: 0.85em; height: 0.85em; stroke-width: 3.2; }
.rg-todo.done b, .rg-todo.done .rg-ttitle, .rg-tevent.done .rg-ttitle { text-decoration: line-through; color: rgba(235,235,245,.5); }
.rg-trow { min-height: 2.6em; gap: 0.5em; padding: 0.4em 0.6em; }
.rg-tevent { background: transparent; }
.rg-tevent:active { transform: none; background: transparent; }
.rg-ttime { width: 2.75em; flex: none; font-size: 0.75em; font-weight: 600; color: rgba(235,235,245,.6); font-variant-numeric: tabular-nums; line-height: 1.15; }
.rg-ttitle { display: flex; flex-direction: column; min-width: 0; font-size: 0.92em; line-height: 1.2; }
.rg-ttitle small { font-size: 0.82em; color: rgba(235,235,245,.55); }
.rg-evbar { width: 0.22em; align-self: stretch; border-radius: 1em; background: #30D5C8; flex: none; }

/* approve? */
.rg-appr { display: flex; flex-direction: column; padding: 0 0.45em 0.3em; }
.rg-apprhead { display: flex; align-items: center; gap: 0.4em; margin: 0 0.15em 0.25em; }
.rg-apprhead b { font-size: 1.4em; font-weight: 700; color: #FFD60A; }
.rg-appric { width: 1.85em; height: 1.85em; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, #FFD60A 24%, #000); color: #FFD60A; flex: none; }
.rg-appric .ic { width: 1.05em; height: 1.05em; }
.rg-apprq { margin: 0 0.15em 0.2em; font-size: 1.02em; font-weight: 600; line-height: 1.22; }
.rg-apprmeta { margin: 0 0.15em 0.5em; font-size: 0.75em; color: rgba(235,235,245,.6); }
.rg-yn { display: flex; gap: 0.4em; }
.rg-yn button { flex: 1; min-height: 3em; border-radius: 1.5em; display: flex; align-items: center; justify-content: center; gap: 0.3em; font-size: 1.05em; font-weight: 700; transition: transform .12s, filter .12s; }
.rg-yn button:active { transform: scale(.95); filter: brightness(1.2); }
.rg-yn .ic { width: 1.05em; height: 1.05em; stroke-width: 2.8; }
.rg-yes { background: #30D158; color: #00210b; }
.rg-no { background: #FF453A; color: #2b0300; }
.rg-result { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0.1em 0.5em 0; }
.rg-resicon { width: 2.7em; height: 2.7em; border-radius: 50%; display: grid; place-items: center; color: #000; margin-bottom: 0.3em; animation: wk-zoom .3s; }
.rg-resicon .ic { width: 1.45em; height: 1.45em; stroke-width: 3; }
.rg-result.yes .rg-resicon { background: #30D158; }
.rg-result.no .rg-resicon { background: #FF453A; }
.rg-result b { font-size: 1.15em; }
.rg-result p { margin: 0.25em 0.2em 0.6em; font-size: 0.88em; line-height: 1.25; color: rgba(235,235,245,.85); }
.rg-nic { --c: #FFD60A; width: 1.75em; height: 1.75em; border-radius: 50%; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--c) 24%, #000); color: var(--c); }
.rg-nic .ic { width: 1em; height: 1em; }
.rg-apprrow { align-items: flex-start; }
.rg-apprrow .wk-row-title { white-space: normal; font-size: 0.95em; line-height: 1.2; }
.rg-apprrow .wk-row-sub { white-space: normal; line-height: 1.2; }
.rg-apprrow.decided .wk-row-title { color: rgba(235,235,245,.6); }

/* notification long look */
.rg-push { padding: 0 0.3em; }
.rg-pushapp { display: flex; align-items: center; gap: 0.4em; margin: 0 0.35em 0.4em; }
.rg-pushapp .app-icon { width: 1.5em; height: 1.5em; }
.rg-pushapp span { font-size: 0.78em; font-weight: 600; letter-spacing: .04em; }
.rg-pushapp small { margin-left: auto; font-size: 0.75em; color: rgba(235,235,245,.55); }
.rg-pushcard { background: #222224; border-radius: 0.85em; padding: 0.5em 0.65em 0.55em; margin-bottom: 0.4em; }
.rg-pushcard b { font-size: 0.9em; }
.rg-pushcard p { margin: 0.2em 0 0; font-size: 0.95em; line-height: 1.25; }

/* status */
.rg-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.25em; margin: 0 0 0.5em; }
.rg-static { position: relative; width: 2.8em; height: 2.8em; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, #30D5C8 22%, #000); color: #30D5C8; }
.rg-static .ic { width: 1.5em; height: 1.5em; }
.rg-static .rg-live { position: absolute; right: 0.1em; bottom: 0.15em; box-shadow: 0 0 0 0.16em #000; width: 0.65em; height: 0.65em; }
.rg-stat > b { font-size: 1.1em; }
.rg-stat .rg-chip { align-self: center; }
.rg-kvs { background: #222224; border-radius: 0.85em; padding: 0.15em 0.85em; margin: 0 0.2em; }
.rg-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5em; padding: 0.45em 0; font-size: 0.85em; border-bottom: 1px solid rgba(255,255,255,.07); }
.rg-kv:last-child { border-bottom: 0; }
.rg-kv span { color: rgba(235,235,245,.6); flex: none; }
.rg-kv b { font-weight: 600; text-align: right; }