/* ── Swiss Style Design System ──────────────────
   International Typographic Style
   Black / White / Red — Grid — Plus Jakarta Sans
   ─────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  background: #ffffff;
  color: #0a0a0a;
  font-family: 'Plus Jakarta Sans', 'Noto Sans SC', sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}
.font-display { font-family: 'Plus Jakarta Sans', 'Noto Sans SC', sans-serif; }

/* ── Focus visible ─────────────────────────────── */
:focus-visible {
  outline: 2px solid #CC0000;
  outline-offset: 2px;
}

/* ── Scrollbars ────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d0d0d0; }
::-webkit-scrollbar-thumb:hover { background: #a0a0a0; }
* { scrollbar-width: thin; scrollbar-color: #d0d0d0 transparent; }

/* ── Animations ────────────────────────────────── */
@keyframes float-idle {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes fade-pop {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bounce-dot {
  0%,80%,100% { transform: translateY(0); opacity: 0.3; }
  40%          { transform: translateY(-5px); opacity: 1; }
}
@keyframes empty-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.anim-idle    { animation: float-idle 3.5s ease-in-out infinite; display: inline-block; }
.anim-think   { opacity: .6; }
.anim-answer  { display: inline-block; }
.msg-in       { animation: fade-pop 0.25s ease both; }

/* Typing dots */
.dot { display: inline-block; width: 5px; height: 5px; background: #a0a0a0;
       animation: bounce-dot 1.2s ease-in-out infinite; }
.dot:nth-child(2) { animation-delay: .16s; }
.dot:nth-child(3) { animation-delay: .32s; }

/* Widget dots */
.bs-dot { display: inline-block; width: 5px; height: 5px; background: #a0a0a0;
          animation: bounce-dot 1.2s ease-in-out infinite; }
.bs-dot:nth-child(2) { animation-delay: .2s; }
.bs-dot:nth-child(3) { animation-delay: .4s; }

/* ── Swiss utilities ───────────────────────────── */
/* Grid-rule divider */
.rule-h { border: none; border-top: 1px solid #0a0a0a; margin: 0; }

/* Primary filled button */
.btn-sketch {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'Plus Jakarta Sans', 'Noto Sans SC', sans-serif;
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #0a0a0a;
  color: #ffffff;
  border: 1px solid #0a0a0a;
  padding: .5rem 1.1rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-sketch:hover {
  background: #CC0000;
  border-color: #CC0000;
}

/* ── Chat layout ────────────────────────────────── */
.chat-root { height: calc(100vh - 52px); display: flex; overflow: hidden; }
.chat-messages { flex: 1; overflow-y: auto; background: #ffffff; }
.msg-col { max-width: 700px; margin: 0 auto; padding: 0 1.5rem; }

/* ── Empty state ────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 52vh; text-align: center;
  animation: empty-in .35s ease both;
  padding: 2rem 1rem;
  user-select: none;
}
.empty-hed {
  font-family: 'Plus Jakarta Sans', 'Noto Sans SC', sans-serif;
  font-size: clamp(2.2rem, 7vw, 3.5rem);
  font-weight: 900;
  line-height: 1.0;
  color: #0a0a0a;
  margin-bottom: .35rem;
  letter-spacing: -.01em;
}
.empty-hed .accent { color: #CC0000; }
.empty-sub {
  font-size: .875rem;
  color: #555555;
  margin-bottom: 0;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.empty-rule {
  width: 32px; height: 3px;
  background: #CC0000;
  margin: 1.1rem auto;
}
.empty-chips {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  max-width: 540px; margin-top: .25rem;
}
.empty-chip {
  padding: .45rem .95rem;
  border: 1px solid #d0d0d0;
  font-size: .8rem;
  font-weight: 600;
  color: #0a0a0a;
  background: #ffffff;
  cursor: pointer;
  letter-spacing: .02em;
  transition: background .15s, border-color .15s, color .15s;
  font-family: 'Plus Jakarta Sans', 'Noto Sans SC', sans-serif;
}
.empty-chip:hover {
  background: #0a0a0a;
  border-color: #0a0a0a;
  color: #ffffff;
}

/* ── Chat message bubbles ───────────────────────── */
.msg-user .bubble {
  background: #f4f4f4;
  border: 1px solid #d0d0d0;
  border-left: 3px solid #0a0a0a;
  padding: .75rem 1.1rem;
  font-size: .9375rem;
  line-height: 1.65;
  color: #0a0a0a;
  word-break: break-word;
  max-width: 520px;
  font-weight: 500;
}

.msg-asst .bubble {
  font-size: .9375rem;
  line-height: 1.75;
  color: #0a0a0a;
  word-break: break-word;
  white-space: pre-wrap;
  font-weight: 500;
}
.msg-asst .bubble strong { color: #0a0a0a; font-weight: 700; }

/* 犀利姐 */
.msg-sis .bubble {
  font-size: .9375rem;
  line-height: 1.75;
  color: #3b1070;
  word-break: break-word;
  white-space: pre-wrap;
  font-weight: 500;
}

/* Hover actions */
.msg-actions { display: flex; gap: .4rem; margin-top: .5rem; opacity: 0; transition: opacity .15s; }
.msg-asst:hover .msg-actions, .msg-sis:hover .msg-actions { opacity: 1; }

/* ── Message avatar badge ───────────────────────── */
.msg-avatar {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: .875rem;
  flex-shrink: 0; margin-top: 2px;
}
.msg-avatar-bro {
  background: #f4f4f4;
  border: 1px solid #0a0a0a;
}
.msg-avatar-sis {
  background: #ede0ff;
  border: 1px solid #4a1d96;
}

/* ── Input shell ────────────────────────────────── */
.input-shell {
  background: #ffffff;
  border: 1px solid #0a0a0a;
  transition: border-color .15s;
}
.input-shell:focus-within {
  border-color: #CC0000;
}

/* ── Mode pill ──────────────────────────────────── */
.mode-pill {
  display: flex; background: #f4f4f4; border: 1px solid #d0d0d0;
  padding: 2px; gap: 2px;
}
.mpill {
  padding: .2rem .75rem;
  font-size: .72rem; font-weight: 700; cursor: pointer; border: none;
  letter-spacing: .05em; text-transform: uppercase;
  transition: background .15s, color .15s; color: #909090; background: transparent;
  font-family: 'Plus Jakarta Sans', 'Noto Sans SC', sans-serif;
}
.mpill.on-normal {
  background: #0a0a0a; color: #ffffff;
}
.mpill.on-vulgar {
  background: #CC0000; color: #ffffff;
}

/* ── Sidebar conv rows ──────────────────────────── */
.conv-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .75rem;
  cursor: pointer; font-size: .8rem; font-weight: 500;
  color: #555555; transition: background .15s, color .15s, border-color .15s;
  line-height: 1.3; border-left: 2px solid transparent;
}
.conv-row:hover {
  background: #f4f4f4;
  color: #0a0a0a;
  border-left-color: #d0d0d0;
}
.conv-row.active {
  background: #f4f4f4;
  color: #0a0a0a;
  border-left-color: #CC0000;
}
.conv-row .label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 犀利姐 invite button ───────────────────────── */
.sis-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .85rem;
  background: transparent;
  border: 1px solid #4a1d96;
  color: #4a1d96;
  font-size: .75rem; font-weight: 700;
  cursor: pointer;
  letter-spacing: .04em; text-transform: uppercase;
  transition: background .15s, color .15s;
  font-family: 'Plus Jakarta Sans', 'Noto Sans SC', sans-serif;
}
.sis-btn:hover {
  background: #4a1d96;
  color: #ffffff;
}

/* Prose in assistant messages */
.prose-chat p  { margin-bottom: .75rem; }
.prose-chat strong { color: #0a0a0a; font-weight: 700; }

/* ── Tab underlines (page-level) ────────────────── */
.tab-line {
  position: relative; padding-bottom: .75rem;
  font-size: .8rem; font-weight: 700; cursor: pointer;
  border: none; background: none; transition: color .15s;
  color: #909090;
  font-family: 'Plus Jakarta Sans', 'Noto Sans SC', sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
}
.tab-line::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: transparent; transition: background .15s;
}
.tab-line.active { color: #0a0a0a; }
.tab-line.active::after { background: #CC0000; }

/* ── Chat page ───────────────────────────────────── */
body:has(.chat-root) { overflow: hidden; background: #ffffff; }

.chat-sidebar { background: #f4f4f4; border-right: 1px solid #d0d0d0; }
.chat-topbar  { height: 52px; background: #ffffff; border-bottom: 1px solid #d0d0d0; }

.btn-new-chat {
  font-family: 'Plus Jakarta Sans', 'Noto Sans SC', sans-serif;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.msg-name {
  font-family: 'Plus Jakarta Sans', 'Noto Sans SC', sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: .7rem;
  font-weight: 700;
}

#messageInput { font-family: 'Plus Jakarta Sans', 'Noto Sans SC', sans-serif; }

.typing-text { color: #a0a0a0; }

.disclaimer-text {
  color: #a0a0a0;
  letter-spacing: .01em;
}

/* ── Nav tabs ─────────────────────────────────────── */
.nav-tab {
  display: flex; align-items: center; height: 100%;
  padding: 0 1rem;
  font-size: .75rem; font-weight: 700;
  color: #909090;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .1s, border-color .1s;
  font-family: 'Plus Jakarta Sans', 'Noto Sans SC', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.nav-tab:hover { color: #0a0a0a; }
.nav-tab.active {
  color: #0a0a0a;
  border-bottom-color: #CC0000;
}

/* ── Sketch card → Swiss panel ──────────────────── */
.sketch-card {
  border: 1px solid #d0d0d0;
  border-left: 3px solid #0a0a0a;
  transition: border-color .15s;
}
.sketch-card:hover { border-left-color: #CC0000; }