@charset "UTF-8";

/* Shared controls */
.primary-button, .secondary-button, .end-session-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-ink);
  border-radius: var(--radius-md);
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--line-normal);
  text-align: center;
}
.primary-button:hover:not(:disabled) { background: var(--color-hover); }
.secondary-button, .end-session-button {
  border-color: var(--color-line);
  background: var(--color-surface);
  color: var(--color-ink);
}
.secondary-button:hover:not(:disabled), .end-session-button:hover { background: var(--color-raised); }
.end-session-button { min-height: var(--touch-size); padding: var(--space-2) var(--space-3); font-size: var(--font-xs); }
.primary-button svg, .secondary-button svg, .end-session-button svg { width: var(--icon-small); height: var(--icon-small); }
.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--touch-size);
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  line-height: var(--line-normal);
}
.text-button:hover { background: var(--color-raised); color: var(--color-ink); }
.text-button svg { width: var(--icon-caption); height: var(--icon-caption); }
.icon-button, .remote-home-button, .voice-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-size);
  height: var(--touch-size);
  padding: var(--space-2);
  flex-shrink: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
}
.icon-button:hover, .remote-home-button:hover { background: var(--color-soft); }
.icon-button svg { width: var(--icon-size); height: var(--icon-size); }
.voice-mic { border-radius: var(--radius-round); background: var(--color-ink); color: var(--color-on-ink); }

/* Shared inputs and chips */
.profile-form, .code-form { display: flex; flex-direction: column; gap: var(--space-4); }
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-field label, .form-label, .guide-request-form label {
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
}
.form-field input, .form-field select, .text-input, .code-input, .guide-request-form input {
  width: 100%;
  height: var(--control-height);
  min-width: 0;
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--font-md);
  line-height: var(--line-tight);
}
.form-field small, .profile-note { font-size: var(--font-xs); color: var(--color-muted); }
.form-row { display: flex; gap: var(--space-3); }
.form-row > .form-field { flex: 1; min-width: 0; }
.error-message { min-height: var(--space-5); font-size: var(--font-xs); color: var(--color-muted); }
.relation-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.relation-chip, .chip, .guide-examples > button {
  min-height: var(--touch-size);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--font-sm);
  line-height: var(--line-normal);
  text-align: left;
}
.relation-chip.active, .relation-chip.selected, .relation-chip[aria-pressed="true"] {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-on-ink);
}
.chip { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; }
.chip > span { flex: 1; }
.chip svg { width: var(--icon-small); height: var(--icon-small); }
.chip:hover, .guide-examples > button:hover { background: var(--color-raised); }
.segmented, .font-controls { display: flex; gap: var(--space-2); }
.segmented > button, .font-controls > button { flex: 1; min-width: 0; }
.range { display: block; width: 100%; height: var(--space-8); margin: var(--space-3) 0 0; }
.toggle {
  position: relative;
  width: var(--control-height);
  height: var(--space-8);
  flex-shrink: 0;
  padding: var(--space-1);
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--color-line);
}
.toggle::before { content: ""; position: absolute; inset: -6px 0; }
.toggle::after {
  content: "";
  display: block;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-round);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-fast);
}
.toggle > span { display: none; }
.toggle[aria-checked="true"], .toggle.on { background: var(--color-ink); }
.toggle[aria-checked="true"]::after, .toggle.on::after { transform: translateX(var(--space-4)); }

/* Shared surfaces and identity */
.card, .setting-block, .code-card {
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-raised);
}
.card, .setting-block { margin-bottom: var(--space-4); }
.card h2, .card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--color-muted); }
.badge, .role-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  width: fit-content;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-soft);
  color: var(--color-muted);
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  line-height: var(--line-normal);
  white-space: nowrap;
}
.badge svg { width: var(--icon-caption); height: var(--icon-caption); }
.avatar, .round-symbol, .empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  flex-shrink: 0;
  border-radius: var(--radius-round);
  background: var(--color-soft);
  color: var(--color-muted);
}
.avatar.large, .round-symbol, .empty-icon { width: var(--avatar-large); height: var(--avatar-large); }
.avatar.large svg, .round-symbol svg, .empty-icon svg { width: var(--space-8); height: var(--space-8); }
.empty-icon { display: flex; margin: 0 auto var(--space-5); border-radius: var(--radius-lg); }
.status-dot, .sharing-dot { width: var(--space-1); height: var(--space-1); border-radius: var(--radius-round); background: currentColor; flex-shrink: 0; }

