* { box-sizing: border-box; }
:root {
  --white: #FFFFFFff;
  --pumpkin: #F87415ff;
  --magenta-dye: #CC0177ff;
  --electric-purple: #A751FBff;
  --pacific-cyan: #00BAD5ff;
  --black: #000000ff;
  --snow: #FBF5F8ff;
}
html, body, #app { height: 100%; margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: var(--black); color: var(--white); }

/* Wider chat panel */
#app { display: grid; grid-template-columns: 1.8fr 3.2fr; height: 100vh; overflow: hidden; }

#chat-panel { border-right: 1px solid rgba(0,0,0,0.15); display: flex; flex-direction: column; background: var(--snow); color: var(--black); font-size: 14px; min-height: 0; min-width: 0; }
#chat-header { padding: 14px 18px; font-weight: 700; letter-spacing: 0.2px; background: linear-gradient(90deg, var(--magenta-dye), var(--electric-purple) 50%, var(--pacific-cyan)); color: var(--white); display: flex; align-items: center; justify-content: space-between; }
#chat-header .title { font-weight: 700; }
#clear-session { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.35); background: rgba(0,0,0,0.15); color: #fff; cursor: pointer; }
#clear-session:hover { background: rgba(0,0,0,0.25); }
#clear-session:active { transform: translateY(1px); }
#messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; background: transparent; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; min-height: 0; }
.msg { padding: 12px 12px; border-radius: 12px; max-width: 95%; white-space: pre-wrap; line-height: 1.5; color: var(--black); position: relative; }
.msg.user { align-self: flex-end; background: rgba(255,255,255,0.8); border: 1px solid rgba(0,186,213,0.45); }
.msg.assistant { align-self: flex-start; background: rgba(255,255,255,0.8); border: 1px solid rgba(167,81,251,0.45); }

#chat-form { display: flex; padding: 10px; gap: 8px; border-top: 1px solid rgba(0,0,0,0.08); background: rgba(255,255,255,0.18); }
#chat-input { flex: 1; padding: 12px 14px; border: 1px solid rgba(0,0,0,0.15); background: rgba(255,255,255,0.9); color: var(--black); border-radius: 12px; outline: none; }
#chat-input::placeholder { color: rgba(0,0,0,0.55); }
#chat-input:focus { border-color: var(--pacific-cyan); box-shadow: 0 0 0 3px rgba(0,186,213,0.25); }
#chat-form button { padding: 12px 16px; border: none; background: linear-gradient(90deg, var(--pumpkin), var(--magenta-dye)); color: var(--white); border-radius: 12px; cursor: pointer; font-weight: 600; transition: box-shadow 0.2s ease, transform 0.05s ease; }
#chat-form button:hover { filter: brightness(1.05); }
#chat-form button:active { transform: translateY(1px); }

#map-panel { position: relative; overflow: hidden; min-height: 0; min-width: 0; }
#mapview { position: absolute; inset: 0; }
/* Legend is now a map widget via Expand; remove standalone container styles */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* Thinking shimmer */
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.thinking-indicator { display: inline-block; background: linear-gradient(90deg, rgba(204,1,119,0.55) 0%, rgba(167,81,251,1) 50%, rgba(0,186,213,0.55) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2.2s linear infinite; }

/* Live actions collapsible */
.msg-actions-wrap { margin: 0 0 8px 0; border: none; background: transparent; border-radius: 8px; }
.msg-actions-wrap[open] { background: transparent; }
.msg-actions-summary { list-style: none; cursor: pointer; padding: 0; margin: 0; font-weight: 600; color: #6a31c7; display: inline-flex; align-items: center; gap: 6px; }
.msg-actions-summary::-webkit-details-marker { display: none; }
.msg-actions-summary::before { content: '▸'; display: inline-block; transition: transform 0.18s ease; color: #6a31c7; }
.msg-actions-summary.no-arrow::before { content: ''; }
.msg-actions-wrap[open] .msg-actions-summary::before { content: '▾'; }
.msg-actions-wrap[open] .msg-actions-summary.no-arrow::before { content: ''; }
.msg-actions { margin: 6px 0 10px 16px; padding: 0 10px 10px; }
.msg-actions:empty { display: none; }
.msg-actions li {
  list-style: disc;
  margin: 0px 0;
  color: rgba(167,81,251,0.9);
}

/* Area selection modal */
#area-modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.area-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); }
.area-modal__dialog { position: relative; z-index: 1; width: min(92vw, 520px); margin: 18vh auto 0; padding: 22px; border-radius: 14px; background: var(--white); color: var(--black); border: 1px solid rgba(0,0,0,0.12); box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.area-modal__dialog h2 { margin: 0 0 8px; font-size: 20px; }
.area-modal__dialog p { margin: 0 0 16px; color: rgba(0,0,0,0.65); }

/* Tile layout */
.area-modal__tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.area-tile { display: flex; align-items: center; justify-content: center; height: 120px; border-radius: 14px; border: 1px solid rgba(0,0,0,0.15); background: rgba(255,255,255,0.9); color: var(--black); cursor: pointer; position: relative; transition: transform 0.08s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.area-tile:focus { outline: none; box-shadow: 0 0 0 3px rgba(0,186,213,0.25); }
.area-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(0,0,0,0.12); }
.area-tile:active { transform: translateY(0); }
.area-tile__title { font-weight: 700; font-size: 22px; }

/* Brand colors per city */
.area-tile.bellevue { background: linear-gradient(160deg, rgba(0,186,213,0.12), rgba(204,1,119,0.08)); border-color: rgba(0,186,213,0.35); }
.area-tile.bellevue .area-tile__title { color: #007a8a; }
.area-tile.kirkland { background: linear-gradient(160deg, rgba(167,81,251,0.12), rgba(248,116,21,0.08)); border-color: rgba(167,81,251,0.35); }
.area-tile.kirkland .area-tile__title { color: #6a31c7; }
.area-tile.nyc { background: linear-gradient(160deg, rgba(248,116,21,0.12), rgba(204,1,119,0.08)); border-color: rgba(248,116,21,0.35); }
.area-tile.nyc .area-tile__title { color: #d4621a; }