/* ao-components.css — Atomic component styles for AgencyOffice App
   All colour values are CSS custom properties from ao-tokens.css.
   No hardcoded hex values anywhere in this file. */

/* ================================================================
   THEME ROOT
   ================================================================ */
.ao-theme-root {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    min-height: 100%;
}

/* ================================================================
   AoButton
   ================================================================ */
.ao-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 120ms ease, transform 80ms ease, box-shadow 120ms ease;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    box-shadow: var(--shadow-sm);
    -webkit-tap-highlight-color: transparent;
}

.ao-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.ao-btn:disabled,
.ao-btn[disabled] {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none !important;
    pointer-events: none;
}

/* Primary */
.ao-btn--primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-color: rgba(0, 0, 0, 0.06);
}
.ao-btn--primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
.ao-btn--primary:active { transform: translateY(0); }

/* Secondary */
.ao-btn--secondary {
    background: var(--surface-1);
    color: var(--color-text);
    border-color: var(--border-1);
}
.ao-btn--secondary:hover { background: var(--surface-2); }

/* Accent (magenta / per-tenant override) */
.ao-btn--accent {
    background: var(--color-accent);
    color: var(--color-on-accent);
    border-color: rgba(0, 0, 0, 0.06);
}
.ao-btn--accent:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ao-btn--accent:active { transform: translateY(0); }

/* Danger */
.ao-btn--danger {
    background: var(--color-danger);
    color: var(--color-on-primary);
    border-color: rgba(0, 0, 0, 0.06);
}
.ao-btn--danger:hover { filter: brightness(1.08); }

/* Ghost */
.ao-btn--ghost {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: none;
}
.ao-btn--ghost:hover { background: var(--surface-2); }

/* Size modifiers */
.ao-btn--sm { padding: 5px 12px; font-size: 12px; border-radius: 7px; }
.ao-btn--lg { padding: 12px 24px; font-size: 16px; border-radius: 12px; }

/* ================================================================
   AoInput
   ================================================================ */
.ao-input-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ao-input-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-muted-text);
    letter-spacing: 0.02em;
}

.ao-input {
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 14px;
    line-height: 1.4;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 120ms ease, box-shadow 120ms ease;
    font-family: inherit;
}
.ao-input::placeholder { color: var(--input-placeholder); }
.ao-input:focus {
    outline: none;
    border-color: var(--input-border-hover);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.ao-input:disabled { opacity: 0.55; cursor: not-allowed; }

/* ================================================================
   AoCard
   ================================================================ */
.ao-card {
    background: var(--card-bg);
    border: 1px solid var(--border-1);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.ao-card--padded { padding: 16px; }
.ao-card__header {
    padding: 12px 16px;
    background: var(--panel-header-bg);
    border-bottom: 1px solid var(--border-1);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}
.ao-card__body { padding: 16px; }

/* ================================================================
   AoListRow
   ================================================================ */
.ao-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-1);
    cursor: pointer;
    transition: background 100ms ease;
    color: var(--color-text);
    -webkit-tap-highlight-color: transparent;
}
.ao-list-row:last-child { border-bottom: none; }
.ao-list-row:hover { background: var(--surface-2); }
.ao-list-row:active { background: var(--surface-3); }
.ao-list-row--no-hover { cursor: default; }
.ao-list-row--no-hover:hover,
.ao-list-row--no-hover:active { background: var(--surface-1); }

.ao-list-row__leading { flex-shrink: 0; }
.ao-list-row__content { flex: 1; min-width: 0; }
.ao-list-row__title { font-size: 14px; font-weight: 600; color: var(--color-text); }
.ao-list-row__subtitle { font-size: 12px; color: var(--color-muted-text); margin-top: 2px; }
.ao-list-row__trailing { flex-shrink: 0; color: var(--color-muted-text); }

/* ================================================================
   AoChip
   ================================================================ */
.ao-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--surface-2);
    color: var(--color-text);
    border: 1px solid var(--border-1);
    line-height: 1.4;
}
.ao-chip--primary { background: var(--color-primary); color: var(--color-on-primary); border-color: transparent; }
.ao-chip--accent  { background: var(--color-accent);  color: var(--color-on-accent);  border-color: transparent; }
.ao-chip--success { background: var(--color-success); color: #ffffff; border-color: transparent; }
.ao-chip--warning { background: var(--color-warning); color: var(--color-on-primary); border-color: transparent; }
.ao-chip--danger  { background: var(--color-danger);  color: #ffffff; border-color: transparent; }

/* ================================================================
   AoSwitch
   ================================================================ */
.ao-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.ao-switch__track {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 100px;
    background: var(--border-2);
    transition: background 200ms ease;
    flex-shrink: 0;
}
.ao-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.ao-switch input[type="checkbox"]:checked + .ao-switch__track {
    background: var(--color-primary);
}
.ao-switch input[type="checkbox"]:focus-visible + .ao-switch__track {
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.ao-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: var(--shadow-sm);
    transition: left 200ms ease;
    pointer-events: none;
}
.ao-switch input[type="checkbox"]:checked + .ao-switch__track .ao-switch__thumb {
    left: 22px;
}
.ao-switch__label { font-size: 14px; color: var(--color-text); }

/* ================================================================
   AoPicker
   ================================================================ */
.ao-picker-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ao-picker {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--input-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23888888' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    color: var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 9px 36px 9px 12px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.4;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ao-picker:focus {
    outline: none;
    border-color: var(--input-border-hover);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.ao-picker:disabled { opacity: 0.55; cursor: not-allowed; }
.ao-picker-label { font-size: 12px; font-weight: 600; color: var(--color-muted-text); letter-spacing: 0.02em; }

/* ================================================================
   AoDatePicker
   ================================================================ */
.ao-date-picker-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ao-date-picker {
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.4;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 120ms ease, box-shadow 120ms ease;
    cursor: pointer;
    color-scheme: inherit;
}
.ao-date-picker:focus {
    outline: none;
    border-color: var(--input-border-hover);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.ao-date-picker:disabled { opacity: 0.55; cursor: not-allowed; }
.ao-date-picker-label { font-size: 12px; font-weight: 600; color: var(--color-muted-text); letter-spacing: 0.02em; }

/* ================================================================
   AoEditor
   ================================================================ */
.ao-editor-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ao-editor-label { font-size: 12px; font-weight: 600; color: var(--color-muted-text); letter-spacing: 0.02em; }
.ao-editor {
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 100px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ao-editor::placeholder { color: var(--input-placeholder); }
.ao-editor:focus {
    outline: none;
    border-color: var(--input-border-hover);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ================================================================
   AoBottomNav
   ================================================================ */
.ao-bottom-nav {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    background: var(--shell-bg);
    border-top: 1px solid var(--shell-border);
    height: 60px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
}
.ao-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 12px;
    color: var(--shell-text);
    opacity: 0.60;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    flex: 1;
    transition: opacity 120ms ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.ao-bottom-nav-item:hover,
.ao-bottom-nav-item--active {
    opacity: 1;
    color: var(--color-primary);
}
.ao-bottom-nav-item__icon { font-size: 20px; line-height: 1; }

/* ================================================================
   AoSheet
   ================================================================ */
.ao-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    z-index: 200;
    animation: ao-fade-in 180ms ease;
}
.ao-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface-1);
    border-top: 1px solid var(--border-1);
    border-radius: 16px 16px 0 0;
    box-shadow: var(--shadow-md);
    z-index: 201;
    padding-bottom: env(safe-area-inset-bottom, 16px);
    animation: ao-slide-up 220ms cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 90vh;
    overflow-y: auto;
}
.ao-sheet__handle {
    width: 40px;
    height: 4px;
    background: var(--border-2);
    border-radius: 100px;
    margin: 12px auto 8px;
}
.ao-sheet__header {
    padding: 8px 16px 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    border-bottom: 1px solid var(--border-1);
}
.ao-sheet__body { padding: 16px; }

@keyframes ao-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ao-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ================================================================
   AoBrandHeader
   ================================================================ */
.ao-brand-header {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--shell-bg);
    color: var(--shell-text);
    padding: 12px 16px;
    border-bottom: 1px solid var(--shell-border);
    min-height: 56px;
}
.ao-brand-header__logo-img {
    height: 32px;
    width: auto;
    flex-shrink: 0;
}
.ao-brand-header__logomark {
    flex-shrink: 0;
}
.ao-brand-header__logo-text {
    display: inline-flex;
    align-items: flex-end;
    line-height: 1;
    font-size: 0;
}
.ao-brand-header__logo-agency {
    font-size: 20px;
    font-weight: 800;
    color: var(--shell-text);
    line-height: 1;
}
.ao-brand-header__logo-office {
    font-size: 20px;
    font-weight: 800;
    color: var(--brand-light-blue);
    line-height: 1;
}
.ao-brand-header__logo-crm {
    font-size: 11px;
    font-weight: 600;
    color: var(--shell-border);
    line-height: 1;
    margin-left: 5px;
    padding-bottom: 1px;
}
.ao-brand-header__spacer { flex: 1; }
.ao-brand-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ================================================================
   UserMenu (header dropdown: user name -> sub-menu)
   ================================================================ */
.ao-user-menu {
    position: relative;
}
.ao-user-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--shell-text);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.ao-user-menu__trigger:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.32);
}
.ao-user-menu__chevron {
    font-size: 11px;
    opacity: 0.7;
    transition: transform 120ms ease;
}
.ao-user-menu--open .ao-user-menu__chevron {
    transform: rotate(180deg);
}
.ao-user-menu__scrim {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: transparent;
}
.ao-user-menu__panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: var(--surface-1);
    color: var(--color-text);
    border: 1px solid var(--border-1);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    z-index: 100;
    animation: ao-fade-in 120ms ease;
}
.ao-user-menu__item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    font-family: inherit;
}
.ao-user-menu__item:hover { background: var(--surface-2); }
@keyframes ao-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   AoTabs
   ================================================================ */
