/* The Duri app's call screen during an example call, for duri.ai. A copy of the Flutter screen
   (lib/duri/live_notes/, CallChatAlertQueue, CallChatExampleRingBanner, the scripted example
   dock and the ended page in call_chat_screen.dart): same sizes, colors and type, in logical
   pixels of a 393x852 phone. Everything is scoped under .dc so it can live inside other pages. */
@font-face { font-family: "DuriLucide"; src: url("/demo/lucide-subset.woff2") format("woff2"); font-display: block; }

.dc { --navy:#071737; --blue:#1261D8; --bg:#F5F0E9; --card:#FFFFFF; --text:#0B1220; --text2:rgba(11,18,32,.6);
  --chip:#E8E2DC; --warm:#E8DED3; --blueSurface:#E6EFFC; --purpleSurface:#F0E9FF; --success:#23A65A; --warning:#F59E0B;
  --danger:#EF4444; --successText:#166534; --dangerText:#B91C1C;
  position:relative; width:100%; height:100%; overflow:hidden; background:var(--bg); color:var(--text);
  display:flex; flex-direction:column; text-align:left;
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Inter, "Apple SD Gothic Neo", "Noto Sans KR", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; line-height:normal; letter-spacing:normal;
  -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; }
.dc *, .dc *::before, .dc *::after { box-sizing:border-box; }
:where(.dc) button { font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; }
:where(.dc) a { text-decoration:none; }
.dc [hidden] { display:none !important; }
.dc :lang(ko), .dc[lang="ko"] { word-break:keep-all; overflow-wrap:anywhere; }
.dc .ic { font-family:"DuriLucide"; font-style:normal; font-weight:normal; line-height:1; display:inline-block; speak:never; }
.dc .tap { transition:transform .12s ease, opacity .12s ease; }
.dc .tap:active { transform:scale(.97); opacity:.8; }

/* Header: ‹ Back · Demo Call · invite · more */
.dc-head { flex:none; height:53px; padding:0 16px; border-bottom:1px solid var(--chip); display:flex; align-items:center; gap:8px; background:var(--bg); }
.dc-back { display:flex; align-items:center; gap:2px; color:var(--blue); font-size:16px; line-height:1.2; min-height:44px; min-width:44px; }
.dc-back .ic { font-size:22px; }
.dc-title { flex:1; text-align:center; color:var(--navy); font-size:17px; font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-acts { display:flex; }
.dc-acts button { width:44px; height:44px; display:grid; place-items:center; color:var(--navy); }
.dc-acts .ic { font-size:22px; }
.dc-head.ended { height:65px; padding:8px; }
.dc-head.ended .dc-back { font-size:18px; min-height:48px; }
.dc-head.ended .dc-acts { visibility:hidden; }

/* The live view: notes strip, the caller's card, the dots, the replies */
.dc-live { flex:1; min-height:0; display:flex; flex-direction:column; padding:6px 12px 26px; }
.dc-notes { flex:none; background:var(--card); border-radius:14px; padding:6px 2px 6px 12px; display:flex; align-items:center; }
.dc-notes-body { flex:1; min-width:0; height:60px; display:flex; flex-direction:column; justify-content:flex-end; }
.dc-notes-empty { height:60px; display:flex; align-items:center; justify-content:center; color:var(--text2); font-size:16px; line-height:1.35; text-align:center; }
.dc-note { height:30px; display:flex; align-items:center; overflow:hidden; position:relative; }
.dc-note-in { white-space:nowrap; font-size:18px; font-weight:600; line-height:1.2; color:var(--text); opacity:0; transition:opacity .45s ease-out; will-change:transform; }
.dc-note-in.on { opacity:1; }
.dc-note.fade { -webkit-mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent 100%); }
.dc-note.fade.moved { -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 90%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 90%,transparent 100%); }
.dc-note-time { color:var(--blue); font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; }
.dc-notes-open { flex:none; width:36px; height:40px; display:grid; place-items:center; color:var(--blue); }
.dc-notes-open .ic { font-size:22px; }
.dc-kv { color:var(--warning); font-weight:700; }
.dc-risk { color:var(--dangerText); font-weight:800; }

