/* Functional additions keep the original Uyali colours and screen structure. */
[hidden] { display: none !important; }
/* Dialogs must sit above Leaflet controls and the runner's map offer card. */
.modal-overlay { z-index:11000; }
body.uyali-dialog-open { overflow:hidden; }
.uyali-account-actions { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:14px; }
.uyali-text-button { background:none; border:0; color:var(--accent-primary, #6366f1); font:inherit; font-size:13px; cursor:pointer; padding:8px 0; text-decoration:underline; text-underline-offset:3px; }
.uyali-text-button:focus-visible, .uyali-secondary-button:focus-visible, .uyali-order-tile:focus-visible { outline:3px solid #818cf8; outline-offset:4px; }
.uyali-secondary-button { width:100%; padding:14px 16px; margin-top:16px; border:1px solid var(--border-primary,#d4d4d8); border-radius:14px; background:transparent; color:inherit; font:inherit; font-weight:600; cursor:pointer; }
.uyali-account-dialog { width:min(540px,calc(100vw - 32px)); max-height:90dvh; overflow:auto; }
.uyali-field { display:grid; gap:8px; margin:0 0 16px; font-size:14px; font-weight:500; }
.uyali-check { display:flex; align-items:flex-start; gap:10px; line-height:1.6; margin:20px 0; font-size:13px; }
.uyali-check input { margin-top:5px; flex:none; accent-color:#6366f1; }
.uyali-inline-error { color:#dc2626; margin-top:16px; font-size:14px; line-height:1.5; }
.uyali-danger { color:#dc2626; display:block; }
.uyali-connection { position:fixed; z-index:10000; top:0; inset-inline:0; padding:10px 20px; padding-top:max(10px,env(safe-area-inset-top)); color:#fff; background:#343467; font-size:13px; text-align:center; }
.uyali-service-banner { padding:12px 16px; margin:0 0 16px; border:1px solid #818cf84d; background:#818cf815; color:inherit; border-radius:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; line-height:1.5; }
.uyali-service-banner button { flex-shrink:0; }
.uyali-order-list { display:grid; gap:10px; margin:0 0 18px; }
.uyali-order-tile { width:100%; background:var(--bg-surface,#fff); color:var(--text-primary,#18181b); border:1px solid var(--border-primary,#e4e4e7); border-radius:14px; padding:14px; text-align:start; cursor:pointer; display:grid; gap:6px; font:inherit; }
.uyali-order-tile[aria-current=true] { border-color:#6366f1; }
.uyali-order-tile small { opacity:.75; }
.uyali-order-actions { display:flex; flex-wrap:wrap; gap:12px; margin:12px 0; }
.uyali-order-status { font-size:12px; font-weight:600; text-transform:capitalize; }
.uyali-money-summary { padding:14px 16px; margin:16px 0; border:1px solid var(--border-primary,#e4e4e7); border-radius:14px; }
.uyali-money-summary .receipt-line { gap:12px; margin:8px 0; }
.uyali-money-summary strong { white-space:nowrap; }
.uyali-case-photos { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.uyali-case-photo { margin:12px 0; }
.uyali-case-photo img { width:100%; max-height:260px; object-fit:contain; border-radius:10px; }
.uyali-case-photo figcaption { margin-top:6px; font-size:12px; }
.uyali-native-safe { padding-top:env(safe-area-inset-top); }
.uyali-empty { padding:24px 16px; line-height:1.6; font-size:14px; text-align:center; opacity:.8; }
.uyali-update { position:fixed; z-index:9999; bottom:calc(88px + env(safe-area-inset-bottom)); inset-inline:16px; max-width:480px; margin:auto; display:flex; align-items:center; justify-content:space-between; padding:16px; border-radius:16px; background:#18181b; color:#fff; box-shadow:0 8px 35px #0004; gap:16px; font-size:14px; }
.uyali-update button { border:0; padding:10px 14px; border-radius:10px; background:#818cf8; color:#fff; font:inherit; cursor:pointer; }
@media(max-width:600px) { .uyali-account-dialog input, #uyali-action-modal input, #uyali-action-modal select, #uyali-action-modal textarea { font-size:16px; } .uyali-account-dialog .modal-footer { position:sticky; bottom:0; background:var(--bg-surface,#fff); } .uyali-service-banner { align-items:flex-start; } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }

/* Live account and marketplace controls use the same field language as the
   original composer. Standalone fields do not have its input-wrap element. */
#uyali-action-modal .form-input,
#uyali-account-dialog .form-input,
.uyali-field > input:not([type="checkbox"]):not([type="radio"]),
.uyali-field > select,
.uyali-field > textarea,
#uyali-order-choice {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    height: auto;
    padding: 12px 14px;
    border: 1.5px solid var(--border-primary);
    border-radius: 14px;
    background: var(--bg-input);
    color: var(--text-primary);
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
}
#uyali-action-modal select.form-input,
#uyali-account-dialog select.form-input,
#uyali-order-choice { padding-inline-end: 32px; }
#uyali-action-modal textarea.form-input,
#uyali-account-dialog textarea.form-input { min-height: 112px; resize: vertical; }
#uyali-action-modal input:focus-visible,
#uyali-action-modal select:focus-visible,
#uyali-action-modal textarea:focus-visible,
#uyali-account-dialog input:focus-visible,
#uyali-account-dialog select:focus-visible,
#uyali-account-dialog textarea:focus-visible,
#uyali-order-choice:focus-visible {
    outline: 3px solid var(--indigo-400);
    outline-offset: 2px;
    border-color: var(--indigo-500);
}
#uyali-action-modal .form-label,
#uyali-account-dialog .form-label {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.5;
    margin-bottom: 8px;
}
#uyali-action-modal .form-group,
#uyali-account-dialog .form-group { margin-bottom: 20px; min-width: 0; }
#uyali-action-modal .id-step-desc,
#uyali-account-dialog .id-step-desc { color: var(--text-secondary); line-height: 1.6; }
#uyali-action-modal .login-legal,
#uyali-account-dialog .login-legal {
    text-align: start;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.uyali-check { min-height: 44px; align-items: flex-start; cursor: pointer; }
.uyali-check input { width: 20px; height: 20px; margin-top: 2px; }
.uyali-field-grid,
.uyali-quantity-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.uyali-item-fieldset {
    min-width: 0;
    margin: 20px 0;
    padding: 16px;
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    background: var(--bg-hover);
}
.uyali-item-fieldset > legend,
.uyali-item-fieldset > .form-label,
.uyali-item-fieldset > h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    line-height: 1.45;
    padding: 0;
    margin-bottom: 14px !important;
}
.uyali-item-fieldset > .form-group:last-child { margin-bottom: 0 !important; }
.uyali-quantity-row > .form-group { margin-bottom: 16px !important; }
.uyali-field input[type="file"] { padding: 8px; font-size: 13px; }
.uyali-field input[type="file"]::file-selector-button {
    min-height: 36px;
    padding: 8px 12px;
    margin-inline-end: 10px;
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
}

/* Dialog controls stay within reach while long forms scroll independently. */
#uyali-action-modal .modal-card,
#uyali-account-dialog .modal-card {
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    max-height: min(90dvh, 960px) !important;
}
#uyali-action-modal .modal-header,
#uyali-account-dialog .modal-header { flex: none; gap: 16px; align-items: center; }
#uyali-action-modal .modal-title,
#uyali-account-dialog .modal-title { min-width: 0; line-height: 1.25; }
#uyali-action-modal .modal-close-btn,
#uyali-account-dialog .modal-close-btn { width: 44px; height: 44px; font-size: 24px; }
#uyali-action-modal .modal-body,
#uyali-account-dialog .modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 20px;
}
#uyali-action-modal .modal-footer,
#uyali-account-dialog .modal-footer {
    flex: none;
    position: relative;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-card);
}
.modal-submit-btn,
.modal-cancel-btn { min-height: 48px; height: auto; padding: 14px 16px; line-height: 1.35; }
.modal-submit-btn:disabled,
.receipt-approve-btn:disabled,
.uyali-order-progress-action:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.form-error:empty,
.uyali-inline-error:empty { display: none !important; }

/* One clear next action, with the current stage in ordinary language. */
.uyali-order-progress {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 20px;
    border: 1px solid var(--border-subtle);
    border-inline-start: 3px solid var(--indigo-500);
    border-radius: 20px;
    background: var(--bg-card);
    flex: none;
    color: var(--text-primary);
}
.uyali-order-progress-copy { flex: 1; min-width: 0; }
.uyali-order-progress-label {
    display: block;
    color: var(--indigo-600);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.5;
    margin-bottom: 4px;
}
.uyali-order-progress-title { font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -.3px; }
.uyali-order-progress-description { margin-top: 6px; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.uyali-order-progress-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 48px;
    max-width: 42%;
    padding: 12px 18px;
    border-radius: 14px;
    background: var(--bg-elevated);
    color: var(--text-on-elevated);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
}
.uyali-order-progress[data-uyali-stage="closed"] { border-inline-start-color: var(--emerald-500); }
.uyali-order-progress[data-uyali-stage="closed"] .uyali-order-progress-label { color: var(--emerald-700); }
.uyali-order-progress[data-uyali-stage="disputed"] { border-inline-start-color: var(--amber-500); }
.uyali-order-progress[data-uyali-stage="disputed"] .uyali-order-progress-label { color: var(--amber-700); }
:root[data-theme="dark"] .uyali-order-progress-label { color: var(--indigo-400); }
:root[data-theme="dark"] .uyali-order-progress[data-uyali-stage="closed"] .uyali-order-progress-label { color: var(--emerald-400); }
:root[data-theme="dark"] .uyali-order-progress[data-uyali-stage="disputed"] .uyali-order-progress-label { color: var(--amber-400); }
#screen-chat > .uyali-order-progress,
#screen-runner > .uyali-order-progress { margin: 16px 24px 0; }
.uyali-order-progress-action:focus-visible,
.uyali-header-help:focus-visible { outline: 3px solid var(--indigo-400); outline-offset: 3px; }
.uyali-header-help {
    width: 44px;
    height: 44px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-primary);
    border-radius: 14px;
    color: var(--text-secondary);
    background: var(--bg-card);
    cursor: pointer;
}
.uyali-header-help svg { width: 20px; height: 20px; }

/* Exact amounts stay aligned even when descriptions wrap. */
.receipt-line { gap: 14px; align-items: flex-start; line-height: 1.5; }
.receipt-line > :first-child { min-width: 0; overflow-wrap: anywhere; }
.receipt-line > strong,
.receipt-line > .receipt-val { flex: none; color: var(--text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: end; }
.uyali-money-summary { background: var(--bg-hover); }
.receipt-line.uyali-total-line { border-top: 1px solid var(--border-subtle); padding-top: 14px; margin-top: 14px; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.receipt-line.uyali-total-line > strong { font-size: 20px; line-height: 1.2; }
.uyali-order-tile { background: var(--bg-card); line-height: 1.45; min-width: 0; }
.uyali-order-tile strong { font-size: 15px; }
.uyali-order-tile small { overflow-wrap: anywhere; font-size: 12px; opacity: 1; color: var(--text-secondary); }
.uyali-order-tile[aria-current="true"] { border-color: var(--indigo-500); box-shadow: inset 3px 0 0 var(--indigo-500); }
.uyali-text-button { min-height: 44px; line-height: 1.4; }
.uyali-secondary-button { min-height: 48px; line-height: 1.4; }
.uyali-order-actions .uyali-text-button { padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-card); color: var(--text-secondary); text-decoration: none; font-weight: 600; }
.uyali-order-actions .uyali-danger { color: var(--rose-600); }
#uyali-order-selector { max-width: none; margin: 16px 24px 0; padding: 0; background: transparent; border: none; flex: none; }
#uyali-order-selector .form-label { margin-bottom: 8px; color: var(--text-secondary); }
#uyali-order-actions { margin: 12px 24px 0; flex: none; }
#uyali-order-choice { font-size: 14px; }
.uyali-order-list { min-width: 0; }
#uyali-live-orders > section { display: grid; gap: 10px; }
#uyali-live-orders h3 { font-size: 15px; font-weight: 700; line-height: 1.5; }
#uyali-live-orders > details { border: 1px solid var(--border-subtle); border-radius: 16px; padding: 0 14px; background: var(--bg-card); }
#uyali-live-orders summary { min-height: 48px; padding-block: 14px; font-size: 14px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
#uyali-live-orders details > .uyali-order-tile { margin: 0 0 10px; }
.support-panel { z-index: 10500; }
.support-close-btn { color: var(--text-on-elevated); }
.support-close-btn:hover { color: var(--text-on-elevated); }
.mission-status-badge[data-uyali-stage="disputed"] { color: var(--amber-700); background: var(--amber-50); }
.mission-status-badge[data-uyali-stage="disputed"] .mission-status-dot { background: var(--amber-500); animation: none; }
:root[data-theme="dark"] .mission-status-badge[data-uyali-stage="disputed"] { color: var(--amber-400); background: rgba(245,158,11,.12); }

@media (max-width: 768px) {
    .nav-right { gap: 6px; }
    .nav-brand { gap: 8px; }
    .support-fab { display: none; }
    #toast-container { top: calc(60px + env(safe-area-inset-top, 0px)); padding: 8px 12px; gap: 8px; }
    .toast { padding: 12px; gap: 10px; border-radius: 18px; }
    .toast-close { min-width: 44px; min-height: 44px; }
    .support-panel { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - 152px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
    .support-header { padding: 10px 16px; flex-shrink: 0; }
    .support-close-btn, .support-send-btn { width: 44px; height: 44px; flex-shrink: 0; }
    .support-quick-btn { min-height: 44px; }
    .support-messages { min-height: 0; }
    .support-input { height: 44px; min-width: 0; font-size: 16px; }
    .support-input-bar { flex-shrink: 0; }
    .leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; }
    .profile-container { width: 100%; padding: 16px 16px 24px; }
    .profile-settings-btn, .profile-wallet-btn { min-height: 44px; }
    .profile-settings-btn { min-width: 44px; }
    .profile-wallet-btn { font-size: 13px; padding: 10px; height: auto; }
    .profile-menu-item { min-height: 60px; }
    .profile-menu-text { flex: 1; min-width: 0; }
    .profile-name, .profile-handle { overflow-wrap: anywhere; }
    .errand-stop { padding: 14px; border-radius: 22px; margin-bottom: 16px; }
    .stop-header { margin-bottom: 12px; }
    .stop-remove-btn { width: 44px; height: 44px; }
    .form-input-wrap, .item-input { min-width: 0; min-height: 48px; }
    .form-input-wrap { height: 50px; border-radius: 16px; padding-inline: 12px; gap: 8px; }
    .form-input, .item-input, .delivery-search-input { font-size: 16px; min-width: 0; }
    .item-main { gap: 8px; }
    .item-input { padding-inline: 12px; }
    .item-actions { gap: 8px; padding-inline-start: 52px; flex-wrap: wrap; }
    .item-action-btn { width: 44px; height: 44px; }
    .item-action-btn svg { width: 17px; height: 17px; }
    .sub-pref-select { min-height: 44px; max-width: 100%; padding-inline: 12px; font-size: 13px; }
    .item-row { padding-block: 4px; gap: 8px; }
    .voice-play-btn, .voice-remove-btn { width: 44px; height: 44px; flex: none; }
    .add-item-btn { margin-bottom: 0; min-height: 48px; }
    .chip { min-height: 44px; }
    .form-chips { flex-wrap: nowrap; gap: 8px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .form-chips::-webkit-scrollbar { display: none; }
    .form-chips .chip { flex: none; }
    .sidebar-form .form-label { color: var(--text-secondary); }
    .transport-desc { font-size: 12px; }
    .price-row { font-size: 13px; gap: 12px; }
    .price-value { white-space: nowrap; font-variant-numeric: tabular-nums; }

    #screen-chat, #screen-runner { overflow-y: auto; overscroll-behavior-y: contain; scroll-padding-block: 16px; }
    #screen-chat > .uyali-order-progress,
    #screen-runner > .uyali-order-progress { margin: 12px 12px 0; }
    #uyali-order-selector { margin: 12px 12px 0; }
    #uyali-order-actions { margin: 12px 12px 0; gap: 8px; }
    .uyali-order-progress { padding: 16px; gap: 14px; flex-direction: column; align-items: stretch; border-radius: 18px; }
    .uyali-order-progress-title { font-size: 19px; }
    .uyali-order-progress-action { width: 100%; max-width: none; }
    .chat-state { height: auto; min-height: 100%; flex: none; padding: 24px 16px; }
    .chat-state.chat-split { min-height: 0; height: auto; padding: 12px; align-items: stretch; gap: 12px; }
    .chat-left { gap: 10px; }
    .runner-status-card { padding: 14px 16px; gap: 12px; border-radius: 20px; }
    .runner-name { font-size: 16px; }
    .runner-avatar { width: 44px; height: 44px; }
    .chat-map-card { flex: none; height: 112px; min-height: 112px; border-radius: 20px; }
    #screen-chat[data-uyali-stage="closed"] .chat-map-card,
    #screen-chat[data-uyali-stage="cancelled"] .chat-map-card { display: none; }
    .chat-right { flex: none; overflow: hidden; border-radius: 22px; }
    .chat-header { height: auto; min-height: 64px; padding: 12px 14px; gap: 12px; flex-wrap: wrap; }
    .chat-header-title { font-size: 16px; }
    .escrow-badge { min-height: 36px; font-size: 11px; padding: 7px 10px; border-radius: 12px; max-width: 100%; }
    .chat-messages { flex: none; min-height: 100px; overflow: visible; padding: 16px 12px; gap: 16px; }
    .chat-bubble { max-width: 100%; font-size: 14px; line-height: 1.5; }
    .chat-input-bar { padding: 12px; gap: 8px; }
    .chat-input { min-width: 0; font-size: 16px; }
    .chat-attach-btn, .chat-send-btn { flex-shrink: 0; }
    .receipt-card { border-radius: 20px; }
    #receipt-card-wrap { display: block; }
    #receipt-card-wrap > .chat-bubble-avatar { display: none; }
    .receipt-header { padding: 16px; gap: 8px; }
    .receipt-body { padding: 20px 16px; }
    .receipt-total { font-size: 32px; }
    .receipt-label { font-size: 11px; line-height: 1.5; margin-bottom: 8px; }
    .receipt-divider { margin: 18px 0; }
    .receipt-actions { padding: 12px; gap: 8px; }
    .receipt-approve-btn, .receipt-dispute-btn { min-height: 48px; padding: 12px; font-size: 13px; line-height: 1.4; }
    .completion-card { padding: 24px 18px; border-radius: 22px; }
    .completion-icon-box { width: 64px; height: 64px; border-radius: 22px; margin-bottom: 16px; }
    .completion-icon { width: 32px; height: 32px; }
    .completion-title { font-size: 22px; }
    .completion-desc { line-height: 1.6; }
    #uyali-live-orders { padding: 12px; margin: 0; flex: none; }
    .runner-state { height: auto; flex: none; }
    .runner-split { height: auto; width: 100%; padding: 12px; gap: 12px; }
    .runner-left { overflow: visible; gap: 12px; }
    .runner-right { flex: none; min-height: 220px; border-radius: 22px; }
    .runner-right-centered { padding: 24px 16px; }
    .mission-card, .mission-list-card { padding: 18px; border-radius: 22px; overflow: visible; }
    .mission-store { font-size: 20px; line-height: 1.3; overflow-wrap: anywhere; }
    .mission-top { gap: 8px; flex-wrap: wrap; }
    .mission-item { padding: 12px; gap: 10px; align-items: flex-start; }
    .mission-item > span { min-width: 0; overflow-wrap: anywhere; flex: 1; }
    .mission-item-icon { width: 20px; height: 20px; flex: none; }
    .wallet-card { padding: 22px; border-radius: 22px; }
    .wallet-balance { font-size: 32px; letter-spacing: -.8px; }
    .runner-tab { min-height: 44px; }
    .uyali-case-photos { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .uyali-case-photo img { max-height: 220px; }
    .uyali-money-summary { padding: 14px; margin-block: 16px; }
    .uyali-money-summary .receipt-line { font-size: 13px; }
    .uyali-money-summary .uyali-total-line { font-size: 15px; }

    #uyali-action-modal, #uyali-account-dialog {
        padding: max(12px,env(safe-area-inset-top,0px)) 12px max(12px,env(safe-area-inset-bottom,0px));
    }
    #uyali-action-modal .modal-card, #uyali-account-dialog .modal-card {
        width: 100% !important;
        max-width: 540px;
        max-height: calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) !important;
        border-radius: 24px;
    }
    #uyali-action-modal .modal-header, #uyali-account-dialog .modal-header { padding: 16px 16px 8px; gap: 12px; }
    #uyali-action-modal .modal-title, #uyali-account-dialog .modal-title { font-size: 20px; }
    #uyali-action-modal .modal-body, #uyali-account-dialog .modal-body { padding: 16px; }
    #uyali-action-modal .modal-footer, #uyali-account-dialog .modal-footer { padding: 12px 16px 16px; gap: 8px; }
    #uyali-action-modal .form-input, #uyali-account-dialog .form-input, .uyali-field > input, .uyali-field > select, .uyali-field > textarea, #uyali-order-choice { font-size: 16px; }
    .modal-submit-btn, .modal-cancel-btn { font-size: 14px; padding: 12px; }
}

@media (max-width: 380px) {
    .nav-title { font-size: 16px; }
    .nav-brand { gap: 6px; }
    .nav-right { gap: 4px; }
    .nav-logo { width: 32px; height: 32px; }
    .uyali-field-grid { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 768px) and (max-height: 520px) {
    .home-sidebar { flex-basis: 82%; height: 82%; max-height: 82%; }
    .home-sidebar.expanded { flex-basis: 100%; height: 100%; max-height: 100%; }
    .sidebar-subtitle, .sheet-drag-handle { display: none; }
    #uyali-action-modal .modal-header, #uyali-account-dialog .modal-header { padding-top: 8px; }
    #uyali-action-modal .modal-footer, #uyali-account-dialog .modal-footer { padding-block: 8px; }
}

/* Task dialogs share the entry flow's phone frame and action hierarchy. The
   measured viewport also follows keyboard-driven panning on iOS/WebViews. */
:is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] {
    --dialog-accent: var(--emerald-700);
    --dialog-on-accent: #fff;
    inset-block-start: var(--dialog-viewport-top, 0px);
    inset-block-end: auto;
    height: var(--dialog-viewport-height, 100dvh);
    padding: 24px;
    overflow: hidden;
}
:root[data-theme="dark"] :is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] {
    --dialog-accent: var(--emerald-400);
    --dialog-on-accent: var(--zinc-950);
}
:is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] .modal-card {
    min-height: 0;
    max-height: 100% !important;
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
}
:is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] .modal-header { padding: 20px 24px 12px; }
:is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] .modal-title { font-size: 22px; font-weight: 700; letter-spacing: -.025em; overflow-wrap: anywhere; }
:is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] .modal-close-btn { border-radius: 12px; color: var(--text-primary); }
:is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] .modal-body { flex: 1 1 auto; padding: 12px 24px 24px; scrollbar-gutter: stable; }
:is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] .modal-body > :first-child { margin-block-start: 0; }
:is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] .modal-footer { padding: 16px 24px 20px; flex-wrap: nowrap; gap: 12px; }
:is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] .modal-footer button { min-width: 0; min-height: 52px; flex: 1 1 0; padding: 12px 14px; font-size: 15px; line-height: 1.4; font-weight: 650; white-space: normal; overflow-wrap: anywhere; }
:is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] .modal-footer .modal-submit-btn { flex-grow: 2; }
:is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] .modal-submit-btn {
    border: 1px solid var(--dialog-accent);
    border-radius: 12px;
    background: var(--dialog-accent);
    color: var(--dialog-on-accent);
    box-shadow: none;
    transform: none;
}
:is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] .modal-submit-btn:not(:disabled):hover { background: var(--dialog-accent); color: var(--dialog-on-accent); transform: none; box-shadow: none; }
:is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] .modal-cancel-btn { border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-input); color: var(--text-primary); }
:is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] :is(button, a, input, select, textarea):focus-visible { outline: 3px solid var(--uyali-focus, var(--dialog-accent)); outline-offset: 3px; }
:is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] .form-input { border-color: var(--uyali-control-border, var(--border-primary)); border-radius: 12px; font-size: 16px; }
:is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] .form-input:focus-visible { border-color: var(--dialog-accent); box-shadow: none; }
:is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] .uyali-text-button { min-height: 44px; color: var(--uyali-brand-text, var(--dialog-accent)); }
:is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] .uyali-danger { color: var(--rose-600); }
:is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] figure { margin: 0 0 20px; }
:is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] figure img { display: block; margin-inline: auto; border-radius: 12px; }
:is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] figcaption { margin-top: 8px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
#uyali-action-modal[data-dialog-viewport] .modal-footer:has([data-checkout-back]:not([hidden])) [data-close] { display: none; }
[dir="rtl"] :is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] .modal-title { letter-spacing: 0; }

