[hidden] { display: none !important; }
body { margin: 0; }

/* 29Court Concierge — app layout on design-system v2 (--29d-*) tokens.
   No raw palette or type literals: color, type, spacing, and radii all
   resolve to DS tokens. Fixed geometry (mic button, canvas height,
   17px composer text to stop mobile zoom) is the documented exception. */

.cc-note { font-size: var(--29d-text-sm); line-height: var(--29d-lh-sm); color: var(--29d-text-3); margin: 0; }
.cc-lede { font-size: var(--29d-text-lg); line-height: var(--29d-lh-lg); color: var(--29d-text-2); margin: 0; }
.cc-h1 { font-size: var(--29d-text-4xl); line-height: var(--29d-lh-4xl); margin: 0; }
.cc-h3 { font-family: var(--29d-font-display); font-size: var(--29d-text-xl); line-height: var(--29d-lh-xl); margin: 0; }

/* login */
.cc-login {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--29d-s-4); padding: var(--29d-s-6) var(--29d-s-4);
  background: var(--29d-bg); color: var(--29d-text-1); font-family: var(--29d-font-ui);
}
.cc-login-card { width: 100%; max-width: 30rem; display: grid; gap: var(--29d-s-4); }
.cc-login-foot { text-align: center; }
.cc-stack { display: grid; gap: var(--29d-s-3); }
.cc-code-input { font-family: var(--29d-font-mono); font-size: var(--29d-text-xl); letter-spacing: .2em; text-align: center; min-height: 52px; }

/* shell: a fixed app frame. Main scrolls for content views; the chat
   view takes exactly the leftover height so the composer never leaves
   the screen. */
.cc-shell { height: 100dvh; }
.cc-shell .ds-main { height: 100dvh; overflow-y: auto; box-sizing: border-box; }
.cc-sidefoot { display: grid; gap: var(--29d-s-2); }
.cc-sidefoot .ds-btn { justify-content: flex-start; }
.ds-topbar-actions .ds-select { max-width: 16rem; }

.cc-view { display: flex; flex-direction: column; gap: var(--29d-s-4); padding: var(--29d-s-4); width: 100%; max-width: 56rem; margin: 0 auto; flex: 0 0 auto; }
.cc-view[hidden] { display: none; }

/* chat */
.cc-view-chat { max-width: 56rem; flex: 1; min-height: 0; }
.cc-chat { flex: 1; min-height: 0; }
.cc-chat .ds-chat-log { max-height: none; flex: 1; min-height: 0; }
.cc-chat .ds-chat-composer { align-items: flex-end; }
.cc-chat textarea { font-size: 17px; resize: none; }
.cc-msg-body { white-space: pre-wrap; }

.cc-micbar {
  border-top: 1px solid var(--29d-border);
  background: var(--29d-sunken); padding: var(--29d-s-3); display: grid; gap: var(--29d-s-2);
}
.cc-micbar canvas { width: 100%; height: 56px; display: block; }
.cc-micbar-row { display: flex; align-items: center; gap: var(--29d-s-2); flex-wrap: wrap; }
.cc-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--29d-coral-600); animation: cc-pulse 1.2s ease-in-out infinite; }
@keyframes cc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.cc-live-preview { font-size: var(--29d-text-md); line-height: var(--29d-lh-md); color: var(--29d-text-2); min-height: 1.2em; margin: 0; white-space: pre-wrap; }

.cc-mic-btn {
  min-width: 64px; min-height: 48px; padding: 0 var(--29d-s-4);
  border-radius: var(--29d-r-2); border: 1px solid var(--29d-coral-600);
  background: var(--29d-surface); color: var(--29d-coral-600);
  font-family: var(--29d-font-ui); font-size: var(--29d-text-md); font-weight: var(--29d-weight-semibold); cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.cc-mic-btn.is-rec { background: var(--29d-coral-600); color: var(--29d-on-coral); }
.cc-mic-btn.is-armed { box-shadow: var(--29d-focus-halo); }

/* lists and forms */
.cc-form-card { display: grid; gap: var(--29d-s-3); }
.cc-form-card form { display: grid; gap: var(--29d-s-3); }
.cc-row { display: flex; gap: var(--29d-s-2); align-items: center; flex-wrap: wrap; }
.cc-list { display: grid; gap: var(--29d-s-3); }
.cc-tall { min-height: 7rem; }
.cc-mono { font-family: var(--29d-font-mono); font-size: var(--29d-text-sm); word-break: break-all; }
.cc-item-body { white-space: pre-wrap; font-size: var(--29d-text-md); line-height: var(--29d-lh-md); color: var(--29d-text-2); margin: 0; }
.cc-item-head { display: flex; gap: var(--29d-s-2); align-items: baseline; justify-content: space-between; }
.cc-item-title { font-weight: var(--29d-weight-semibold); color: var(--29d-text-1); }
.cc-item-meta { font-family: var(--29d-font-mono); font-size: var(--29d-text-sm); color: var(--29d-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-item-actions { display: flex; gap: var(--29d-s-2); flex-wrap: wrap; }
.cc-switch { display: inline-flex; align-items: center; gap: var(--29d-s-2); font-size: var(--29d-text-sm); color: var(--29d-text-2); cursor: pointer; }
.cc-switch input { width: 20px; height: 20px; accent-color: var(--29d-coral-600); }

.cc-apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--29d-s-3); }
.cc-apps-grid .ds-card { display: grid; gap: var(--29d-s-2); align-content: start; }

/* bottom nav: desktop hides it, mobile scrolls it */
.cc-bottomnav { display: none; }
@media (max-width: 900px) {
  .cc-bottomnav { display: flex; overflow-x: auto; }
  .cc-bottomnav .ds-bottomnav-item { flex: 1 0 auto; padding-left: var(--29d-s-3); padding-right: var(--29d-s-3); }
  .cc-bottomnav .ds-bottomnav-item.is-active { color: var(--29d-coral-600); }
  .cc-shell .ds-main { padding-bottom: 76px; }
  .ds-topbar-actions .ds-select { max-width: 8.5rem; }
  .cc-view { padding: var(--29d-s-3); }
  .cc-topbar-menu { display: grid; place-items: center; }
}

.cc-toast {
  position: fixed; left: 50%; bottom: calc(var(--29d-s-6) + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--29d-text-1); color: var(--29d-bg); border-radius: var(--29d-r-2);
  padding: var(--29d-s-2) var(--29d-s-4); font-family: var(--29d-font-ui); font-size: var(--29d-text-md);
  z-index: 80; max-width: min(92vw, 34rem); text-align: center;
}