.ao-tabs {
    display: flex;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ao-tabs::-webkit-scrollbar { display: none; }

.ao-tab {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: var(--color-muted-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: color 120ms ease;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.ao-tab:hover { color: var(--color-text); }
.ao-tab--active {
    color: var(--color-primary);
}
.ao-tab--active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 8px;
    right: 8px;
    height: 3px;
    background: var(--color-primary);
    border-radius: 3px 3px 0 0;
}

/* ================================================================
   Diary — Screen
   ================================================================ */
.diary-screen {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px - 60px);
    padding-bottom: 80px;
}

.diary-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 16px;
    color: var(--color-muted-text);
    font-size: 14px;
}
.diary-loading__spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border-1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: ao-spin 0.7s linear infinite;
}
@keyframes ao-spin { to { transform: rotate(360deg); } }

.diary-refresh-indicator {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    background: var(--color-primary);
    color: var(--color-on-primary);
    text-align: center;
    padding: 4px 0;
    font-size: 12px;
    font-weight: 600;
    z-index: 50;
    animation: ao-fade-in 120ms ease;
}

/* ================================================================
   Diary — Empty state
   ================================================================ */
.diary-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 24px;
    text-align: center;
}
.diary-empty__icon {
    font-size: 56px;
    line-height: 1;
    opacity: 0.6;
}
.diary-empty__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}
.diary-empty__subtitle {
    font-size: 14px;
    color: var(--color-muted-text);
    margin-bottom: 4px;
}

/* ================================================================
   Diary — Day list
   ================================================================ */
.diary-day-list {
    display: flex;
    flex-direction: column;
}

/* ================================================================
   Diary — Event row
   ================================================================ */
.diary-event-row {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-1);
    cursor: pointer;
    transition: background 100ms ease;
    -webkit-tap-highlight-color: transparent;
}
.diary-event-row:hover { background: var(--surface-2); }
.diary-event-row:active { background: var(--surface-3); }

.diary-event-row__time {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
    flex-shrink: 0;
    padding-top: 2px;
}
.diary-event-row__start {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}
.diary-event-row__end {
    font-size: 11px;
    color: var(--color-muted-text);
    line-height: 1.2;
}

.diary-event-row__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.diary-event-row__subject {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.diary-event-row__address {
    font-size: 12px;
    color: var(--color-muted-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.diary-event-row__contact {
    font-size: 12px;
    color: var(--color-muted-text);
}

.diary-event-row__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
.diary-event-row__chip-link {
    text-decoration: none;
    cursor: pointer;
}
.diary-event-row__chip-link:hover { filter: brightness(1.08); }

/* ================================================================
   Diary — Week list + sticky headers
   ================================================================ */
.diary-week-list {
    display: flex;
    flex-direction: column;
}
.diary-week-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--surface-2);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    border-bottom: 1px solid var(--border-1);
}
.diary-week-empty-day {
    padding: 16px;
    color: var(--color-muted-text);
    font-size: 13px;
    font-style: italic;
    border-bottom: 1px solid var(--border-1);
}

/* ================================================================
   Diary — FAB (Directions to next viewing)
   ================================================================ */
.diary-fab {
    position: fixed;
    bottom: 80px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--color-accent);
    color: var(--color-on-accent);
    border-radius: 100px;
    box-shadow: var(--shadow-md);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    z-index: 90;
    transition: transform 80ms ease, box-shadow 120ms ease;
    -webkit-tap-highlight-color: transparent;
}
.diary-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
}
.diary-fab:active { transform: translateY(0); }
.diary-fab__icon { font-size: 18px; line-height: 1; }

/* ================================================================
   AoBottomNav — loading skeleton
   ================================================================ */
.ao-bottom-nav-item--skeleton {
    flex: 1;
    background: var(--surface-2);
    border-radius: 4px;
    margin: 14px 6px;
    opacity: 0.4;
    animation: ao-pulse 1.4s ease-in-out infinite;
}

@keyframes ao-pulse {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 0.7; }
}

/* ================================================================
   DepartmentPicker
   ================================================================ */
.ao-dept-picker-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
}

.ao-dept-picker-btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    border-radius: 100px;
}

/* ================================================================
   AccessDeniedScreen
   ================================================================ */
.ao-access-denied {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: calc(100vh - 56px - 60px);
    padding: 32px 24px;
    text-align: center;
}

.ao-access-denied__icon {
    font-size: 64px;
    line-height: 1;
    opacity: 0.7;
}

.ao-access-denied__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.ao-access-denied__message {
    font-size: 15px;
    color: var(--color-muted-text);
    max-width: 320px;
    line-height: 1.5;
    margin: 0;
}

/* ================================================================
   Diary — Responsive
   ================================================================ */
@media (min-width: 768px) {
    .diary-screen { padding-bottom: 24px; }
    .diary-fab { bottom: 24px; right: 24px; }
    .diary-event-row { padding: 14px 24px; }
    .diary-week-header { padding: 10px 24px; }
    .diary-empty { padding: 80px 32px; }
}

/* ================================================================
   FlexField — Read-only display
   ================================================================ */
.ao-flex-readonly-field {
    /* Match the ao-kv-list look used by the core Details tab so the page
       reads as one consistent label/value grid. Label left, value right
       on tablet/desktop; stacked on phone widths. */
    display: grid;
    grid-template-columns: minmax(120px, 180px) 1fr;
    gap: 8px 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-1);
}
.ao-flex-readonly-field:last-child { border-bottom: none; }
.ao-flex-readonly-field__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-muted-text);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.5;
}
.ao-flex-readonly-field__value {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.5;
    word-break: break-word;
}
@media (max-width: 559px) {
    .ao-flex-readonly-field {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* ================================================================
   AoFormSection (layout for flex groups)
   ================================================================ */
.ao-form-section {
    padding: 0 16px;
}
.ao-form-section__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-muted-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 16px 0 4px;
    margin: 0;
    border-bottom: 1px solid var(--border-1);
}
.ao-form-section__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
}

/* ================================================================
   Property — Screen
   ================================================================ */
.property-screen {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px - 60px);
    padding-bottom: 80px;
}
.property-screen--loading,
.property-screen--error {
    justify-content: center;
    align-items: center;
}

/* ================================================================
   Property — Empty tab state (shared by multiple tabs)
   ================================================================ */
