:root {
  color-scheme: light;
  --bg: #f4f9f5;
  --bg-deep: #eaf4ed;
  --surface: #ffffff;
  --surface-soft: #f8fbf9;
  --surface-green: #edf7f0;
  --ink: #1d2e26;
  --ink-soft: #3f5549;
  --muted: #74867c;
  --muted-light: #9aaba1;
  --line: #dfebe3;
  --line-strong: #cfe1d6;
  --primary: #4c9671;
  --primary-deep: #347357;
  --primary-dark: #285c46;
  --primary-soft: #dcefe3;
  --primary-pale: #eff8f2;
  --leaf: #6eac89;
  --danger: #b75b58;
  --danger-soft: #fdf0ef;
  --shadow-sm: 0 2px 10px rgba(45, 87, 64, 0.04);
  --shadow-md: 0 12px 34px rgba(43, 90, 65, 0.09);
  --shadow-lg: 0 28px 80px rgba(35, 79, 56, 0.16);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --sidebar-width: 286px;
  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --font-serif: "Songti SC", "STSong", "Noto Serif SC", serif;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  height: 100%;
  overflow: hidden;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

input,
textarea,
select {
  color: inherit;
}

textarea {
  resize: none;
}

svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[hidden] {
  display: none !important;
}

::selection {
  color: var(--primary-dark);
  background: #cfe9d9;
}

:focus-visible {
  outline: 2px solid rgba(76, 150, 113, 0.7);
  outline-offset: 2px;
}

.page-wash {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 95% -8%, rgba(177, 219, 191, 0.38), transparent 70%),
    radial-gradient(ellipse 45% 38% at -8% 92%, rgba(197, 228, 205, 0.3), transparent 70%);
}

.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

/* Sidebar */
.sidebar {
  position: relative;
  z-index: 20;
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  gap: 16px;
  padding: 20px 14px 14px;
  border-right: 1px solid rgba(210, 228, 217, 0.82);
  background: rgba(247, 251, 248, 0.86);
  backdrop-filter: blur(22px);
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 8px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(95, 154, 118, 0.19);
  border-radius: 13px;
  color: var(--primary-deep);
  background: linear-gradient(145deg, #f7fcf8, #dcefe3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 16px rgba(62, 113, 83, 0.08);
}

.brand-mark svg {
  width: 23px;
  height: 23px;
  stroke-width: 1.7;
}

.brand-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.brand-copy strong {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.1;
}

.brand-copy span {
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: 0.08em;
}

.icon-button {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  color: var(--muted);
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.icon-button:hover {
  color: var(--ink);
  background: var(--primary-pale);
}

.icon-button:active {
  transform: scale(0.95);
}

.icon-button svg {
  width: 19px;
  height: 19px;
}

.sidebar-close {
  display: none;
}

.new-chat-button {
  display: flex;
  height: 48px;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 9px;
  border: 1px solid #cfe4d7;
  border-radius: 15px;
  color: var(--primary-dark);
  background: linear-gradient(145deg, #f5fbf7, #e6f3eb);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), var(--shadow-sm);
  font-size: 13.5px;
  font-weight: 600;
  transition: border-color 170ms ease, box-shadow 170ms ease, transform 170ms ease;
}

.new-chat-button:hover {
  border-color: #b9d8c5;
  box-shadow: inset 0 1px 0 #fff, 0 7px 20px rgba(52, 112, 82, 0.08);
  transform: translateY(-1px);
}

.new-chat-icon {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: var(--primary);
  box-shadow: 0 5px 13px rgba(57, 121, 87, 0.2);
}

.new-chat-icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

.new-chat-shortcut {
  display: grid;
  width: 21px;
  height: 21px;
  margin-left: auto;
  place-items: center;
  border: 1px solid #d4e5da;
  border-radius: 6px;
  color: var(--muted-light);
  background: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  font-weight: 600;
}

.search-box {
  display: flex;
  height: 39px;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--muted-light);
  background: rgba(232, 242, 236, 0.62);
  transition: border-color 160ms ease, background 160ms ease;
}

.search-box:focus-within {
  border-color: #cfe3d7;
  background: #fff;
}

.search-box svg {
  width: 16px;
  height: 16px;
}

.search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink-soft);
  background: transparent;
  font-size: 12.5px;
}

.search-box input::placeholder {
  color: #93a69a;
}

.search-box input::-webkit-search-cancel-button {
  opacity: 0.45;
}

