.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ai-page{margin:0;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--fg);background:var(--bg)}
.ai-page .top{position:fixed;inset:0 0 auto;z-index:1001;display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--card);box-shadow:var(--shadow);height:52px;box-sizing:border-box}
.ai-page .brand{display:flex;align-items:center;gap:8px;color:var(--fg);text-decoration:none;font-weight:700}
.ai-page .brand svg{width:28px;height:28px}
#ai-map{position:fixed;inset:52px 0 0;background:var(--soft)}
#ai-legend{position:fixed;right:10px;bottom:22px;z-index:1000;background:var(--card);border-radius:10px;padding:6px 10px;font-size:13px;box-shadow:var(--shadow)}
#ai-legend i{display:inline-block;width:60px;height:8px;vertical-align:middle;border-radius:4px;background:linear-gradient(90deg,hsl(170,65%,42%),hsl(95,65%,39%),hsl(20,65%,36%))}
#ai-root{position:fixed;z-index:1000;top:62px;left:10px;right:10px;max-width:420px;max-height:calc(100vh - 80px);overflow:auto;display:flex;flex-direction:column;gap:8px}
.ai-ask{display:flex;gap:6px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:6px;border:1px solid var(--line)}
.ai-ask input{flex:1;min-width:0;border:0;background:transparent;color:var(--fg);font-size:16px;padding:8px}
.ai-ask input:focus{outline:none}.ai-ask:focus-within{outline:2px solid var(--acc)}
.ai-go,.ai-btn{background:var(--acc);color:var(--on-acc);border:0;border-radius:10px;padding:10px 14px;font-size:16px;font-weight:600;text-decoration:none;display:inline-block;cursor:pointer;min-height:44px}
.ai-mic{border:1px solid var(--line);background:var(--card);border-radius:10px;min-width:44px;font-size:18px;cursor:pointer}
.ai-mic.on{background:var(--warn);color:#fff}
.ai-chips{display:flex;gap:6px;flex-wrap:wrap}
.ai-chips button,.ai-sugg button{background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:15px;min-height:40px;cursor:pointer;box-shadow:var(--shadow)}
.ai-card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);border:1px solid var(--line);padding:12px 14px}
.ai-card h2{font-size:18px;margin:0 0 6px}.ai-card h3{font-size:16px;margin:10px 0 4px}
.ai-card a{color:var(--acc)} .ai-card a.ai-btn{color:var(--on-acc)}
.ai-small{font-size:14px;color:var(--muted)}
.ai-label{font-size:13px;color:var(--muted);border-top:1px solid var(--line);margin:10px 0 0;padding-top:6px}
.ai-na{background:var(--relief);border-radius:8px;padding:6px 8px;font-size:15px}
.ai-dl{background:var(--warn);color:#fff;border-radius:6px;padding:0 6px;font-size:13px}
.ai-list{padding-left:20px;margin:6px 0}.ai-list li{margin:6px 0}
.ai-tl{border-collapse:collapse;width:100%;font-size:15px}.ai-tl td,.ai-tl th{border-bottom:1px solid var(--line);padding:4px 6px;text-align:left}
.ai-plan{display:grid;gap:8px}.ai-plan label{display:flex;justify-content:space-between;gap:8px;align-items:center}
.ai-plan input,.ai-plan select,#ai-paste{font-size:16px;padding:6px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg)}
#ai-paste{width:100%;box-sizing:border-box}
#ai-year{width:100%}
@media (min-width:900px){#ai-root{left:16px;right:auto;width:420px}}
.leaflet-bar a{width:44px!important;height:44px!important;line-height:44px!important}.leaflet-control-attribution a{display:inline-block;padding:4px 2px}
/* KC AI customer-service style chat. Logical edges also serve Arabic and Urdu. */
#ai-launcher{position:fixed;z-index:1004;inset-inline-end:16px;bottom:44px;display:flex;align-items:center;gap:8px;max-width:220px;border:0;border-radius:28px;padding:12px 16px;background:var(--acc);color:var(--on-acc);box-shadow:var(--shadow);font:600 15px/1.3 system-ui,sans-serif;cursor:pointer;min-height:52px}
/* computer: the map zoom buttons sit above "Ask KC AI" (bottom 44px, 52–60px high) and, in RTL, above the map credits (task 349) */
@media (min-width:768px){.mapp .leaflet-bottom .leaflet-control-zoom{margin-bottom:84px}}
#ai-launcher svg{width:26px;height:26px;flex:none}
.mapp #ai-root,#ai-root{position:fixed;inset:auto;inset-inline-end:16px;bottom:104px;top:auto;width:380px;height:560px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 180px);z-index:1100;display:flex;gap:0;overflow:hidden;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 42px #0004;visibility:visible}
#ai-root[hidden]{display:none!important}
.ai-head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--line);flex:none;min-height:44px}
.ai-head button{min-width:44px;min-height:44px;background:var(--soft);color:var(--fg);border:1px solid var(--line);border-radius:10px;font:inherit;cursor:pointer}
#ai-session{overflow:auto;overscroll-behavior:contain;padding:12px;display:flex;flex-direction:column;gap:10px;min-height:0;overflow-wrap:anywhere}
#ai-session .ai-ask{border-radius:12px;padding:4px;flex:none}
#ai-session .ai-chips{display:flex!important}
#ai-session .ai-out{display:flex;flex-direction:column;gap:10px}
.ai-question{margin:0;padding:8px 12px;background:var(--soft);border-radius:12px;white-space:pre-wrap}
.mapp .mrail{top:4.6rem}
.mcollapsed.mapp #ai-root,.mcollapsed .mapp #ai-root{inset-inline-start:auto}
@media(max-width:767.98px){
 #ai-launcher{inset-inline-end:12px;bottom:calc(var(--dh,9rem) + var(--mah,32px) + 60px);max-width:180px;padding:10px 14px}
 main:has(.mpanel.open:not(.half)) #ai-launcher{visibility:hidden}
 .mapp #ai-root,#ai-root{inset: max(12px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom));width:auto;height:auto;max-width:none;max-height:none;animation:ai-up .18s ease-out}
 .mapp main:has(.mpanel.open:not(.half)) #ai-root{visibility:visible}
 .mapp .mrail{top:auto}
}
@keyframes ai-up{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(prefers-reduced-motion:reduce){#ai-root{animation:none}}
/* Keep the composer available while answers scroll. */
#ai-session{overflow:hidden}
.ai-messages{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px}
#ai-session .ai-ask{flex:none;margin:0;border-top:1px solid var(--line)}
body:has(#ai-root:not([hidden])) #ai-launcher{visibility:hidden}
@media(min-width:768px){body:has(#ai-root:not([hidden])) .mrail{inset-inline-end:412px}}
/* Task 340: KC AI works for the user – step list, cards, bubble, docked column, phone sheet in three steps. */
.mapp #ai-root,#ai-root{width:400px}
.ai-head{gap:6px}.ai-head b{flex:none}
.ai-area{flex:1;min-width:0;color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-head .ai-dockb{display:inline-flex;align-items:center;gap:4px;padding:0 10px}
.ai-grip{display:none}
#ai-launcher.bubble{width:60px;height:60px;padding:0;justify-content:center;border-radius:50%}
#ai-launcher.bubble span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ai-big{display:flex;flex-direction:column;gap:8px}
.ai-chip-big{width:100%;text-align:start;padding:10px 14px;min-height:48px;border:1px solid var(--line);border-radius:14px;background:var(--soft);color:var(--fg);font:600 15px/1.35 system-ui,sans-serif;cursor:pointer}
.ai-chip-big:hover,.ai-chip:hover{border-color:var(--acc)}
.ai-run{display:flex;flex-direction:column;gap:10px}
.ai-run-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0;font-weight:600}
.ai-stop{min-height:44px;padding:0 16px;border:2px solid currentColor;border-radius:10px;background:var(--card);color:var(--fg);font:600 15px system-ui,sans-serif;cursor:pointer}
.ai-steps{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:15px}
.ai-steps li{display:flex;gap:8px;align-items:center}
.ai-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--muted)}
.ai-steps [data-state=done] .ai-dot{background:#1b7f4b}.ai-steps [data-state=error] .ai-dot{background:#a3261b}
.ai-steps [data-state=skip],.ai-steps [data-state=error]{color:var(--muted)}
.ai-spin{flex:none;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:ai-rot 1s linear infinite}
@keyframes ai-rot{to{transform:rotate(360deg)}}
.ai-ct .ai-num{text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums}
.ai-ct th{font-weight:400}.ai-ct small{color:var(--muted)}
.ai-ct tfoot th,.ai-ct tfoot td{font-weight:700;border-top:2px solid var(--fg)}
.ai-na-s{color:var(--muted);font-size:14px}
.ai-ctl{display:grid;gap:10px;margin:6px 0 10px}
.ai-choice{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.ai-choice legend{font-weight:600;font-size:14px;margin-bottom:4px;padding:0}
.ai-choice label{position:relative;cursor:pointer}
.ai-choice input{position:absolute;opacity:0;inset:0;margin:0}
.ai-choice span{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.ai-choice input:checked+span{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
.ai-choice input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
.ai-slider label{display:flex;justify-content:space-between;gap:8px;font-size:14px;font-weight:600}
.ai-slider input{width:100%;min-height:44px;margin:0;accent-color:var(--acc)}
.ai-c-risk{border-inline-start:6px solid #666}
.ai-c-risk.lvl-high{border-inline-start-color:#a3261b}.ai-c-risk.lvl-medium{border-inline-start-color:#9a5b00}.ai-c-risk.lvl-low{border-inline-start-color:#1b7f4b}
.ai-risk-h{margin:0 0 6px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ai-badge{display:inline-flex;gap:4px;align-items:center;padding:2px 10px;border-radius:999px;font-weight:700;font-size:14px;background:#555;color:#fff}
.ai-badge[data-level=high]{background:#a3261b}.ai-badge[data-level=medium]{background:#8a5200}.ai-badge[data-level=low]{background:#1b7f4b}
.ai-place,.ai-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--fg);font:inherit;cursor:pointer;text-align:start}
.ai-place small{color:var(--acc);text-decoration:underline}
.ai-draft{white-space:pre-wrap;font:15px/1.45 system-ui,sans-serif;background:var(--soft);padding:10px;border-radius:8px;max-height:240px;overflow:auto;margin:6px 0}
.ai-next{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ai-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 0}
.ai-btn.ghost{background:none;color:var(--acc);border:1px solid var(--acc)}
.ai-c-selected h3{margin:0}
.ai-sum{display:flex;gap:8px;align-items:center;justify-content:space-between;margin:0;padding:4px 12px;border-bottom:1px solid var(--line);font-size:14px;flex:none}
.ai-sum[hidden]{display:none}.ai-sum span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-reopen{flex:none;min-height:40px;padding:0 12px;border:0;border-radius:10px;background:var(--acc);color:var(--on-acc);font:600 14px system-ui,sans-serif;cursor:pointer}
#ai-session[hidden],.ai-unit[hidden]{display:none}
.ai-unit{display:flex;flex-direction:column;flex:1;min-height:0}
.ai-unit-h{margin:0;padding:4px 12px;flex:none}.ai-back{min-height:44px;border:0;background:none;color:var(--acc);font:600 15px system-ui,sans-serif;cursor:pointer;text-decoration:underline}
.ai-unit-body{flex:1;min-height:0;overflow:auto}.ai-unit-body #m-area{overflow:visible}
.ai-unit-ask{flex:none;margin:0;border-radius:0;border-width:1px 0 0}
.ai-print{display:none}
@media(prefers-reduced-motion:reduce){.ai-spin{animation:none}}
@media(min-width:768px){
 body:has(#ai-root:not([hidden])) .mrail,body.ai-open .mpop{inset-inline-end:432px}
 body.ai-dock{--aw:clamp(380px,35vw,640px)}
 body.ai-dock.mapp #ai-root{position:absolute;top:0;bottom:0;inset-inline-end:0;inset-inline-start:auto;width:var(--aw);height:auto;max-width:none;max-height:none;border-radius:0;border-width:0;border-inline-start:1px solid var(--line);box-shadow:none;animation:none}
 body.ai-dock .mpanel,body.ai-dock .mhide{display:none}
 body.ai-dock #map{inset-inline-start:0;inset-inline-end:var(--aw)}
 body.ai-dock #ms{inset-inline-start:.75rem}
 body.ai-dock:has(#ai-root:not([hidden])) .mrail,body.ai-dock .mpop{inset-inline-end:calc(var(--aw) + .75rem)}
 body.ai-dock .msatnote{inset-inline-start:calc((100% - var(--aw))/2)}
}
@media(max-width:767.98px){
 .mapp #ai-root,#ai-root{inset:auto 0 0;width:auto;height:45dvh;max-width:none;max-height:none;border-radius:18px 18px 0 0;border-width:1px 0 0;padding-bottom:env(safe-area-inset-bottom);transition:height .25s cubic-bezier(.2,.8,.2,1);animation:none}
 #ai-root[data-snap=peek]{height:148px}#ai-root[data-snap=half]{height:45dvh}#ai-root[data-snap=full]{height:90dvh}
 #ai-root.drag{transition:none}
 .ai-head{position:relative;padding-top:16px;min-height:40px;touch-action:none;user-select:none;-webkit-user-select:none}
 .ai-head .ai-dockb{display:none}
 .ai-head #ai-close{min-height:36px}
 .ai-grip{display:block;position:absolute;top:0;inset-inline-start:50%;transform:translateX(-50%);width:96px;height:22px;min-height:0!important;padding:0;border:0!important;background:none!important;cursor:grab}
 [dir=rtl] .ai-grip{transform:translateX(50%)}
 .ai-grip span{display:block;width:44px;height:5px;margin:7px auto;border-radius:3px;background:var(--muted);opacity:.6}
 #ai-root[data-snap=peek] #ai-session{padding:6px 12px}
 #ai-root[data-snap=peek] .ai-history,#ai-root[data-snap=peek] .ai-out,#ai-root[data-snap=peek] .ai-chips{display:none}
 #ai-root[data-snap=peek] .ai-messages{overflow:hidden}
 #ai-root[data-snap=peek] .ai-big{flex-direction:row;overflow-x:auto;scrollbar-width:none}
 #ai-root[data-snap=peek] .ai-chip-big{flex:none;width:auto;max-width:78vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:40px;padding:6px 12px}
 #ai-sum:not([hidden])~#ai-session .ai-big{display:none}
 body.ai-open .mpanel,body.ai-open .mhide{display:none}
 body.ai-open .mrail{bottom:calc(var(--ch,45dvh) + var(--mah,32px) + .4rem)}
 body.ai-open .leaflet-bottom{bottom:var(--ch,45dvh)}
 body.ai-open .mpop{bottom:calc(var(--ch,45dvh) + .75rem)}
 body.ai-open .msatnote{bottom:calc(var(--ch,45dvh) + .75rem)}
 body.ai-full .mrail,body.ai-full #ms{visibility:hidden}
}
@media print{
 body[data-print=ai-print]{height:auto!important;overflow:visible!important;display:block!important}
 body[data-print=ai-print]>*:not(.ai-print),body[data-print=ai-print] main{display:none!important}
 body[data-print=ai-print] .ai-print{display:block!important;color:#000;font:11pt/1.4 system-ui,sans-serif}
 .ai-print table{width:100%;border-collapse:collapse}.ai-print td,.ai-print th{border:1px solid #999;padding:3px 6px;text-align:start}
 .ai-print a{color:#000}
}
.ai-used .ai-big{flex-direction:row;overflow-x:auto;scrollbar-width:thin}
.ai-used .ai-chip-big{flex:none;width:auto;max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:44px;padding:6px 12px;font-size:14px}
/* the floating chat never sits on the zoom buttons (bottom right; bottom left in Arabic and Urdu) */
@media(min-width:768px){
 body.ai-open:not(.ai-dock) .leaflet-right .leaflet-control-zoom{margin-right:432px}
 [dir=rtl] body.ai-open:not(.ai-dock) .leaflet-left .leaflet-control-zoom{margin-left:432px}
}
@media(max-width:767.98px){#ai-root[data-snap=peek]:has(#ai-sum:not([hidden])){height:164px}#ai-root[data-snap=peek] .ai-head{padding-top:14px}}
/* task 340: 👍 / 👎 under each answer – small and quiet; 44px tap targets */
.ai-fb{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center;margin:.4rem 0 0;opacity:.6}
.ai-fb:hover,.ai-fb:focus-within{opacity:1}
.ai-fb button{min-width:44px;min-height:44px;border:1px solid transparent;background:none;border-radius:8px;cursor:pointer;font:inherit;color:inherit}
.ai-fb button:hover,.ai-fb button:focus-visible{border-color:currentColor}
.ai-fb-why{display:flex;flex-wrap:wrap;gap:.25rem}
.ai-fb-why[hidden]{display:none}
.ai-fb-why button{font-size:.85rem;border-color:#8888}
.ai-fb-ok{font-size:.85rem}
/* phone, KC AI page: the ask sheet covers the bottom of the map, so the map credits sit at the top right (task 349) */
@media (max-width:767.98px){.ai-page .leaflet-bottom.leaflet-right{top:0;bottom:auto}}
/* G04: in-flow controls stay reachable in narrow and RTL chat sheets. */
.ai-understanding{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:12px}
.ai-understanding span{overflow-wrap:anywhere;flex:1 1 180px}
.ai-understanding button,.ai-skip{min-width:44px;min-height:44px;padding:8px 14px;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:12px;cursor:pointer}
.ai-understanding button:focus-visible,.ai-skip:focus-visible{outline:3px solid var(--accent,var(--fg));outline-offset:3px}
.ai-greeting,.ai-broad{overflow-wrap:anywhere}

/* G38 B1: a visible first composer, the same session opens only after submission. */
#ai-entry{position:absolute;inset-inline-end:16px;bottom:24px;width:min(400px,calc(100% - 32px));z-index:1002;margin:0;box-sizing:border-box}
#ai-entry input{min-height:44px;font:inherit;font-size:16px}
#ai-entry button{min-width:44px;min-height:44px;white-space:normal}

body.ai-open #ai-entry{display:none}
#ai-session{flex:1}
@media(max-width:767.98px){
 #ai-entry{position:static;width:auto;flex:none;box-shadow:none;border-radius:0;border-inline:0;margin:0;padding:4px 8px}
 .mapp #ai-root{position:fixed;top:auto;bottom:max(env(safe-area-inset-bottom),calc(100dvh - var(--vvh,100dvh) - var(--vvtop,0px)));height:calc(var(--vvh,100dvh) * .5);max-height:calc(var(--vvh,100dvh) - var(--map-head,52px))}
 .mapp #ai-root[data-snap=half]{height:calc(var(--vvh,100dvh) * .5)}
 .mapp #ai-root[data-snap=full]{height:calc(var(--vvh,100dvh) - var(--map-head,52px))}
 .mapp #ai-root .ai-head button{min-width:44px;min-height:44px}
 .mapp #ai-root .ai-grip{width:44px;height:44px;top:-8px}
}

#mpanel #ai-entry{position:static;inset:auto;width:auto;flex:none;margin:0;box-shadow:none}

@media(min-width:768px){body.mcollapsed #ai-launcher{display:flex}}

@media(max-width:767.98px){
 #mpanel #ai-launcher{position:absolute;inset:auto;top:0;inset-inline-end:0;width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border-radius:12px;box-shadow:none}
 #mpanel #ai-launcher span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 #mpanel #mgrip{box-sizing:border-box;padding-inline:48px}
 #mpanel.open #ai-launcher{display:none}
}