.property-empty-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    color: var(--color-muted-text);
    font-size: 14px;
}

/* ================================================================
   LoginShell - Splash
   ================================================================ */
.login-shell-splash {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    color: var(--color-muted-text);
    font-size: 14px;
}
.property-empty-tab__icon {
    font-size: 40px;
    line-height: 1;
    opacity: 0.6;
}

/* ================================================================
   Property — Tab content area
   ================================================================ */
.property-tab-content {
    flex: 1;
}

/* ================================================================
   Property — Header card (sticky)
   ================================================================ */
.property-header {
    padding: 12px 16px;
    background: var(--surface-1);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.property-header--sticky {
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: var(--shadow-sm);
}
.property-header__name {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}
.property-header__address {
    font-size: 13px;
    color: var(--color-muted-text);
    line-height: 1.3;
}

/* ================================================================
   Property — Action bar (quick-action chips)
   ================================================================ */
.property-action-bar {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-1);
}
.property-action-bar::-webkit-scrollbar { display: none; }

.property-action-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--surface-2);
    color: var(--color-text);
    border: 1px solid var(--border-1);
    text-decoration: none;
    cursor: pointer;
    transition: background 100ms ease;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.property-action-chip:hover { background: var(--surface-3); }
.property-action-chip__icon { font-size: 16px; line-height: 1; }

/* ================================================================
   Property — Photo carousel
   ================================================================ */
.photo-carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 360px;
    overflow: hidden;
    background: var(--surface-2);
    cursor: pointer;
}
@media (min-width: 768px) {
    .photo-carousel { max-height: 420px; }
}
.photo-carousel__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    color: var(--color-muted-text);
    font-size: 14px;
}
.photo-carousel__placeholder-icon {
    font-size: 48px;
    opacity: 0.5;
}
.photo-carousel__track {
    display: flex;
    height: 100%;
    transition: transform 400ms cubic-bezier(0.32, 0.72, 0, 1);
}
.photo-carousel__slide {
    flex: 0 0 100%;
    height: 100%;
}
.photo-carousel__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-carousel__dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
}
.photo-carousel__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 150ms ease;
}
.photo-carousel__dot--active {
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.photo-carousel__counter {
    position: absolute;
    top: 10px;
    right: 12px;
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 100px;
}

/* ================================================================
   Property — Photo lightbox (full-screen viewer)
   ================================================================ */
.photo-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 300;
    display: flex;
    flex-direction: column;
    animation: ao-fade-in 180ms ease;
}
.photo-lightbox__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    color: #ffffff;
}
.photo-lightbox__counter {
    font-size: 14px;
    font-weight: 600;
}
.photo-lightbox__close {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}
.photo-lightbox__body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0 48px;
}
.photo-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.photo-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #ffffff;
    font-size: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 100ms ease;
}
.photo-lightbox__nav:hover { background: rgba(255, 255, 255, 0.25); }
.photo-lightbox__nav--prev { left: 8px; }
.photo-lightbox__nav--next { right: 8px; }
.photo-lightbox__caption {
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    padding: 12px 16px;
}

/* ================================================================
   Property — Photo gallery grid
   ================================================================ */
.photo-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 2px;
}
.photo-gallery-grid__item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    cursor: pointer;
    background: var(--surface-2);
}
.photo-gallery-grid__item--hidden {
    opacity: 0.5;
}
.photo-gallery-grid__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 150ms ease;
}
.photo-gallery-grid__item:hover .photo-gallery-grid__img {
    transform: scale(1.05);
}
.photo-gallery-grid__badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}
.photo-gallery-grid__badge--uploading {
    background: var(--color-primary);
    animation: photo-badge-pulse 1.2s ease-in-out infinite;
}
.photo-gallery-grid__badge--failed {
    background: var(--color-danger);
    border: none;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    position: absolute;
    bottom: 4px;
    left: 4px;
}
.photo-gallery-grid__item--pending {
    opacity: 0.7;
}
@keyframes photo-badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ================================================================
   Property action chip — primary variant
   ================================================================ */
.property-action-chip--primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-color: rgba(0, 0, 0, 0.06);
}
.property-action-chip--primary:hover {
    background: var(--color-primary-hover);
}

/* ================================================================
   Photo Preview Sheet
   ================================================================ */
.photo-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.photo-preview-sheet {
    background: var(--color-bg);
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 16px;
    animation: photo-sheet-slide-up 200ms ease-out;
}
@keyframes photo-sheet-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.photo-preview-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.photo-preview-sheet__header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}
.photo-preview-sheet__close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 4px 8px;
    line-height: 1;
}
.photo-preview-sheet__image {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
    background: var(--surface-2);
}
.photo-preview-sheet__image img {
    width: 100%;
    max-height: 300px;
    object-fit: contain;
    display: block;
}
.photo-preview-sheet__form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.photo-preview-sheet__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}
.photo-preview-sheet__toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
}
.photo-preview-sheet__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ================================================================
   Photo file input (hidden label for web file picker)
   ================================================================ */
.photo-file-input-label {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    background: var(--color-bg);
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    text-align: center;
}

/* ================================================================
   Toast notification
   ================================================================ */
.ao-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-text);
    color: var(--color-bg);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 2000;
    box-shadow: var(--shadow-md);
    animation: toast-enter 200ms ease-out;
    transition: opacity 300ms ease;
}
.ao-toast--fade {
    opacity: 0;
}
@keyframes toast-enter {
    from { transform: translateX(-50%) translateY(20px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* ================================================================
   Property — Details tab
   ================================================================ */
.property-details-tab {
    padding: 8px 0;
}

/* ================================================================
   Property — Documents list
   ================================================================ */
.property-documents-list {
    display: flex;
    flex-direction: column;
}
.property-document-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-1);
    text-decoration: none;
    color: var(--color-text);
    cursor: pointer;
    transition: background 100ms ease;
    -webkit-tap-highlight-color: transparent;
}
.property-document-row:hover { background: var(--surface-2); }
.property-document-row__icon {
    font-size: 24px;
    flex-shrink: 0;
}
.property-document-row__content {
    flex: 1;
    min-width: 0;
}
.property-document-row__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.property-document-row__meta {
    font-size: 12px;
    color: var(--color-muted-text);
    margin-top: 2px;
}
.property-document-row__arrow {
    color: var(--color-muted-text);
    flex-shrink: 0;
}

/* ================================================================
   Property — Offers list
   ================================================================ */
.property-offers-list {
    display: flex;
    flex-direction: column;
}
/* ===== Viewings list (Property -> Viewings + Contact -> Viewings tabs) ===== */
.ao-viewings-list,
.ao-offers-list { display: flex; flex-direction: column; }
.ao-viewings-row,
.ao-offers-row {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-1);
    cursor: pointer;
    transition: background 100ms ease;
    -webkit-tap-highlight-color: transparent;
}
.ao-viewings-row:hover,
.ao-offers-row:hover { background: var(--surface-2); }
.ao-viewings-row__date {
    min-width: 110px;
    font-size: 12px;
    color: var(--color-muted-text);
    font-weight: 600;
}
.ao-viewings-row__body,
.ao-offers-row__body { flex: 1; min-width: 0; }
.ao-viewings-row__name,
.ao-offers-row__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ao-viewings-row__meta,
.ao-offers-row__meta {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
    flex-wrap: wrap;
}
.ao-viewings-row__feedback {
    font-size: 12px;
    color: var(--color-muted-text);
    margin-top: 6px;
}
.ao-offers-row__amount {
    min-width: 90px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    text-align: right;
}
.ao-offers-row__sub {
    font-size: 12px;
    color: var(--color-muted-text);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ao-offers-row__date {
    font-size: 12px;
    color: var(--color-muted-text);
}
/* Polished row layout (Viewings + Offers tabs): date is the visual anchor */
.ao-viewings-row__when {
    min-width: 110px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.ao-viewings-row__date-strong,
.ao-offers-row__date-strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
    min-width: 110px;
}
.ao-viewings-row__time {
    font-size: 13px;
    color: var(--color-muted-text);
    margin-top: 2px;
}
.ao-offers-row__amount-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ao-offers-row__amount-big {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
}
.ao-offers-row__link {
    display: inline-block;
    margin-top: 4px;
    color: var(--color-link);
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
}
.ao-offers-row__link:hover { text-decoration: none; }

.property-offer-row {
    padding: 12px 16px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-1);
    cursor: pointer;
    transition: background 100ms ease;
    -webkit-tap-highlight-color: transparent;
}
.property-offer-row:hover { background: var(--surface-2); }
.property-offer-row__amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
}
.property-offer-row__applicant {
    font-size: 14px;
    color: var(--color-muted-text);
    margin-top: 2px;
}
.property-offer-row__footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.property-offer-row__date {
    font-size: 12px;
    color: var(--color-muted-text);
}