.history-panel {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.sidebar-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 9px 8px;
  color: var(--muted-light);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.subtle-count {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.history-list {
  min-height: 0;
  overflow-y: auto;
  padding: 0 1px 8px;
  scrollbar-width: thin;
  scrollbar-color: #d7e6dc transparent;
}

.history-group + .history-group {
  margin-top: 14px;
}

.history-group-label {
  padding: 3px 9px 5px;
  color: #a0afa6;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.history-item {
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--ink-soft);
  text-align: left;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.history-item-wrap {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
}

.history-item { padding-right: 34px; }

.history-item:hover {
  background: rgba(234, 246, 238, 0.76);
}

.history-item.active {
  border-color: #d8eadd;
  color: var(--primary-dark);
  background: #e8f4ec;
  font-weight: 500;
}

.history-item-dot {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #a7b7ad;
}

.history-item.active .history-item-dot {
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(76, 150, 113, 0.12);
}

.history-title {
  overflow: hidden;
  flex: 1;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-actions {
  position: absolute;
  top: 50%;
  right: 3px;
  display: flex;
  flex: 0 0 auto;
  border-radius: 8px;
  background: rgba(241, 249, 244, 0.94);
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 150ms ease;
}

.history-item-wrap:hover .history-actions,
.history-item-wrap:focus-within .history-actions {
  opacity: 1;
}

.history-delete {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 7px;
  color: var(--muted-light);
}

.history-delete:hover {
  color: var(--danger);
  background: #faeceb;
}

.history-delete svg {
  width: 14px;
  height: 14px;
}

.history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px;
  color: var(--muted-light);
  text-align: center;
}

.history-empty > span {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 10px;
  place-items: center;
  border-radius: 50%;
  background: #edf4ef;
}

.history-empty svg {
  width: 18px;
  height: 18px;
}

.history-empty p {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.history-empty small {
  font-size: 10.5px;
}

.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(218, 232, 223, 0.8);
}

.side-action {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 12px;
  text-align: left;
  transition: background 150ms ease;
}

.side-action:hover {
  background: rgba(233, 244, 237, 0.82);
}

.side-action-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  color: var(--muted);
  background: #eef4f0;
}

.side-action-icon.memory-tone {
  color: var(--primary-deep);
  background: #e4f2e9;
}

.side-action-icon svg {
  width: 16px;
  height: 16px;
}

.side-action-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.side-action-copy strong {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
}

.side-action-copy small {
  overflow: hidden;
  color: var(--muted-light);
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.count-badge {
  display: inline-grid;
  min-width: 19px;
  height: 19px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  color: var(--primary-deep);
  background: #dcefe3;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.local-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 0 1px;
  color: #9aaba1;
  font-size: 9.5px;
}

.local-note svg {
  width: 12px;
  height: 12px;
}

.sidebar-scrim {
  position: fixed;
  inset: 0;
  z-index: 19;
  background: rgba(30, 51, 40, 0.3);
  backdrop-filter: blur(2px);
}

/* Main workspace */
.main-shell {
  position: relative;
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% -5%, rgba(196, 231, 207, 0.28), transparent 33%),
    linear-gradient(180deg, rgba(252, 254, 253, 0.95), rgba(247, 251, 248, 0.98));
}

.topbar {
  position: relative;
  z-index: 10;
  display: flex;
  height: 68px;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  padding: 0 25px;
  border-bottom: 1px solid rgba(224, 236, 228, 0.72);
  background: rgba(251, 254, 252, 0.74);
  backdrop-filter: blur(18px);
}

.mobile-menu {
  display: none;
}

.topbar-title-wrap {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 12px;
}

.topbar-title-wrap h1 {
  overflow: hidden;
  max-width: min(48vw, 460px);
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.engine-pill {
  display: inline-flex;
  height: 24px;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid #dbeade;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(246, 251, 247, 0.8);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.engine-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #67a982;
  box-shadow: 0 0 0 3px rgba(103, 169, 130, 0.11);
}

.engine-pill.cloud {
  border-color: #cae4d5;
  color: var(--primary-deep);
  background: #eef8f2;
}

.engine-pill.cloud .engine-dot {
  background: var(--primary);
}

.topbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
}

.memory-chip {
  display: flex;
  height: 34px;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid #dceae0;
  border-radius: 11px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.64);
  font-size: 11px;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.memory-chip:hover {
  border-color: #c8dfd1;
  background: #fff;
  transform: translateY(-1px);
}

.memory-chip > svg {
  width: 15px;
  height: 15px;
  color: var(--primary);
}

.memory-chip .count-badge {
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  font-size: 9px;
}

.chat-scroll {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d5e5da transparent;
  scroll-behavior: smooth;
}

.chat-scroll::-webkit-scrollbar,
.sheet-scroll::-webkit-scrollbar,
.history-list::-webkit-scrollbar {
  width: 6px;
}

.chat-scroll::-webkit-scrollbar-thumb,
.sheet-scroll::-webkit-scrollbar-thumb,
.history-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #d5e5da;
}

.welcome {
  width: min(820px, calc(100% - 56px));
  margin: 0 auto;
  padding: clamp(52px, 8vh, 92px) 0 26px;
  animation: welcome-in 500ms cubic-bezier(0.22, 0.75, 0.2, 1) both;
}

@keyframes welcome-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.welcome-orb {
  position: relative;
  display: grid;
  width: 78px;
  height: 78px;
  margin: 0 auto 22px;
  place-items: center;
  border: 1px solid rgba(118, 174, 139, 0.22);
  border-radius: 27px;
  color: var(--primary-deep);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(220, 239, 227, 0.92));
  box-shadow: 0 18px 45px rgba(59, 116, 85, 0.12), inset 0 1px 0 #fff;
}

.welcome-orb > svg {
  width: 39px;
  height: 39px;
  stroke-width: 1.55;
}

.orb-ring {
  position: absolute;
  border: 1px solid rgba(112, 171, 134, 0.15);
  border-radius: 38%;
  pointer-events: none;
}

.ring-one { inset: -8px; transform: rotate(9deg); }
.ring-two { inset: -17px; border-color: rgba(112, 171, 134, 0.08); transform: rotate(-7deg); }

.welcome-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-bottom: 10px;
  color: var(--primary);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.12em;
}

.welcome-kicker svg { width: 13px; height: 13px; }

.welcome h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.1vw, 37px);
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1.32;
  text-align: center;
}

