/* Connection features: the live stage (visits and calls), conversations, rooms, the grown-up's visit controls, the AI Lab. */

/* ---------- small pieces ---------- */
.lv-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--faint); vertical-align: middle; margin-left: 4px; }
.lv-dot.on { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 30%, transparent); }
.lv-mini { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: none; background: var(--panel3); border: 2px solid var(--line2); display: inline-grid; place-items: center; }
.lv-mini svg { width: 100%; height: 100%; display: block; }

/* ---------- the ring ---------- */
.lv-ring { z-index: 95; }
.lv-ringcard { width: min(460px, 100%); text-align: center; padding: 26px 22px; border-radius: 30px; background: linear-gradient(180deg, color-mix(in srgb, #ff7ab8 16%, var(--panel)), var(--panel)); border: 3px solid #ff9dcb; box-shadow: var(--shadow), 0 0 0 10px rgba(255,157,203,.12); animation: lv-pop .35s var(--ease); }
.lv-ringcard h2 { margin: 6px 0; font-size: 24px; } .lv-ringcard p { color: var(--muted); margin: 0 0 16px; }
.lv-ringico { font-size: 72px; line-height: 1; animation: lv-ringing 1s ease-in-out infinite; display: inline-block; }
@keyframes lv-ringing { 0%, 100% { transform: rotate(-9deg) scale(1); } 50% { transform: rotate(9deg) scale(1.1); } }
@keyframes lv-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- the stage ---------- */
.lv-stagewrap { --c: #ff7ab8; position: relative; border-radius: 28px; padding: 14px; border: 2px solid color-mix(in srgb, var(--c) 60%, var(--line)); background:
  radial-gradient(600px 300px at 20% 0%, rgba(255,122,184,.18), transparent 70%), radial-gradient(700px 320px at 90% 10%, rgba(114,196,255,.2), transparent 70%), var(--panel); }
.lv-who { text-align: center; font-size: calc(17px * var(--k, 1)); padding: 8px 14px; border-radius: 999px; background: var(--panel2); border: 2px solid var(--line2); margin: 0 auto 12px; width: fit-content; max-width: 100%; }
.lv-who b { color: var(--gold); }
.lv-stage { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: stretch; min-height: 260px; }
.lv-stage[data-n="0"]::before { content: "⏳ Waiting…"; grid-column: 1 / -1; align-self: center; text-align: center; color: var(--muted); font-size: 18px; }
.lv-stage[data-n="1"] { grid-template-columns: minmax(0, 420px); justify-content: center; }
.lv-stage[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; }
.lv-stage.small { min-height: 0; grid-template-columns: repeat(auto-fit, minmax(130px, 200px)); justify-content: center; }
.lv-tile { position: relative; border-radius: 24px; padding: 10px 10px 12px; text-align: center; background: linear-gradient(180deg, var(--panel3), var(--panel2)); border: 3px solid var(--line); transition: border-color .15s, box-shadow .15s, transform .15s; min-width: 0; }
.lv-tile.grown { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.lv-tile.speaking { border-color: var(--ok); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 25%, transparent); transform: translateY(-2px); }
.lv-av { position: relative; aspect-ratio: 1 / 1.15; max-height: calc(44 * var(--vh)); margin: 0 auto; display: grid; place-items: center; overflow: hidden; border-radius: 18px; }
.lv-av svg.avatar { width: 100%; height: 100%; display: block; } .lv-av .avatar3d { width: auto; height: 100%; margin: 0 auto; }
.lv-av video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 18px; background: #000; }
.lv-tile.has-video .lv-av .avatar { visibility: hidden; }
.lv-plate { margin-top: 8px; } .lv-plate b { display: block; font-size: calc(18px * var(--k, 1)); overflow-wrap: anywhere; } .lv-plate small { color: var(--muted); display: block; }
.lv-tile.grown .lv-plate b::before { content: "🗣️ "; }
.lv-live { position: absolute; top: 10px; right: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--faint); }
.lv-tile.speaking .lv-live { background: var(--ok); animation: lv-pulse .8s ease-in-out infinite alternate; }
@keyframes lv-pulse { from { transform: scale(.8); } to { transform: scale(1.35); } }
svg.avatar .av-mouth { transform-box: fill-box; transform-origin: center; transition: transform .07s linear; }
svg.av-speaking .av-head { animation: lv-talkhead .5s ease-in-out infinite alternate; transform-origin: 100px 140px; }
@keyframes lv-talkhead { from { transform: rotate(-2deg) translateY(0); } to { transform: rotate(2deg) translateY(-1.5px); } }

/* gestures the visiting grown-up (or the child) can send */
svg.av-g-dance { animation: lv-dance .45s ease-in-out infinite alternate; transform-origin: 50% 90%; }
@keyframes lv-dance { from { transform: rotate(-7deg) translateX(-3%); } to { transform: rotate(7deg) translateX(3%); } }
svg.av-g-jump { animation: lv-jump .38s ease-in-out infinite alternate; }
@keyframes lv-jump { from { transform: translateY(0) scaleY(.97); } to { transform: translateY(-12%) scaleY(1.02); } }
svg.av-g-nod .av-head { animation: lv-nod .3s ease-in-out infinite alternate; transform-origin: 100px 150px; }
@keyframes lv-nod { from { transform: rotate(0) translateY(0); } to { transform: translateY(6px); } }
svg.av-g-no .av-head { animation: lv-no .22s ease-in-out infinite alternate; transform-origin: 100px 150px; }
@keyframes lv-no { from { transform: translateX(-5px) rotate(-5deg); } to { transform: translateX(5px) rotate(5deg); } }
svg.av-g-spin { animation: lv-spin 1.2s ease-in-out 2; transform-origin: 50% 55%; }
@keyframes lv-spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
.lv-burst { position: absolute; inset: 0; pointer-events: none; }
.lv-burst span { position: absolute; left: calc(12% + var(--i) * 18%); bottom: 12%; font-size: 34px; animation: lv-float 2.2s ease-out forwards; animation-delay: calc(var(--i) * .12s); opacity: 0; }
@keyframes lv-float { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-190px) scale(1.25) rotate(14deg); opacity: 0; } }