/* ================================================================
   Property — Activity list (timeline)
   ================================================================ */
.property-activity-list {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
}
.property-activity-row {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-1);
}
.property-activity-row:last-child { border-bottom: none; }

.property-activity-row__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
    margin-top: 5px;
}
.property-activity-row__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.property-activity-row__header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.property-activity-row__date {
    font-size: 12px;
    color: var(--color-muted-text);
}
.property-activity-row__description {
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.4;
}
.property-activity-row__person {
    font-size: 12px;
    color: var(--color-muted-text);
}

/* ================================================================
   Property — Vendor card
   ================================================================ */
.property-vendor {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.property-vendor__avatar {
    font-size: 40px;
    line-height: 1;
    flex-shrink: 0;
}
.property-vendor__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.property-vendor__name {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
}
.property-vendor__name--link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--color-text);
}
.property-vendor__name--link:hover { color: var(--color-primary); }
.property-vendor__name-chevron {
    color: var(--color-muted-text);
    line-height: 0;
}
.property-vendor__name--link:hover .property-vendor__name-chevron {
    color: var(--color-primary);
}
.property-vendor__actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.property-vendor__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-primary);
    text-decoration: none;
    cursor: pointer;
}
.property-vendor__action:hover { text-decoration: underline; }
.property-vendor__action--primary {
    margin-top: 4px;
    padding: 8px 12px;
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    align-self: flex-start;
    font-weight: 600;
}
.property-vendor__action--primary:hover {
    background: var(--color-primary);
    color: var(--color-on-primary);
    text-decoration: none;
}
.property-vendor__action-icon {
    font-size: 16px;
    line-height: 1;
}

/* ================================================================
   Property — Responsive
   ================================================================ */
@media (min-width: 768px) {
    .property-screen { padding-bottom: 24px; }
    .property-header { padding: 16px 24px; }
    .property-action-bar { padding: 12px 24px; }
    .property-empty-tab { padding: 64px 32px; }
    .property-activity-list { padding: 0 24px; }
    .photo-gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; }
    min-height: 100vh;
    gap: 24px;
    background: var(--color-bg);
}
.login-shell-splash__logo {
    width: 120px;
    height: auto;
    opacity: 0.85;
}
.login-shell-splash__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: ao-spin 0.7s linear infinite;
}

/* ================================================================
   Messenger - Screen layout
   ================================================================ */
.msg-screen {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 56px);
    overflow: hidden;
}
.msg-screen__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-1);
    min-height: 44px;
    flex-shrink: 0;
}
.msg-screen__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}
.msg-screen__back {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--color-primary);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    border-radius: 6px;
    font-family: inherit;
}
.msg-screen__back:hover { background: var(--surface-2); }
.msg-screen__spacer { flex: 1; }
.msg-screen__body {
    display: flex;
    flex: 1;
    min-height: 0;
}
.msg-screen__list {
    width: 100%;
    overflow-y: auto;
    border-right: 1px solid var(--border-1);
    background: var(--surface-1);
}
.msg-screen__thread {
    flex: 1;
    display: none;
    flex-direction: column;
    min-width: 0;
}
.msg-screen__list--hidden-mobile { display: none; }
.msg-screen__thread--hidden-mobile { display: none; }

@media (min-width: 768px) {
    .msg-screen__list {
        width: 320px;
        min-width: 320px;
        display: block !important;
    }
    .msg-screen__list--hidden-mobile { display: block; }
    .msg-screen__thread {
        display: flex !important;
    }
    .msg-screen__thread--hidden-mobile { display: flex; }
    .msg-screen__back { display: none; }
}

/* Mobile: show active pane */
@media (max-width: 767.98px) {
    .msg-screen__list:not(.msg-screen__list--hidden-mobile) { display: block; }
    .msg-screen__thread:not(.msg-screen__thread--hidden-mobile) { display: flex; }
}

.msg-reconnect-bar {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    background: var(--color-warning);
    color: var(--color-on-primary);
    text-align: center;
    padding: 4px 0;
    font-size: 12px;
    font-weight: 600;
    z-index: 50;
    animation: ao-fade-in 120ms ease;
}

/* ================================================================
   Messenger — Loading & empty states
   ================================================================ */
.msg-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 16px;
    color: var(--color-muted-text);
    font-size: 14px;
}
.msg-loading--compact { padding: 24px 16px; }
.msg-loading__spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border-1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: ao-spin 0.7s linear infinite;
}

/* ================================================================
   InviteCodeScreen
   ================================================================ */
.invite-code-screen,
.msg-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 32px 24px;
    text-align: center;
    background: var(--color-bg);
}
.invite-code-screen h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 8px;
}
.invite-code-screen p {
    font-size: 14px;
    color: var(--color-muted-text);
    margin: 0 0 24px;
}
.code-input-group {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 16px;
}
.code-input {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.5rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    padding: 12px 16px;
    width: 100%;
    max-width: 20rem;
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.code-input::placeholder {
    letter-spacing: 0.1em;
    opacity: 0.5;
    color: var(--input-placeholder);
}
.code-input:focus {
    outline: none;
    border-color: var(--input-border-hover);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.code-input.input-error {
    border-color: var(--color-danger);
}
.error-message {
    color: var(--color-danger);
    font-size: 13px;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: rgba(220, 38, 38, 0.08);
    border-radius: 6px;
    max-width: 20rem;
}
.loading-indicator {
    color: var(--color-muted-text);
    font-size: 14px;
    margin-bottom: 12px;
}
.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 20rem;
}
.action-buttons .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 10px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    background: var(--color-primary);
    color: var(--color-on-primary);
    transition: background 120ms ease;
}
.action-buttons .btn-primary:hover { background: var(--color-primary-hover); }
.action-buttons .btn-primary:disabled { opacity: 0.48; cursor: not-allowed; }
.action-buttons .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: var(--surface-1);
    color: var(--color-text);
    border: 1px solid var(--border-1);
    transition: background 120ms ease;
}
.action-buttons .btn-secondary:hover { background: var(--surface-2); }
.action-buttons .btn-secondary:disabled { opacity: 0.48; cursor: not-allowed; }
.alternate-action {
    margin-top: 24px;
}
.btn-link {
    background: none;
    border: none;
    color: var(--color-link);
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}
.btn-link:hover { color: var(--color-link-hover); }

/* ================================================================
   CredentialsScreen
   ================================================================ */
.credentials-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 32px 24px;
    background: var(--color-bg);
}
.credentials-screen__header {
    text-align: center;
    margin-bottom: 32px;
}
.credentials-screen__logo {
    width: 100px;
    height: auto;
    margin-bottom: 16px;
}
.credentials-screen__tenant-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 4px;
}
.credentials-screen__subtitle {
    font-size: 14px;
    color: var(--color-muted-text);
    margin: 0;
}
.credentials-screen__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 340px;
}
.credentials-screen__error {
    color: var(--color-danger);
    font-size: 13px;
    padding: 8px 12px;
    background: rgba(220, 38, 38, 0.08);
    border-radius: 6px;
}
.credentials-screen__submit {
    margin-top: 4px;
    width: 100%;
}

/* ================================================================
   BiometricButton
   ================================================================ */
.biometric-button-wrap {
    display: flex;
    justify-content: center;
}
.biometric-button {
    gap: 8px;
}
.biometric-button__icon {
    font-size: 18px;
    line-height: 1;
}

/* ================================================================
   AccessRevokedScreen
   ================================================================ */
