/* Apps de celular (cliente e prestador) — mesmas cores do painel. */
:root{--ng-primary:#2563eb;--ng-dark:#243746;--ng-bg:#f3f4f6;--ng-card:#fff;--ng-text:#172b4d;--ng-muted:#667085;--ng-border:#e5e7eb;--ng-accent:#e8590c}
[data-theme=dark]{--ng-bg:#11151b;--ng-card:#1a2029;--ng-text:#f1f5f9;--ng-muted:#9aa4b2;--ng-border:#2c3440}
html,body{background:var(--ng-bg);color:var(--ng-text)}
body.ng-mobile{min-height:100vh;padding-bottom:calc(72px + env(safe-area-inset-bottom));font-size:16px}
.ng-appbar{position:sticky;top:0;z-index:1000;display:flex;justify-content:space-between;align-items:center;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top));background:var(--ng-dark);color:#fff}
.ng-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700}
.ng-brand small{display:block;font-weight:400;font-size:11px;opacity:.75}
.ng-brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--ng-primary);font-size:13px}
.ng-icon-btn{background:transparent;border:0;color:#fff;font-size:18px;padding:6px}
.ng-screen{max-width:640px;margin:0 auto;padding:16px}
.ng-title{font-size:22px;font-weight:700;margin:4px 0 12px}
.ng-subtitle{font-size:16px;font-weight:700;margin-bottom:10px}
.ng-muted{color:var(--ng-muted)}
.ng-card{display:block;background:var(--ng-card);border:1px solid var(--ng-border);border-radius:16px;padding:16px;margin-bottom:12px;color:inherit;text-decoration:none}
.ng-card-emergency{background:#fff4e5;border-color:#ffd8a8;font-size:14px}
[data-theme=dark] .ng-card-emergency{background:#2b2116;border-color:#5c4120}
.ng-hero{padding:24px 4px}.ng-hero h1{font-size:26px;font-weight:800}
.ng-choices,.ng-actions{display:grid;gap:12px;margin-bottom:16px}
.ng-choice,.ng-action{display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;width:100%;text-align:left;background:var(--ng-card);border:1px solid var(--ng-border);border-radius:18px;padding:16px;color:inherit;text-decoration:none}
.ng-choice i,.ng-action i{grid-row:span 2;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:rgba(37,99,235,.1);color:var(--ng-primary);font-size:22px}
.ng-choice span,.ng-action span{color:var(--ng-muted);font-size:13px}
.ng-action-primary{background:var(--ng-primary);border-color:var(--ng-primary);color:#fff}
.ng-action-primary i{background:rgba(255,255,255,.18);color:#fff}
.ng-action-primary span{color:rgba(255,255,255,.85)}
.ng-hello h1{font-size:24px;font-weight:800;margin:4px 0 0}.ng-hello p{color:var(--ng-muted)}
.ng-open-request{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ng-vehicle{display:flex;gap:10px;align-items:flex-start;padding:6px 0}.ng-vehicle i{color:var(--ng-muted);margin-top:4px}
.ng-bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:1000;display:flex;justify-content:space-around;background:var(--ng-card);border-top:1px solid var(--ng-border);padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
.ng-bottom-nav a,.ng-bottom-nav button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--ng-muted);text-decoration:none;background:none;border:0;padding:4px 16px}
.ng-bottom-nav i{font-size:19px}.ng-bottom-nav .active{color:var(--ng-primary)}
.ng-bottom-nav form{margin:0}

/* Solicitação: chat + mapa */
.ng-request{display:flex;flex-direction:column;gap:10px}
.ng-request-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ng-map{height:260px;border-radius:16px;overflow:hidden;border:1px solid var(--ng-border);background:#e5e7eb}
.ng-eta{font-weight:700;color:var(--ng-accent);font-size:15px}
.ng-location-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ng-chat{display:flex;flex-direction:column;gap:10px;min-height:280px;max-height:55vh;overflow-y:auto;padding:12px;background:var(--ng-card);border:1px solid var(--ng-border);border-radius:16px}
.ng-msg{max-width:85%;align-self:flex-start;background:var(--ng-bg);border-radius:14px;padding:8px 12px;font-size:15px}
.ng-msg.is-mine{align-self:flex-end;background:var(--ng-primary);color:#fff}
.ng-msg-ia{background:#eef2ff}[data-theme=dark] .ng-msg-ia{background:#1e2440}
.ng-msg-sistema{align-self:center;background:transparent;color:var(--ng-muted);font-size:12px;text-align:center}
.ng-msg-who{display:block;font-size:11px;font-weight:700;opacity:.7}
.ng-msg-body{white-space:pre-wrap;overflow-wrap:anywhere}
.ng-msg-time{display:block;font-size:10px;opacity:.55;text-align:right}
.ng-options{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ng-options .btn{border-radius:999px;text-align:left}
.ng-chat-form{display:flex;gap:8px;padding:2px 0}
.ng-chat-form textarea{resize:none;border-radius:20px;font-size:16px}
.ng-chat-form .btn{border-radius:50%;width:44px;height:44px}
.ng-request-actions{display:flex;justify-content:space-between}
.ng-pin{display:grid;place-items:center;border-radius:50%;color:#fff;font-size:15px;box-shadow:0 2px 6px rgba(0,0,0,.35);border:2px solid #fff}
.ng-pin-cliente{background:#2563eb}.ng-pin-prestador{background:#e8590c}
.form-control,.form-select{background:var(--ng-card);color:var(--ng-text);border-color:var(--ng-border)}

/* Barra superior: sino de notificações */
.ng-appbar-actions{display:flex;align-items:center;gap:4px}
.ng-bell{position:relative;text-decoration:none}
.ng-bell-count{position:absolute;top:2px;right:0;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#dc2626;color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;line-height:1}
.ng-bell-count[hidden]{display:none}
.ng-invite{display:flex;align-items:center;gap:10px;background:#243746;color:#fff;border-radius:12px;padding:10px 12px;margin-bottom:12px;font-size:13px}
.ng-invite[hidden]{display:none}
.ng-invite span{flex:1}

/* Localização: botões, ajuda e marcação no mapa */
.ng-location{background:var(--ng-card,#fff);border:1px solid var(--ng-border,#e5e7eb);border-radius:14px;padding:10px 12px;margin:10px 0;display:flex;flex-direction:column;gap:6px}
.ng-location[hidden]{display:none}
.ng-location-row{display:flex;flex-wrap:wrap;gap:6px}
.ng-location-help{display:flex;gap:10px;background:#fff4e5;color:#7a4300;border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.45}
.ng-location-help[hidden]{display:none}
.ng-location-help>i{margin-top:3px}
[data-theme=dark] .ng-location-help{background:#33260f;color:#f5d199}
.ng-picker[hidden]{display:none}
.ng-map-picker{height:300px;border-radius:12px}

/* Avaliação */
.ng-rating[hidden],.ng-rating-done[hidden]{display:none}
.ng-rating-stars{display:flex;gap:6px;justify-content:center}
.ng-rating-stars button{border:0;background:none;font-size:30px;color:#f59f00;padding:2px 4px;cursor:pointer}
.ng-rating-done{text-align:center}

/* Notificações */
.ng-notif-item{display:block;color:inherit;text-decoration:none}
.ng-notif-item.is-unread{border-left:4px solid #2563eb}
.ng-notif-item strong{display:block}

/* Selos claros (mesmas variantes "-lt" do painel/Tabler) */
.bg-primary-lt{background:#e3ecfd!important;color:#1d4ed8!important}.bg-info-lt{background:#e0f2fe!important;color:#0369a1!important}
.bg-success-lt{background:#dcfce7!important;color:#15803d!important}.bg-warning-lt{background:#fef3c7!important;color:#a16207!important}
.bg-secondary-lt{background:#eef0f3!important;color:#475569!important}.bg-dark-lt{background:#e5e7eb!important;color:#1f2937!important}.bg-danger-lt{background:#fee2e2!important;color:#b91c1c!important}

/* Ordem de serviço (app do guincheiro) */
.ng-tabs{display:flex;gap:6px;margin:8px 0 12px}
.ng-tabs a{flex:1;text-align:center;padding:9px;border-radius:12px;background:var(--ng-card);border:1px solid var(--ng-border);color:var(--ng-muted);text-decoration:none;font-weight:600;font-size:14px}
.ng-tabs a.active{background:var(--ng-primary);border-color:var(--ng-primary);color:#fff}
.ng-tab-count{display:inline-block;min-width:20px;padding:0 6px;border-radius:10px;background:#f59f00;color:#1a1a1a;font-size:12px}
.ng-os-card{display:flex;flex-direction:column;gap:4px}
.ng-os-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:2px}
.ng-os-line{display:flex;gap:8px;align-items:baseline;font-size:14px}
.ng-os-line i{width:16px;text-align:center;color:var(--ng-muted)}
.ng-steps{display:flex;list-style:none;padding:0;margin:4px 0 12px;gap:4px}
.ng-steps li{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;font-size:12px;color:var(--ng-muted);position:relative}
.ng-steps li:not(:first-child)::before{content:"";position:absolute;top:14px;right:50%;width:100%;height:3px;background:var(--ng-border);z-index:0}
.ng-steps li.done:not(:first-child)::before{background:#16a34a}
.ng-step-dot{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ng-card);border:2px solid var(--ng-border);font-weight:700;margin-bottom:3px}
.ng-steps li.done .ng-step-dot{background:#16a34a;border-color:#16a34a;color:#fff}
.ng-steps li.current .ng-step-dot{box-shadow:0 0 0 4px rgba(22,163,74,.2)}
.ng-steps li.done{color:var(--ng-text);font-weight:600}
.ng-steps small{font-weight:400;color:var(--ng-muted);min-height:15px}
.ng-subtitle i{color:var(--ng-primary);margin-right:4px}
.ng-os-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ng-os-grid small{display:block;color:var(--ng-muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.3px}
.ng-os-grid strong{font-size:14.5px;overflow-wrap:anywhere}
.ng-os-note{background:#fff8e1;border:1px dashed #f0b429;border-radius:10px;padding:8px 10px;margin-bottom:6px;font-size:14px;color:#5b4300}
.ng-os-note small{display:block;color:#8a6d1f;font-size:11px;margin-top:2px}
[data-theme=dark] .ng-os-note{background:#2b2410;border-color:#8a6d1f;color:#f3d98b}
.ng-sync{border-color:#bbf7d0}.ng-sync .ng-subtitle i{color:#16a34a}
/* Fotos no chat */
.ng-photo-btn{display:inline-grid;place-items:center;flex-shrink:0;cursor:pointer}
.ng-photo-status{font-size:13px;color:#667085;padding:4px 6px}
.ng-msg-photos{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.ng-msg-photo img{display:block;width:auto;max-width:200px;max-height:200px;border-radius:10px;object-fit:cover;background:rgba(0,0,0,.06)}
/* Marcador do guincho: caminhão-guincho (vira para o lado em que anda) */
.ng-pin-truck{border-radius:50%}
.ng-pin-truck svg{display:block;transition:transform .3s ease}
.ng-pin-truck.is-west svg{transform:scaleX(-1)}
/* "Escrevendo…" / "Pensando…" no chat */
.ng-typing{display:flex;align-items:center;gap:8px;margin:2px 4px 6px;padding:6px 12px;border-radius:14px;width:max-content;max-width:90%;font-size:13px;font-style:italic;color:#667085;background:rgba(100,116,139,.12)}
.ng-typing[hidden]{display:none}
.ng-typing-dots{display:inline-flex;gap:3px}
.ng-typing-dots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4;animation:ng-typing 1.2s infinite ease-in-out}
.ng-typing-dots i:nth-child(2){animation-delay:.15s}.ng-typing-dots i:nth-child(3){animation-delay:.3s}
@keyframes ng-typing{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}
@media (prefers-reduced-motion:reduce){.ng-typing-dots i{animation:none}.ng-pin-truck svg{transition:none}}