/* Let's Chat components. Every value comes from tokens.css; nothing is hard-coded here except icon geometry. */
.lc, .lc * { box-sizing: border-box; }
.lc { font-family: var(--font-system); color: var(--ink); -webkit-font-smoothing: antialiased; }
.lc-screen { background: var(--ground); display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) var(--space-4) var(--space-3); height: 100%; position: relative; }

/* ---------- Word tile (content layer: solid, never glass) ---------- */
.lc-board { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: var(--space-2); }
.lc-tile { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 2px;
  min-height: 0; padding: 6px 4px 5px; border-radius: var(--radius-tile); border: 1.5px solid var(--k-edge, var(--separator));
  background: var(--k-tint, var(--surface)); box-shadow: var(--shadow-tile); color: var(--ink); font-family: var(--font-rounded);
  appearance: none; cursor: pointer; transition: transform .12s ease, filter .12s ease; -webkit-tap-highlight-color: transparent; }
.lc-tile img { width: 100%; height: 100%; min-height: 0; object-fit: contain; pointer-events: none; background: var(--picture-plate); border-radius: 8px; }
.lc-tile .lc-label { font-size: 15px; line-height: 18px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lc-tile.is-long-label .lc-label { font-size: 13px; line-height: 15px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: normal; }
.lc-tile.is-word-only { grid-template-rows: 1fr; }
.lc-tile.is-word-only .lc-label { font-size: 26px; line-height: 28px; font-weight: 700; white-space: normal; }
.lc-tile.is-word-only.is-long .lc-label { font-size: 20px; line-height: 24px; }
.lc-tile:active, .lc-tile.is-pressed { transform: scale(.95); filter: brightness(.94); }
.lc-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lc-tile.is-empty { background: transparent; border-color: transparent; box-shadow: none; cursor: default; }
.lc-board.is-editing .lc-tile.is-empty { background: var(--surface-sunk); border: 1.5px dashed var(--separator); }
.lc-board.is-editing .lc-tile:not(.is-empty)::after { content: ""; position: absolute; top: -6px; left: -6px; width: 22px; height: 22px; border-radius: var(--radius-capsule);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7 15l1-4 6-6 3 3-6 6z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.lc-tile[data-kind="people"] { --k-tint: var(--people-tint); --k-edge: var(--people-edge); --k-hue: var(--people); }
.lc-tile[data-kind="action"] { --k-tint: var(--action-tint); --k-edge: var(--action-edge); --k-hue: var(--action); }
.lc-tile[data-kind="where"] { --k-tint: var(--where-tint); --k-edge: var(--where-edge); --k-hue: var(--where); }
.lc-tile[data-kind="describe"] { --k-tint: var(--describe-tint); --k-edge: var(--describe-edge); --k-hue: var(--describe); }
.lc-tile[data-kind="thing"] { --k-tint: var(--thing-tint); --k-edge: var(--thing-edge); --k-hue: var(--thing); }
.lc-tile[data-kind="little"] { --k-tint: var(--little-tint); --k-edge: var(--little-edge); --k-hue: var(--little); }
.lc-tile[data-kind="question"] { --k-tint: var(--question-tint); --k-edge: var(--question-edge); --k-hue: var(--question); }
.lc-tile[data-kind="social"] { --k-tint: var(--social-tint); --k-edge: var(--social-edge); --k-hue: var(--social); }
.lc-tile[data-kind="phrase"] { --k-tint: var(--phrase-tint); --k-edge: var(--phrase-edge); --k-hue: var(--phrase); }

/* ---------- Folder tile: shaped like a real folder (raised tab, top-left), slate fill, dark outline ---------- */
.lc-tile.lc-folder { background: var(--folder); border: 2.5px solid var(--folder-edge); border-top-left-radius: 0; margin-top: 9px; }
.lc-tile.lc-folder::before { content: ""; position: absolute; left: -2.5px; top: -11px; width: 46%; height: 12px; box-sizing: content-box;
  background: inherit; border: 2.5px solid var(--folder-edge); border-bottom: 0; border-radius: 9px 9px 0 0; }
.lc-board.is-editing .lc-folder.is-unfinished, .lc-board.is-editing .lc-folder.is-unfinished::before { border-style: dashed; }

/* ---------- Liquid Glass (control layer only) ---------- */
.lc-glass { background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 0 0 1px var(--glass-edge), var(--shadow-glass); }

/* ---------- Sentence strip ---------- */
.lc-strip { display: flex; align-items: center; gap: var(--space-2); height: var(--strip-height); border-radius: var(--radius-capsule);
  padding: 0 var(--space-2) 0 var(--space-6); cursor: pointer; }
.lc-strip-words { flex: 1; display: flex; align-items: flex-end; gap: var(--space-3); overflow-x: auto; min-width: 0; height: 100%; padding: 10px 0; }
.lc-strip-hint { align-self: center; font: 400 17px/22px var(--font-system); color: var(--ink-muted); }
.lc-chip { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.lc-chip img { width: 44px; height: 44px; object-fit: contain; background: var(--picture-plate); border-radius: 8px; }
.lc-chip span { font: 600 17px/20px var(--font-rounded); white-space: nowrap; }
.lc-chip.is-word-only span { font-size: 24px; line-height: 44px; font-weight: 700; padding-bottom: 20px; }
.lc-strip.is-speaking { box-shadow: inset 0 0 0 3px var(--accent), var(--shadow-glass); }
.lc-strip.is-speaking .lc-chip.is-now span { color: var(--accent-text); }

/* ---------- Round icon buttons ---------- */
.lc-iconbtn { width: var(--hit-min); height: var(--hit-min); flex: none; border: 0; border-radius: var(--radius-capsule); display: grid; place-items: center;
  background: transparent; color: var(--ink); cursor: pointer; appearance: none; }
.lc-iconbtn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lc-iconbtn:active { background: var(--surface-sunk); }
.lc-iconbtn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lc-strip .lc-iconbtn { background: var(--surface-sunk); }

/* ---------- Nav row: back, screen name, status ---------- */
.lc-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: var(--hit-min); }
.lc-nav h1 { margin: 0; font: 700 22px/28px var(--font-system); text-align: center; letter-spacing: -.01em; }
.lc-nav .lc-back { justify-self: start; display: inline-flex; align-items: center; gap: 4px; height: var(--hit-min); padding: 0 var(--space-4) 0 var(--space-3);
  border: 0; border-radius: var(--radius-capsule); font: 600 17px/22px var(--font-system); color: var(--ink); cursor: pointer; }
.lc-nav .lc-back svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lc-nav .lc-status { justify-self: end; display: flex; gap: var(--space-2); }

/* ---------- Badges ---------- */
.lc-badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--radius-capsule);
  font: 700 12px/16px var(--font-system); letter-spacing: .04em; text-transform: uppercase; background: var(--surface-sunk); color: var(--ink-muted); }