.dc-cards-wrap { flex:1; min-height:0; margin-top:6px; display:flex; flex-direction:column; }
.dc-cards { flex:1; min-height:0; background:var(--blueSurface); border-radius:16px; overflow:hidden; position:relative; }
.dc-track { position:absolute; inset:0; display:flex; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.dc-empty { position:absolute; inset:0; padding:24px; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--text2); font-size:18px; line-height:1.35; }
.dc-card { flex:none; width:100%; height:100%; overflow:hidden; padding:12px 16px 6px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 90%,transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 90%,transparent 100%); }
.dc-card-top { display:flex; align-items:center; font-size:15px; color:var(--text2); line-height:1.2; }
.dc-card-who { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-card-who b { font-weight:700; }
.dc-card-who .ic { font-size:17px; margin-left:6px; vertical-align:-3px; }
.dc-card-who .ic.talk { animation:dc-breathe .9s ease-in-out infinite alternate; }
@keyframes dc-breathe { from { opacity:1; } to { opacity:.45; } }
.dc-card-time { margin-left:10px; font-variant-numeric:tabular-nums; }
.dc-card-text { margin-top:8px; font-size:28px; line-height:1.3; color:var(--text); overflow-wrap:break-word; }
.dc-wait { color:var(--text2); font-size:20px; line-height:1.35; }
.dc-line { margin-top:10px; display:flex; align-items:flex-start; gap:8px; color:var(--navy); font-size:17px; line-height:1.3; font-weight:700; }
.dc-line .ic { font-size:18px; margin-top:2px; }

.dc-dots { flex:none; padding:4px 6px 0; display:flex; justify-content:center; align-items:center; }
.dc-jump { height:32px; padding:0 12px; border-radius:999px; color:var(--blue); font-size:15px; font-weight:700; display:flex; align-items:center; transition:opacity .16s; white-space:nowrap; }
.dc-jump[disabled] { opacity:.35; cursor:default; }
.dc-jump.fresh { background:var(--blue); color:#fff; }
.dc-dotset { display:flex; margin:0 10px; }
.dc-dot { width:18px; height:32px; display:grid; place-items:center; }
.dc-dot i { width:7px; height:7px; border-radius:50%; background:rgba(11,18,32,.27); }
.dc-dot.cur i { background:var(--text2); box-shadow:0 0 0 2px var(--text) inset; }
.dc-dot.noted i { width:10px; height:10px; background:rgba(18,97,216,.8); }
.dc-dot.noted.cur i { background:var(--blue); }

.dc-reply { flex:none; margin-top:6px; display:flex; }
.dc-reply.mine { justify-content:flex-end; }
.dc-reply-box { max-width:90%; padding:7px 14px 7px 12px; border-radius:14px; background:var(--card); font-size:15px; line-height:1.3; color:var(--text);
  max-height:calc(15px * 1.3 * 3 + 16px); overflow:hidden; display:flex; flex-direction:column-reverse; }
.dc-reply.mine .dc-reply-box { background:var(--purpleSurface); }
.dc-reply-who { color:var(--text2); font-weight:600; }
.dc-reply.strong .dc-reply-box { font-weight:700; }
.dc-reply.strong .dc-reply-who { font-weight:700; }

/* The scripted example's dock: Listening · ⌃ · Ask Duri on its top line, the call's choices below */
.dc-dock { flex:none; position:relative; padding-top:14px; }
.dc-dock-box { background:var(--card); border-top:1px solid #000; padding:18px 16px 4px; padding-bottom:calc(4px + env(safe-area-inset-bottom, 0px)); }
.dc-bar { position:absolute; left:0; right:0; top:0; height:28px; display:flex; }
.dc-bar-side { flex:1; display:flex; justify-content:center; }
.dc-pill { height:28px; padding:0 12px; border-radius:14px; background:var(--card); border:1px solid #000; color:var(--text2); font-size:14px; line-height:1; font-weight:700; display:flex; align-items:center; white-space:nowrap; }
.dc-pill.on { background:var(--blue); border-color:var(--blue); color:#fff; }
.dc-collapse { width:28px; height:28px; border-radius:50%; background:var(--card); border:1px solid #000; display:grid; place-items:center; color:var(--text2); }
.dc-collapse .ic { font-size:16px; }
.dc-ctrls { display:flex; justify-content:space-between; }
.dc-ctrl { height:40px; padding:0 8px; display:flex; align-items:center; font-size:16px; line-height:1; font-weight:600; color:var(--text); white-space:nowrap; }
.dc-ctrl.red { color:var(--danger); font-weight:800; }
.dc-ctrl.green { color:var(--success); }
.dc-ctrl.on { color:var(--blue); font-weight:800; }
/* A switched-on toggle (Mute while family talks): filled, so it reads as on at a glance */
.dc-ctrl.active { color:#fff; background:var(--blue); border-radius:10px; padding:0 12px; font-weight:800; }
/* Muted while family talks: red, pulsing, so nobody misses that the mic is off */
.dc-ctrl.active.muted { background:var(--danger); font-weight:900; animation:dc-mute-pulse 1s ease-in-out infinite; }
@keyframes dc-mute-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(239,68,68,.55); } 50% { box-shadow:0 0 0 7px rgba(239,68,68,0); scale:1.06; } }
.dc-toast.mute { font-weight:800; font-size:16px; box-shadow:0 0 0 2px var(--danger), 0 8px 24px rgba(7,23,55,.25); }
.dc-toast.mute svg { flex:none; width:24px; height:24px; color:#fff; background:var(--danger); border-radius:50%; padding:4px; box-sizing:content-box; animation:dc-mute-pulse 1s ease-in-out infinite; }
.dc-hint { text-align:center; color:var(--text2); font-size:13px; line-height:1.25; }

/* Warnings and "Duri alerted …" at the top, one at a time, 5 s each */
.dc-alerts { position:absolute; left:8px; right:8px; top:6px; z-index:5; }
.dc-alert { background:var(--card); border-radius:14px; border:1.5px solid var(--danger); box-shadow:0 4px 14px rgba(0,0,0,.2);
  padding:10px 8px 10px 12px; display:flex; align-items:flex-start; gap:8px; animation:dc-in .2s ease-out; }
@keyframes dc-in { from { opacity:0; transform:translateY(-8px); } }
.dc-alert .ic { font-size:20px; color:var(--dangerText); margin-top:2px; transform-origin:50% 50%; }
.dc-alert .ic.wiggle { animation:dc-wiggle 1.2s linear; }
@keyframes dc-wiggle { 0%{transform:rotate(0)} 6%{transform:rotate(19deg)} 12%{transform:rotate(-17deg)} 19%{transform:rotate(15deg)} 25%{transform:rotate(-13deg)} 31%{transform:rotate(11deg)} 37%{transform:rotate(-9deg)} 44%{transform:rotate(7deg)} 50%{transform:rotate(-6deg)} 56%{transform:rotate(4deg)} 62%{transform:rotate(-3deg)} 75%{transform:rotate(1deg)} 100%{transform:rotate(0)} }
.dc-alert-text { flex:1; color:var(--dangerText); font-size:16px; line-height:1.3; font-weight:700; }
.dc-alert-close { position:relative; overflow:hidden; border-radius:9px; border:1px solid rgba(239,68,68,.35); padding:4px 10px; color:var(--dangerText); font-size:13px; font-weight:600; }
.dc-alert-close span { position:relative; }
.dc-alert-close i { position:absolute; left:0; top:0; bottom:0; width:0; background:rgba(239,68,68,.2); }

/* Margaret's phone rings: the banner iOS shows for a call while the phone is in use */
.dc-ring { position:absolute; inset:0; z-index:6; padding:6px 8px 0; background:rgba(0,0,0,.55); transition:background .3s; display:flex; flex-direction:column; align-items:stretch; }
.dc-ring.answered { background:transparent; }
.dc-ring-box { background:#1C1C1E; border-radius:24px; box-shadow:0 6px 18px rgba(0,0,0,.25); padding:12px 12px 12px 14px; display:flex; align-items:center; gap:10px; animation:dc-in .25s ease-out; }
.dc-ring-main { flex:1; min-width:0; }
.dc-ring-label { display:inline-block; background:#FFD60A; color:#1C1C1E; border-radius:6px; padding:3px 8px; font-size:11px; font-weight:800; letter-spacing:.6px; margin-bottom:6px; }
.dc-ring-app { color:#AEAEB2; font-size:13px; font-weight:500; }
.dc-ring-caller { margin-top:2px; color:#fff; font-size:18px; line-height:1.2; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dc-round { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; color:#fff; position:relative; }
.dc-round .ic { font-size:24px; position:relative; }
.dc-round.no { background:#FF3B30; margin-right:2px; }
.dc-round.yes { background:#34C759; }
.dc-round.yes::before { content:""; position:absolute; inset:0; border-radius:50%; background:rgba(52,199,89,.45); animation:dc-pulse 1.1s linear infinite; }
@keyframes dc-pulse { from { transform:scale(1); opacity:1; } to { transform:scale(1.458); opacity:0; } }
.dc-ring-ok { display:flex; align-items:center; gap:6px; color:#34C759; font-size:16px; font-weight:700; }
.dc-ring-ok .ic { font-size:22px; }
.dc-ring-note { padding:14px 16px 0; text-align:center; color:#fff; font-size:17px; line-height:1.35; font-weight:600; }

/* The ended page */
.dc-ended { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 16px 24px; }
.dc-verdict { display:flex; align-items:flex-start; gap:12px; }
.dc-verdict .ic { font-size:28px; margin-top:2px; }
.dc-verdict-title { font-size:23px; line-height:1.25; font-weight:600; }
.dc-verdict.bad { color:var(--dangerText); } .dc-verdict.bad .ic { color:var(--danger); }
.dc-verdict.good { color:var(--successText); } .dc-verdict.good .ic { color:var(--success); }
.dc-eline { font-size:18px; line-height:1.35; color:var(--text); white-space:pre-line; }
.dc-eline.quiet { color:var(--text2); }
.dc-sec-title { margin-top:28px; padding:0 4px; font-size:22px; line-height:1.25; font-weight:700; color:var(--text); }
.dc-sec { margin-top:10px; background:var(--card); border-radius:16px; overflow:hidden; }
.dc-sec-body { padding:12px 16px; font-size:20px; line-height:1.4; color:var(--text); white-space:pre-line; }
.dc-row { width:100%; display:flex; align-items:center; gap:8px; padding:12px 16px; color:var(--blue); font-size:18px; line-height:1.3; font-weight:600; text-align:left; position:relative; }
.dc-row::before { content:""; position:absolute; left:16px; right:0; top:0; height:1px; background:var(--warm); }
.dc-row span { flex:1; }
.dc-row .ic { font-size:20px; color:var(--text2); }
.dc-foot { flex:none; border-top:1px solid var(--warm); padding:8px 16px; padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px)); }
.dc-cta { width:100%; height:48px; border-radius:14px; background:var(--card); border:1px solid #7C879B; color:var(--text); font-size:17px; font-weight:600; display:grid; place-items:center; text-decoration:none; }

/* Read conversation: the whole call as a list */
.dc-hist { flex:1; min-height:0; overflow-y:auto; padding:12px 16px 24px; display:flex; flex-direction:column; gap:12px; }
.dc-h-who { font-size:15px; color:var(--text2); font-weight:600; margin:2px 4px -6px; }
.dc-h-bub { border-radius:16px; padding:10px 16px 12px; background:var(--blueSurface); font-size:20px; line-height:1.4; }
.dc-h-bub b.lbl { display:block; font-size:15px; font-weight:700; margin-bottom:4px; }
.dc-h-bub.mine { background:var(--purpleSurface); margin-left:28px; }
.dc-h-bub.helper { background:var(--purpleSurface); font-size:17px; }
.dc-h-bub.duri { background:var(--blueSurface); }
.dc-h-alert { border:1.5px solid var(--danger); background:var(--card); border-radius:12px; padding:8px 12px; display:flex; gap:8px; color:var(--dangerText); font-size:15px; font-weight:700; line-height:1.3; }
.dc-h-alert .ic { font-size:18px; margin-top:1px; }
.dc-h-sys { align-self:center; background:var(--blueSurface); color:var(--text2); border-radius:999px; padding:4px 12px; font-size:15px; text-align:center; }

/* Before the first tap (the standalone page only): sound needs a tap */
.dc-start { position:absolute; inset:0; z-index:9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:rgba(245,240,233,.92); }
.dc-start button { min-width:220px; height:56px; border-radius:16px; background:var(--blue); color:#fff; font-size:18px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px; }
.dc-start button .ic { font-size:22px; }
.dc-start p { margin:0; color:var(--text2); font-size:15px; }

/* Inline icons the font subset lacks (mic off, send) */
.dc .ic-svg { width:1em; height:1em; display:inline-block; vertical-align:-.15em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* While family talks to you: your mic is off, the caller can't hear them */
/* Above Duri's and your bubbles, so it never covers what family says */
.dc-toasts { flex:none; pointer-events:none; }
.dc-toasts:not(:empty) { margin-top:6px; }
.dc-toast { display:flex; gap:10px; align-items:center; padding:10px 14px; border-radius:14px; background:var(--navy); color:#fff;
  font-size:15px; line-height:1.3; box-shadow:0 8px 24px rgba(7,23,55,.25); animation:dc-toast-in .25s ease-out; }
.dc-toast .ic-svg { flex:none; font-size:20px; }
@keyframes dc-toast-in { from { opacity:0; transform:translateY(8px); } }

/* Ask Duri: questions about this call */
.dc.asking .dc-live, .dc.asking .dc-ended, .dc.asking .dc-foot, .dc.asking .dc-hist, .dc.asking .dc-dock, .dc.asking .dc-toasts { display:none !important; }
.dc-ask { flex:1; min-height:0; display:flex; flex-direction:column; background:var(--bg); }
.dc-ask-log { flex:1; min-height:0; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.dc-ask-msg { max-width:88%; align-self:flex-start; padding:10px 14px; border-radius:16px; background:var(--card); border:1px solid var(--chip);
  color:var(--text); font-size:17px; line-height:1.38; animation:dc-toast-in .2s ease-out; }
.dc-ask-msg.me { align-self:flex-end; background:var(--purpleSurface); border-color:transparent; }
.dc-ask-msg.typing { display:flex; gap:5px; padding:14px 16px; }
.dc-ask-msg.typing i { width:7px; height:7px; border-radius:50%; background:var(--text2); animation:dc-dot 1s ease-in-out infinite; }
.dc-ask-msg.typing i:nth-child(2) { animation-delay:.15s; } .dc-ask-msg.typing i:nth-child(3) { animation-delay:.3s; }
@keyframes dc-dot { 0%,100% { opacity:.3; transform:none; } 50% { opacity:1; transform:translateY(-3px); } }
.dc-chips { display:flex; flex-wrap:wrap; gap:8px; padding:4px 16px 12px; }
.dc-chip { padding:8px 13px; border-radius:999px; background:var(--blueSurface); color:var(--blue); font-size:15px; font-weight:600; line-height:1.2; text-align:left; }
.dc-ask-input { flex:none; display:flex; gap:8px; align-items:center; padding:10px 12px 14px; border-top:1px solid var(--chip); background:var(--card); margin:0; }
.dc-ask-input input { flex:1; min-width:0; height:44px; border-radius:22px; border:1px solid #7C879B; padding:0 16px; font:inherit; font-size:16px;
  color:var(--text); background:#fff; outline:none; user-select:text; -webkit-user-select:text; }
.dc-ask-input input:focus { border-color:var(--blue); }
.dc-ask-input button { flex:none; width:44px; height:44px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-size:20px; }

/* Scrolling inside the phone stays inside the phone */
.dc-ended, .dc-hist, .dc-ask-log, .dc-card, .dc-notes-body { overscroll-behavior:contain; }

/* Translated captions: ENG | KOR on the caller's card (LiveLanguageSwitch) */
.dc-lang { flex:none; display:flex; padding:2px; margin:0 8px 0 6px; border-radius:999px; border:1px solid var(--warm); }
.dc-lang b { height:24px; padding:0 9px; display:grid; place-items:center; border-radius:999px; font-size:13px; font-weight:700; color:var(--text2); line-height:1; }
.dc-lang b.on { background:var(--blue); color:#fff; }

/* Duri, translate: the control above the call buttons, then the pill while it's on */
.dc-interp { display:flex; align-items:center; gap:12px; width:calc(100% - 24px); margin:0 12px 10px; min-height:56px; padding:10px 14px;
  border-radius:14px; background:var(--card); border:1px solid #7C879B; text-align:left; }
.dc-interp > .ic-svg { flex:none; font-size:22px; color:var(--navy); }
.dc-interp span { display:flex; flex-direction:column; gap:2px; }
.dc-interp b { font-size:17px; font-weight:600; line-height:1.2; color:var(--text); }
.dc-interp small { font-size:15px; line-height:1.3; color:var(--text2); }
.dc-interp-pill { align-self:center; flex:none; display:flex; align-items:center; gap:6px; height:30px; padding-left:10px; margin-bottom:6px;
  border-radius:15px; background:var(--navy); color:#fff; font-size:12.5px; font-weight:600; }
.dc-interp-pill .ic-svg { font-size:14px; }
.dc-interp-pill i { width:1px; height:14px; background:#fff; margin-left:2px; }
.dc-interp-pill b { padding:0 10px; font-weight:700; }
.dc-ask-cta { align-self:flex-start; padding:10px 16px; border-radius:14px; background:var(--blue); color:#fff; font-size:16px; font-weight:700; }