.access-revoked-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 32px 24px;
    text-align: center;
    background: var(--color-bg);
}
.access-revoked-screen__icon {
    font-size: 56px;
    line-height: 1;
    margin-bottom: 16px;
    opacity: 0.7;
}
.access-revoked-screen__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 8px;
}
.access-revoked-screen__message {
    font-size: 14px;
    color: var(--color-muted-text);
    margin: 0 0 24px;
    max-width: 300px;
    line-height: 1.5;
}

/* ================================================================
   AppBar — user + sign out
   ================================================================ */
.ao-appbar-user {
    font-size: 13px;
    font-weight: 500;
    color: var(--shell-text);
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
.ao-appbar-signout {
    color: var(--shell-text) !important;
    border-color: var(--shell-border) !important;
    font-size: 12px !important;
}

/* ================================================================
   Main content area (accounts for header + bottom nav)
   ================================================================ */
.ao-main-content {
    padding: 16px;
    padding-bottom: 80px;
    gap: 8px;
    padding: 64px 24px;
    text-align: center;
    flex: 1;
}
.msg-empty--compact { padding: 32px 16px; }
.msg-empty__icon { font-size: 48px; line-height: 1; opacity: 0.6; }
.msg-empty__title { font-size: 16px; font-weight: 700; color: var(--color-text); }
.msg-empty__subtitle { font-size: 14px; color: var(--color-muted-text); }

/* ================================================================
   Messenger — Avatar
   ================================================================ */
.msg-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
}
.msg-avatar--sm { width: 34px; height: 34px; font-size: 12px; border-radius: 8px; }
.msg-avatar--ao {
    background: linear-gradient(135deg, var(--color-primary), #6366f1) !important;
    font-weight: 800;
    letter-spacing: -0.5px;
}
.msg-conv-row--ao {
    border-bottom: 1px solid var(--border-1);
}
.msg-avatar__initials { user-select: none; }
.msg-avatar__presence {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    background: var(--color-success);
    border: 2px solid var(--surface-1);
    border-radius: 50%;
}

/* ================================================================
   Messenger — Conversation list
   ================================================================ */
.msg-conv-list {
    display: flex;
    flex-direction: column;
}
.msg-conv-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-1);
    cursor: pointer;
    transition: background 100ms ease;
    -webkit-tap-highlight-color: transparent;
}
.msg-conv-row:hover { background: var(--surface-2); }
.msg-conv-row:active { background: var(--surface-3); }
.msg-conv-row--active {
    background: var(--surface-2);
    border-left: 3px solid var(--color-primary);
    padding-left: 13px;
}
.msg-conv-row__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.msg-conv-row__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.msg-conv-row__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-conv-row__time {
    font-size: 11px;
    color: var(--color-muted-text);
    white-space: nowrap;
    flex-shrink: 0;
}
.msg-conv-row__preview {
    font-size: 12px;
    color: var(--color-muted-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 100px;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ================================================================
   Messenger — Conversation thread
   ================================================================ */
.msg-thread {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.msg-thread__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-1);
    flex-shrink: 0;
}
.msg-thread__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}
.msg-thread__status {
    font-size: 11px;
    color: var(--color-success);
    font-weight: 500;
}
.msg-thread__messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
}
.msg-thread__load-more {
    background: none;
    border: 1px solid var(--border-1);
    border-radius: 100px;
    padding: 6px 16px;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    align-self: center;
    margin-bottom: 12px;
    font-family: inherit;
    transition: background 100ms ease;
}
.msg-thread__load-more:hover { background: var(--surface-2); }

/* ================================================================
   Messenger — Date divider
   ================================================================ */
.msg-date-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
}
.msg-date-divider::before,
.msg-date-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-1);
}
.msg-date-divider__text {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-muted-text);
    white-space: nowrap;
}

/* ================================================================
   Messenger — Message bubble
   ================================================================ */
.msg-bubble {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.msg-bubble--sent {
    align-self: flex-end;
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-bottom-right-radius: 4px;
}
.msg-bubble--received {
    align-self: flex-start;
    background: var(--surface-2);
    color: var(--color-text);
    border-bottom-left-radius: 4px;
}
.msg-bubble__sender {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: 2px;
}
.msg-bubble__content {
    font-size: 14px;
    line-height: 1.4;
}
.msg-bubble__text { white-space: pre-wrap; }
.msg-bubble__meta {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 2px;
}
.msg-bubble__time {
    font-size: 10px;
    opacity: 0.7;
}

/* Streaming cursor */
.msg-stream-cursor::after {
    content: '|';
    animation: ao-blink 0.6s infinite;
    font-weight: 700;
}
@keyframes ao-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ================================================================
   Messenger — Input bar
   ================================================================ */
.msg-input-bar {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface-1);
    border-top: 1px solid var(--border-1);
    flex-shrink: 0;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
}
.msg-input-bar__attach {
    background: none;
    border: none;
    font-size: 20px;
    padding: 6px;
    cursor: pointer;
    color: var(--color-muted-text);
    line-height: 1;
    border-radius: 6px;
    opacity: 0.5;
}
.msg-input-bar__attach:disabled { cursor: not-allowed; }
.msg-input-bar__input {
    flex: 1;
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.4;
    resize: none;
    max-height: 120px;
    overflow-y: auto;
    box-sizing: border-box;
    transition: border-color 120ms ease;
}
.msg-input-bar__input::placeholder { color: var(--input-placeholder); }
.msg-input-bar__input:focus {
    outline: none;
    border-color: var(--input-border-hover);
}
.msg-input-bar__send {
    background: none;
    border: none;
    font-size: 22px;
    padding: 6px;
    cursor: pointer;
    color: var(--color-muted-text);
    line-height: 1;
    border-radius: 50%;
    transition: color 120ms ease, background 120ms ease;
}
.msg-input-bar__send--active {
    color: var(--color-primary);
}
.msg-input-bar__send--active:hover {
    background: var(--surface-2);
}
.msg-input-bar__send:disabled { cursor: not-allowed; opacity: 0.4; }

/* ================================================================
   Messenger — Typing indicator
   ================================================================ */
.msg-typing {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    align-self: flex-start;
}
.msg-typing__dots {
    display: flex;
    gap: 3px;
    padding: 8px 12px;
    background: var(--surface-2);
    border-radius: 12px;
}
.msg-typing__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-muted-text);
    animation: msg-dot-bounce 1.2s infinite ease-in-out;
}
.msg-typing__dot:nth-child(2) { animation-delay: 0.2s; }
.msg-typing__dot:nth-child(3) { animation-delay: 0.4s; }
.msg-typing__text {
    font-size: 11px;
    color: var(--color-muted-text);
    font-style: italic;
}
@keyframes msg-dot-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
}

/* ================================================================
   Messenger — New conversation sheet
   ================================================================ */
.msg-new-chat {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.msg-new-chat__list {
    max-height: 50vh;
    overflow-y: auto;
    border-radius: 8px;
    border: 1px solid var(--border-1);
}

/* ================================================================
   Messenger — Responsive
   ================================================================ */
@media (min-width: 768px) {
    .msg-screen__header { padding: 10px 24px; }
    .msg-conv-row { padding: 12px 20px; }
    .msg-thread__messages { padding: 16px 24px; }
    .msg-input-bar { padding: 10px 16px; }
}

/* ================================================================
   Contact Search
   ================================================================ */
.contact-search-screen {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.contact-search-screen__count {
    font-size: 12px;
    color: var(--color-muted-text);
    padding: 6px 16px 2px;
}
.contact-search-screen__list {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.contact-search-screen__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 16px;
    color: var(--color-muted-text);
    font-size: 14px;
}
.contact-search-screen__empty-icon {
    font-size: 32px;
    opacity: 0.5;
}
.contact-search-screen__load-more {
    display: flex;
    justify-content: center;
    padding: 12px 16px;
}
.contact-search-screen__load-btn {
    cursor: pointer;
    border: none;
    font-family: inherit;
}

/* ================================================================
   Contact Search — Search bar
   ================================================================ */
.contact-search-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-1);
    flex-shrink: 0;
}
.contact-search-bar__input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 0 12px;
    transition: border-color 120ms ease;
}
.contact-search-bar__input-wrap:focus-within {
    border-color: var(--input-border-hover);
}
.contact-search-bar__icon {
    font-size: 14px;
    opacity: 0.5;
    flex-shrink: 0;
}
.contact-search-bar__input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--input-text);
    font-size: 14px;
    font-family: inherit;
    padding: 10px 0;
    min-width: 0;
}
.contact-search-bar__input::placeholder {
    color: var(--input-placeholder);
}
.contact-search-bar__clear {
    background: none;
    border: none;
    color: var(--color-muted-text);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    border-radius: 50%;
}
.contact-search-bar__clear:hover {
    background: var(--surface-2);
}
.contact-search-bar__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.contact-search-bar__chip {
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: background 100ms ease, color 100ms ease;
}

