html, body { width: 100%; height: 100%; overflow: hidden; background: var(--forest); }
#map { position: fixed; inset: 0 0 calc(var(--nav-height) + env(safe-area-inset-bottom)) 0; z-index: 0; background: #cfdad3; }
#map::after { content: ""; position: absolute; inset: 0; z-index: 500; pointer-events: none; background: linear-gradient(180deg, rgba(7,27,25,.13), transparent 30%, transparent 64%, rgba(7,27,25,.16)); box-shadow: inset 0 0 100px rgba(7,27,25,.16); }
.leaflet-container { font-family: inherit; }
.leaflet-control-attribution { margin-bottom: 2px !important; font-size: 8px !important; opacity: .7; }
.leaflet-control-zoom { margin-top: 98px !important; border: 0 !important; box-shadow: 0 10px 30px rgba(7,27,25,.18) !important; }
.leaflet-control-zoom a { color: var(--forest) !important; }
.route-line { filter: drop-shadow(0 3px 3px rgba(7,27,25,.32)); }
.current-location-dot { width: 20px; height: 20px; border: 4px solid white; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 7px rgba(15,119,108,.2), 0 4px 18px rgba(7,27,25,.35); }
.moment-marker { display: grid; place-items: center; width: 32px; height: 32px; border: 3px solid white; border-radius: 50% 50% 50% 8px; background: var(--orange); color: var(--forest); box-shadow: 0 6px 18px rgba(7,27,25,.25); font-weight: 900; transform: rotate(-45deg); }
.moment-marker span { transform: rotate(45deg); }
.moment-popup strong { display: block; margin-bottom: 3px; color: var(--forest); }
.moment-popup p { margin: 0; color: var(--muted); line-height: 1.4; }

.tracker-header { position: fixed; top: 0; right: 0; left: 0; z-index: 800; display: flex; align-items: center; justify-content: space-between; padding: calc(14px + env(safe-area-inset-top)) 18px 14px; pointer-events: none; }
.tracker-brand, .tracker-link, .gps-quality { pointer-events: auto; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; background: rgba(255,254,250,.92); box-shadow: 0 8px 28px rgba(7,27,25,.15); backdrop-filter: blur(14px); }
.tracker-brand { padding: 7px 13px 7px 7px; }
.tracker-header-actions { display: flex; align-items: center; gap: 8px; }
.tracker-link { padding: 11px 15px; color: var(--ink); font-size: .76rem; font-weight: 850; }
.gps-quality { display: flex; align-items: center; gap: 7px; padding: 10px 12px; color: var(--muted); font-size: .68rem; font-weight: 800; }
.gps-quality i, .recording-state i { width: 7px; height: 7px; border-radius: 50%; background: #9aaa9f; }
.gps-quality.good i, .recording-state i { background: var(--lime); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16); }
.gps-quality.good { color: var(--forest); }

.metric-rail { position: fixed; top: calc(82px + env(safe-area-inset-top)); left: 50%; z-index: 750; width: min(620px, calc(100% - 190px)); display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid rgba(255,255,255,.6); border-radius: 20px; background: rgba(255,254,250,.9); box-shadow: 0 12px 38px rgba(7,27,25,.16); transform: translateX(-50%); backdrop-filter: blur(16px); }
.metric-rail div { min-width: 0; display: grid; gap: 3px; padding: 12px 15px; border-right: 1px solid var(--line); }
.metric-rail div:last-child { border-right: 0; }
.metric-rail span { color: var(--muted); font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.metric-rail strong { overflow: hidden; color: var(--ink); font-size: .92rem; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }

.map-actions { position: fixed; right: 18px; bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 22px); z-index: 760; display: grid; gap: 9px; }
.map-actions button { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; background: rgba(255,254,250,.94); color: var(--forest); box-shadow: 0 8px 28px rgba(7,27,25,.2); font-size: 1.25rem; font-weight: 850; cursor: pointer; backdrop-filter: blur(12px); }
.map-actions .ai-map-button { width: auto; min-width: 92px; grid-template-columns: auto auto; gap: 7px; padding: 0 16px; border-radius: 999px; background: var(--forest); color: var(--lime); }
.ai-map-button b { font-size: .76rem; }