.welcome-copy {
  max-width: 480px;
  margin: 14px auto 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.85;
  text-align: center;
}

.prompt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 34px;
}

.prompt-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 74px;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border: 1px solid rgba(211, 229, 218, 0.92);
  border-radius: 17px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 4px 18px rgba(39, 82, 58, 0.025);
  text-align: left;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.prompt-card:hover {
  border-color: #bad9c6;
  background: #fff;
  box-shadow: 0 13px 30px rgba(44, 93, 66, 0.075);
  transform: translateY(-2px);
}

.prompt-card:active { transform: translateY(0) scale(0.99); }

.prompt-icon {
  display: grid;
  width: 41px;
  height: 41px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 13px;
}

.prompt-icon svg { width: 19px; height: 19px; }
.tone-sage { color: #527b64; background: #eaf3ed; }
.tone-mint { color: #4f8d7a; background: #e5f3ed; }
.tone-forest { color: #467458; background: #e7f1e9; }
.tone-lime { color: #6d8750; background: #eff4e4; }

.prompt-text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

.prompt-text strong { color: var(--ink-soft); font-size: 12.5px; font-weight: 650; }
.prompt-text small {
  overflow: hidden;
  color: var(--muted-light);
  font-size: 10.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prompt-arrow {
  color: #aac0b1;
  opacity: 0;
  transform: translate(-3px, 3px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.prompt-arrow svg { width: 15px; height: 15px; }
.prompt-card:hover .prompt-arrow { opacity: 1; transform: translate(0, 0); }

.welcome-memory-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 26px;
  color: #97a89e;
  font-size: 10.5px;
}

.welcome-memory-note svg { width: 12px; height: 12px; }

/* Messages */
.message-list {
  width: min(800px, calc(100% - 56px));
  margin: 0 auto;
  padding: 22px 0 6px;
}

.message {
  position: relative;
  margin-bottom: 28px;
  animation: message-in 260ms ease both;
}

@keyframes message-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.message-user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.user-bubble {
  max-width: min(82%, 650px);
  padding: 11px 15px;
  border: 1px solid #cfe6d8;
  border-radius: 19px 19px 6px 19px;
  color: #274236;
  background: linear-gradient(145deg, #e8f4ec, #e0f0e6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.76;
  word-break: break-word;
  white-space: pre-wrap;
}

.message-user.editing .user-bubble {
  border-color: #a9d0b9;
  box-shadow: 0 0 0 3px rgba(76, 150, 113, 0.09);
}

.message-assistant {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.assistant-avatar {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #d4e7db;
  border-radius: 11px;
  color: var(--primary-deep);
  background: linear-gradient(145deg, #f9fdfb, #e2f1e8);
  box-shadow: 0 5px 14px rgba(58, 111, 81, 0.07);
}

.assistant-avatar svg { width: 18px; height: 18px; stroke-width: 1.7; }

.assistant-body {
  min-width: 0;
  flex: 1;
  padding-top: 2px;
}

.assistant-name {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.assistant-name span {
  color: #9eaea4;
  font-size: 9.5px;
  font-weight: 400;
}

.assistant-content {
  color: #2b4035;
  font-size: 14px;
  line-height: 1.92;
  word-break: break-word;
}

.md p { margin: 0 0 11px; white-space: pre-wrap; }
.md p:last-child { margin-bottom: 0; }

.md h2,
.md h3,
.md h4 {
  margin: 20px 0 8px;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
}

.md h2:first-child,
.md h3:first-child,
.md h4:first-child { margin-top: 0; }
.md strong { color: #203b2c; font-weight: 650; }
.md em { color: var(--primary-deep); font-style: normal; }

.md ul,
.md ol {
  margin: 7px 0 13px;
  padding-left: 21px;
}

.md li { margin: 5px 0; padding-left: 2px; }
.md li::marker { color: var(--primary); }

.md blockquote {
  margin: 12px 0;
  padding: 10px 13px;
  border-left: 3px solid #9fc8ae;
  border-radius: 0 10px 10px 0;
  color: var(--ink-soft);
  background: #f1f8f4;
}

.md code {
  padding: 1px 5px;
  border-radius: 5px;
  color: #31664c;
  background: #eef5f0;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.9em;
}

.md .code-block {
  overflow-x: auto;
  margin: 10px 0;
  padding: 12px 14px;
  border-radius: 11px;
  color: #d9eee2;
  background: #24382d;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  line-height: 1.65;
  white-space: pre;
}

.assistant-foot {
  display: flex;
  min-height: 31px;
  align-items: center;
  gap: 2px;
  margin-top: 7px;
}

.message-actions {
  display: flex;
  min-height: 31px;
  align-items: center;
  gap: 1px;
  opacity: 0.92;
  transition: opacity 150ms ease;
}

.message:hover .message-actions,
.message:focus-within .message-actions,
.message-user .message-actions { opacity: 1; }

.action-button {
  display: inline-flex;
  height: 29px;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border-radius: 9px;
  color: #718578;
  font-size: 11px;
  white-space: nowrap;
  transition: color 150ms ease, background 150ms ease, transform 150ms ease;
}

.action-button:hover { color: var(--primary-deep); background: #eef6f1; }
.action-button:active { transform: scale(0.96); }
.action-button svg { width: 14px; height: 14px; }

.action-button.accent {
  width: 29px;
  height: 29px;
  justify-content: center;
  padding: 0;
  border: 1px solid #dce9e1;
  border-radius: 50%;
  color: var(--ink-soft);
  background: #f5faf7;
}

.action-button.accent:hover { border-color: #c8dfd1; background: #eaf5ee; }
.message-user .message-actions { justify-content: flex-end; margin-top: 3px; }

.action-button.regen-button {
  height: 29px;
  padding: 0 9px;
  border: 1px solid #dbe9e1;
  border-radius: 999px;
  color: #5e7869;
  background: #f5faf7;
}

.action-button.regen-button:hover {
  border-color: #c8dfd1;
  color: var(--primary-deep);
  background: #eaf5ee;
}

.interrupted {
  padding: 11px 13px;
  border: 1px solid #e3ece6;
  border-radius: 12px;
  background: #f8fbf9;
}

.interrupted p {
  margin: 0 0 8px;
  color: #75877c;
  font-size: 12px;
  line-height: 1.65;
}

.variant-pager {
  display: inline-flex;
  height: 29px;
  align-items: center;
  gap: 1px;
  margin-left: 5px;
  color: #63796c;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.pager-button {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 8px;
  color: #748a7d;
  transition: background 150ms ease, color 150ms ease;
}

.pager-button:hover:not(:disabled) { color: var(--primary-deep); background: #ebf5ef; }
.pager-button:disabled { color: #ccd8d0; }
.pager-button svg { width: 14px; height: 14px; }
.variant-count { min-width: 42px; text-align: center; letter-spacing: 0.08em; }
.message-time { margin-right: 4px; color: #a9b6ae; font-size: 9.5px; }

.typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 0 4px;
  color: var(--muted-light);
}

.typing-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #91ad9c;
  animation: typing-pulse 1.2s infinite ease-in-out;
}

.typing-dot:nth-child(2) { animation-delay: 0.16s; }
.typing-dot:nth-child(3) { animation-delay: 0.32s; }
.typing-label { margin-left: 3px; font-size: 10.5px; }

@keyframes typing-pulse {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.chat-end-spacer { height: 28px; }

.jump-latest {
  position: absolute;
  right: 26px;
  bottom: 150px;
  z-index: 8;
  display: inline-flex;
  height: 32px;
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  border: 1px solid #d8e8de;
  border-radius: 999px;
  color: var(--primary-deep);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-md);
  font-size: 10px;
  animation: message-in 180ms ease both;
}

.jump-latest svg { width: 13px; height: 13px; }

/* Composer */
.composer-area {
  position: relative;
  z-index: 9;
  flex: 0 0 auto;
  padding: 8px 24px 14px;
  background: linear-gradient(180deg, rgba(248, 252, 249, 0), rgba(248, 252, 249, 0.92) 24%, rgba(248, 252, 249, 0.99));
}

.composer-width { width: min(800px, 100%); margin: 0 auto; }

.edit-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
  padding: 8px 11px;
  border: 1px solid #cfe5d8;
  border-radius: 12px;
  color: var(--ink-soft);
  background: #eef8f2;
  box-shadow: var(--shadow-sm);
  animation: message-in 180ms ease both;
}

.edit-banner-icon {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  color: var(--primary-deep);
  background: #dcefe3;
}

.edit-banner-icon svg { width: 14px; height: 14px; }

.edit-banner-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.edit-banner-copy strong { font-size: 10.5px; font-weight: 650; }
.edit-banner-copy span {
  overflow: hidden;
  color: var(--muted);
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-button {
  flex: 0 0 auto;
  padding: 5px 7px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 10px;
}

.text-button:hover { color: var(--primary-deep); background: rgba(255, 255, 255, 0.7); }

.composer-box {
  position: relative;
  border: 1px solid #d9e8df;
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 9px 30px rgba(40, 82, 59, 0.07), inset 0 1px 0 #fff;
  transition: border-color 170ms ease, box-shadow 170ms ease;
}

.composer-box:focus-within {
  border-color: #abd1ba;
  box-shadow: 0 0 0 3px rgba(76, 150, 113, 0.08), 0 14px 38px rgba(40, 82, 59, 0.09);
}

.composer-box.editing {
  border-color: #a5cdb5;
  box-shadow: 0 0 0 3px rgba(76, 150, 113, 0.07), 0 12px 32px rgba(40, 82, 59, 0.08);
}

#composerInput {
  display: block;
  width: 100%;
  min-height: 54px;
  max-height: 176px;
  padding: 15px 17px 4px;
  overflow-y: auto;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 14.5px;
  line-height: 1.65;
}

#composerInput::placeholder { color: #a1b1a8; }

.composer-bottom {
  display: flex;
  height: 42px;
  align-items: center;
  gap: 8px;
  padding: 2px 10px 8px 12px;
}

.composer-memory {
  display: inline-flex;
  height: 27px;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  padding: 0 7px;
  border-radius: 8px;
  color: #82968a;
  font-size: 9.5px;
  transition: color 150ms ease, background 150ms ease;
}

.composer-memory:hover { color: var(--primary-deep); background: #edf6f0; }
.composer-memory svg { width: 13px; height: 13px; }
.composer-hint { flex: 1; color: #b1bdb6; font-size: 9px; text-align: right; }

.send-button {
  display: grid;
  width: 34px;
  height: 34px;
  margin-left: auto;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: var(--primary);
  box-shadow: 0 5px 14px rgba(58, 126, 91, 0.22);
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.send-button:hover:not(:disabled) {
  background: var(--primary-deep);
  box-shadow: 0 7px 18px rgba(58, 126, 91, 0.28);
  transform: translateY(-1px);
}

.send-button:active:not(:disabled) { transform: scale(0.94); }
.send-button:disabled { color: #aab9b0; background: #e6efe9; box-shadow: none; }
.send-button svg { width: 17px; height: 17px; stroke-width: 2; }

.composer-footnote {
  margin: 7px 0 0;
  color: #a2b0a7;
  font-size: 9px;
  text-align: center;
}

.inline-link {
  margin-left: 3px;
  padding: 1px;
  color: #7e9988;
  text-decoration: underline;
  text-decoration-color: #c3d5c9;
  text-underline-offset: 2px;
}

.inline-link:hover { color: var(--primary-deep); }

/* Sheets */
.sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  justify-content: flex-end;
  background: rgba(30, 49, 39, 0.28);
  backdrop-filter: blur(4px);
  animation: overlay-in 180ms ease both;
}

@keyframes overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.sheet {
  display: flex;
  width: min(448px, 94vw);
  height: 100%;
  flex-direction: column;
  border-left: 1px solid rgba(218, 233, 223, 0.88);
  background: #fbfdfb;
  box-shadow: -24px 0 70px rgba(35, 76, 53, 0.13);
  animation: sheet-in 280ms cubic-bezier(0.22, 0.8, 0.24, 1) both;
}

@keyframes sheet-in {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

.sheet-head {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 25px 22px 18px;
  border-bottom: 1px solid #e7f0ea;
}

.sheet-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--primary);
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.14em;
}

.sheet-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.035em;
}

.sheet-close {
  margin-top: -4px;
  color: #82958a;
}

.sheet-scroll {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px calc(28px + env(safe-area-inset-bottom));
  scrollbar-width: thin;
}

.memory-intro {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px;
  border: 1px solid #dcece2;
  border-radius: 15px;
  background: linear-gradient(140deg, #f4faf6, #ebf6ef);
}

.memory-intro-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  color: var(--primary-deep);
  background: #dbeedf;
}

.memory-intro-icon svg { width: 17px; height: 17px; }

.memory-intro p {
  margin: 0;
  color: #61766a;
  font-size: 11.5px;
  line-height: 1.75;
}

.memory-intro b { color: var(--primary-deep); font-weight: 650; }

.memory-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 13px 0 19px;
  border: 1px solid #e1ede6;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.memory-metrics > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 6px;
}

.memory-metrics > div + div { border-left: 1px solid #e9f1ec; }
.memory-metrics strong {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.memory-metrics span { color: var(--muted-light); font-size: 9.5px; }

.memory-form {
  padding: 14px;
  border: 1px solid #dce9e1;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.memory-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.memory-form-head label {
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 650;
}

.memory-form-head select {
  height: 27px;
  padding: 0 24px 0 8px;
  border: 1px solid #dce9e1;
  border-radius: 8px;
  outline: 0;
  color: var(--primary-deep);
  background: #f4faf6;
  font-size: 10px;
}

#memoryTextInput {
  display: block;
  width: 100%;
  min-height: 64px;
  padding: 9px 10px;
  border: 1px solid #e4eee8;
  border-radius: 10px;
  outline: 0;
  background: #fbfdfb;
  font-size: 12px;
  line-height: 1.65;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

#memoryTextInput:focus {
  border-color: #b9d7c5;
  box-shadow: 0 0 0 3px rgba(76, 150, 113, 0.07);
}

#memoryTextInput::placeholder { color: #abb9b1; }

.memory-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.memory-form-foot > span { color: #adb9b2; font-size: 9px; }

.primary-small,
.secondary-button,
.danger-button {
  display: inline-flex;
  height: 34px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.primary-small {
  color: #fff;
  background: var(--primary);
  box-shadow: 0 5px 13px rgba(62, 127, 92, 0.18);
}

.primary-small:hover { background: var(--primary-deep); transform: translateY(-1px); }
.primary-small svg { width: 13px; height: 13px; }

.secondary-button {
  border: 1px solid #d7e7de;
  color: var(--ink-soft);
  background: #fff;
}

.secondary-button:hover { border-color: #c0dacb; background: #f3faf5; }
.secondary-button svg { width: 14px; height: 14px; }

.memory-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 23px 1px 10px;
}

.memory-list-head h3 {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 650;
}

.memory-list-head span { color: #a6b4ac; font-size: 9.5px; }

.memory-list { display: flex; flex-direction: column; gap: 9px; }

.memory-card {
  position: relative;
  padding: 12px 13px;
  border: 1px solid #e0ebe4;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(44, 85, 61, 0.028);
  animation: message-in 200ms ease both;
}

.memory-card-top {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
}

.memory-cat {
  display: inline-flex;
  height: 20px;
  align-items: center;
  padding: 0 7px;
  border-radius: 6px;
  color: #4f7a62;
  background: #eaf4ee;
  font-size: 9px;
  font-weight: 600;
}

.memory-cat.cat-goal { color: #5b7442; background: #eef3e2; }
.memory-cat.cat-pref { color: #54746f; background: #e6f2f0; }
.memory-cat.cat-relation { color: #7b6b52; background: #f4efe5; }
.memory-cat.cat-clue { color: #526f80; background: #e9f1f5; }

.memory-origin {
  color: #a0aea5;
  font-size: 8.5px;
}

.memory-delete {
  display: grid;
  width: 25px;
  height: 25px;
  margin-left: auto;
  place-items: center;
  border-radius: 7px;
  color: #acb8b1;
  transition: color 150ms ease, background 150ms ease;
}

.memory-delete:hover { color: var(--danger); background: var(--danger-soft); }
.memory-delete svg { width: 14px; height: 14px; }

.memory-card p {
  margin: 0;
  color: #344a3e;
  font-size: 12px;
  line-height: 1.72;
  word-break: break-word;
}

.memory-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  color: #a4b1a9;
  font-size: 8.5px;
}

.memory-card-foot span:last-child {
  overflow: hidden;
  max-width: 58%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memory-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
  border: 1px dashed #dce9e1;
  border-radius: 15px;
  color: var(--muted-light);
  text-align: center;
}

.memory-empty > span {
  display: grid;
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  place-items: center;
  border-radius: 50%;
  color: #78a08a;
  background: #edf6f0;
}

.memory-empty svg { width: 22px; height: 22px; }
.memory-empty h4 { margin: 0 0 5px; color: var(--muted); font-size: 12px; font-weight: 650; }
.memory-empty p { max-width: 250px; margin: 0; font-size: 10.5px; line-height: 1.7; }

/* Settings */
.settings-section + .settings-section {
  margin-top: 23px;
  padding-top: 21px;
  border-top: 1px solid #e8f0eb;
}

.engine-card {
  padding: 15px;
  border: 1px solid #d9e9df;
  border-radius: 16px;
  background: linear-gradient(145deg, #f6fbf8, #edf7f1);
}

.engine-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.engine-orb {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(115, 165, 133, 0.22);
  border-radius: 12px;
  color: var(--primary-deep);
  background: rgba(255, 255, 255, 0.74);
}

.engine-orb svg { width: 18px; height: 18px; }
.engine-card-top > div:nth-child(2) { min-width: 0; flex: 1; }
.settings-label {
  display: block;
  margin-bottom: 2px;
  color: var(--muted-light);
  font-size: 8.5px;
  letter-spacing: 0.08em;
}

.engine-card h3 { margin: 0; color: var(--ink); font-size: 14px; font-weight: 650; }

.status-tag {
  display: inline-flex;
  height: 21px;
  align-items: center;
  padding: 0 7px;
  border-radius: 999px;
  color: var(--primary-deep);
  background: #dcefe3;
  font-size: 9px;
  font-weight: 600;
}

.status-tag.cloud { color: #2e6b4e; background: #cfead9; }
.status-tag.warn { color: #8a6527; background: #f8ecd3; }

.engine-card > p {
  margin: 11px 0;
  color: #6a7f72;
  font-size: 10.5px;
  line-height: 1.7;
}

.engine-card .secondary-button { height: 30px; background: rgba(255, 255, 255, 0.72); font-size: 10px; }

.settings-title {
  margin: 0 0 11px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 650;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid #e1ebe5;
  border-radius: 14px;
  background: #fff;
}

.settings-row > div { flex: 1; }
.settings-row strong { color: var(--ink-soft); font-size: 11.5px; font-weight: 600; }
.settings-row p { margin: 4px 0 0; color: #8b9c92; font-size: 9.5px; line-height: 1.55; }

.switch {
  position: relative;
  width: 39px;
  height: 23px;
  flex: 0 0 auto;
  cursor: pointer;
}

.switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #d6e2db;
  transition: background 180ms ease;
}

.switch span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(38, 74, 54, 0.18);
  content: "";
  transition: transform 180ms ease;
}

.switch input:checked + span { background: var(--primary); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid rgba(76, 150, 113, 0.65); outline-offset: 2px; }

.engine-switch-row {
  align-items: flex-start;
  gap: 12px;
}

.engine-switch-row .switch { margin-top: 2px; }

.deepseek-config {
  margin-top: 8px;
  padding: 13px 14px;
  border: 1px solid #e1ebe5;
  border-radius: 14px;
  background: #fff;
}

.deepseek-config > label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink-soft);
  font-size: 10.5px;
  font-weight: 600;
}

.endpoint-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.endpoint-input-row input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #dce9e1;
  border-radius: 9px;
  outline: none;
  color: var(--ink-soft);
  background: #fbfdfb;
  font-size: 11px;
}

.endpoint-input-row input::placeholder { color: #a9b7ae; }
.endpoint-input-row input:focus { border-color: #9cc8ae; box-shadow: 0 0 0 3px rgba(76, 150, 113, 0.1); }

.endpoint-input-row .secondary-button {
  height: 34px;
  padding: 0 11px;
  white-space: nowrap;
  font-size: 9.5px;
}

.deepseek-config > p {
  margin: 7px 0 0;
  color: #8b9c92;
  font-size: 9px;
  line-height: 1.55;
}

.settings-link-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 11px 13px;
  border: 1px solid #e1ebe5;
  border-radius: 14px;
  background: #fff;
  text-align: left;
  transition: border-color 150ms ease, background 150ms ease;
}

.settings-link-row:hover { border-color: #cbdfd2; background: #f9fcf9; }
.settings-link-row > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.settings-link-row strong { color: var(--ink-soft); font-size: 11px; font-weight: 600; }
.settings-link-row small { color: #94a39a; font-size: 9px; }
.settings-link-row > svg { width: 15px; height: 15px; color: #a1afa6; }

.row-icon {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  color: var(--primary-deep);
  background: #eaf4ee;
}

.row-icon svg { width: 15px; height: 15px; }

.data-actions {
  overflow: hidden;
  border: 1px solid #e1ebe5;
  border-radius: 14px;
  background: #fff;
}

.data-action {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  text-align: left;
}

.data-action + .data-action { border-top: 1px solid #edf3ef; }
.data-action:hover { background: #f7fbf8; }
.data-action > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.data-action strong { color: var(--ink-soft); font-size: 11px; font-weight: 600; }
.data-action small { color: #95a49b; font-size: 9px; }
.settings-footnote { margin: 8px 1px 0; color: #a0ada5; font-size: 9px; line-height: 1.55; }

.privacy-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid #e1ebe5;
  border-radius: 14px;
  background: #fff;
}

.privacy-lock {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  color: #5b8570;
  background: #ecf6f0;
}

.privacy-lock svg { width: 15px; height: 15px; }
.privacy-card strong { color: var(--ink-soft); font-size: 11px; font-weight: 600; }
.privacy-card p { margin: 4px 0 0; color: #82948a; font-size: 9.5px; line-height: 1.65; }
.version-line { margin-top: 17px; color: #b0bbb4; font-size: 8.5px; text-align: center; letter-spacing: 0.08em; }

/* Confirm and toast */
.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(28, 46, 37, 0.38);
  backdrop-filter: blur(6px);
  animation: overlay-in 160ms ease both;
}

.confirm-dialog {
  width: min(370px, 100%);
  padding: 23px;
  border: 1px solid rgba(220, 234, 225, 0.9);
  border-radius: 21px;
  background: #fcfefc;
  box-shadow: var(--shadow-lg);
  animation: dialog-in 200ms cubic-bezier(0.22, 0.8, 0.24, 1) both;
}

@keyframes dialog-in {
  from { opacity: 0; transform: scale(0.97) translateY(5px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.confirm-icon {
  display: grid;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  place-items: center;
  border-radius: 12px;
  color: var(--danger);
  background: var(--danger-soft);
}

.confirm-icon svg { width: 18px; height: 18px; }
.confirm-dialog h2 { margin: 0; color: var(--ink); font-family: var(--font-serif); font-size: 20px; font-weight: 700; }
.confirm-dialog > p { margin: 9px 0 0; color: #708278; font-size: 11.5px; line-height: 1.7; }

.confirm-excerpt {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 3px solid #a9cdb6;
  border-radius: 0 9px 9px 0;
  color: #53685b;
  background: #f0f7f2;
  font-size: 11px;
  line-height: 1.65;
  word-break: break-word;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

.confirm-actions .secondary-button,
.confirm-actions .danger-button { height: 36px; }

.danger-button {
  color: #fff;
  background: #b95e5a;
  box-shadow: 0 5px 14px rgba(166, 69, 65, 0.16);
}

.danger-button:hover { background: #a94e4b; transform: translateY(-1px); }

.toast-region {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 200;
  display: flex;
  width: min(330px, calc(100vw - 32px));
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid #d7e8de;
  border-radius: 12px;
  color: #365044;
  background: rgba(253, 255, 254, 0.97);
  box-shadow: 0 12px 36px rgba(38, 80, 55, 0.14);
  font-size: 11px;
  line-height: 1.45;
  animation: toast-in 220ms cubic-bezier(0.22, 0.8, 0.24, 1) both;
}

.toast.leaving { animation: toast-out 180ms ease both; }
.toast-icon {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  color: var(--primary-deep);
  background: #e5f3ea;
}

.toast-icon svg { width: 13px; height: 13px; }
.toast.success { border-color: #cfe5d8; }
.toast.error { border-color: #edcfcc; }
.toast.error .toast-icon { color: var(--danger); background: var(--danger-soft); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(5px); }
}

@media (max-width: 980px) {
  :root { --sidebar-width: 264px; }
  .welcome { width: min(760px, calc(100% - 44px)); }
  .message-list { width: min(760px, calc(100% - 44px)); }
}

@media (hover: none) {
  .message-actions { opacity: 1; }
  .prompt-arrow { opacity: 0.65; transform: none; }
  .history-actions { opacity: 0.55; }
}

@media (max-width: 760px) {
  .app {
    display: block;
    height: 100dvh;
    max-height: 100dvh;
  }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    width: min(86vw, 326px);
    height: 100dvh;
    padding-top: calc(16px + env(safe-area-inset-top));
    border-right: 1px solid #d9e7de;
    background: rgba(249, 252, 250, 0.98);
    box-shadow: 20px 0 60px rgba(28, 59, 41, 0.2);
    transform: translateX(-104%);
    transition: transform 260ms cubic-bezier(0.22, 0.8, 0.24, 1);
  }

  .sidebar.open { transform: translateX(0); }
  .sidebar-close { display: grid; }

  .main-shell {
    width: 100%;
    height: 100dvh;
    padding-top: env(safe-area-inset-top);
  }

  .topbar {
    height: 58px;
    gap: 5px;
    padding: 0 9px;
    background: rgba(251, 254, 252, 0.9);
  }

  .mobile-menu { display: grid; }
  .topbar-title-wrap { gap: 7px; }
  .topbar-title-wrap h1 { max-width: 42vw; font-size: 13.5px; }

  .engine-pill {
    height: 21px;
    gap: 4px;
    padding: 0 7px;
    font-size: 8.5px;
  }

  .engine-dot { width: 4px; height: 4px; box-shadow: none; }
  .topbar-actions { gap: 1px; }

  .memory-chip {
    height: 32px;
    gap: 4px;
    padding: 0 6px;
    border-color: transparent;
    background: #eef6f1;
  }

  .memory-chip-label { display: none; }
  .memory-chip .count-badge { min-width: 15px; height: 15px; font-size: 8px; }
  .topbar .icon-button { width: 34px; height: 34px; }
  .sidebar-scrim { z-index: 55; background: rgba(25, 46, 34, 0.36); }

  .welcome {
    width: calc(100% - 32px);
    padding: 38px 0 22px;
  }

  .welcome-orb {
    width: 67px;
    height: 67px;
    margin-bottom: 19px;
    border-radius: 22px;
  }

  .welcome-orb > svg { width: 33px; height: 33px; }
  .ring-one { inset: -6px; }
  .ring-two { inset: -13px; }

  .welcome h2 {
    font-size: clamp(24px, 7.4vw, 29px);
    line-height: 1.38;
  }

  .welcome-copy {
    max-width: 330px;
    margin-top: 10px;
    padding: 0 8px;
    font-size: 12.5px;
    line-height: 1.78;
  }

  .prompt-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 24px;
  }

  .prompt-card {
    min-height: 63px;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 15px;
  }

  .prompt-icon { width: 37px; height: 37px; border-radius: 11px; }
  .prompt-icon svg { width: 17px; height: 17px; }
  .prompt-text strong { font-size: 12px; }
  .prompt-text small { font-size: 10px; }
  .welcome-memory-note { margin-top: 18px; font-size: 9px; text-align: center; }

  .message-list {
    width: calc(100% - 28px);
    padding: 16px 0 4px;
  }

  .message { margin-bottom: 23px; }
  .message-assistant { gap: 8px; }

  .assistant-avatar {
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }

  .assistant-avatar svg { width: 16px; height: 16px; }
  .assistant-name { margin-bottom: 7px; font-size: 10px; }
  .assistant-content { font-size: 13.5px; line-height: 1.88; }
  .user-bubble { max-width: 89%; padding: 10px 13px; font-size: 13.5px; }
  .md p { margin-bottom: 9px; }
  .md h2, .md h3, .md h4 { margin-top: 16px; font-size: 13.5px; }
  .md ul, .md ol { padding-left: 19px; }
  .assistant-foot { margin-top: 4px; }
  .message-actions { flex-wrap: wrap; }
  .action-button { padding: 0 6px; }
  .action-button.accent { width: 28px; height: 28px; }
  .variant-pager { margin-left: 2px; }
  .message-time { display: none; }

  .composer-area {
    padding: 7px 10px calc(8px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(248, 252, 249, 0), rgba(248, 252, 249, 0.96) 30%, #f8fcf9);
  }

  .composer-box { border-radius: 19px; }
  #composerInput {
    min-height: 49px;
    max-height: 144px;
    padding: 12px 14px 2px;
    font-size: 16px;
  }

  .composer-bottom { height: 40px; padding: 1px 8px 7px 10px; }
  .composer-memory { height: 26px; padding: 0 6px; font-size: 9px; }
  .composer-hint { display: none; }
  .send-button { width: 35px; height: 35px; border-radius: 11px; }
  .composer-footnote { margin-top: 5px; font-size: 8px; }
  .edit-banner { gap: 7px; padding: 7px 9px; margin-bottom: 6px; }
  .edit-banner-copy span { font-size: 8.5px; }

  .jump-latest {
    right: 13px;
    bottom: 132px;
    height: 30px;
    font-size: 9px;
  }

  .chat-end-spacer { height: 14px; }

  .sheet-overlay { align-items: flex-end; }
  .sheet {
    width: 100%;
    height: min(89dvh, 770px);
    border-top: 1px solid #dbe9e0;
    border-left: 0;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -22px 65px rgba(35, 76, 53, 0.16);
    animation: sheet-up 280ms cubic-bezier(0.22, 0.8, 0.24, 1) both;
  }

  @keyframes sheet-up {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .sheet::before {
    width: 38px;
    height: 4px;
    flex: 0 0 auto;
    margin: 8px auto 0;
    border-radius: 999px;
    background: #dce8e0;
    content: "";
  }

  .sheet-head { padding: 13px 18px; }
  .sheet-head h2 { font-size: 20px; }
  .sheet-close { margin-top: 0; }
  .sheet-scroll { padding: 16px 18px calc(25px + env(safe-area-inset-bottom)); }
  .memory-intro { padding: 12px; }
  .memory-metrics { margin: 11px 0 15px; }
  .memory-form { padding: 12px; }
  #memoryTextInput { font-size: 16px; }
  .memory-delete { width: 32px; height: 32px; }
  .settings-row { padding: 12px; }
  .data-action { min-height: 50px; }
  .toast-region {
    right: 16px;
    bottom: calc(92px + env(safe-area-inset-bottom));
    width: calc(100vw - 32px);
  }

  .confirm-dialog { padding: 21px; border-radius: 20px; }
}

@media (max-width: 380px) {
  .topbar-title-wrap h1 { max-width: 37vw; }
  .engine-pill { display: none; }
  .welcome h2 { font-size: 23px; }
  .prompt-card { min-height: 60px; }
  .composer-footnote { display: none; }
  .topbar-actions .icon-button { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}