/* ==========================================================================
   顧客問合せ ナレッジチャットボット — demo UI
   ========================================================================== */

:root {
  --bg:          #f4f5f7;
  --surface:     #ffffff;
  --surface-2:   #fafbfc;
  --line:        #e4e7ec;
  --line-soft:   #eef0f3;
  --ink:         #12161d;
  --ink-2:       #4a5462;
  --ink-3:       #7b8694;
  --accent:      #1b62d6;
  --accent-soft: #eaf1fd;
  --user-bg:     #1b62d6;
  --ok:          #0d7a4a;
  --ok-soft:     #e6f4ed;
  --warn:        #8a5a00;
  --warn-soft:   #fdf3e0;
  --bad:         #b02020;
  --bad-soft:    #fdecec;
  --radius:      14px;
  --radius-sm:   9px;
  --shadow:      0 1px 2px rgba(16,24,40,.05), 0 6px 20px -8px rgba(16,24,40,.12);
  --shadow-lg:   0 12px 40px -12px rgba(16,24,40,.22);
  --sidebar-w:   330px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #0e1117;
    --surface:     #161b23;
    --surface-2:   #1b212b;
    --line:        #262d38;
    --line-soft:   #202631;
    --ink:         #e9edf3;
    --ink-2:       #a9b4c2;
    --ink-3:       #7c8797;
    --accent:      #5b9cff;
    --accent-soft: #16233a;
    --user-bg:     #2f6fd0;
    --ok:          #4cc38a;
    --ok-soft:     #14281f;
    --warn:        #e0a94b;
    --warn-soft:   #2a2113;
    --bad:         #f07070;
    --bad-soft:    #2c1717;
    --shadow:      0 1px 2px rgba(0,0,0,.3), 0 6px 20px -8px rgba(0,0,0,.5);
    --shadow-lg:   0 12px 40px -12px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
               "Yu Gothic UI", "Meiryo", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ---------- layout ---------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "head head" "side main";
  height: 100dvh;
}

/* ---------- header ---------- */
.head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  height: 62px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark {
  width: 32px; height: 32px; flex: none; border-radius: 9px;
  background: linear-gradient(145deg, var(--accent), #6f9dfb);
  display: grid; place-items: center; color: #fff;
}
.brand-mark svg { width: 18px; height: 18px; }
.brand-text { min-width: 0; }
.brand-name {
  font-size: 14.5px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-sub {
  font-size: 11.5px; color: var(--ink-3); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.head-spacer { flex: 1; }

.status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--ink-2);
  padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2); white-space: nowrap;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.status.online  .dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.status.offline .dot { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.status.starting .dot {
  background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft);
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .status.starting .dot { animation: none; } }

.icon-btn {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid transparent; color: var(--ink-2);
  transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:disabled { opacity: .4; cursor: default; }
.icon-btn:disabled:hover { background: transparent; border-color: transparent; }

/* ---------- API key modal ----------
   Blocking by design: while no verified key exists the backdrop covers the
   page, there is no close button, Escape does nothing and focus is pulled
   back into the dialog. Opened from the gear with a key already verified it
   becomes an ordinary dismissible dialog. */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 20px;
  background: rgba(8, 11, 16, .62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.modal-backdrop[hidden] { display: none !important; }
.modal {
  width: min(420px, 100%);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 26px 26px 22px;
  animation: modal-in .16s ease-out;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(6px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .modal { animation: none; } }
.modal-mark {
  width: 38px; height: 38px; border-radius: 11px; margin-bottom: 14px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.modal-mark svg { width: 19px; height: 19px; }
.modal h2 { margin: 0 0 6px; font-size: 16px; letter-spacing: -.01em; }
.modal-lead { margin: 0 0 18px; font-size: 12.5px; color: var(--ink-3); line-height: 1.65; }
.modal label { display: block; font-size: 11.5px; color: var(--ink-2); margin-bottom: 6px; }
.modal input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink);
  font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.modal input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.modal input.bad { border-color: var(--bad); outline-color: var(--bad-soft); }
.modal-msg {
  margin: 10px 0 0; padding: 9px 11px; border-radius: var(--radius-sm);
  font-size: 12px; line-height: 1.6;
}
.modal-msg[hidden] { display: none !important; }
.modal-msg.err  { background: var(--bad-soft);  color: var(--bad); }
.modal-msg.wait { background: var(--surface-2); color: var(--ink-3); }
.modal-actions { display: flex; gap: 8px; margin-top: 18px; }
.modal-actions .btn { flex: 1; }
.modal .shake { animation: shake .3s; }
@keyframes shake {
  25% { transform: translateX(-5px); } 75% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) { .modal .shake { animation: none; } }

.btn {
  padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface-2); font-size: 13px; font-weight: 600; color: var(--ink);
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--line-soft); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(1.07); background: var(--accent); }

/* ---------- sidebar ---------- */
.side {
  grid-area: side;
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  padding: 18px 14px 28px;
}
.side-head { padding: 0 6px 12px; }
.side-title { font-size: 13px; font-weight: 700; margin: 0 0 3px; }
.side-note { font-size: 11.5px; color: var(--ink-3); margin: 0; line-height: 1.6; }

.group { margin-bottom: 6px; }
.group-btn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 8px; border: 0; background: transparent;
  border-radius: var(--radius-sm); text-align: left;
  font-size: 12.5px; font-weight: 650; color: var(--ink-2);
  transition: background .13s, color .13s;
}
.group-btn:hover { background: var(--surface-2); color: var(--ink); }
.group-btn svg.ico { width: 15px; height: 15px; flex: none; color: var(--accent); }
.group-btn .count {
  margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--ink-3);
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 1px 7px; border-radius: 999px;
}
.group-btn .chev {
  width: 13px; height: 13px; flex: none; color: var(--ink-3);
  transition: transform .2s ease;
}
.group.open .group-btn .chev { transform: rotate(90deg); }

