*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --teal:    #2a7d6f;
  --teal-lt: #e8f4f2;
  --gray:    #f5f5f5;
  --border:  #ddd;
  --text:    #222;
  --muted:   #666;
  --radius:  10px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--gray);
  color: var(--text);
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

/* ── Header ─────────────────────────────────────────────────────────── */
header {
  background: var(--teal);
  color: #fff;
  padding: 12px 20px;
  flex-shrink: 0;
}
.header-inner { display: flex; align-items: baseline; gap: 12px; }
.logo         { font-size: 1.3rem; font-weight: 700; letter-spacing: -.5px; }
.tagline      { font-size: .85rem; opacity: .8; }

/* ── Main layout ─────────────────────────────────────────────────────── */
main {
  flex: 1;
  display: flex;
  gap: 12px;
  overflow: hidden;
  padding: 12px;
  min-height: 0;
}

/* ── Chat column ─────────────────────────────────────────────────────── */
#chat-container {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

#messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: var(--radius);
  line-height: 1.55;
  font-size: .95rem;
}

.message.assistant {
  align-self: flex-start;
  background: var(--teal-lt);
  border-bottom-left-radius: 2px;
}

.message.user {
  align-self: flex-end;
  background: var(--teal);
  color: #fff;
  border-bottom-right-radius: 2px;
  white-space: pre-wrap;
}

.message.thinking {
  align-self: flex-start;
  background: var(--teal-lt);
  color: var(--muted);
  font-style: italic;
}

/* Markdown inside assistant bubbles */
.message.assistant p            { margin: 0 0 .6em; }
.message.assistant p:last-child { margin-bottom: 0; }
.message.assistant ul,
.message.assistant ol           { margin: .4em 0 .6em 1.2em; padding: 0; }
.message.assistant li           { margin-bottom: .25em; }
.message.assistant strong       { font-weight: 600; }
.message.assistant h3,
.message.assistant h4           { font-size: 1rem; font-weight: 600; margin: .8em 0 .3em; }

#input-row {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border);
  background: #fff;
  flex-shrink: 0;
}

#user-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: .95rem;
  font-family: inherit;
  line-height: 1.4;
}
#user-input:focus { outline: 2px solid var(--teal); border-color: transparent; }

#send-btn {
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0 20px;
  font-size: .95rem;
  cursor: pointer;
  align-self: flex-end;
  height: 38px;
}
#send-btn:hover    { background: #236058; }
#send-btn:disabled { opacity: .5; cursor: default; }

/* ── Sidebar ─────────────────────────────────────────────────────────── */
#sidebar {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

#location-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  flex-shrink: 0;
}

.loc-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}

#ref-input {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: .9rem;
  font-family: inherit;
}
#ref-input:focus { outline: 2px solid var(--teal); border-color: transparent; }

.loc-inputs {
  display: flex;
  gap: 6px;
}

#location-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: .9rem;
  font-family: inherit;
}
#location-input:focus { outline: 2px solid var(--teal); border-color: transparent; }

#radius-select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 4px;
  font-size: .85rem;
  background: #fff;
  cursor: pointer;
}

#search-btn {
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0 10px;
  font-size: .85rem;
  cursor: pointer;
  white-space: nowrap;
}
#search-btn:hover    { background: #236058; }
#search-btn:disabled { opacity: .5; cursor: default; }

.step-selector-row {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.step-selector-row .loc-label { margin-bottom: 0; }

#step-select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: .85rem;
  background: #fff;
  cursor: pointer;
}
#step-select:focus { outline: 2px solid var(--teal); border-color: transparent; }

#providers-panel {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-hint {
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.5;
  padding: 4px 2px;
}

/* Stage section */
.stage-section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.stage-header {
  background: var(--teal-lt);
  padding: 8px 12px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.stage-order {
  font-weight: 400;
  opacity: .7;
  margin-right: 4px;
}

.provider-card {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
}
.provider-card:first-of-type { border-top: none; }

.provider-name {
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: 3px;
}

.provider-detail {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.5;
}

.provider-phone a {
  color: var(--teal);
  text-decoration: none;
}
.provider-phone a:hover { text-decoration: underline; }

.no-providers {
  padding: 10px 12px;
  font-size: .82rem;
  color: var(--muted);
  font-style: italic;
}

.loading-msg {
  font-size: .85rem;
  color: var(--muted);
  padding: 4px 2px;
}

/* ── PDF button ──────────────────────────────────────────────────────── */
#pdf-row {
  flex-shrink: 0;
  padding-top: 2px;
}

#pdf-btn {
  width: 100%;
  background: #fff;
  color: var(--teal);
  border: 1.5px solid var(--teal);
  border-radius: 6px;
  padding: 8px 0;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
#pdf-btn:hover    { background: var(--teal); color: #fff; }
#pdf-btn:disabled { opacity: .5; cursor: default; }