/*
 * Original visual layer for chat.mlzp.cc.
 * Inspired by the public site's restrained, utility-first layout language;
 * no third-party marks, code, or protected assets are copied here.
 */
:root {
  --ink: #1f2329;
  --ink-soft: #667085;
  --paper: #f7f8fa;
  --line: #e5e6eb;
  --blue: #4d6bfe;
  --green: #55b89c;
  --shadow: 0 8px 24px rgba(31, 35, 41, 0.06);
}

body { background: var(--paper); color: var(--ink); }
.ambient { display: none; }
.shell { width: min(1120px, calc(100% - 40px)); }

.site-header {
  width: 100%;
  height: 68px;
  padding: 0 max(20px, calc((100% - 1120px) / 2));
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
}
.brand-mark { transform: none; }
.brand-mark span { border-radius: 50%; }
.brand-mark span:nth-child(2) { background: var(--blue); }
.top-nav { gap: 22px; }
.top-nav a, .header-link { color: #667085; }
.header-link { border-left: 0; padding-left: 10px; color: var(--ink); }

.hero {
  min-height: 405px;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 70px 0 54px;
  text-align: center;
}
.hero-copy { max-width: 760px; margin: 0 auto; }
.eyebrow { justify-content: center; color: #98a2b3; }
.status-dot { background: var(--blue); box-shadow: 0 0 0 4px rgba(77, 107, 254, 0.12); }
h1 { font-size: clamp(42px, 5vw, 64px); letter-spacing: -0.055em; margin: 21px 0 18px; }
.hero-lede { max-width: 620px; margin: 0 auto; font-size: 15px; color: #667085; }
.hero-actions { justify-content: center; margin-top: 28px; }
.button { border-radius: 9px; padding: 13px 18px; }
.button-primary { background: var(--blue); box-shadow: 0 6px 14px rgba(77, 107, 254, 0.2); }
.button-primary:hover { background: #3d5be7; }
.button-ghost { background: #fff; border-color: var(--line); }
.hero-note { justify-content: center; margin-top: 18px; color: #98a2b3; }
.note-icon { color: var(--blue); }
.hero-visual { display: none; }

.topics { padding: 10px 0 60px; }
.section-intro { margin-bottom: 18px; }
.section-intro h2, .chat-heading h2, .bridge h2 { font-size: 23px; letter-spacing: -0.035em; }
.topic-grid { gap: 10px; }
.topic-card {
  min-height: 96px;
  border-radius: 10px;
  background: #fff;
  padding: 16px;
  border-color: var(--line);
  box-shadow: none;
}
.topic-card:hover { transform: none; box-shadow: 0 5px 16px rgba(31, 35, 41, 0.05); border-color: #c8d1f7; }
.topic-icon { border-radius: 8px; }

.chat-section { padding: 40px 0 70px; }
.chat-heading { margin-bottom: 17px; }
.mode-badge { background: #f2f7ff; border-color: #dce6ff; color: var(--blue); }
.mode-badge span:first-child { background: var(--blue); }
.chat-shell { background: #fff; border-radius: 12px; box-shadow: 0 5px 18px rgba(31, 35, 41, 0.05); border-color: var(--line); }
.chat-toolbar { height: 65px; padding: 0 21px; }
.assistant-avatar, .message-avatar { border-radius: 8px; }
.assistant-avatar { background: var(--blue); }
.message-list { padding: 24px 24px 8px; }
.message-bubble { background: #f7f8fa; border-radius: 4px 12px 12px 12px; color: #344054; }
.message-user .message-bubble { background: var(--blue); }
.suggestion-row { padding: 0 24px 15px; }
.suggestion-row button { background: #fff; border-color: var(--line); color: #667085; }
.composer { margin: 0 14px 14px; border-radius: 12px; box-shadow: none; border-color: #d7d9df; }
.composer:focus-within { border-color: #9fb3ff; box-shadow: 0 0 0 3px rgba(77, 107, 254, 0.1); }
.send-button { background: var(--blue); border-radius: 8px; }
.send-button:hover { background: #3d5be7; }

.bridge { padding: 48px 0 68px; }
.bridge-links a { border-radius: 10px; background: #fff; border-color: var(--line); }
.bridge-links a:hover { transform: none; box-shadow: 0 5px 16px rgba(31, 35, 41, 0.05); }
.site-footer { height: 70px; }

@media (max-width: 900px) {
  .site-header { padding: 0 20px; }
  .hero { padding-top: 58px; }
}
@media (max-width: 600px) {
  .site-header { padding: 0 16px; }
  .hero { padding: 52px 0 40px; }
  .hero h1 { font-size: 44px; }
  .hero-lede { font-size: 14px; }
  .hero-actions { flex-direction: row; }
  .button { justify-content: center; }
  .topics { padding-bottom: 44px; }
  .chat-section { padding: 38px 0 55px; }
  .chat-toolbar { padding: 0 15px; }
  .message-list { padding: 21px 15px 8px; }
  .suggestion-row { padding: 0 15px 15px; }
  .composer { margin: 0 10px 10px; }
  .site-footer { height: auto; }
}