/* ================================================================
   Contact Search — Result row
   ================================================================ */
.contact-result-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-1);
    cursor: pointer;
}

/* ================================================================
   PropertyResultRow - list row used by /properties
   ================================================================ */
.ao-property-search {
    display: flex;
    flex-direction: column;
}
.ao-property-search__count {
    padding: 6px 16px 4px;
    font-size: 12px;
    color: var(--color-muted-text);
    background: var(--color-bg);
}
.ao-property-search__empty {
    padding: 32px 16px;
    color: var(--color-muted-text);
    font-size: 14px;
    text-align: center;
}
.ao-property-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-1);
    cursor: pointer;
    text-align: left;
    transition: background 100ms ease;
}
.ao-property-row:hover { background: var(--surface-2); }
.ao-property-row:active { background: var(--surface-3); }
.ao-property-row__thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ao-property-row__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ao-property-row__img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--brand-light-blue);
}
.ao-property-row__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ao-property-row__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ao-property-row__address {
    font-size: 13px;
    color: var(--color-muted-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ao-property-row__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}
.ao-property-row__price {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
}
@media (min-width: 768px) {
    .ao-property-row { padding: 12px 24px; }
}

/* ================================================================
   AoKvList - key/value summary list used by Details tabs
   ================================================================ */
.ao-kv-list {
    display: grid;
    grid-template-columns: minmax(120px, 180px) 1fr;
    gap: 8px 16px;
    margin: 0;
    padding: 16px;
    background: var(--surface-1);
    border-radius: 10px;
    border: 1px solid var(--border-1);
}
.ao-kv-list dt {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-muted-text);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.5;
    padding-top: 2px;
}
.ao-kv-list dd {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.5;
    word-break: break-word;
}
.ao-kv-list dt + dd:empty::before {
    content: '\2014';
    color: var(--color-muted-text);
}
@media (max-width: 559px) {
    .ao-kv-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .ao-kv-list dt {
        padding-bottom: 0;
    }
    .ao-kv-list dd {
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border-1);
    }
    .ao-kv-list dd:last-of-type { border-bottom: none; }
}

/* ================================================================
   AoTextarea - auto-expand textarea
   ================================================================ */
.ao-textarea-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}
.ao-textarea-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
}

/* ================================================================
   AoPicker - error state
   ================================================================ */
.ao-picker--error {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 2px rgba(var(--color-danger-rgb, 220, 53, 69), 0.15);
}

/* ================================================================
   Form helpers — label, textarea, field error
   ================================================================ */
.ao-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-muted-text);
    letter-spacing: 0.02em;
}

.ao-textarea {
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 10px 12px;
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    transition: border-color 120ms ease, box-shadow 120ms ease;
    field-sizing: content;
}
.ao-textarea::placeholder { color: var(--input-placeholder); }
    min-height: 90px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ao-textarea:focus {
    outline: none;
    border-color: var(--input-border-hover);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.ao-textarea:disabled { opacity: 0.55; cursor: not-allowed; resize: none; }
.ao-textarea--error { border-color: var(--color-danger) !important; }
.ao-textarea--error:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2); }

.ao-field-error {
    font-size: 12px;
    color: var(--color-danger);
    margin-top: 2px;
}
.ao-textarea-charcount {
    font-size: 11px;
    color: var(--color-muted-text);
    text-align: right;
}
.ao-textarea-trailing {
    position: absolute;
    right: 8px;
    bottom: 28px;
}

/* ================================================================
   AoVoiceDictateButton — V1 stub
   ================================================================ */
.ao-voice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border-1);
    cursor: pointer;
    transition: background 100ms ease;
    -webkit-tap-highlight-color: transparent;
}
.contact-result-row:hover { background: var(--surface-2); }
.contact-result-row:active { background: var(--surface-3); }
.contact-result-row__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.contact-result-row__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contact-result-row__company {
    font-size: 12px;
    color: var(--color-muted-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contact-result-row__phone {
    font-size: 12px;
    color: var(--color-muted-text);
}
.contact-result-row__address {
    font-size: 12px;
    color: var(--color-muted-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contact-result-row__trailing {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.contact-result-row__class-chip {
    font-size: 10px;
}

/* ================================================================
   Contact Search — Responsive
   ================================================================ */
@media (min-width: 768px) {
    .contact-search-bar { padding: 12px 24px; }
    .contact-result-row { padding: 12px 24px; }
    .contact-search-screen__count { padding: 6px 24px 2px; }
}
.ao-voice-btn:hover { background: var(--surface-3); }
.ao-voice-btn:disabled { opacity: 0.48; cursor: not-allowed; }
.ao-voice-btn__icon { font-size: 16px; line-height: 1; }
.ao-voice-stub-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface-2);
    color: var(--color-muted-text);
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--shadow-md);
    z-index: 500;
    animation: ao-fade-in 180ms ease;
    cursor: pointer;
}

/* ================================================================
   ToastNotification

/* ================================================================
   Property — Action chip primary variant
   ================================================================ */
.property-action-chip--primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-color: rgba(0, 0, 0, 0.06);
}
.property-action-chip--primary:hover { filter: brightness(1.08); }

/* ================================================================
   LogActivitySheet
   ================================================================ */
.log-activity-sheet {
    max-height: 90vh;
    overflow-y: auto;
}

.log-activity-sheet__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    padding-bottom: 24px;
}

.log-activity-sheet__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.log-activity-sheet__picker-nowrap {
    margin: 0;
}

.log-activity-sheet__actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.log-activity-sheet__actions .ao-btn {
    flex: 1;
}

.log-activity-sheet__error {
    font-size: 13px;
    color: var(--color-danger);
    background: rgba(var(--color-danger-rgb, 220, 53, 69), 0.08);
    border-radius: 6px;
    padding: 8px 12px;
}

/* ================================================================
   AoToast — slide-up transient notification
   ================================================================ */
.ao-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    z-index: 400;
    animation: ao-slide-up-toast 250ms cubic-bezier(0.32, 0.72, 0, 1);
    white-space: nowrap;
}
.ao-toast--exit {
    animation: ao-fade-out 300ms ease forwards;
}
.ao-toast--success {
    background: var(--color-success);
    color: #ffffff;
}
.ao-toast--warning {
    background: var(--color-warning);
    color: var(--color-on-primary);
}
.ao-toast--danger {
    background: var(--color-danger);
    color: #ffffff;
}
.ao-toast__message { }
@keyframes ao-slide-up-toast {
    from { transform: translateX(-50%) translateY(20px); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}
@keyframes ao-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ================================================================
   ViewingFeedbackScreen — full-screen modal
   ================================================================ */
.viewing-feedback-screen {
    position: fixed;
    inset: 0;
    z-index: 250;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    transition: opacity 250ms ease, visibility 0s 250ms;
}
.viewing-feedback-screen--open {
    visibility: visible;
    opacity: 1;
    transition: opacity 250ms ease, visibility 0s;
}
.viewing-feedback-screen__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
}
.viewing-feedback-screen__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow-y: auto;
    animation: ao-slide-up 280ms cubic-bezier(0.32, 0.72, 0, 1);
}
@media (min-width: 768px) {
    .viewing-feedback-screen__panel {
        max-width: 560px;
        margin: 48px auto;
        height: auto;
        max-height: calc(100vh - 96px);
        border-radius: 16px;
        box-shadow: var(--shadow-md);
    }
}
.viewing-feedback-screen__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-1);
}