.lv-card { margin: 14px auto 0; max-width: 640px; padding: 12px 14px 16px; border-radius: 22px; background: var(--panel2); border: 3px solid var(--gold); animation: lv-pop .3s var(--ease); }
.lv-card small { display: block; text-align: center; color: var(--gold); font-weight: 700; }
.lv-card .kquestion { padding: 8px 6px 12px; }
.lv-caption { margin: 12px auto 0; max-width: 720px; padding: 10px 16px; border-radius: 16px; background: rgba(0,0,0,.55); color: #fff; text-align: center; font-size: calc(17px * var(--k, 1)); }
:root[data-theme="light"] .lv-caption { background: #13204c; }
.lv-self { position: absolute; right: 18px; top: 64px; width: 120px; border-radius: 14px; overflow: hidden; border: 3px solid var(--danger); background: #000; z-index: 2; }
.lv-self video { width: 100%; display: block; transform: scaleX(-1); } .lv-self span { display: block; font-size: 11px; text-align: center; background: var(--danger); color: #fff; padding: 2px; }
.lv-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; padding: 10px; border-radius: 20px; background: var(--panel2); border: 2px solid var(--line); }
.lv-bar .grow { flex: 1; }
.lv-tap { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 3; box-shadow: var(--shadow); }

/* ---------- conversations ---------- */
.lv-chatcard { display: flex; flex-direction: column; min-width: 0; }
.lv-chat { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lv-msgs { display: flex; flex-direction: column; gap: 8px; height: min(calc(52 * var(--vh)), 460px); overflow-y: auto; padding: 10px; border-radius: 16px; background: var(--input); border: 2px solid var(--line); }
.lv-msgs.read { height: auto; max-height: calc(62 * var(--vh)); }
.lv-msg { max-width: 82%; align-self: flex-start; min-width: 0; } .lv-msg.mine { align-self: flex-end; text-align: right; }
.lv-msg .who { display: block; color: var(--muted); margin: 0 6px 2px; }
.lv-bubble { display: inline-block; text-align: left; padding: 9px 13px; border-radius: 18px 18px 18px 6px; background: var(--her); border: 1px solid var(--line); overflow-wrap: anywhere; font-size: calc(15.5px * var(--k, 1)); }
.lv-msg.mine .lv-bubble { background: var(--me); color: #fff; border-color: transparent; border-radius: 18px 18px 6px 18px; }
.lv-msg.k-sticker .lv-bubble { font-size: 44px; background: none; border: 0; padding: 0 4px; line-height: 1.1; }
.lv-msg.k-quiz { max-width: 100%; align-self: stretch; } .lv-msg.k-quiz .lv-bubble { display: block; border: 2px solid var(--gold); background: var(--panel2); color: var(--text); }
.lv-qa { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lv-qa .right { background: #1fb863 !important; color: #fff !important; border-color: #7dffb5 !important; } .lv-qa .wrong { background: #ef4a63 !important; color: #fff !important; border-color: #ffb0bd !important; }
.lv-tr { margin-top: 3px; }
.lv-trbtn { background: none; border: 0; color: var(--blue2); cursor: pointer; font-size: 12.5px; padding: 2px 6px; text-decoration: underline; }
.lv-trbox { text-align: left; margin-top: 4px; padding: 8px 12px; border-radius: 14px; border: 2px dashed var(--line2); background: var(--panel2); }
.lv-trbox p { margin: 2px 0 6px; font-weight: 600; } .lv-trbox small { color: var(--muted); }
.lv-words { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .lv-words span { font-size: 12.5px; padding: 3px 9px; border-radius: 999px; background: var(--chip); border: 1px solid var(--line); }
.lv-type { display: flex; gap: 8px; } .lv-type input { flex: 1; min-width: 0; }
.lv-ready summary { cursor: pointer; font-weight: 600; padding: 4px 0; } .lv-ready[open] summary { margin-bottom: 8px; }
.lv-stickers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lv-stickers button { font-size: 26px; width: 46px; height: 46px; border-radius: 14px; border: 2px solid var(--line); background: var(--panel2); cursor: pointer; }
.lv-stickers button:hover { border-color: var(--line2); transform: scale(1.08); }
.lv-tools { margin-top: 4px; gap: 8px; flex-wrap: wrap; align-items: center; }
.lv-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.lv-member { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 6px 8px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--line); min-width: 0; }
.lv-member .lv-mini { grid-row: span 2; width: 38px; height: 38px; } .lv-member b { overflow-wrap: anywhere; } .lv-member small { color: var(--muted); }
.lv-qcard { padding: 10px 12px; border-radius: 14px; border: 2px solid var(--gold); background: var(--panel2); }
.lv-qcard ul { margin: 6px 0 10px; padding-left: 20px; } .lv-qcard li.right { color: var(--ok); font-weight: 700; }

/* ---------- Lab Mail ---------- */
.ml-wrap { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 14px; align-items: start; }
.ml-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-height: calc(60 * var(--vh)); overflow-y: auto; }
.ml-item { display: flex; gap: 10px; align-items: center; text-align: left; padding: 9px 10px; border-radius: 14px; border: 2px solid var(--line); background: var(--panel2); color: var(--text); cursor: pointer; min-width: 0; font: inherit; }
.ml-item:hover { border-color: var(--line2); } .ml-item.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--panel2)); }
.ml-item .ml-ico { font-size: 22px; flex: none; } .ml-item .main { min-width: 0; } .ml-item b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ml-item small { color: var(--muted); display: block; }
.ml-paper { border-radius: 18px; padding: 18px 20px; background: #fff8e6; color: #2b2440; border: 2px solid #e7cf94; box-shadow: 0 6px 0 #e7cf94, var(--shadow); background-image: repeating-linear-gradient(transparent, transparent 31px, rgba(120,140,200,.22) 31px, rgba(120,140,200,.22) 32px); background-position: 0 58px; }
.ml-paper h2 { margin: 6px 0 10px; color: #7a3fd0; font-size: 22px; }
.ml-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: #5c5670; align-items: center; } .ml-head b { color: #2b2440; }
.ml-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 32px; font-size: 17px; min-height: 128px; }
.ml-paper.compose .ml-subject { font-weight: 700; margin: 10px 0 8px; } .ml-paper.compose textarea { line-height: 1.6; resize: vertical; min-height: 180px; margin-bottom: 10px; }
.ml-paper.compose input, .ml-paper.compose textarea, .ml-paper.compose select { background: #fffdf6; color: #2b2440; border-color: #d9c48f; } .ml-paper.compose small.muted { color: #6a6480; }
.ml-paper .lv-trbox { background: #fff; color: #2b2440; margin-top: 10px; } .ml-paper .lv-trbox small { color: #5c5670; } .ml-paper .lv-words span { background: #f1ecff; border-color: #cfc3f5; color: #2b2440; }
.ml-empty { text-align: center; padding: 30px 14px; border-radius: 18px; border: 2px dashed var(--line2); }
@media (max-width: 760px) { .ml-wrap { grid-template-columns: 1fr; } .ml-list { max-height: calc(34 * var(--vh)); } }

/* ---------- the grown-up's visit controls ---------- */
.vc-head { margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
.vc .banner.ok { border-color: var(--ok); }
.vc-grid { align-items: start; }
.vc-puppet { text-align: center; background: radial-gradient(420px 220px at 50% 0%, rgba(255,203,61,.16), transparent 70%), var(--panel); }
.vc-av { width: min(240px, 60%); aspect-ratio: 1 / 1.15; margin: 0 auto; position: relative; }
.vc-av svg.avatar { width: 100%; height: 100%; display: block; } .vc-av .avatar3d { width: auto; height: 100%; margin: 0 auto; }
.vc-gestures { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.vc-gestures .btn { padding: 8px 4px; line-height: 1.2; }
.vc-answer { margin-top: 10px; } .vc-answer .banner { margin: 0; }
.pp-access td, .pp-access th { text-align: center; vertical-align: middle; } .pp-access td:first-child, .pp-access th:first-child { text-align: left; }
.gh-kid { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; padding: 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel2); }
.gh-av { width: 130px; height: 150px; } .gh-av svg { width: 100%; height: 100%; display: block; }
.rules h3 { margin: 18px 0 6px; } .rules li { margin: 5px 0; } .rules .never { border-left: 4px solid var(--danger); padding: 8px 14px; background: color-mix(in srgb, var(--danger) 9%, var(--panel)); border-radius: 0 12px 12px 0; }

/* ---------- AI Lab ---------- */
.ai-hero { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.ai-bot { width: 120px; height: 138px; flex: none; } .ai-bot svg { width: 100%; height: 100%; display: block; }
.ai-rules { display: flex; flex-direction: column; gap: 8px; }
.ai-rule { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; padding: 8px 10px; border-radius: 16px; background: var(--panel2); border: 2px solid var(--line); }
.ai-rule > button { grid-column: 3; grid-row: 1 / span 2; }
.ai-rule .tag { text-align: center; }
.ai-rule .tag { font-weight: 800; font-size: 12px; padding: 4px 10px; border-radius: 999px; color: #fff; white-space: nowrap; }
.ai-rule .tag.if { background: #7c5cff; } .ai-rule .tag.then { background: #18a999; }
.ai-rule.hit { border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent); }
.ai-chat { height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px; background: var(--input); border: 2px solid var(--line); }
.ai-chat .me, .ai-chat .bot { max-width: 84%; padding: 8px 12px; border-radius: 16px; overflow-wrap: anywhere; }
.ai-chat .me { align-self: flex-end; background: var(--me); color: #fff; } .ai-chat .bot { align-self: flex-start; background: var(--her); border: 1px solid var(--line); }
.ai-chat .why { align-self: flex-start; font-size: 12px; color: var(--muted); margin: -4px 0 0 8px; }
.ai-bins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ai-bin { border-radius: 18px; border: 3px solid var(--bc, var(--line2)); padding: 10px; background: color-mix(in srgb, var(--bc, var(--blue)) 10%, var(--panel)); min-width: 0; }
.ai-bin h3 { margin: 0 0 8px; display: flex; gap: 6px; align-items: center; } .ai-bin h3 input { flex: 1; min-width: 0; }
.ai-ex { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; min-height: 30px; }
.ai-ex span { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--chip); border: 1px solid var(--line); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-ex span:hover { text-decoration: line-through; }
.ai-meter { display: grid; grid-template-columns: 110px 1fr 46px; gap: 8px; align-items: center; margin: 6px 0; font-weight: 600; }
.ai-meter i { display: block; height: 18px; border-radius: 999px; background: var(--panel3); overflow: hidden; } .ai-meter i b { display: block; height: 100%; border-radius: 999px; background: var(--bc, var(--blue)); transition: width .35s var(--ease); }
.ai-words { display: flex; flex-wrap: wrap; gap: 6px; } .ai-words span { padding: 3px 9px; border-radius: 999px; font-size: 13px; border: 2px solid var(--bc, var(--line)); }
.ai-steps { counter-reset: s; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ai-steps li { counter-increment: s; padding: 8px 12px 8px 46px; position: relative; border-radius: 14px; background: var(--panel2); border: 1px solid var(--line); }
.ai-steps li::before { content: counter(s); position: absolute; left: 10px; top: 7px; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--gold-ink); font-weight: 800; display: grid; place-items: center; }
.ai-persona { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.ai-persona button { padding: 10px 8px; border-radius: 16px; border: 3px solid var(--line); background: var(--panel2); color: var(--text); cursor: pointer; font-weight: 700; }
.ai-persona button.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, var(--panel2)); }
.ai-persona button span { display: block; font-size: 30px; }

@media (max-width: 760px) {
  .lv-stage[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv-stage { min-height: 200px; } .lv-av { max-height: calc(34 * var(--vh)); }
  .lv-self { width: 84px; top: 58px; right: 12px; }
  .lv-msg { max-width: 92%; } .lv-msgs { height: calc(46 * var(--vh)); }
  .ai-rule { grid-template-columns: 84px minmax(0, 1fr) auto; }
  .ai-bins { grid-template-columns: 1fr; } .ai-hero { grid-template-columns: 1fr; text-align: center; } .ai-bot { margin: 0 auto; }
  .vc-gestures { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .lv-ringico, svg.av-g-dance, svg.av-g-jump, svg.av-g-spin, svg.av-g-nod .av-head, svg.av-g-no .av-head, svg.av-speaking .av-head, .lv-tile.speaking .lv-live { animation: none; }
}
.ml-paper.compose .kinput, .ml-paper.compose .input { background: #fffdf6 !important; color: #2b2440 !important; border-color: #d9c48f !important; text-align: left; box-shadow: none; }
.ml-paper.compose .kinput::placeholder, .ml-paper.compose .input::placeholder { color: #8d86a3; }
.ml-paper.compose .ml-head label { color: #5c5670; font-size: 13.5px; }

/* ---------- a little stagecraft ---------- */
.lv-av::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 2%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.38), transparent); pointer-events: none; z-index: 0; }
.lv-av .avatar { position: relative; z-index: 1; }
.lv-tile.grown { background: radial-gradient(120% 70% at 50% 0%, rgba(255,203,61,.20), transparent 60%), linear-gradient(180deg, var(--panel3), var(--panel2)); }
.lv-tile.has-video .lv-av::after { display: none; }
.ml-paper { position: relative; }
.ml-stamp { position: absolute; right: 14px; top: 34px; width: 74px; height: 86px; transform: rotate(6deg); opacity: .95; pointer-events: none; }
.ml-paper.compose .ml-stamp { display: none; }
.ml-paper h2 { padding-right: 96px; } .ml-text { padding-right: 4px; }

/* Browsers without color-mix() (Safari before 16.2, Firefox before 113): plain colours instead of mixed ones for the connection screens */
@supports not (color: color-mix(in srgb, red, blue)) {
  .lv-ringcard { background: var(--panel); }
  .lv-stagewrap { border-color: #ff7ab8; }
  .lv-tile.grown { border-color: var(--gold); }
  .lv-tile.speaking { box-shadow: 0 0 0 5px rgba(61,220,132,.3); }
  .lv-dot.on { box-shadow: 0 0 0 3px rgba(61,220,132,.3); }
  .ml-item.on { background: var(--panel3); }
  .ai-bin { background: var(--panel2); } .ai-persona button.on { background: var(--panel3); } .ai-rule.hit { box-shadow: 0 0 0 4px rgba(255,203,61,.3); }
  .rules .never { background: var(--panel2); }
}
/* v1.5 — parent device connection hub */
.pc-connect-top { font-weight: 750; box-shadow: 0 8px 24px rgba(0,0,0,.10); }
.device-connect-grid { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:28px; align-items:center; }
.device-qr { display:grid; place-items:center; min-height:230px; padding:14px; background:#fff; border-radius:24px; border:1px solid var(--line); }
.device-qr svg { width:min(230px,100%); height:auto; display:block; }
.device-url { display:block; max-width:100%; overflow-wrap:anywhere; padding:10px 12px; margin:12px 0; }
.qr-placeholder { color:#111; font-size:110px; line-height:1; text-align:center; }
.qr-placeholder small { display:block; font-size:13px; color:#666; margin-top:10px; }
@media (max-width:720px) { .device-connect-grid { grid-template-columns:1fr; } .device-qr { order:-1; min-height:190px; } .device-qr svg { width:190px; } }

/* R3: empty Messages screen — the "My People" / "People" link keeps readable button text */
.lv-empty a.kbtn,.lv-empty a.btn{color:#fff;text-decoration:none}