@media (max-width: 600px) {
    :is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] { padding: 0; align-items: stretch; background: var(--bg-card); }
    :is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] .modal-card { width: 100% !important; max-width: none; height: 100%; margin: 0; border: 0; border-radius: 0; animation: none; }
    :is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] .modal-header { padding: max(16px, env(safe-area-inset-top, 0px)) 20px 12px; }
    :is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] .modal-title { font-size: 21px; }
    :is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] .modal-body { padding: 12px 20px 24px; }
    :is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] .modal-footer { padding: 12px 20px max(16px, env(safe-area-inset-bottom, 0px)); gap: 10px; }
    :is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport] :is(.modal-header, .modal-body, .modal-footer) { padding-inline: max(20px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
}
:is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport][data-dialog-compact] .modal-header { padding-block: max(8px, env(safe-area-inset-top, 0px)) 8px; }
:is(#uyali-action-modal, #uyali-account-dialog)[data-dialog-viewport][data-dialog-compact] .modal-footer { padding-block: 8px max(8px, env(safe-area-inset-bottom, 0px)); }

/* ── Accessibility baseline (all viewports) ────────────────────────────────
   44×44 px minimum touch targets (WCAG 2.5.5 / Apple HIG / Material) on every
   screen size, not only ≤768 px — tablets and landscape phones are touch too. */
.item-action-btn, .stop-remove-btn, .modal-close-btn, .theme-toggle-btn, .nav-profile-btn, .profile-settings-btn {
  min-width: 44px; min-height: 44px;
}
.uyali-language-nav select { min-height: 44px; height: 44px; }
/* iOS Safari zooms the page when a control under 16 px gains focus. */
@media (max-width: 768px) {
  .sub-pref-select, .uyali-language-nav select, .form-input, input, select, textarea { font-size: 16px; }
  .uyali-language-nav select { width: auto; max-width: 96px; }
}