/* ================================================================
   AO Assistant - Chat Screen
   ================================================================ */
.ao-chat-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--color-bg);
    position: fixed;
    inset: 0;
    z-index: 200;
}
.ao-chat-screen__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-1);
    flex-shrink: 0;
}
.viewing-feedback-screen__back {
    background: none;
    border: none;
    font-size: 14px;
    color: var(--color-primary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    font-family: inherit;
}
.ao-chat-screen__back {
    background: none;
    border: none;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.viewing-feedback-screen__back:hover { background: var(--surface-2); }
.viewing-feedback-screen__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}
.viewing-feedback-screen__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 16px;
    color: var(--color-muted-text);
    font-size: 14px;
}
.viewing-feedback-screen__error {
    padding: 32px 16px;
    color: var(--color-danger);
    text-align: center;
    font-size: 14px;
}
.viewing-feedback-screen__context {
    padding: 16px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-1);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.viewing-feedback-screen__prop {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}
.viewing-feedback-screen__addr {
    font-size: 13px;
    color: var(--color-muted-text);
}
.viewing-feedback-screen__applicant {
    font-size: 13px;
    color: var(--color-text);
    font-weight: 500;
}
.viewing-feedback-screen__date {
    font-size: 12px;
    color: var(--color-muted-text);
}
.viewing-feedback-screen__offline {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(245, 158, 11, 0.1);
    border-bottom: 1px solid var(--border-1);
    font-size: 13px;
    color: var(--color-muted-text);
}
.viewing-feedback-screen__body {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    padding-bottom: 100px;
}
.viewing-feedback-screen__footer {
    position: sticky;
    bottom: 0;
    background: var(--surface-1);
    border-top: 1px solid var(--border-1);
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
    flex-shrink: 0;
}
.viewing-feedback-screen__submit {
    width: 100%;
}

/* ================================================================
   ViewingFeedbackForm
   ================================================================ */
.viewing-feedback-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.viewing-feedback-form__outcome { }
.viewing-feedback-form__notes { }
.viewing-feedback-form__field-error {
    font-size: 12px;
    color: var(--color-danger);
    margin-top: 4px;
}
.ao-picker-wrap--error .ao-picker {
    border-color: var(--color-danger);
}
.viewing-feedback-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.viewing-feedback-form__chip--disabled {
    opacity: 0.48;
    cursor: not-allowed;
    pointer-events: none;
}
.ao-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    z-index: 500;
    box-shadow: var(--shadow-md);
    animation: ao-toast-in 200ms ease, ao-toast-out 300ms ease 900ms forwards;
    pointer-events: none;
}
.ao-toast--success {
    background: var(--color-success, #2e7d32);
    color: #ffffff;
}
@keyframes ao-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes ao-toast-out {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to   { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}
.ao-chat-screen__back:hover { background: var(--surface-2); }
.ao-chat-screen__avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--color-primary), #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ao-chat-screen__avatar-label {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    user-select: none;
    letter-spacing: -0.5px;
}
.ao-chat-screen__header-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ao-chat-screen__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}
.ao-chat-screen__subtitle {
    font-size: 12px;
    color: var(--color-muted-text);
    line-height: 1.2;
}
.ao-chat-screen__spacer { flex: 1; }
.ao-chat-screen__messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
}
.ao-chat-screen__input {
    flex-shrink: 0;
    padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
}
.ao-chat-screen__notice {
    text-align: center;
    font-size: 12px;
    color: var(--color-warning, #d97706);
    background: rgba(217, 119, 6, 0.08);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
}
@media (min-width: 768px) {
    .ao-chat-screen {
        position: relative;
        inset: auto;
        z-index: auto;
        max-width: 720px;
        margin: 0 auto;
        border-radius: 12px;
        box-shadow: var(--shadow-md);
        height: calc(100vh - 120px);
    }
    .ao-chat-screen__messages { padding: 16px 24px 8px; }
}

/* ================================================================
   AO Assistant — Message Bubble
   ================================================================ */
.ao-msg {
    display: flex;
    gap: 8px;
    max-width: 88%;
    align-items: flex-start;
}
.ao-msg--ao {
    align-self: flex-start;
}
.ao-msg--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.ao-msg__avatar {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--color-primary), #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.ao-msg__avatar-label {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    user-select: none;
    letter-spacing: -0.5px;
}
.ao-msg__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ao-msg__sender {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-primary);
    padding-left: 2px;
}
.ao-msg__content {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.45;
    word-break: break-word;
}
.ao-msg--ao .ao-msg__content {
    background: var(--surface-2);
    color: var(--color-text);
    border-top-left-radius: 4px;
}
.ao-msg--user .ao-msg__content {
    background: var(--color-primary);
    color: #ffffff;
    border-top-right-radius: 4px;
}
.ao-msg__text { white-space: pre-wrap; }
.ao-msg__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
}
.ao-msg--user .ao-msg__meta { justify-content: flex-end; }
.ao-msg__time {
    font-size: 11px;
    color: var(--color-muted-text);
}

/* Deep links in AO messages */
.ao-deep-link {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    cursor: pointer;
    font-weight: 500;
}
.ao-deep-link:hover { text-decoration-style: solid; }

/* ================================================================
   AO Assistant — Confirm Card
   ================================================================ */
.ao-confirm-card {
    background: var(--surface-1);
    border: 1px solid var(--border-1);
    border-radius: 10px;
    padding: 12px;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ao-confirm-card--approved { border-color: var(--color-success, #2e7d32); background: rgba(46, 125, 50, 0.04); }
.ao-confirm-card--cancelled { border-color: var(--color-muted-text); opacity: 0.7; }
.ao-confirm-card--failed { border-color: var(--color-danger); background: rgba(220, 38, 38, 0.04); }

.ao-confirm-card__header {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ao-confirm-card__icon {
    font-size: 16px;
    line-height: 1;
}
.ao-confirm-card__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
}
.ao-confirm-card__fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;
    border-top: 1px solid var(--border-1);
}
.ao-confirm-card__field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ao-confirm-card__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-muted-text);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ao-confirm-card__value {
    font-size: 13px;
    color: var(--color-text);
}
.ao-confirm-card__input {
    font-size: 13px;
    padding: 6px 8px;
}
.ao-confirm-card__actions {
    display: flex;
    gap: 8px;
    padding-top: 4px;
}
.ao-confirm-card__status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--border-1);
}
.ao-confirm-card__status-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}
.ao-confirm-card__status-badge--approved { color: var(--color-success, #2e7d32); background: rgba(46, 125, 50, 0.1); }
.ao-confirm-card__status-badge--cancelled { color: var(--color-muted-text); background: var(--surface-2); }
.ao-confirm-card__status-badge--failed { color: var(--color-danger); background: rgba(220, 38, 38, 0.08); }
.ao-confirm-card__result {
    font-size: 12px;
    color: var(--color-muted-text);
}
.msg-loading__spinner--sm {
    width: 14px;
    height: 14px;
    border-width: 2px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}

/* ================================================================
   AO Assistant — Daily Briefing Card
   ================================================================ */
.ao-briefing-card {
    background: var(--surface-1);
    border: 1px solid var(--border-1);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 4px;
}
.ao-briefing-card__header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
    border-bottom: 1px solid var(--border-1);
}
.ao-briefing-card__icon { font-size: 18px; line-height: 1; }
.ao-briefing-card__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
}
.ao-briefing-card__date {
    font-size: 12px;
    color: var(--color-muted-text);
    margin-left: auto;
}
.ao-briefing-card__section {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-1);
}
.ao-briefing-card__section:last-child { border-bottom: none; }
.ao-briefing-card__section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ao-briefing-card__section-content {
    font-size: 13px;
    color: var(--color-text);
    line-height: 1.5;
}
.ao-briefing-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* ================================================================
   AO Assistant — Voice Input Button (V1 stub)
   ================================================================ */
.ao-voice-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-1);
    background: var(--surface-1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: not-allowed;
    opacity: 0.45;
    flex-shrink: 0;
}
.ao-voice-btn__icon {
    font-size: 16px;
    line-height: 1;
}