.tracker-card { position: fixed; left: 18px; bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 18px); z-index: 800; width: min(440px, calc(100% - 150px)); padding: 24px; border: 1px solid rgba(255,255,255,.13); border-radius: 27px; background: rgba(7,27,25,.95); color: white; box-shadow: 0 30px 75px rgba(7,27,25,.34); backdrop-filter: blur(18px); }
.tracker-kicker { margin: 0 0 8px; color: var(--lime); font-size: .65rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.tracker-card h1 { margin: 0; font-size: clamp(1.9rem, 5vw, 3rem); line-height: .93; letter-spacing: -.055em; }
.tracker-status { min-height: 17px; margin: 12px 0 0; color: rgba(255,255,255,.52); font-size: .7rem; line-height: 1.4; }
.mode-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 18px 0 12px; }
.mode-picker label { min-width: 0; cursor: pointer; }
.mode-picker input { position: absolute; opacity: 0; pointer-events: none; }
.mode-picker span { min-height: 52px; display: grid; place-items: center; align-content: center; gap: 3px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.63); font-size: 1rem; }
.mode-picker small { font-size: .58rem; font-weight: 750; }
.mode-picker input:checked + span { border-color: var(--lime); background: var(--lime); color: var(--forest); }
.trip-name-field { display: grid; gap: 7px; }
.trip-name-field > span { color: rgba(255,255,255,.5); font-size: .64rem; font-weight: 800; text-transform: uppercase; }
.trip-name-field input { min-height: 48px; padding: 0 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; outline: 0; background: rgba(255,255,255,.08); color: white; }
.trip-name-field input::placeholder { color: rgba(255,255,255,.3); }
.start-trip { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 0 17px; border: 0; border-radius: 14px; background: var(--lime); color: var(--forest); font-weight: 850; cursor: pointer; }
.start-trip:disabled { cursor: wait; opacity: .65; }
.active-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.recording-state { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--lime); font-size: .63rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.recording-state.paused { color: var(--orange); }
.recording-state.paused i { background: var(--orange); box-shadow: none; }
.active-trip-mode { margin: 6px 0 0; color: rgba(255,255,255,.45); font-size: .72rem; text-transform: capitalize; }
.finish-trip { padding: 9px 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(255,255,255,.06); color: white; font-size: .7rem; font-weight: 800; cursor: pointer; }
.journey-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 18px; }
.journey-actions button { min-height: 54px; display: grid; grid-template-columns: auto auto; place-content: center; gap: 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.78); cursor: pointer; }
.journey-actions button span { color: var(--lime); font-size: 1rem; }
.journey-actions button b { font-size: .68rem; }

.tracker-dialog, .ai-dialog { width: min(520px, calc(100% - 28px)); max-height: calc(100dvh - 28px); padding: 30px; overflow: auto; border: 1px solid rgba(255,255,255,.12); border-radius: 28px; background: var(--forest); color: white; box-shadow: 0 40px 110px rgba(0,0,0,.44); }
.tracker-dialog::backdrop, .ai-dialog::backdrop { background: rgba(7,27,25,.7); backdrop-filter: blur(9px); }
.dialog-x { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; background: rgba(255,255,255,.07); color: white; font-size: 1.25rem; cursor: pointer; }
.tracker-dialog h2, .ai-dialog h2 { margin: 0; padding-right: 35px; font-size: clamp(2rem, 8vw, 3rem); line-height: .95; letter-spacing: -.055em; }
.tracker-dialog form { display: grid; gap: 8px; margin-top: 24px; }
.tracker-dialog label { margin-top: 8px; color: rgba(255,255,255,.53); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.tracker-dialog input, .tracker-dialog textarea { padding: 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; outline: 0; background: rgba(255,255,255,.08); color: white; }
.tracker-dialog textarea { min-height: 100px; resize: vertical; }
.tracker-dialog form button, .dialog-primary { min-height: 52px; margin-top: 8px; border: 0; border-radius: 14px; background: var(--lime); color: var(--forest); font-weight: 850; cursor: pointer; }
.finish-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 24px 0 10px; }
.finish-summary span { display: grid; gap: 4px; padding: 15px; border-radius: 14px; background: rgba(255,255,255,.07); }
.finish-summary small { color: rgba(255,255,255,.45); font-size: .62rem; text-transform: uppercase; }
.finish-summary strong { color: var(--lime); font-size: 1.25rem; }
.dialog-primary { width: 100%; }

