/*
 * Claude material layer for 菊间.
 * Keeps the original chrysanthemum artwork and layout while applying the
 * typography, warm surfaces, component radii and restrained motion used by
 * Anthropic's current product language.
 */

@font-face {
  font-family: "Anthropic Sans";
  src: url("/fonts/anthropic-sans-roman-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}

@font-face {
  font-family: "Anthropic Sans";
  src: url("/fonts/anthropic-sans-italic-variable.ttf") format("truetype");
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
}

@font-face {
  font-family: "Anthropic Serif";
  src: url("/fonts/anthropic-serif-roman-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}

@font-face {
  font-family: "Anthropic Serif";
  src: url("/fonts/anthropic-serif-italic-variable.ttf") format("truetype");
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
}

:root {
  --claude-bg: #f5f4ed;
  --claude-surface: #faf9f5;
  --claude-surface-warm: #e8e6dc;
  --claude-foreground: #141413;
  --claude-secondary: #5e5d59;
  --claude-meta: #87867f;
  --claude-border: rgba(20, 20, 19, 0.12);
  --claude-border-strong: rgba(20, 20, 19, 0.2);
  --claude-clay: #c96442;
  --claude-radius-sm: 8px;
  --claude-radius-md: 12px;
  --claude-radius-lg: 16px;
  --claude-elev-ring: 0 0 0 1px rgba(20, 20, 19, 0.055);
  --claude-elev-raised: 0 14px 40px rgba(20, 20, 19, 0.075);

  --ink: var(--claude-foreground);
  --ink-soft: var(--claude-secondary);
  --ink-faint: var(--claude-meta);
  --rust: #9a513d;
  --line: var(--claude-border);
  --line-strong: var(--claude-border-strong);
  --shadow: var(--claude-elev-raised);
  --serif: "Anthropic Serif", "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", Georgia, serif;
  --sans: "Anthropic Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono: "Anthropic Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--sans);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

button,
input,
textarea {
  font-family: var(--sans);
}

.eyebrow,
.brand-words small,
.section-number,
.memory-stats strong,
.preview-empty span,
.preview-index,
.memory-card-index,
.memory-date {
  font-family: "Anthropic Sans", var(--sans);
}

.eyebrow {
  font-weight: 600;
  letter-spacing: 0.14em;
}

.login-card,
.empty-copy,
.memory-workbench,
.prompt-card,
.memory-card,
.edit-dialog {
  border-color: var(--claude-border);
  border-radius: var(--claude-radius-lg);
  box-shadow: var(--claude-elev-raised), var(--claude-elev-ring);
}

.login-card {
  overflow: hidden;
  background: color-mix(in srgb, var(--claude-surface) 88%, transparent);
  backdrop-filter: blur(16px) saturate(0.9);
}

.login-input-row,
.composer-paper,
.import-card textarea,
.prompt-form textarea,
.edit-dialog textarea,
.search-field {
  overflow: hidden;
  border-color: var(--claude-border-strong);
  border-radius: var(--claude-radius-md);
  background-color: color-mix(in srgb, var(--claude-surface) 82%, transparent);
  box-shadow: var(--claude-elev-ring);
}

.login-input-row button,
.quiet-button,
.icon-button,
.mobile-rail-button,
.module-tab,
.memory-status,
.send-button,
.stop-button,
.primary-button,
.memory-actions button {
  border-radius: var(--claude-radius-sm);
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.site-header {
  background: color-mix(in srgb, var(--claude-bg) 84%, transparent);
  border-bottom-color: var(--claude-border);
  backdrop-filter: blur(20px) saturate(0.92);
}

.brand-mark,
.seal,
.message-avatar {
  border-radius: var(--claude-radius-sm);
}

.brand-words strong,
.rail-heading h2,
.card-heading h2,
.dialog-heading h2,
.library-toolbar h2,
.chat-title-wrap h2,
.empty-copy h3,
.memory-hero h1,
.memory-empty h3,
.login-card h1 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  letter-spacing: 0.035em;
}

.module-tab:hover,
.module-tab.is-active {
  background: color-mix(in srgb, var(--claude-surface) 62%, transparent);
}

.module-tab::after {
  right: 24px;
  left: 24px;
  height: 2px;
  background: var(--ochre);
}

.quiet-button:hover,
.icon-button:hover,
.mobile-rail-button:hover {
  background: color-mix(in srgb, var(--claude-surface-warm) 68%, transparent);
  box-shadow: var(--claude-elev-ring);
}

.conversation-rail {
  background: color-mix(in srgb, var(--claude-surface-warm) 43%, transparent);
}

.conversation-item {
  border-radius: var(--claude-radius-md);
}

.conversation-item:hover,
.conversation-item.is-active {
  background: color-mix(in srgb, var(--claude-surface) 76%, transparent);
  border-color: var(--claude-border);
  box-shadow: var(--claude-elev-ring);
}

.conversation-item strong {
  font-family: var(--sans);
  font-weight: 600;
}

.chat-panel {
  background: color-mix(in srgb, var(--claude-bg) 28%, transparent);
}

.memory-status,
.nav-count {
  font-variant-numeric: tabular-nums;
}

.memory-status {
  background: color-mix(in srgb, var(--claude-surface-warm) 57%, transparent);
  border-color: var(--claude-border);
}

.empty-copy {
  background: color-mix(in srgb, var(--claude-surface) 72%, transparent);
  backdrop-filter: blur(12px) saturate(0.9);
}

.message-content {
  border-color: var(--claude-border);
  border-radius: var(--claude-radius-md);
  background: color-mix(in srgb, var(--claude-surface) 78%, transparent);
  box-shadow: var(--claude-elev-ring);
}

.message:not(.user) .message-content {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
}

.message.user .message-content {
  font-family: var(--sans);
  background: color-mix(in srgb, var(--paper-deep) 47%, var(--claude-surface));
  border-color: rgba(128, 97, 20, 0.2);
}

.message-content code,
.message-content pre {
  font-family: var(--mono);
  font-variant-ligatures: none;
  font-feature-settings: "calt" 0, "liga" 0;
}

.message-content pre {
  border-radius: var(--claude-radius-sm);
  background: #30302e;
}

.composer-paper {
  background: color-mix(in srgb, var(--claude-surface) 88%, transparent);
  box-shadow: var(--claude-elev-raised), var(--claude-elev-ring);
  backdrop-filter: blur(16px) saturate(0.9);
}

.composer textarea {
  font-size: 15px;
  line-height: 1.55;
}

.send-button,
.primary-button {
  color: var(--claude-surface);
  background: var(--claude-foreground);
  border-color: var(--claude-foreground);
  box-shadow: 0 0 0 1px rgba(20, 20, 19, 0.05);
  font-weight: 500;
}

.send-button:hover,
.primary-button:hover {
  background: #30302e;
  transform: translateY(-1px);
}

.memory-workbench,
.prompt-card {
  background: color-mix(in srgb, var(--claude-surface) 63%, transparent);
}

.preview-card {
  background: color-mix(in srgb, var(--claude-surface-warm) 35%, transparent);
  border-radius: 0 var(--claude-radius-lg) var(--claude-radius-lg) 0;
}

.preview-item,
.memory-stats div,
.prompt-order span {
  border-radius: var(--claude-radius-sm);
  background: color-mix(in srgb, var(--claude-surface) 67%, transparent);
}

.memory-card {
  background: color-mix(in srgb, var(--claude-surface) 69%, transparent);
}

.memory-card:hover {
  background: color-mix(in srgb, var(--claude-surface) 86%, transparent);
  border-color: var(--claude-border-strong);
}

.memory-card-content {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.65;
}

.edit-dialog {
  background: var(--claude-surface);
}

.toast {
  border-radius: var(--claude-radius-md);
  background: rgba(48, 48, 46, 0.97);
  box-shadow: var(--claude-elev-raised);
}

@media (max-width: 720px) {
  .module-nav {
    background: color-mix(in srgb, var(--claude-bg) 92%, transparent);
  }

  .conversation-rail {
    background: color-mix(in srgb, var(--claude-bg) 96%, var(--paper-deep));
  }

  .preview-card {
    border-radius: 0 0 var(--claude-radius-lg) var(--claude-radius-lg);
  }

  .message:not(.user) .message-content {
    font-size: 15px;
    line-height: 1.67;
  }
}