/* ============================================================================
   安全耐震我的AI · webapp0 (精簡版) stylesheet
   Light theme:
     page #ffffff · card #f4f5f7 · text #1b2330 · accent #2563eb
     grades: A #dc2626 (danger) · B #b45309 (caution) · C #15803d (ok)
   Grade colors are reserved EXCLUSIVELY for severity.
   ==========================================================================*/
:root{
  --paper:#ffffff; --card:#f4f5f7; --ink:#1b2330; --ink-soft:#5b6472;
  --line:#dde1e7; --blueprint:#2563eb; --blueprint-soft:rgba(37,99,235,.10);
  --a:#dc2626; --a-bg:rgba(220,38,38,.10); --b:#b45309; --b-bg:rgba(180,83,9,.12);
  --c:#15803d; --c-bg:rgba(21,128,61,.10);
  --radius:10px; --shadow:0 1px 3px rgba(16,24,40,.06),0 4px 14px rgba(16,24,40,.08);
  --mono:"SFMono-Regular",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Segoe UI","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  font-size:16px;line-height:1.6;
}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
h2{margin:0;font-size:1.5rem;letter-spacing:.02em}

/* ---------- notice gate (shown on every load, blocks the page) ----------- */
.gate-shell{
  position:fixed;inset:0;z-index:100;background:rgba(27,35,48,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.gate-shell[hidden]{display:none}
.gate-panel{
  background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);
  max-width:640px;width:100%;max-height:88vh;
  display:flex;flex-direction:column;padding:24px;
}
.gate-heading{margin:0 0 12px;font-size:1.25rem;text-align:center}
.gate-text{overflow-y:auto;font-size:1.125rem;line-height:1.7;padding-right:4px}
.gate-text p{margin:0 0 12px}
.gate-text h3{margin:16px 0 6px;font-size:1.125rem;color:var(--blueprint)}
.gate-text ul{margin:0 0 4px;padding-left:1.3em}
.gate-text li{margin:6px 0}
.gate-confirm{
  display:flex;align-items:center;gap:8px;margin-top:16px;font-size:1.125rem;
  cursor:pointer;
}
.gate-panel .btn{margin-top:14px;align-self:center;padding:11px 32px}
.gate-panel .btn:disabled{background:#d7dbe0;color:#8b93a0;cursor:not-allowed}

/* ---------- top bar (logo header, matched to /opt/damageclass) ----------- */
.topbar{
  border-bottom:1px solid var(--line);padding:20px 24px;
}
.logo-row{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:20px;max-width:960px;margin:0 auto;
}
.logo-img{
  height:67px;width:auto;max-width:100%;object-fit:contain;
  background:#fff;border-radius:8px;padding:6px 10px;
}
.app-title{margin-top:0;text-align:center;font-size:2rem}
.subtitle{
  text-align:center;color:var(--blueprint);font-size:1.5rem;
  margin:-8px 0 24px;
}

/* ---------- notices ------------------------------------------------------ */
.outage{
  margin:16px auto 0;max-width:960px;
  background:var(--a-bg);border:1.5px solid var(--a);border-radius:var(--radius);
  padding:16px 20px;color:#7f1d1d;
}
.outage-title{font-weight:800;letter-spacing:.08em;margin-bottom:4px}
.outage-contact{margin-top:8px;font-size:1.125rem;font-weight:600}

/* ---------- layout (single page, no tabs) --------------------------------- */
.wrap{max-width:960px;margin:0 auto;padding:16px 24px 16px}
.panel + .panel{margin-top:32px;padding-top:32px;border-top:1px solid var(--line)}

/* ---------- steps -------------------------------------------------------- */
.step{
  margin-bottom:18px;
}
.step-head{margin-bottom:14px}
.step-sub{margin:6px 0 0;font-size:1.125rem;color:var(--ink-soft)}

/* ---------- step 1 : shooting guide (collapsible, matched to .rc-report) - */
.guide-toggle{max-width:480px;margin:24px auto 0}
.guide-toggle summary{
  cursor:pointer;color:var(--blueprint);font-weight:600;font-size:1.25rem;
  list-style:none;
}
.guide-toggle summary::-webkit-details-marker{display:none}
.guide-toggle summary::before{content:"▸ ";display:inline-block;transition:transform .15s}
.guide-toggle[open] summary::before{transform:rotate(90deg)}
.guide-list{margin-top:14px;display:flex;flex-direction:column}
.about-content{margin-top:14px;font-size:1.125rem;color:var(--ink-soft)}
.about-content h3{margin:14px 0 4px;font-size:1.125rem;color:var(--blueprint)}
.about-content h3:first-child{margin-top:0}
.about-content p{margin:0}
.results-body{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.guide-row{
  display:flex;align-items:center;gap:14px;padding:12px 0;
  border-top:1px solid var(--line);
}
.guide-row:first-child{border-top:none;padding-top:0}
.guide-text{flex:1;min-width:0;font-size:1.125rem;color:var(--ink-soft)}
.guide-text b{display:block;font-size:1.125rem;margin-bottom:3px}
.guide-text p{margin:0}
.guide-row.good .guide-text b{color:var(--c)}
.guide-row.bad .guide-text b{color:var(--a)}
.guide-row img{
  width:130px;flex:none;aspect-ratio:4/3;object-fit:cover;
  border-radius:8px;background:var(--line);
}
.guide-row.noimg img{display:none}
.guide-row.noimg::after{
  content:"（示意圖）";flex:none;width:130px;aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;border-radius:8px;
  background:repeating-linear-gradient(45deg,#e9ebee 0 10px,#f2f3f5 10px 20px);
  color:var(--ink-soft);font-size:1.125rem;
}

/* ---------- step 2 : element select + single-photo upload (matched to
   /opt/damageclass's .predict-form/.field/.file-upload-btn) --------------- */
.predict-form{
  margin:24px auto 0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:16px;max-width:480px;text-align:center;
}
.field{min-width:0;display:flex;flex-direction:column;gap:6px;text-align:center}
.field select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  width:100%;height:56px;padding:10px 12px;border-radius:8px;
  border:1px solid var(--blueprint);background:var(--card);color:var(--ink);
  font-size:1.5rem;text-align:center;text-align-last:center;
}
.file-upload-btn{
  min-width:0;height:56px;display:flex;align-items:center;
  justify-content:center;padding:12px 20px;border:1px solid var(--blueprint);
  border-radius:8px;background:var(--card);cursor:pointer;text-align:center;
  color:var(--ink);font-size:1.5rem;
}
.file-upload-btn:hover{border-color:var(--blueprint)}
.file-upload-btn input{display:none}
.btn{
  border-radius:8px;padding:11px 18px;font-weight:700;letter-spacing:.04em;
  border:1.5px solid transparent;font-size:1.25rem;
}
.btn-ghost{background:var(--card);border-color:var(--blueprint);color:var(--blueprint)}
.btn-ghost:active{background:var(--blueprint-soft)}
.btn-primary{background:var(--blueprint);color:#fff}
.btn-primary:disabled{background:#d7dbe0;color:#8b93a0;cursor:not-allowed}

/* ---------- results ------------------------------------------------------ */
.danger-strip{
  background:var(--a-bg);border:1.5px solid var(--a);color:#7f1d1d;
  border-radius:8px;padding:10px 14px;font-weight:700;margin-bottom:10px;
  font-size:1.25rem;
}
.results-list{display:grid;gap:14px}

.result-card{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card);overflow:hidden;
}
.result-card.danger{border:2px solid var(--a)}
.rc-summary{
  cursor:pointer;list-style:none;padding:12px 14px;font-weight:600;
  font-size:1.25rem;display:flex;align-items:center;gap:8px;
}
.rc-summary::-webkit-details-marker{display:none}
.rc-summary::before{content:"▸ ";display:inline-block;transition:transform .15s}
.result-card[open] .rc-summary::before{transform:rotate(90deg)}
.result-card[open] .rc-summary{border-bottom:1px solid var(--line)}
.g-badge{
  display:inline-flex;align-items:center;padding:1px 8px;border-radius:6px;
  font-family:var(--mono);font-weight:800;font-size:1.25rem;flex:none;
}
.rc-top{display:flex;gap:14px;padding:14px;align-items:flex-start}
.rc-photo{width:110px;flex:none;border-radius:8px;overflow:hidden;background:var(--line)}
.rc-photo img{width:100%;aspect-ratio:1/1;object-fit:cover}
.rc-main{flex:1;min-width:0}
.rc-wait{font-size:1.125rem;color:var(--ink-soft);margin-top:6px}

.grade-chip{
  display:inline-flex;align-items:center;gap:8px;margin-top:8px;
  padding:6px 14px;border-radius:8px;font-weight:800;letter-spacing:.06em;
  font-size:1.5rem;
}
.grade-chip .g{font-size:1.8rem;line-height:1;font-family:var(--mono)}
.grade-A{background:var(--a-bg);color:var(--a);border:1.5px solid var(--a)}
.grade-B{background:var(--b-bg);color:var(--b);border:1.5px solid var(--b)}
.grade-C{background:var(--c-bg);color:var(--c);border:1.5px solid var(--c)}

.rc-body{padding:0 14px 14px}
.rc-prob{margin:4px 0 0;font-size:1.125rem;color:var(--ink-soft)}
.rc-meaning{margin:8px 0;font-size:1.25rem}
.rc-note{
  font-size:1.125rem;border-radius:8px;padding:8px 12px;margin:8px 0;
}
.rc-note.escal{background:var(--a-bg);color:#7f1d1d;border:1px solid var(--a)}
.rc-note.lowconf{background:var(--b-bg);color:#6b4a06;border:1px solid var(--b)}
.rc-actions{margin:8px 0 0;padding-left:1.2em;font-size:1.25rem}
.rc-actions li{margin:4px 0}
.rc-error{color:var(--a);font-size:1.125rem;margin-top:8px}
.rc-report-body{
  border-top:1px dashed var(--line);margin-top:10px;padding:10px 14px 0;
  font-size:1.125rem;line-height:1.6;color:var(--ink);
  max-width:100%;overflow-x:auto;
}
.rc-report-body h1,.rc-report-body h2,.rc-report-body h3,.rc-report-body h4{
  margin:14px 0 6px;font-size:1.25rem;line-height:1.4;
}
.rc-report-body h1:first-child,.rc-report-body h2:first-child,
.rc-report-body h3:first-child{margin-top:0}
.rc-report-body h3{
  display:inline-block;color:var(--blueprint);background:var(--blueprint-soft);
  padding:3px 10px;border-radius:6px;
}
.rc-report-body p{margin:6px 0}
.rc-report-body ul,.rc-report-body ol{padding-left:1.3em;margin:6px 0}
.rc-report-body li{margin:3px 0}
.rc-report-body blockquote{
  margin:8px 0;padding:6px 12px;border-left:3px solid var(--line);
  color:var(--ink-soft);font-size:1.125rem;
}
.rc-report-body table{border-collapse:collapse;font-size:1.125rem;min-width:100%}
.rc-report-body th,.rc-report-body td{
  border:1px solid var(--line);padding:6px 10px;text-align:left;white-space:nowrap;
}
.rc-report-body code{
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
  padding:1px 5px;font-family:var(--mono);font-size:.85em;
}
.rc-btns{display:flex;gap:8px;flex-wrap:wrap;padding:12px 14px;border-top:1px dashed var(--line)}
.btn-sm{padding:8px 14px;font-size:1.25rem;border-radius:7px}

/* ---------- chat --------------------------------------------------------- */
/* ---------- inline per-card Q&A (replaces the old standalone chat panel) - */
.rc-ask{border-top:1px dashed var(--line);margin-top:10px;padding:10px 14px 0}
.rc-ask-messages{display:grid;gap:8px;margin-bottom:8px}
.rc-ask-messages:empty{display:none;margin-bottom:0}
.msg{max-width:85%;padding:8px 12px;border-radius:12px;font-size:1.125rem;white-space:pre-wrap;word-break:break-word}
.msg.user{justify-self:end;background:var(--blueprint);color:#fff;border-bottom-right-radius:4px}
.msg.bot{justify-self:start;background:var(--paper);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.sys{justify-self:center;background:transparent;color:var(--ink-soft);font-size:1.125rem;text-align:center}
.msg .src{margin-top:6px;font-size:1.125rem}
.msg .src summary{cursor:pointer;color:var(--blueprint);font-weight:600}
.msg .src li{margin:4px 0;color:var(--ink-soft)}
.rc-ask-row{display:flex;gap:8px}
.rc-ask-input{
  flex:1;font:inherit;font-size:1.125rem;padding:8px 10px;border-radius:8px;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);
}
.rc-ask-input:focus{outline:none;border-color:var(--blueprint)}

/* ---------- footer (matched to /opt/damageclass) / toast ------------------ */
.site-footer{
  text-align:center;color:var(--ink-soft);font-size:1rem;
  padding:16px 12px 40px;border-top:1px solid var(--line);margin-top:20px;
}
.site-footer p{margin:2px 0}
.mongo-note{color:var(--b)}
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--card);color:var(--ink);padding:10px 18px;border-radius:8px;
  font-size:1.125rem;box-shadow:var(--shadow);z-index:50;max-width:90vw;
  border:1px solid var(--line);
}

/* ---------- motion --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- responsive (only for parts /opt/bldg-dmg has no equivalent of —
   shared chrome/typography stays fixed at every width to match it exactly) - */
@media (max-width:640px){
  .rc-photo{width:86px}
  .msg{max-width:95%}
}