.group-body { display: none; padding: 2px 0 8px 6px; }
.group.open .group-body { display: block; }

.q {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; margin-bottom: 5px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink-2);
  font-size: 12.5px; line-height: 1.6;
  transition: background .14s, border-color .14s, color .14s, transform .14s;
}
.q:hover {
  background: var(--accent-soft); border-color: var(--accent);
  color: var(--ink); transform: translateX(2px);
}
.q:disabled { opacity: .45; cursor: default; transform: none; }

/* ---------- main / chat ---------- */
.main {
  grid-area: main;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
}
.scroll { overflow-y: auto; scroll-behavior: smooth; }
.thread { max-width: 780px; margin: 0 auto; padding: 28px 24px 12px; }

/* empty state */
.empty { max-width: 640px; margin: 0 auto; padding: 56px 24px; text-align: center; }
.empty-mark {
  width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 15px;
  background: linear-gradient(145deg, var(--accent), #6f9dfb);
  display: grid; place-items: center; color: #fff; box-shadow: var(--shadow);
}
.empty-mark svg { width: 27px; height: 27px; }
.empty h1 { font-size: 21px; margin: 0 0 10px; letter-spacing: .01em; }
.empty p { color: var(--ink-2); margin: 0 auto 26px; max-width: 480px; font-size: 14px; }
.empty-hint {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-3);
  background: var(--surface); border: 1px solid var(--line);
  padding: 8px 15px; border-radius: 999px;
}
.empty-hint svg { width: 14px; height: 14px; color: var(--accent); }

/* server-startup state - reuses the .stages/.stage/.spin row already used for
   the per-answer "searching / generating" progress, so it reads as the same
   product instead of a bolted-on splash screen. */
.boot-stages {
  max-width: 320px; margin: 18px auto 0; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 13px 16px;
}
.boot-error {
  max-width: 420px; margin: 18px auto 0; text-align: left;
}

/* messages */
.msg { display: flex; gap: 12px; margin-bottom: 26px; animation: rise .32s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .msg { animation: none; } .scroll { scroll-behavior: auto; } }