.ai-dialog { width: min(680px, calc(100% - 28px)); padding: 0; }
.ai-dialog-header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; gap: 20px; padding: 26px 28px 20px; background: var(--forest); }
.ai-dialog-header .dialog-x { position: static; flex: 0 0 auto; }
.ai-context { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 0 28px 16px; }
.ai-context span { min-width: 0; display: grid; gap: 4px; padding: 12px; border-radius: 13px; background: rgba(255,255,255,.06); }
.ai-context small { color: rgba(255,255,255,.42); font-size: .57rem; text-transform: uppercase; }
.ai-context strong { overflow: hidden; color: var(--lime); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.ai-prompts { display: flex; gap: 7px; padding: 0 28px 16px; overflow-x: auto; scrollbar-width: none; }
.ai-prompts button { flex: 0 0 auto; padding: 9px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: transparent; color: rgba(255,255,255,.65); font-size: .68rem; cursor: pointer; }
.ai-messages { min-height: 180px; max-height: 34dvh; display: flex; flex-direction: column; gap: 10px; padding: 18px 28px; overflow-y: auto; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); background: #102522; }
.ai-message { max-width: 84%; padding: 13px 15px; border-radius: 15px; background: rgba(255,255,255,.07); }
.ai-message.user { align-self: flex-end; background: var(--lime); color: var(--forest); }
.ai-message strong { display: block; margin-bottom: 5px; color: var(--lime); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.ai-message.user strong { color: var(--teal); }
.ai-message p { margin: 0; line-height: 1.5; white-space: pre-wrap; }
.ai-form { padding: 14px 28px 24px; }
.location-consent { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: rgba(255,255,255,.55); font-size: .68rem; }
.location-consent input { accent-color: var(--lime); }
.ai-form > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.ai-form textarea { min-height: 58px; max-height: 120px; padding: 15px; resize: none; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; outline: 0; background: rgba(255,255,255,.08); color: white; }
.ai-form button { align-self: end; width: 50px; height: 50px; border: 0; border-radius: 50%; background: var(--lime); color: var(--forest); font-size: 1.3rem; font-weight: 900; cursor: pointer; }
.ai-form > p { margin: 8px 0 0; color: rgba(255,255,255,.3); font-size: .58rem; }

@media (max-width: 720px) {
    .tracker-header { padding-right: 12px; padding-left: 12px; }
    .gps-quality { display: none; }
    .tracker-link { font-size: .68rem; }
    .metric-rail { top: calc(76px + env(safe-area-inset-top)); width: calc(100% - 24px); border-radius: 16px; }
    .metric-rail div { padding: 10px 8px; }
    .metric-rail span { font-size: .5rem; }
    .metric-rail strong { font-size: .75rem; }
    .tracker-card { right: 12px; bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 12px); left: 12px; width: auto; padding: 18px; border-radius: 22px; }
    .tracker-card h1 { font-size: 1.8rem; }
    .mode-picker { margin-top: 14px; }
    .mode-picker span { min-height: 45px; }
    .map-actions { right: 12px; bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 390px); }
    .tracker-page.trip-active .map-actions { bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 235px); }
    .map-actions button:not(.ai-map-button) { width: 43px; height: 43px; }
    .map-actions .ai-map-button { min-width: 43px; width: 43px; padding: 0; border-radius: 50%; }
    .ai-map-button b { display: none; }
    .leaflet-control-zoom { display: none; }
    .tracker-dialog, .ai-dialog { max-height: calc(100dvh - 14px); border-radius: 24px; }
    .ai-dialog-header, .ai-context, .ai-prompts, .ai-form { padding-right: 18px; padding-left: 18px; }
    .ai-messages { padding-right: 18px; padding-left: 18px; }
}

@media (max-height: 720px) and (max-width: 720px) {
    .idle-card .tracker-kicker, .idle-card .tracker-status { display: none; }
    .tracker-card { padding: 14px 16px; }
    .mode-picker { margin: 10px 0 8px; }
    .trip-name-field input, .start-trip { min-height: 44px; }
}