/* App-options PoC additions. Uses the tokens from styles.css. */
#preview-bar a { font-size:10px;font-weight:600;padding:3px;color:#4b5c46;text-decoration:underline;text-underline-offset:3px }

.sample-strip { display:flex;gap:10px;align-items:flex-start;background:#f7f1e3;border:1px solid #eadfc4;color:#6f5a30;border-radius:10px;padding:11px 14px;margin:0 0 20px;font-size:11.5px;line-height:1.55 }
.sample-strip .icon { width:16px;height:16px;flex:none;margin-top:1px }
.sample-strip.warn { background:#f9ead7;border-color:#efd3ae;color:#7c4a1c }
.sample-strip.location-live { background:#e9f1dc;border-color:#cfe0b6;color:#35552e;align-items:center }
.sample-strip .btn { margin-left:auto;flex:none;min-height:28px;padding:0 }
.dialog-body .sample-strip { margin-top:0 }

/* Distance */
.distance-chip { display:inline-flex;align-items:center;gap:7px;padding:6px 10px 6px 8px;border-radius:9px;background:#eef2e6;color:#3e5a3b;font-size:11px;line-height:1.3;margin:10px 0 0;max-width:100% }
.distance-chip .icon { width:14px;height:14px;flex:none }
.distance-chip strong { display:block;font-weight:650 }
.distance-chip small { display:block;color:#6d7b67;font-size:10px;overflow-wrap:anywhere }
.distance-chip.near { background:#dfeccc;color:#2f5329 }
.distance-chip.home { background:var(--lavender);color:#4c4a74 }
.distance-chip.city { background:#f0f1eb;color:#5b6557 }
.distance-chip.far { background:#f4efe7;color:#76623f }
.distance-chip.online { background:var(--blue);color:#47688e }
.choice-card .distance-chip { margin:0 0 12px }
.dialog-body .distance-chip { margin:0 0 12px }
.ask-provider .distance-chip { margin:0 }

/* Ask */
.ask-layout { display:grid;grid-template-columns:minmax(0,1.65fr) minmax(250px,1fr);gap:24px;align-items:start }
.ask-panel { display:flex;flex-direction:column }
.ask-modes { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px }
.ask-mode { display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:12px;background:#fbfcf8;padding:12px;color:var(--ink);cursor:pointer }
.ask-mode .icon { width:18px;height:18px;grid-row:span 2;color:var(--forest) }
.ask-mode b { font-size:12px }
.ask-mode small { font-size:10px;color:var(--muted) }
.ask-mode.active { background:var(--forest);border-color:var(--forest);color:#edf1e4;cursor:default }
.ask-mode.active .icon { color:var(--lime) }
.ask-mode.active small { color:#bacaaf }
.ask-thread { display:grid;gap:14px;max-height:520px;overflow:auto;padding:4px 2px 10px;margin-bottom:12px }
.ask-empty { text-align:center;padding:28px 10px;color:var(--muted) }
.ask-empty .icon { width:28px;height:28px;color:var(--forest) }
.ask-empty h2 { font:24px/1.2 var(--serif);color:var(--ink);margin:8px 0 }
.ask-msg { border-radius:14px;padding:14px 16px;font-size:12.5px;line-height:1.6 }
.ask-msg p+p { margin-top:8px }
.ask-msg.user { background:#e8eef4;margin-left:18%;color:#2f445b }
.ask-msg.bot { background:#f1f5e8;margin-right:6% }
.ask-msg.deeper { background:#eef0f7 }
.ask-by { display:flex;gap:7px;align-items:center;font-weight:650;color:var(--forest);font-size:11px;margin-bottom:6px }
.ask-by .icon { width:14px;height:14px }
.ask-by span { font-weight:500;color:var(--muted) }
.ask-providers { display:grid;gap:8px;margin:12px 0 }
.ask-provider { display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px }
.ask-provider strong { display:block;font-size:12px;overflow-wrap:anywhere }
.ask-provider small { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:10px;color:var(--muted);overflow-wrap:anywhere }
.ask-guide { display:flex;align-items:center;gap:6px;margin:6px 0 }
.ask-guide .icon { width:15px;height:15px;color:var(--forest) }
.ask-msg .button-row { margin-top:10px }
.ask-msg .micro { font-size:10.5px;margin-top:8px }
.ask-suggestions { display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px }
.btn.chip { background:#fff;border:1px solid #d7dfcb;border-radius:999px;font-size:11.5px;font-weight:550;min-height:34px;padding:7px 13px;color:var(--forest);text-align:left }
.btn.chip:hover { background:#f2f6ea }
.ask-form { display:flex;gap:10px;align-items:stretch;margin-bottom:10px }
.ask-form input { margin:0 }
.ask-form .btn { flex:none }
.deeper-steps { margin:8px 0 10px 18px;display:grid;gap:4px }
.deeper-sources { display:flex;flex-wrap:wrap;gap:6px }
.deeper-sources span { background:#fff;border:1px dashed #c9cde0;border-radius:8px;padding:4px 9px;font-size:10.5px;color:#5c6380 }
.ask-quote { border-left:3px solid var(--lime);background:#f6f8f0;padding:12px 14px;border-radius:8px;font-size:13px;margin:0 0 16px }

/* Credits, consultation, emergency */
.credit-card .credit-balance { display:flex;align-items:flex-end;gap:12px;margin:4px 0 6px }
.credit-balance strong { font:46px/1 var(--serif);color:var(--forest) }
.credit-balance span { font-size:12px;color:var(--muted);line-height:1.3;padding-bottom:5px }
.credit-balance small { display:block;font-size:11px }
.credit-card .muted { margin:8px 0 12px;font-size:12px }
.credit-history { margin-top:10px;font-size:12px }
.credit-history summary { cursor:pointer;font-weight:600 }
.consult-card h2 { font-size:17px }
.emergency-note { display:flex;gap:10px;align-items:flex-start;background:#fbece8;border:1px solid #f0cfc6;color:#7a3527;border-radius:12px;padding:13px 14px;font-size:11.5px;line-height:1.55;margin-bottom:20px }
.emergency-note .icon { width:18px;height:18px;flex:none;margin-top:1px }

/* Breed guides */
.guide-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:6px 0 24px }
.guide-card { display:block;border:1px solid var(--line);background:#fff;border-radius:15px;padding:22px;color:var(--ink);text-decoration:none }
.guide-card:hover { border-color:#c7d3b7 }
.guide-card.yours { border-color:#b9cc9c;box-shadow:0 0 0 3px #eef4e1 }
.guide-mark { display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--green);color:var(--forest);margin-bottom:14px }
.guide-mark .icon { width:20px;height:20px }
.guide-card h2 { font:26px/1.15 var(--serif);margin-bottom:8px }
.guide-card p:not(.eyebrow) { font-size:12px;color:var(--muted);margin-bottom:12px;line-height:1.6 }
.guide-section ul { padding-left:18px;display:grid;gap:8px;font-size:13px;line-height:1.6 }
.guide-section h2 { font-size:17px;margin-bottom:12px }

/* Admin */
.admin-head,.admin-row { display:grid;grid-template-columns:minmax(0,1.6fr) auto 120px 130px;gap:16px;align-items:center }
.admin-head { font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding:0 0 10px;border-bottom:1px solid var(--line) }
.admin-row { padding:16px 0;border-bottom:1px solid var(--line) }
.admin-row.current { background:#f6f9f0;margin:0 -12px;padding:16px 12px;border-radius:10px }
.admin-row strong { font-size:13px }
.admin-row p { font-size:11px;color:var(--muted);margin-top:3px }
.mode-switch { display:inline-flex;border:1px solid var(--line);border-radius:9px;background:#eeefe8;padding:3px;gap:3px }
.mode-switch button { border:0;background:transparent;border-radius:6px;padding:7px 14px;font-size:11px;color:var(--muted);cursor:pointer }
.mode-switch button.active { background:#fff;color:var(--forest);font-weight:650;box-shadow:0 1px 4px #233f3612 }
.admin-credits { display:flex;align-items:center;gap:10px }
.admin-credits strong { font-size:15px }

/* Location choices and reading choices */
.location-modes,.reading-choice { display:grid;gap:8px;margin:0 0 18px }
.reading-choice { border:0;padding:0 }
.reading-choice legend { padding:0;margin-bottom:8px }
.mode-card { display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:11px;padding:12px 13px;margin:0;cursor:pointer;font-weight:400 }
.mode-card:has(input:checked) { border-color:#9fb983;background:#f4f8ec }
.mode-card input { margin:2px 0 0 }
.mode-card strong { display:block;font-size:12.5px }
.mode-card small { display:block;font-size:11px;color:var(--muted);margin-top:2px }

/* Reading a report */
.reading-progress { padding:6px 0 4px }
.reading-file { display:flex;gap:12px;align-items:center }
.reading-file>.icon { width:30px;height:30px;padding:6px;border-radius:9px;background:var(--green);color:var(--forest);flex:none }
.reading-file strong { font-size:13px;overflow-wrap:anywhere }
.reading-file p { font-size:11px;color:var(--muted);margin-top:2px }
.reading-steps { list-style:none;padding:0;margin:20px 0 14px;display:grid;gap:10px }
.reading-steps li { display:flex;gap:9px;align-items:center;font-size:13px;opacity:.25;animation:reading-step .4s ease forwards;animation-delay:var(--delay) }
.reading-steps .icon { width:16px;height:16px;padding:3px;border-radius:50%;background:var(--green);color:var(--forest) }
@keyframes reading-step { to { opacity:1 } }
@media(prefers-reduced-motion:reduce) { .reading-steps li { animation:none;opacity:1 } }
.reading-meta { display:grid;gap:12px;margin-bottom:16px }
.pet-check { display:flex;gap:8px;align-items:center;background:#eef4e2;color:#35552e;border-radius:10px;padding:10px 12px;font-size:12px }
.pet-check .icon { width:16px;height:16px;flex:none }
.fact-group { padding:10px 14px 4px }
.fact-row { display:flex;gap:11px;align-items:flex-start;padding:10px 0;margin:0;border-top:1px solid var(--line);font-weight:400;cursor:pointer }
.fact-group legend+.fact-row { border-top:0 }
.fact-row input { margin:3px 0 0 }
.fact-copy { display:grid;gap:2px;font-size:12px }
.fact-copy strong { font-size:12.5px }
.fact-copy small { font-size:10.5px;color:var(--muted) }
.fact-copy .fact-note { color:#7c4a1c }
.fact-copy .fact-source { display:flex;gap:4px;align-items:center;color:#7d8a74 }
.fact-copy .fact-source .icon { width:11px;height:11px }

@media(max-width:980px) {
  .ask-layout { grid-template-columns:1fr }
  .guide-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media(max-width:720px) {
  #preview-bar a { font-size:8px }
  .section-head:has(> .button-row) { flex-wrap:wrap }
  .section-head > .button-row { width:100%;flex-wrap:wrap;gap:4px 14px }
  .ask-modes { grid-template-columns:1fr }
  .ask-mode { padding:10px }
  .ask-msg.user { margin-left:10% }
  .ask-msg.bot { margin-right:0 }
  .ask-provider { grid-template-columns:1fr;gap:8px }
  .ask-form { flex-direction:column }
  .guide-grid { grid-template-columns:1fr }
  .admin-head { display:none }
  .admin-row { grid-template-columns:1fr;gap:10px }
  .admin-row.current { margin:0 -8px;padding:14px 8px }
  .credit-balance strong { font-size:40px }
}