/* ================================================================
   AO Assistant — Responsive
   ================================================================ */
@media (min-width: 768px) {
    .ao-chat-screen__header { padding: 10px 24px; }
    .ao-msg { max-width: 72%; }
}

/* ================================================================
   OfflineIndicator
   ================================================================ */
.ao-offline-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.4;
    border: none;
    cursor: default;
    font-family: inherit;
}
.ao-offline-chip--offline {
    background: var(--color-danger);
    color: #ffffff;
    animation: ao-offline-pulse 2s ease-in-out infinite;
}
.ao-offline-chip--pending {
    background: var(--color-warning);
    color: var(--color-on-primary);
}
.ao-offline-chip--issue {
    background: var(--color-danger);
    color: #ffffff;
    cursor: pointer;
}
.ao-offline-chip--issue:hover { opacity: 0.88; }
@keyframes ao-offline-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.65; }
}

/* ================================================================
   QueuedItemsSheet
   ================================================================ */
.ao-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ao-sheet__header h3 { margin: 0; font-size: 16px; }
.ao-sheet__close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--color-muted-text);
    padding: 4px 8px;
    line-height: 1;
}
.ao-sheet__close:hover { color: var(--color-text); }
.ao-sheet__empty {
    text-align: center;
    color: var(--color-muted-text);
    padding: 24px 0;
}
.ao-sheet__section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-muted-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 8px;
    padding-top: 8px;
}
.ao-queue-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-1);
    gap: 12px;
}
.ao-queue-item:last-child { border-bottom: none; }
.ao-queue-item__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.ao-queue-item__type {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}
.ao-queue-item__time {
    font-size: 12px;
    color: var(--color-muted-text);
}
.ao-queue-item__error {
    font-size: 12px;
    color: var(--color-danger);
}
.ao-queue-item__retry {
    font-size: 11px;
    color: var(--color-warning);
}
.ao-queue-item__actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.ao-btn--danger-ghost {
    background: none;
    border: 1px solid transparent;
    color: var(--color-danger);
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.ao-btn--danger-ghost:hover { background: rgba(220, 38, 38, 0.08); }

/* ================================================================
   Search bar + filter chips (used by PropertySearchBar, ContactSearchBar, etc.)
   ================================================================ */
.ao-search-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border-1);
}
.ao-search-bar__input { width: 100%; }
.ao-search-bar__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ao-search-bar__filter-row {
    display: flex;
    justify-content: flex-end;
}
.ao-search-bar__filter-button {
    appearance: none;
    background: var(--surface-2);
    color: var(--color-text);
    border: 1px solid var(--border-1);
    border-radius: 999px;
    padding: 6px 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}
.ao-search-bar__filter-button:hover { background: var(--surface-3); }
.ao-search-bar__filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--brand-magenta, var(--color-link));
    color: var(--color-on-primary, #fff);
    font-size: 11px;
    font-weight: 600;
}

/* PropertyFilterSheet */
.property-filter-sheet__sections {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 4px 0 12px;
}
.property-filter-sheet__section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.property-filter-sheet__heading {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: var(--color-text);
}
.property-filter-sheet__price-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.property-filter-sheet__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.property-filter-sheet__count {
    margin-left: 4px;
    opacity: 0.7;
    font-size: 11px;
}
.property-filter-sheet__actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--border-1);
}
.ao-filter-chip {
    appearance: none;
    background: var(--surface-2);
    color: var(--color-text);
    border: 1px solid var(--border-1);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.ao-filter-chip:hover {
    background: var(--surface-3, var(--surface-2));
    border-color: var(--color-primary);
}
.ao-filter-chip--active {
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
}

/* ================================================================
   LastSyncedBanner
   ================================================================ */
.ao-last-synced-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--color-warning);
    color: var(--color-on-primary);
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    margin-bottom: 8px;
}
.ao-last-synced-banner__icon {
    font-size: 16px;
    flex-shrink: 0;
}
.ao-last-synced-banner__text {
    flex: 1;
    min-width: 0;
}

/* ================================================================
   AoIcon — inline SVG icon sizing
   ================================================================ */
.ao-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
.ao-icon--sm  { width: 16px; height: 16px; }
.ao-icon--md  { width: 20px; height: 20px; }
.ao-icon--lg  { width: 24px; height: 24px; }
.ao-icon--xl  { width: 32px; height: 32px; }

/* ================================================================
   AoEmptyState — illustrated empty-state block
   ================================================================ */
.ao-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 56px 24px;
    text-align: center;
}
.ao-empty-state__illustration {
    opacity: 0.85;
    margin-bottom: 4px;
}
.ao-empty-state__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}
.ao-empty-state__subtitle {
    font-size: 14px;
    color: var(--color-muted-text);
    margin: 0;
    max-width: 280px;
    line-height: 1.5;
}

/* ================================================================
   Skip-to-content link (accessibility)
   ================================================================ */
.ao-skip-link {
    /* Visually hidden until keyboard focus. The earlier "top: -100%" pattern
       leaks at the top of every authenticated page - percentages on top
       resolve to 0 when the containing block has no explicit height. */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}
.ao-skip-link:focus {
    position: fixed;
    top: 0;
    left: 16px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 8px 16px;
    overflow: visible;
    clip: auto;
    z-index: 10000;
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-radius: 0 0 8px 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

/* ================================================================
   REDUCED MOTION — disable all animations and transitions
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .ao-sheet { animation: none !important; }
    .ao-sheet-backdrop { animation: none !important; }
    .ao-user-menu__panel { animation: none !important; }
    .ao-toast { animation: none !important; }
    .ao-toast--exit { animation: none !important; opacity: 0; }
    .photo-carousel__track { transition: none !important; }
    .diary-loading__spinner,
    .msg-loading__spinner,
    .login-shell-splash__spinner { animation: none !important; border-top-color: var(--color-primary); }
    .ao-bottom-nav-item--skeleton { animation: none !important; }
    .ao-offline-chip--offline { animation: none !important; }
    .msg-typing__dot { animation: none !important; }
    .msg-stream-cursor::after { animation: none !important; }
    .photo-gallery-grid__img { transition: none !important; }
    .photo-gallery-grid__badge--uploading { animation: none !important; }
    .viewing-feedback-screen { transition: none !important; }
    .viewing-feedback-screen__panel { animation: none !important; }
}

/* ================================================================
   FOCUS VISIBLE — stronger focus ring for keyboard users
   ================================================================ */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.ao-bottom-nav-item:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: -2px;
    border-radius: 8px;
}
.ao-list-row:focus-visible,
.diary-event-row:focus-visible,
.msg-conv-row:focus-visible,
.contact-result-row:focus-visible,
.ao-property-row:focus-visible,
.property-offer-row:focus-visible,
.property-document-row:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: -2px;
    background: var(--surface-2);
}
.ao-tab:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: -2px;
}
.ao-filter-chip:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
}
.property-action-chip:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
}
.photo-lightbox__nav:focus-visible,
.photo-lightbox__close:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}
.photo-carousel__dot:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}
.msg-input-bar__send:focus-visible,
.msg-input-bar__attach:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ================================================================
   DARK THEME — carousel overlay adjustments
   ================================================================ */
[data-ao-theme='dark'] .photo-carousel__counter {
    background: rgba(0, 0, 0, 0.7);
}
[data-ao-theme='dark'] .photo-lightbox {
    background: rgba(0, 0, 0, 0.96);
}
[data-ao-theme='dark'] .photo-gallery-grid__badge {
    background: rgba(0, 0, 0, 0.75);
}

/* ================================================================
   SettingsScreen
   ================================================================ */
.ao-settings-screen {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 720px;
    margin: 0 auto;
}

.ao-settings-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-1);
}
.ao-settings-row:last-child { border-bottom: none; }
.ao-settings-row__label { color: var(--color-muted-text); font-size: 14px; }
.ao-settings-row__value { color: var(--color-text); font-weight: 500; text-align: right; }

.ao-btn--block { width: 100%; justify-content: center; }

.ao-btn--block { width: 100%; justify-content: center; }