/* Shared app headers and list rows */
.apl-header, .os-app-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--header-height);
  min-height: var(--header-height);
  padding: var(--space-2) var(--page-gutter);
  flex-shrink: 0;
}
.apl-header > h1, .apl-header > h2, .os-app-title, .os-app-header > h1, .os-app-header > h2 {
  flex: 1;
  margin: 0;
  font-size: var(--font-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--line-tight);
}
.apl-wordmark { font-size: var(--font-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
.apl-header > .apl-wordmark { flex: 1; }
.apl-header:has(> .apl-wordmark) > .header-spacer { display: none; }
.apl-header > .icon-button, .os-app-header > .icon-button { margin-left: calc(-1 * var(--space-3)); }
.header-spacer { display: block; width: var(--icon-size); flex-shrink: 0; }
.os-app-header { border-bottom: var(--border-width) solid var(--color-line); }
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--touch-size);
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--font-xs);
  color: var(--color-muted);
}
.section-title h2, .section-title h3 { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-ink); }
.section-title h3 > span { margin-left: var(--space-1); color: var(--color-muted); }
.section-title .text-button { padding-right: 0; }
.settings-row, .os-setting-row, .setting-link, .wifi-row, .cached-app, .managed-card, .sample-code, .phone-contact {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--row-height);
  padding: var(--space-4) 0;
  border: 0;
  border-bottom: var(--border-width) solid var(--color-line);
  background: transparent;
  font-size: var(--font-sm);
  line-height: var(--line-normal);
  text-align: left;
}
.settings-row > div, .wifi-row > div, .wifi-row > span, .phone-contact > span:not(.avatar) { flex: 1; min-width: 0; }
.settings-row p, .wifi-row p, .wifi-row small, .phone-contact small { display: block; margin-top: var(--space-1); font-size: var(--font-xs); color: var(--color-muted); }
.settings-row > span, .os-setting-row > span { margin-left: auto; color: var(--color-muted); font-size: var(--font-xs); }
.settings-row > svg:last-child, .os-setting-row > svg:last-child, .setting-link > svg:last-child, .managed-card > svg:last-child, .cached-app > svg:last-child { margin-left: auto; width: var(--icon-small); height: var(--icon-small); color: var(--color-muted); }
.setting-link { justify-content: space-between; }
.detail-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; font-size: var(--font-xs); }
.detail-row > span { color: var(--color-muted); }
.control-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.control-row > strong { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-sm); }
.control-row > span { font-size: var(--font-xs); color: var(--color-muted); }
.control-row svg { width: var(--icon-small); height: var(--icon-small); }

/* Shared overlays stay inside the app area, below the Android status bar. */
.assistant-scrim, .sheet-backdrop {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--color-overlay);
  animation: fade-in var(--duration-fast) ease;
}
.assistant-panel, .bottom-sheet, .permission-dialog, .waiting-dialog {
  width: 100%;
  max-height: 92%;
  padding: var(--space-5);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-sheet);
  overflow-y: auto;
  animation: sheet-up var(--duration-normal) ease;
}
.assistant-panel { display: flex; flex-direction: column; gap: var(--space-4); min-height: 0; }
.assistant-topline, .assistant-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-shrink: 0; }
.assistant-topline > span, .assistant-heading > span, .assistant-heading > strong { font-size: var(--font-lg); font-weight: var(--weight-semibold); line-height: var(--line-tight); }
.assistant-topline .icon-button, .assistant-heading > .icon-button:last-child { margin-right: calc(-1 * var(--space-2)); }
.permission-dialog, .waiting-dialog { padding: var(--space-8) var(--space-5) var(--space-6); text-align: center; }
.permission-dialog {
  width: calc(100% - 2 * var(--space-4));
  margin: 0 var(--space-4) var(--space-6);
  border-radius: var(--radius-xl);
}
.permission-dialog .round-symbol, .waiting-dialog .round-symbol { margin-bottom: var(--space-6); }
.permission-dialog .eyebrow { margin-bottom: var(--space-3); }
.permission-dialog h2, .waiting-dialog h2, .bottom-sheet h2 { margin-bottom: var(--space-4); }
.permission-dialog > p:not(.eyebrow), .waiting-dialog > p, .bottom-sheet > p { color: var(--color-muted); }
.permission-dialog > button, .waiting-dialog > button, .bottom-sheet > button { margin-top: var(--space-3); }
.permission-note, .consent-info {
  margin: var(--space-5) 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-raised);
  font-size: var(--font-xs);
  color: var(--color-muted);
}
.toast {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-4);
  right: var(--space-4);
  z-index: 60;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-dark);
  color: var(--color-on-ink);
  font-size: var(--font-xs);
  line-height: var(--line-relaxed);
  text-align: center;
  box-shadow: var(--shadow-toast);
  pointer-events: none;
  animation: toast-in var(--duration-fast) ease;
}
.waiting-dots, .pending-dots { display: flex; justify-content: center; gap: var(--space-2); margin: var(--space-6) 0; }
.waiting-dots i, .pending-dots i { width: var(--space-1); height: var(--space-1); border-radius: var(--radius-round); background: var(--color-subtle); animation: pending 900ms ease-in-out infinite alternate; }
.waiting-dots i:nth-child(2), .pending-dots i:nth-child(2) { animation-delay: 200ms; }
.waiting-dots i:nth-child(3), .pending-dots i:nth-child(3) { animation-delay: 400ms; }

/* Shared message composition */
.message-composer {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  flex-shrink: 0;
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-raised);
}
.message-composer input {
  flex: 1;
  min-width: 0;
  height: var(--touch-size);
  padding: var(--space-2) var(--space-1);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink);
  font-size: var(--font-sm);
}