.msg.user { flex-direction: row-reverse; }
.avatar {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  display: grid; place-items: center; margin-top: 2px;
}
.avatar svg { width: 16px; height: 16px; }
.msg.bot  .avatar { background: linear-gradient(145deg, var(--accent), #6f9dfb); color: #fff; }
.msg.user .avatar { background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }

.bubble-wrap { min-width: 0; max-width: 88%; }
.msg.user .bubble-wrap { display: flex; flex-direction: column; align-items: flex-end; }

.bubble {
  padding: 12px 16px; border-radius: var(--radius);
  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
}
.msg.user .bubble {
  background: var(--user-bg); color: #fff;
  border-bottom-right-radius: 5px;
}
.msg.bot .bubble {
  background: var(--surface); border: 1px solid var(--line);
  border-bottom-left-radius: 5px; box-shadow: var(--shadow);
}
.msg.bot.is-error .bubble { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }

/* answer meta */
.meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 9px; }
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-3); background: var(--surface);
  white-space: nowrap;
}
.pill svg { width: 11px; height: 11px; }
.pill.high { color: var(--ok);   background: var(--ok-soft);   border-color: transparent; }
.pill.mid  { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.pill.low  { color: var(--bad);  background: var(--bad-soft);  border-color: transparent; }

.sources { margin-top: 9px; }
.sources summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-3); padding: 3px 0;
  transition: color .14s;
}
.sources summary::-webkit-details-marker { display: none; }
.sources summary:hover { color: var(--accent); }
.sources summary svg { width: 12px; height: 12px; transition: transform .2s; }
.sources[open] summary svg.chev { transform: rotate(90deg); }

.src {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 11px 13px; margin-top: 8px;
}
.src-head {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 11px; color: var(--ink-3); margin-bottom: 7px;
}
.src-loc {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--accent); font-weight: 600;
}
.src-field { font-size: 12.5px; color: var(--ink-2); margin-bottom: 5px; line-height: 1.7; }
.src-field:last-child { margin-bottom: 0; }
.src-field b { color: var(--ink-3); font-weight: 600; font-size: 11px; margin-right: 6px; }

/* staged loading */
.stages { display: flex; flex-direction: column; gap: 7px; padding: 3px 2px; }
.stage {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: var(--ink-3);
  transition: color .25s;
}
.stage .mark {
  width: 15px; height: 15px; flex: none; display: grid; place-items: center;
}
.stage .mark svg { width: 13px; height: 13px; }
.stage.done { color: var(--ink-2); }
.stage.done .mark { color: var(--ok); }
.stage.active { color: var(--ink); font-weight: 600; }
.spin {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.stage .hint { color: var(--ink-3); font-weight: 400; font-size: 11.5px; }

/* ---------- composer ---------- */
.composer-wrap {
  border-top: 1px solid var(--line);
  background: linear-gradient(to bottom, transparent, var(--bg) 22%);
  padding: 14px 24px 18px;
}
.composer { max-width: 780px; margin: 0 auto; }
.composer-box {
  display: flex; align-items: flex-end; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 8px 8px 8px 15px;
  box-shadow: var(--shadow);
  transition: border-color .16s, box-shadow .16s;
}
.composer-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.composer textarea {
  flex: 1; border: 0; background: transparent; resize: none;
  padding: 7px 0; max-height: 170px; line-height: 1.7;
}
.composer textarea:focus { outline: none; }
.composer textarea::placeholder { color: var(--ink-3); }
.composer textarea:disabled { opacity: .5; }
.send {
  width: 36px; height: 36px; flex: none; border-radius: 10px; border: 0;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  transition: opacity .15s, filter .15s;
}
.send:hover:not(:disabled) { filter: brightness(1.1); }
.send:disabled { opacity: .35; cursor: default; }
.send svg { width: 16px; height: 16px; }
.composer-foot {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 8px; font-size: 11px; color: var(--ink-3); padding: 0 3px;
}
kbd {
  font-family: inherit; font-size: 10.5px; padding: 1px 5px;
  border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 4px; background: var(--surface);
}

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  :root { --sidebar-w: 280px; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; grid-template-areas: "head" "main"; }
  .side {
    position: fixed; inset: 62px auto 0 0; width: min(88vw, 340px);
    z-index: 25; transform: translateX(-102%);
    transition: transform .24s ease; box-shadow: var(--shadow-lg);
  }
  .side.open { transform: none; }
  .scrim {
    position: fixed; inset: 62px 0 0; background: rgba(8,12,18,.42);
    z-index: 24; opacity: 0; pointer-events: none; transition: opacity .24s;
  }
  .scrim.on { opacity: 1; pointer-events: auto; }
  .bubble-wrap { max-width: 92%; }
}
@media (min-width: 861px) { .menu-btn, .scrim { display: none; } }

/* Explains what a suggestion group is demonstrating. */
.group-note{
  margin:2px 0 8px;padding:8px 10px;
  font-size:11.5px;line-height:1.55;
  color:var(--muted, #667);
  background:color-mix(in srgb, currentColor 6%, transparent);
  border-left:2px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius:0 6px 6px 0;
}