/* Mobile: linguagem visual do motorista. Reutiliza os componentes e estados existentes. */
.driver-body {
    --blue-900: #104476;
    --blue-800: #0954a1;
    --blue-700: #0965bd;
    --blue-600: #1878cf;
    --blue-100: #e7f1fb;
    --blue-50: #f1f6fc;
    --ink: #1c3047;
    --muted: #66788a;
    --line: #e1e8ef;
    --background: #f5f7fa;
    --shadow: 0 3px 12px rgb(25 51 77 / 3%);
    --radius: 16px;
    --nav-height: 76px;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--background);
}
.driver-body .app-header { flex: 0 0 auto; }
.driver-body .app-main { flex: 1 0 auto; min-height: 0; min-width: 0; display: flow-root; }
.driver-body .app-main.has-bottom-nav { padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px)); }
.driver-body .page { padding-bottom: 24px; }
.driver-body .page > :last-child:not(dialog) { margin-bottom: 0; }
.driver-body :is(a, button, summary):focus-visible { outline: 3px solid #82b6ea; outline-offset: 3px; }
.driver-body .app-header { background: #095db2; box-shadow: none; }
.driver-body .header-inner { min-height: 88px; padding: 16px 20px; gap: 12px; }
.driver-body .brand { min-width: 0; gap: 11px; }
.driver-body .brand-mark { width: 43px; height: 43px; border-radius: 13px; background: #fff; color: #095db2; border: 0; box-shadow: none; }
.driver-body .brand-mark .icon { width: 27px; height: 27px; }
.driver-body .brand strong { font-size: 18px; font-weight: 750; letter-spacing: -.4px; }
.driver-body .brand small { margin-top: 4px; font-size: 11px; color: #dceafb; line-height: 1.35; }
.driver-body .notification-button { width: 44px; height: 44px; border: 0; background: rgb(255 255 255 / 10%); border-radius: 13px; }
.driver-body .notification-button .icon { width: 23px; height: 23px; }
.driver-body .page { padding-top: 24px; }
.driver-body h1 { font-size: 27px; line-height: 1.18; letter-spacing: -.8px; font-weight: 750; }
.driver-body .page-heading p { font-size: 14px; line-height: 1.55; }
.driver-body .eyebrow, .driver-body .overline { font-size: 11px; letter-spacing: .075em; font-weight: 700; }
.driver-body .card { border-color: var(--line); box-shadow: var(--shadow); }
.driver-body .btn { min-height: 52px; border-radius: 12px; font-weight: 700; box-shadow: none; }
.driver-body .btn-primary { background: var(--blue-700); }
.driver-body .btn-primary:hover { background: var(--blue-800); box-shadow: none; }
.driver-body .btn-secondary { border-color: #d5e1ed; }
.driver-body .btn:hover { transform: none; }
.driver-body :is(input[type="text"], input[type="search"], input[type="number"], textarea) { border-width: 1px; border-color: #cedae6; border-radius: 12px; background: #fff; }
.driver-body :is(input, textarea):focus { border-color: var(--blue-600); box-shadow: 0 0 0 3px rgb(24 120 207 / 10%); }
.driver-body .back-link { color: #4e687f; font-weight: 600; font-size: 14px; gap: 8px; }
.driver-body .back-link .icon { width: 19px; height: 19px; }
.driver-body .context-pill { border-radius: 8px; background: #eaf1f8; font-weight: 650; }
.driver-body .greeting-row { margin-bottom: 20px; }
.driver-body .greeting-row .eyebrow { color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 14px; margin-bottom: 3px; }
.driver-body .online-pill { font-weight: 650; font-size: 12px; }
.driver-body .route-card { box-shadow: var(--shadow); }
.driver-body .route-top { background: #fff; color: var(--ink); padding: 20px; align-items: center; border-bottom: 1px solid var(--line); }
.driver-body .route-top .overline { color: var(--muted); }
.driver-body .route-top h2 { font-size: 29px; letter-spacing: -.7px; }
.driver-body .badge-success { color: #16744e; background: #e9f6ef; border: 0; padding: 7px 10px; font-weight: 650; }
.driver-body .route-details { padding: 5px 20px; }
.driver-body .route-details > div { padding: 10px 0; }
.driver-body .route-details dt { font-size: 13px; }
.driver-body .route-details dd { font-size: 14px; font-weight: 650; }
.driver-body .btn-hero { min-height: 76px; padding: 17px; }
.driver-body .btn-hero small { font-size: 12px; margin-top: 3px; }
.driver-body .guidance-card { padding: 16px; gap: 12px; }
.driver-body .guidance-card strong { font-size: 14px; font-weight: 650; }
.driver-body .guidance-card small { font-size: 12px; }
.driver-body .round-icon { width: 42px; height: 42px; border-radius: 12px; }
.driver-body .guideline-result { background: #eff9f3; box-shadow: none; }
.driver-body .avatar { background: var(--blue-700); box-shadow: none; }
.driver-body .driver-tracking { border-color: var(--line); padding: 12px 14px; gap: 10px; border-radius: 14px; }
.driver-body .driver-tracking > div { grid-template-columns: 22px minmax(0,1fr); gap: 3px 9px; }
.driver-body .tracking-symbol { width: 22px; height: 22px; }
.driver-body .tracking-symbol .icon { width: 21px; height: 21px; }
.driver-body .driver-tracking button { border: 0; font-weight: 650; }

/* Uma entrega em contexto, seis categorias e cards com ícones individuais. */
.occurrence-page .page-heading { gap: 0; margin-bottom: 20px; }
.delivery-summary { width: 100%; margin: 0 0 25px; padding: 16px; display: grid; grid-template-columns: 42px minmax(0,1fr) 24px; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 15px; }
.delivery-summary-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--blue-700); background: var(--blue-50); border-radius: 12px; }
.delivery-summary-icon .icon { width: 25px; height: 25px; }
.delivery-summary strong { display: block; font-size: 17px; font-weight: 750; }
.delivery-summary small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.delivery-summary-check { width: 24px; height: 24px; display: grid; place-items: center; color: #19865c; background: #eaf7ef; border-radius: 50%; }
.delivery-summary-check .icon { width: 15px; height: 15px; }
.occurrence-page .occurrence-search { position: relative; margin-bottom: 20px; }
.occurrence-page .occurrence-search > .icon { position: absolute; left: 15px; width: 19px; pointer-events: none; }
.occurrence-page .occurrence-search input { padding-left: 43px; min-height: 48px; font-size: 15px; }
.occurrence-page .occurrence-categories { gap: 16px; }
.occurrence-page .occurrence-category { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.occurrence-page .occurrence-category summary { padding: 12px 0; min-height: 48px; font-size: 14px; font-weight: 700; border: 0; }
.occurrence-page .occurrence-category summary > span { gap: 8px; }
.occurrence-page .occurrence-category summary .icon { width: 18px; height: 18px; color: #58728a; }
.occurrence-page .occurrence-category summary small { font-size: 12px; font-weight: 500; color: #687e91; }
.occurrence-page .problem-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 4px 0 0; }
.occurrence-page .problem-card { min-height: 148px; min-width: 0; padding: 20px 12px 16px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 14px; text-align: center; border: 1px solid #dae5ef; border-radius: 16px; box-shadow: 0 2px 5px rgb(24 55 80 / 2%); }
.occurrence-page .problem-card .round-icon { width: 48px; height: 48px; background: #edf4fb; border-radius: 14px; }
.occurrence-page .problem-card .round-icon .icon { width: 28px; height: 28px; stroke-width: 1.8; }
.occurrence-page .problem-card strong { font-size: 14px; line-height: 1.4; font-weight: 650; overflow-wrap: anywhere; }
.occurrence-page .problem-card small { display: none; }
.occurrence-page .problem-card:hover { transform: none; border-color: #88b8e1; background: #fbfdff; box-shadow: none; }
.occurrence-page .problem-card.selected { border-color: var(--blue-700); background: #edf5fe; box-shadow: 0 0 0 1px var(--blue-700); }
.occurrence-page .occurrence-category:not([open]) { padding: 3px 14px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }

/* Conversa: mantém rolagem, estado e composer atuais. */
.driver-body .mobile-ticket-page { gap: 16px; grid-template-columns:minmax(0,1fr); }
.mobile-ticket-page > *, .ticket-chat-history { min-width:0; }
.mobile-chat .message-bubble:has(.compact-audio-player) { width:min(84%,440px); min-width:0; }
.driver-body .mobile-ticket-page h1 { font-size: 25px; margin-bottom: 14px; }
.driver-body .status-badge { font-weight: 650; }
.driver-body .mobile-service-state { padding: 15px; border: 0; border-radius: 14px; }
.driver-body .mobile-service-state strong { font-size: 14px; font-weight: 650; }
.driver-body .mobile-service-state small { font-size: 12px; line-height: 1.5; }
.driver-body .mobile-service-state .round-icon { background: rgb(255 255 255 / 60%); }
.driver-body .ticket-context summary { font-size: 14px; font-weight: 600; color: #506b83; }
.driver-body .ticket-context .data-list { margin-left: 24px; margin-right: 24px; }
.driver-body .ticket-context .data-list > div { grid-template-columns: 92px minmax(0, 1fr); align-items: start; gap: 12px; }
.driver-body .ticket-context .data-list dd { min-width: 0; text-align: left; overflow-wrap: anywhere; }
.driver-body .mobile-chat { min-height: 0; border-color: var(--line); box-shadow: none; }
.driver-body .mobile-chat-header { min-height: 76px; padding: 15px; gap: 10px; }
.driver-body .chat-contact-mark { width: 38px; height: 38px; display: grid; place-items: center; color: var(--blue-700); background: var(--blue-50); border-radius: 12px; flex-shrink: 0; }
.driver-body .mobile-chat-header > div { display: block; flex: 1; }
.driver-body .mobile-chat-header strong { display: block; font-size: 14px; font-weight: 700; }
.driver-body .mobile-chat-header small { display: block; max-width: none; margin-top: 2px; text-align: left; font-size: 11px; color: #687d91; }
.driver-body .chat-auto-label { color: #718497; font-size: 10px; line-height: 1.5; text-align: right; }
.driver-body .mobile-chat-messages { background: #f5f7fa; padding: 18px 12px; gap: 16px; scrollbar-gutter: auto; }
.driver-body .mobile-chat-messages { height: auto; min-height: 290px; max-height: clamp(320px, 53dvh, 490px); }
.driver-body .mobile-chat-messages > .chat-message { flex-shrink: 0; }
.driver-body .mobile-chat .message-bubble { border-color: #e4eaf0; border-radius: 5px 15px 15px 15px; padding: 12px; box-shadow: 0 2px 3px rgb(28 48 71 / 2%); }
.driver-body .mobile-chat .message-cat .message-bubble { background: var(--blue-700); border-color: var(--blue-700); border-radius: 15px 5px 15px 15px; }
.driver-body .mobile-chat .message-bubble header { flex-wrap: wrap; column-gap: 12px; row-gap: 2px; margin-bottom: 6px; }
.driver-body .mobile-chat .message-bubble header strong { font-size: 12px; font-weight: 650; }
.driver-body .mobile-chat .message-bubble header time { margin-left: auto; font-size: 11px; }
.driver-body .mobile-chat .message-bubble p { font-size: 14px; line-height: 1.55; }
.driver-body .mobile-chat .system-message { padding: 6px 12px; background: #eaf0f5; color: #63778b; font-size: 11px; line-height: 1.5; font-weight: 500; border-radius: 20px; }
.driver-body .mobile-chat .chat-composer { grid-template-columns: 44px minmax(0,1fr) 44px 44px; gap: 4px; padding: 12px 8px; }
.driver-body .mobile-chat .chat-composer textarea { min-height: 44px; padding: 11px 10px; background: #f5f7fa; border-color: #e4eaf0; font-size: 14px; border-radius: 12px; }
.driver-body .mobile-chat .composer-icon { width: 44px; height: 44px; color: #536e86; background: transparent; }
.driver-body .mobile-chat .composer-send { width: 44px; height: 44px; border-radius: 12px; box-shadow: none; }
.driver-body .mobile-chat .composer-icon .icon, .driver-body .mobile-chat .composer-send .icon { width: 22px; height: 22px; }
.driver-body .mobile-chat .attachment-sheet button { font-weight: 650; background: #f5f8fc; border-color: var(--line); }
.driver-body .mobile-chat .audio-recorder { background: #fff6f5; border-color: #f3dcd8; gap: 12px; }
.driver-body .audio-recorder button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; font-weight: 650; }
.driver-body .audio-recorder button .icon { width: 16px; height: 16px; }
.driver-body .chat-support:empty { display: none; }
.driver-body .chat-support { font-size: 12px; }

.driver-body .bottom-nav { padding-top: 6px; background: #fff; border-top: 1px solid #e2e9f0; box-shadow: 0 -3px 16px rgb(23 45 70 / 3%); backdrop-filter: none; }
.driver-body .bottom-nav a { position: relative; gap: 5px; min-height: 64px; color: #78899a; font-size: 11px; font-weight: 600; border-radius: 12px; }
.driver-body .bottom-nav a.active { color: var(--blue-700); background: #edf4fc; }
.driver-body .bottom-nav .icon { width: 23px; height: 23px; stroke-width: 1.8; }
/* O shell usa a altura real do header; a reserva da navegação é contada uma vez. */
.driver-body .bottom-nav { height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px)); }
.driver-body .filter-tabs { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.driver-body .page :is(#produtos-nf, #produtos-adicionados) { scroll-margin-top: 16px; }
.driver-body :is(input, textarea, .btn, summary) { scroll-margin-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 16px); }
.driver-body .notification-panel { top: calc(88px + env(safe-area-inset-top, 0px)); max-height: calc(100dvh - 100px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; }
.driver-body .notification-panel > :is(header, footer) { flex: 0 0 auto; }
.driver-body .notification-list { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
.driver-body .barcode-dialog { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
.driver-body .barcode-dialog-content { max-height: inherit; }
.driver-body .media-dialog { max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
.driver-body .media-dialog img { max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
.driver-body .media-dialog > button { top: 8px; right: 8px; }
.driver-body :is(.barcode-dialog, .media-dialog)[open] { animation: mobile-dialog-enter .16s ease-out; }
.driver-body :is(.found-card, .delivery-card) { animation-duration: .2s; }
@keyframes mobile-dialog-enter { from { opacity: .65; } to { opacity: 1; } }
@media (min-width: 700px) {
    .driver-body .app-main.has-bottom-nav { padding-bottom: 118px; }
}
/* Leitor: escolhas claras, confirmação com produto e nenhuma área de diagnóstico. */
.driver-body .barcode-dialog { border-radius:18px; box-shadow:0 12px 40px rgb(20 43 68 / 18%); }
.driver-body .barcode-dialog header h2 { font-size:20px; }
.driver-body .barcode-intro { margin:16px 0; font-size:14px; }
.driver-body .barcode-methods { gap:12px; }
.driver-body .barcode-methods > .btn { min-height:52px; }
.driver-body .barcode-typed-form { padding:16px; gap:10px; background:#f6f8fb; border-color:var(--line); }
.driver-body .barcode-typed-form label { font-size:13px; font-weight:650; }
.driver-body .barcode-status { min-height:0; margin:16px 0; padding:10px 12px; font-size:13px; }
.driver-body .barcode-result { margin:16px 0; gap:12px; padding:16px; background:#f4f8fc; border-color:var(--line); }
.driver-body .barcode-result.is-confirmed { background:#f2faf6; border-color:#cfe7d9; animation:barcode-confirm .2s ease-out; }
.barcode-confirmation { display:flex; align-items:center; gap:8px; color:#16865b; font-size:13px; }
.barcode-confirmation .icon { width:21px; height:21px; }
.barcode-confirmed-product { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:12px; }
.barcode-confirmed-product img { width:64px; height:64px; object-fit:contain; border-radius:10px; background:#fff; }
.barcode-confirmed-product strong,.barcode-confirmed-product span { display:block; overflow-wrap:anywhere; }
.barcode-confirmed-product strong { font-size:15px; line-height:1.4; }
.barcode-confirmed-product span { margin-top:4px; color:var(--muted); font-size:12px; }
.barcode-confirmed-lots { display:grid; gap:8px; }
.barcode-confirmed-lots > span { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 8px; font-size:13px; }
.barcode-confirmed-lots small { grid-column:1/-1; color:var(--muted); font-size:12px; }
.barcode-gallery-action { position:relative; min-height:44px; padding:4px 8px; display:flex; align-items:center; justify-content:center; color:var(--blue-700); text-align:center; font-size:13px; cursor:pointer; }
.barcode-gallery-action input { position:absolute; width:1px; height:1px; opacity:0; }
.driver-body .barcode-actions { margin-top:16px; gap:10px; }
.driver-body .barcode-actions .btn { min-height:48px; }
.driver-body .barcode-result fieldset label { padding:12px; gap:12px; }
.driver-body .selected-product-card.is-new { animation:barcode-confirm .2s ease-out; }
#produtos-adicionados { scroll-margin-top:16px; }
@keyframes barcode-confirm { from { opacity:.6; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }
.ticket-completion { padding:24px; text-align:center; scroll-margin-top:16px; animation:completion-enter .28s ease-out; }
.ticket-completion[hidden] { display:none; }
.completion-mark { width:64px; height:64px; margin:0 auto 16px; display:grid; place-items:center; color:#16865b; background:#eaf7f0; border-radius:50%; }
.completion-mark .icon { width:30px; height:30px; }
.ticket-completion > .overline { color:#16865b; }
.ticket-completion h2 { margin:8px 0; font-size:24px; line-height:1.2; color:var(--ink); }
.ticket-completion .completion-intro { margin:0 0 20px; color:var(--muted); font-size:14px; line-height:1.55; }
.completion-result,.completion-observation { margin-bottom:16px; padding:16px; border:1px solid #e4ebf1; border-radius:12px; text-align:left; }
.completion-result { background:#f8fafc; }
.ticket-completion p { overflow-wrap:anywhere; }
.completion-result p,.completion-observation p { margin:8px 0 0; font-size:14px; line-height:1.6; white-space:pre-wrap; }
.completion-next { margin-bottom:20px; text-align:left; }
.completion-next strong { font-size:14px; }
.completion-next p { margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.6; }
.ticket-completion .btn { width:100%; }
.ticket-chat-history { margin-top:16px; }
.ticket-chat-history > summary { padding:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--blue-700); background:#fff; border:1px solid #e1e8ef; border-radius:12px; font-size:14px; font-weight:650; cursor:pointer; list-style:none; }
.ticket-chat-history > summary[hidden] { display:none; }
.ticket-chat-history > summary::-webkit-details-marker { display:none; }
.ticket-chat-history > summary .icon { width:20px; height:20px; }
.ticket-chat-history[open] > summary:not([hidden]) { margin-bottom:12px; }
@keyframes completion-enter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@media (max-width: 380px) {
    .driver-body .header-inner { padding: 16px; gap: 8px; }
    .driver-body .brand { gap: 9px; }
    .driver-body .brand strong { font-size: 17px; }
    .driver-body .brand small { font-size: 10px; }
    .driver-body .mobile-chat-header { padding: 14px 12px; }
    .driver-body .chat-auto-label { display: none; }
    .occurrence-page .problem-card { padding-left: 9px; padding-right: 9px; }
}
@media (prefers-reduced-motion: reduce) {
    .driver-body *, .driver-body *::before, .driver-body *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}