.lc-badge.is-test { background: var(--badge-test); color: var(--on-badge-test); }
.lc-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ---------- Floating toolbar ---------- */
.lc-toolbar { align-self: center; display: flex; align-items: center; gap: var(--space-3); height: var(--bar-height); padding: 0 var(--space-2); border-radius: var(--radius-capsule); }
.lc-toolbar .lc-group { display: flex; gap: 2px; }
.lc-toolbar .lc-divider { width: 1px; height: 28px; background: var(--separator); }
.lc-toolbar .lc-iconbtn { width: 52px; }
.lc-toolbar .lc-iconbtn.is-grownup { color: var(--ink-muted); }

/* ---------- Sheet (settings, edit a button) ---------- */
.lc-sheet { background: var(--ground); border-radius: var(--radius-sheet); box-shadow: var(--shadow-sheet); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.lc-sheet h2 { margin: 0; font: 700 34px/41px var(--font-system); letter-spacing: -.02em; }
.lc-sheet h3 { margin: 0 0 6px var(--space-4); font: 400 13px/18px var(--font-system); text-transform: uppercase; letter-spacing: .02em; color: var(--ink-muted); }
.lc-list { background: var(--surface); border-radius: 14px; overflow: hidden; }
.lc-row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--hit-min); padding: 10px var(--space-4); font: 400 17px/22px var(--font-system); }
.lc-row + .lc-row { box-shadow: inset 0 1px 0 var(--separator); }
.lc-row .lc-row-label { flex: none; width: 110px; font-weight: 600; }
.lc-note { font: 400 13px/18px var(--font-system); color: var(--ink-muted); margin: 6px var(--space-4) 0; }
.lc-button { height: var(--hit-min); padding: 0 var(--space-6); border: 0; border-radius: var(--radius-capsule); font: 600 17px/22px var(--font-system); cursor: pointer; background: var(--surface-sunk); color: var(--ink); }
.lc-button.is-primary { background: var(--accent); color: var(--on-accent); }
.lc-button.is-danger { background: transparent; color: var(--danger); }

/* ---------- Segmented control (voice choices) ---------- */
.lc-seg { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; border-radius: 12px; background: var(--surface-sunk); }
.lc-seg button { border: 0; border-radius: 10px; min-height: 44px; padding: 4px 6px; background: transparent; color: var(--ink); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font: 600 15px/18px var(--font-system); }
.lc-seg button small { font: 400 12px/15px var(--font-system); color: var(--ink-muted); }
.lc-seg button[aria-pressed="true"] { background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.14); }
.lc-seg button[aria-pressed="true"] small { color: var(--accent-text); }

@media (prefers-reduced-motion: reduce) { .lc-tile { transition: none; } }