/* Dipinio's visual system. Kept separate so the app logic stays untouched. */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Nunito:wght@600;700;800;900&display=swap');

:root {
  --ink: #20302f;
  --muted: #6d7875;
  --paper: #f3efe5;
  --surface: #fffdf7;
  --line: #d9d2c4;
  --blue: #4895ef;
  --blue-soft: #e5f1ff;
  --coral: #ef7b68;
  --coral-soft: #ffebe7;
  --green: #52b788;
  --green-soft: #e4f5eb;
  --yellow: #f6d365;
  --yellow-soft: #fff6cc;
  --mint: #dff3e8;
  --peach: #ffe7df;
  --lilac: #ece7fb;
  --sky: #e4f2fb;
  --shadow: 5px 6px 0 rgba(32, 48, 47, .1);
  --sans: "Nunito", system-ui, sans-serif;
  --mono: "DM Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(rgba(32, 48, 47, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 48, 47, .03) 1px, transparent 1px),
    var(--paper);
  background-size: 24px 24px;
  font-family: var(--sans);
  font-weight: 600;
}

button, input, select, textarea { font: inherit; }
button { color: var(--ink); }

.app-shell {
  width: min(100%, 1180px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 24px 24px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 76px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(243, 239, 229, .93);
  box-shadow: none;
  backdrop-filter: blur(12px);
}

.topbar, .chat-head {
  width: calc(100vw - 48px);
  margin-left: calc(50% - 50vw + 24px);
  padding-left: max(0px, calc((100vw - 1180px) / 2));
  padding-right: max(0px, calc((100vw - 1180px) / 2));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: inherit;
  text-decoration: none;
}

.brand .brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 8px 6px 9px 7px;
  background: var(--surface);
  box-shadow: 3px 3px 0 rgba(32, 48, 47, .12);
  color: var(--coral);
  font-size: 21px;
}
.brand .brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }

.brand-copy { display: grid; min-width: 0; line-height: 1; }
.brand-copy strong { font-size: 17px; font-weight: 900; letter-spacing: -.25px; }
.brand-copy small { margin-top: 5px; color: var(--muted); font: 400 9px/1 var(--mono); letter-spacing: .5px; text-transform: uppercase; }
.brand-area { min-width: 0; }
.brand .active-space-label {
  max-width: 230px;
  overflow: hidden;
  margin-top: 4px;
  color: var(--muted);
  font: 500 9px/1.1 var(--mono);
  letter-spacing: .25px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 11px 8px 12px 9px;
  background: rgba(255, 253, 247, .76);
}

.nav-link, .icon-button {
  min-height: 34px;
  border: 0;
  border-radius: 8px 6px 9px 7px;
  padding: 7px 14px;
  background: transparent;
  font: 800 12px/1 var(--sans);
}

.nav-link.active {
  border: 0;
  background: var(--blue-soft);
  color: #2469a9;
}

.icon-button { width: 36px; padding: 0; font-size: 17px; }
.nav-link:hover, .icon-button:hover { background: var(--surface); }

.view { animation: page-in .18s ease-out; }
@keyframes page-in { from { opacity: 0; transform: translateY(3px); } }

.hero {
  min-height: 280px;
  align-items: center;
  padding: 52px 0 34px;
  border-bottom: 1px solid var(--line);
}

.eyebrow, .note-meta {
  color: var(--muted);
  font: 500 10px/1.4 var(--mono);
  letter-spacing: 1.15px;
}

.hero h1, .auth-card h1, .detail-note h1, .draft-title,
.chat-intro h2, .settings-head h2, .note-form h2 {
  font-family: var(--sans);
  font-weight: 900;
  letter-spacing: -1.8px;
}

.hero h1 { max-width: 720px; margin: 0; font-size: clamp(46px, 7vw, 76px); line-height: .96; }
.hero h1 i, .auth-card h1 i { color: var(--coral); font-style: normal; font-weight: 900; }
.streak { padding: 14px 16px; border: 1px solid var(--line); border-radius: 50%; background: var(--yellow-soft); }

.guide-page { padding-bottom: 60px; }
.guide-hero { padding: 64px 0 54px; border-bottom: 1px solid var(--line); }
.guide-hero h1 { max-width: 700px; margin: 8px 0 18px; font-size: clamp(46px, 7vw, 72px); line-height: .96; letter-spacing: -2.4px; }
.guide-hero h1 i { color: var(--coral); font-style: normal; }
.guide-hero > p:not(.eyebrow) { max-width: 570px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.guide-actions button { padding: 10px 15px; border: 1.5px solid var(--ink); border-radius: 8px 6px 9px 7px; background: var(--blue-soft); cursor: pointer; font: 800 12px var(--sans); box-shadow: 2px 3px 0 rgba(32,48,47,.12); }
.guide-actions button + button { background: var(--surface); }
.guide-section { padding: 42px 0 8px; }
.guide-section-title { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.guide-section-title > span { display: grid; flex: none; place-items: center; width: 39px; height: 39px; border-radius: 10px 7px 11px 8px; background: var(--blue-soft); color: #2469a9; font: 700 11px var(--mono); transform: rotate(-2deg); }
.guide-section-title .eyebrow { margin-bottom: 4px; }
.guide-section-title h2 { margin: 0; font-size: clamp(25px, 4vw, 34px); line-height: 1.05; letter-spacing: -1.1px; }
.guide-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.guide-grid article, .guide-sharing article { padding: 20px; border: 1px solid var(--line); border-radius: 13px 9px 15px 10px; background: rgba(255,253,247,.8); box-shadow: 3px 4px 0 rgba(32,48,47,.07); }
.guide-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
.guide-steps article { position: relative; padding-left: 58px; }
.guide-steps b { position: absolute; top: 18px; left: 19px; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--coral-soft); color: var(--coral); font: 900 12px var(--sans); }
.guide-grid h3, .guide-card h3 { margin: 0 0 7px; font-size: 17px; }
.guide-grid p, .guide-sharing p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.guide-card > span { display: block; margin-bottom: 20px; font: 900 27px/1 var(--sans); }
.guide-card.mint { background: var(--green-soft); }
.guide-card.lilac { background: var(--lilac); }
.guide-card.yellow { background: var(--yellow-soft); }
.guide-sharing { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.guide-sharing article:nth-child(1) { border-top: 4px solid var(--muted); }
.guide-sharing article:nth-child(2) { border-top: 4px solid var(--yellow); }
.guide-sharing article:nth-child(3) { border-top: 4px solid var(--green); }
.guide-sharing strong { display: block; margin-bottom: 8px; font-size: 16px; }
.guide-settings-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; border-top: 1px solid var(--line); }
.guide-settings-list > div { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 12px; padding: 15px 4px; border-bottom: 1px solid var(--line); }
.guide-settings-list > div:nth-child(odd) { padding-right: 18px; }
.guide-settings-list > div:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); }
.guide-settings-list dt { font-weight: 900; }
.guide-settings-list dd { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.legend {
  align-items: center;
  gap: 8px;
  margin: 24px 0 20px;
  color: var(--muted);
  font: 800 12px/1.4 var(--sans);
}
.legend button { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 8px 12px; color: var(--ink); background: var(--category-badge-color,var(--surface)); border: 1px solid var(--line); border-radius: 99px; font: inherit; cursor: pointer; overflow-wrap: anywhere; text-align: start; }
.legend button:hover { border-color: var(--ink); }
.legend button.active,.legend button[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.legend button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.dot { border-color: rgba(32, 48, 47, .4); }
.tags .tag-filter { border: 0; background: transparent; color: inherit; padding: 0; font: inherit; cursor: pointer; }
.tags .tag-filter:hover, .tags .tag-filter.active { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

.notes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.note-card {
  min-height: 230px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(32, 48, 47, .5);
  border-radius: 13px 8px 16px 10px;
  box-shadow: 4px 5px 0 rgba(32, 48, 47, .1);
  transition: transform .16s ease, box-shadow .16s ease;
}
.note-card:nth-child(3n + 2) { border-radius: 8px 15px 10px 16px; }
.note-card:nth-child(3n) { border-radius: 16px 10px 14px 8px; }
.note-card:hover { transform: translateY(-3px) rotate(-.15deg); box-shadow: 6px 8px 0 rgba(32, 48, 47, .11); }
.note-card h3 { margin: 22px 0 8px; font: 900 23px/1.08 var(--sans); letter-spacing: -.65px; }
.note-card p { color: #455250; font-size: 13px; line-height: 1.5; }
.note-card.new { border: 1.5px dashed #9a9e96; background: rgba(255, 253, 247, .72); }
.new .plus { border-width: 1.5px; background: var(--surface); font: 800 33px/1 var(--sans); }
.doodle { color: rgba(32, 48, 47, .48); }

.back-button, .chat-head-actions button, .provider button,
.continue-chat, .edit-note, .note-versions, .delete-note, .review-actions button {
  border: 1px solid var(--line);
  border-radius: 8px 6px 9px 7px;
  background: var(--surface);
  box-shadow: none;
  padding: 9px 12px;
  font: 800 11px var(--sans);
}
.back-button:hover, .chat-head-actions button:hover { border-color: var(--ink); }
.chat-head { min-height: 68px; padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.chat-head-actions { color: var(--muted); }

.chat-intro {
  margin: 0 auto;
  padding: 14px 16px 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.chat-intro h2 { margin: 6px 0; font-size: 22px; }
.chat-intro p, .settings-head p { color: var(--muted); line-height: 1.55; }
#chat-mode-help { max-width: none; }
.scribble { color: var(--coral); }
.chat-modes { border: 1px solid var(--line); border-radius: 10px; }
.chat-modes button { border-radius: 7px; font-weight: 800; }
.chat-modes button.active { background: var(--blue-soft); box-shadow: none; color: #2469a9; }

.messages { min-height: 240px; gap: 14px; padding: 8px 0; }
.message {
  border: 1px solid var(--line);
  border-radius: 15px 15px 15px 7px;
  padding: 14px 16px;
  box-shadow: 2px 3px 0 rgba(32, 48, 47, .07);
  font-size: 14px;
}
.message.user { border-color: #e0c665; border-radius: 15px 15px 7px 15px; background: var(--yellow-soft); }
.message.ai { background: var(--surface); }
.message.ai h1, .message.ai h2, .message.ai h3, .message.ai h4 { font-family: var(--sans); font-weight: 900; }
.message.ai th { background: var(--blue-soft); }

.composer {
  border: 1.5px solid var(--ink);
  border-radius: 12px 8px 13px 9px;
  box-shadow: 3px 4px 0 rgba(32, 48, 47, .1);
}
.composer input { background: var(--surface); }
.composer button { border-left: 1px solid var(--ink); background: var(--green-soft); }
.composer .attach-image { background: var(--blue-soft); }
.make-note, .primary, .add-provider button, .pipeline-effects button {
  border: 1.5px solid var(--ink);
  border-radius: 9px 6px 10px 7px;
  background: var(--green-soft);
  box-shadow: 3px 3px 0 rgba(32, 48, 47, .17);
  font-weight: 900;
}

.pipeline-effects article {
  padding: 13px 15px;
  border: 1.5px solid var(--ink);
  border-radius: 14px 9px 15px 10px;
  background: var(--surface);
  box-shadow: 3px 4px 0 rgba(32, 48, 47, .1);
}
.pipeline-effects b { font-size: 13px; font-weight: 900; }
.pipeline-effect-heading { flex: 1; min-width: 0; }
.pipeline-effect-note-title { margin: 4px 0 0; font: 800 16px/1.35 var(--sans); overflow-wrap: anywhere; }
.pipeline-effects span { font: 500 11px var(--mono); }
.pipeline-effects button { padding: 10px 14px; font: 900 13px var(--sans); }
.pipeline-effects button:hover:not(:disabled) { background: var(--mint); }
.pipeline-effects button:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: 2px 2px 0 rgba(32, 48, 47, .17); }
.pipeline-effects button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.pipeline-effects button:disabled { opacity: .45; cursor: wait; }
@media (max-width: 510px) { .pipeline-effects button { width: 100%; margin-left: 0; } }

.settings-layout { grid-template-columns: 205px minmax(0, 1fr); gap: 36px; padding-top: 30px; }
.settings-nav {
  position: sticky;
  top: 106px;
  align-self: start;
  min-height: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 15px 9px 17px 11px;
  background: rgba(255, 253, 247, .82);
}
.settings-nav .eyebrow { margin: 24px 8px 7px; }
.settings-tab { border-radius: 8px 6px 9px 7px; padding: 10px 11px; font-size: 12px; }
.settings-tab.active { border: 0; background: var(--blue-soft); color: #2469a9; }
.settings-content { max-width: 760px; }
.settings-head { padding: 8px 0 20px; }
.settings-head h2 { margin: 0 0 7px; font-size: 37px; }
.settings-head p { max-width: none; margin-left: 0; margin-right: 0; }

.provider-list, .category-list { gap: 10px; }
.space-search { display: grid; gap: 6px; margin-bottom: 13px; color: var(--muted); font: 500 10px var(--mono); letter-spacing: .4px; }
.space-search input, .search-input { width: 100%; border: 1.5px solid var(--ink); border-radius: 7px 5px 8px 6px; background: var(--surface); padding: 11px 12px; font: 600 13px var(--sans); }
.space-list { display: grid; gap: 10px; }
.space-card { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 15px; border: 1px solid var(--line); border-radius: 12px 8px 13px 9px; background: var(--surface); }
.space-card.active { border-color: var(--ink); box-shadow: 3px 3px 0 color-mix(in srgb, var(--space-color) 72%, var(--ink)); }
.space-card-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--space-color); font-size: 18px; }
.space-card-copy { min-width: 0; }
.space-card-copy > div { display: flex; align-items: center; gap: 8px; }
.space-card-copy strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.space-card-copy p { overflow: hidden; margin: 4px 0; color: var(--muted); font-size: 12px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.space-card-copy small { color: var(--muted); font: 500 9px var(--mono); }
.space-active-badge { border-radius: 999px; padding: 3px 6px; background: var(--space-color); font: 700 8px var(--mono); letter-spacing: .5px; }
.space-card-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.space-card-actions button { border: 1px solid var(--ink); border-radius: 7px 5px 8px 6px; padding: 7px 9px; background: var(--surface); font: 800 10px var(--sans); cursor: pointer; }
.space-card-actions button:last-child { background: var(--space-color); }
.space-template-tools { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; margin: 18px 0 4px; padding: 14px; border: 1px dashed var(--ink); border-radius: 9px 6px 10px 7px; background: var(--surface); }
.space-template-tools button { border: 1.5px solid var(--ink); border-radius: 6px 4px 7px 5px; padding: 9px 12px; background: var(--yellow); font: 800 11px var(--sans); cursor: pointer; }
.space-template-tools small, .space-import-preview > small { color: var(--muted); font: 500 11px/1.45 var(--sans); }
.space-import-preview { margin: 10px 0 4px; padding: 16px; border: 1.5px solid var(--ink); border-radius: 8px 5px 9px 6px; background: var(--sky); box-shadow: 3px 3px 0 var(--line); }
.space-import-preview h3 { margin: 7px 0 4px; font: 700 22px var(--display); }
.space-import-preview p { margin: 0 0 5px; font-size: 13px; }
.space-import-preview > div { display: flex; gap: 7px; margin-top: 13px; }
.space-import-preview button { border: 1.5px solid var(--ink); border-radius: 5px; padding: 8px 11px; background: var(--mint); font: 800 11px var(--sans); cursor: pointer; }
.space-import-preview button:last-child { background: var(--surface); }
@media (max-width: 520px) { .space-template-tools { grid-template-columns: 1fr; } .space-template-tools button { width: 100%; } }
.space-form { margin-top: 22px; }
.space-form h3 { margin: 0 0 4px; font-size: 22px; }
.space-form-row { display: grid; grid-template-columns: minmax(0,1fr) 90px 62px; gap: 9px; }
.space-form-row input[type="color"] { height: 39px; padding: 3px; }
.space-form label small { font-family: var(--sans); letter-spacing: 0; }
.ai-textarea { position: relative; }
.ai-textarea textarea { min-height: 140px; padding-bottom: 48px; }
.add-provider .ai-textarea button {
  position: absolute;
  right: 9px;
  bottom: 10px;
  width: auto;
  padding: 7px 10px;
  border: 1px solid var(--ink);
  border-radius: 7px 5px 8px 6px;
  background: var(--blue-soft);
  box-shadow: none;
  font-size: 10px;
}
.add-provider .ai-textarea button:disabled { opacity: .45; cursor: not-allowed; }
.provider, .category-row, .add-provider, .prompt-card, .mcp-server-card {
  border: 1px solid var(--line);
  border-radius: 13px 8px 15px 10px;
  background: var(--surface);
  box-shadow: 3px 4px 0 rgba(32, 48, 47, .07);
}
.provider { padding: 16px; }
.provider.default { border-color: var(--green); background: var(--green-soft); }
.provider.default .radio { background: var(--green); }
.add-provider { margin-top: 18px; padding: 20px; }
.category-create { grid-template-columns: minmax(120px, 1fr) 52px; }
.category-create h3, .category-create textarea, .category-create button { grid-column: 1 / -1; width: 100%; }
.category-create input[name="name"] { height: 38px; }
.category-create input[type="color"] { width: 52px; height: 38px; padding: 3px; }
.category-row input[type="color"]:disabled, .category-create input[type="color"]:disabled { opacity: 1; cursor: not-allowed; }
.category-breadcrumb { display: inline-flex; align-items: center; min-height: 34px; margin: 0 0 16px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px 7px 11px 8px; background: var(--blue-soft); color: #2469a9; box-shadow: 2px 2px 0 rgba(32, 48, 47, .06); font: 700 11px var(--sans); letter-spacing: .2px; }
.category-breadcrumb b { padding: 0 7px; color: var(--muted); font-size: 14px; }
.category-breadcrumb button { border: 0; background: transparent; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; }
.category-breadcrumb button[aria-current="page"] { cursor: default; text-decoration: none; color: var(--muted); }
.category-actions button:disabled { opacity: .45; cursor: not-allowed; }
.add-provider label, .prompt-card label { color: var(--muted); font: 500 10px var(--mono); letter-spacing: .4px; }
.profile-hint { color: var(--muted); font: 500 9px/1.45 var(--sans); letter-spacing: 0; }
.add-provider input, label input, label select, textarea, .prompt-card select, .prompt-card textarea {
  border: 1px solid #c8c5ba;
  border-radius: 8px 6px 9px 7px;
  background: #fff;
  color: var(--ink);
  padding: 11px 12px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(72, 149, 239, .28); outline-offset: 1px; border-color: var(--blue); }
.prompt-card { display: block; padding: 16px 22px; box-shadow: none; }
.prompt-card > summary { display: flex; align-items: center; gap: 14px; cursor: pointer; list-style: none; }
.prompt-card > summary::-webkit-details-marker { display: none; }
.prompt-card > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; border-radius: 3px; }
.prompt-card-heading { display: grid; gap: 4px; min-width: 0; }
.prompt-card-heading strong { font: 800 16px var(--sans); overflow-wrap: anywhere; }
.prompt-card-body { display: grid; gap: 14px; padding-top: 18px; }
.prompt-card > summary:hover .mode-guide-chevron, .prompt-card > summary:focus-visible .mode-guide-chevron { background: var(--mint); }
.prompt-card[open] > summary .mode-guide-chevron svg { transform: rotate(90deg); }
.prompt-card textarea { height: auto; padding-bottom: 61px; overflow-y: hidden; resize: none; }
.prompt-card-chat { background: var(--surface); }
.prompt-card-action { background: var(--coral-soft); }
.prompt-card-utility { background: var(--green-soft); }
.usage-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: stretch;
  margin: 24px 0 18px;
}
.usage-summary > div {
  display: grid;
  gap: 4px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 13px 8px 15px 10px;
}
.usage-summary span,.ai-log-metrics small { color: var(--muted); font: 700 9px var(--mono); letter-spacing: .7px; text-transform: uppercase; }
.usage-summary strong { font-size: 24px; line-height: 1.1; }
.usage-summary small { color: var(--muted); font-size: 10px; }
.usage-summary button { align-self: stretch; padding: 0 16px; color: #923f48; background: var(--coral-soft); border: 1px solid #e4c4c1; border-radius: 10px 7px 12px 8px; cursor: pointer; font: 800 11px var(--sans); }
.usage-summary #refresh-ai-logs { color: #315f59; background: var(--green-soft); border-color: #bcdcca; }
.usage-summary button:disabled { opacity: .55; cursor: wait; }
.ai-log-list { display: grid; gap: 10px; }
.ai-log-row { padding: 15px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--usage-space-color, var(--blue-soft)); border-radius: 10px 7px 12px 8px; }
.ai-log-row > header { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 11px; border-bottom: 1px dashed var(--line); }
.ai-log-row > header div { display: grid; gap: 3px; min-width: 0; }
.ai-log-row > header b { font-size: 13px; }
.ai-log-row > header span,.ai-log-row time { overflow-wrap: anywhere; color: var(--muted); font: 500 9px/1.4 var(--mono); }
.ai-log-row time { flex: 0 0 auto; }
.ai-log-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding-top: 11px; }
.ai-log-metrics > span { display: grid; gap: 2px; min-width: 0; }
.ai-log-metrics b { overflow-wrap: anywhere; font-size: 12px; }
.ai-log-metrics em { overflow: hidden; color: var(--muted); font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.ai-log-details { margin-top: 12px; border-top: 1px dashed var(--line); }
.ai-log-details summary { width: max-content; padding-top: 11px; color: var(--ink); font: 700 10px var(--mono); cursor: pointer; }
.ai-log-details[open] summary { margin-bottom: 11px; }
.ai-log-payloads { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ai-log-payloads section { min-width: 0; }
.ai-log-payloads h4 { margin: 0 0 6px; color: var(--muted); font: 700 9px var(--mono); letter-spacing: .6px; text-transform: uppercase; }
.ai-log-payloads pre { max-height: 360px; margin: 0; overflow: auto; padding: 11px; background: var(--paper); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; font: 500 10px/1.5 var(--mono); }
.ai-log-details > p { margin: 9px 0 0; color: var(--muted); font-size: 10px; }
.usage-empty { padding: 28px; color: var(--muted); text-align: center; background: var(--surface); border: 1px dashed var(--line); border-radius: 12px; }
.usage-empty.error { color: #923f48; }
.category-row { padding: 8px; }

.detail-note, .note-page-form {
  width: min(100%, 760px);
  min-height: 480px;
  margin: 34px auto;
  padding: clamp(24px, 5vw, 46px);
  border: 1.5px solid var(--ink);
  border-radius: 18px 11px 22px 13px;
  box-shadow: 7px 8px 0 rgba(32, 48, 47, .12);
}
.detail-note h1 { max-width: 650px; margin: 24px 0; font-size: clamp(38px, 7vw, 60px); line-height: 1; }
.note-visibility { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.visibility-switch { display: inline-grid; grid-template-columns: repeat(3, auto); gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 10px 7px 11px 8px; background: rgba(255,253,247,.78); }
.visibility-switch button { min-width: 88px; padding: 7px 11px; border: 0; border-radius: 7px 5px 8px 6px; background: transparent; color: var(--muted); cursor: pointer; font: 800 10px var(--sans); }
.visibility-switch button.active { background: var(--blue-soft); color: #2469a9; box-shadow: 1px 2px 0 rgba(32,48,47,.08); }
.note-share-preview { flex: 1 1 300px; min-width: min(100%,280px); }
.note-share-url { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 6px; }
.note-share-url input { min-width: 0; padding: 8px 10px; border: 1px solid #c8c5ba; border-radius: 7px 5px 8px 6px; background: #fff; color: var(--muted); font: 500 9px var(--mono); }
.note-share-url button { padding: 8px 12px; border: 1px solid #c8c5ba; border-radius: 7px 5px 8px 6px; background: var(--green-soft); cursor: pointer; font: 800 10px var(--sans); }
.note-share-url .share-regenerate { width: 34px; padding: 0; background: var(--blue-soft); color: #2469a9; font-size: 17px; line-height: 1; }
.public-username-required { flex: 1 0 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #c8c5ba; border-radius: 9px 6px 10px 7px; background: var(--yellow-soft); font: 700 11px var(--sans); }
.public-username-required button { flex: none; padding: 7px 10px; border: 1px solid var(--ink); border-radius: 7px 5px 8px 6px; background: var(--blue-soft); cursor: pointer; font: 800 10px var(--sans); }
.public-username-field { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; border: 1px solid #bdbcb3; border-radius: 8px 6px 9px 7px; background: #fff; overflow: hidden; }
.public-username-field:focus-within { outline: 2px solid rgba(72,149,239,.25); border-color: var(--blue); }
.public-username-field span { padding-left: 12px; color: var(--muted); font: 700 13px var(--mono); }
.public-username-field input { border: 0 !important; border-radius: 0 !important; outline: 0 !important; box-shadow: none !important; }
.public-username-field:has(input:disabled) { background: rgba(32,48,47,.06); }
.public-username-field input:disabled { background: transparent; color: var(--ink); opacity: 1; cursor: not-allowed; }
.shared-note-page .topbar nav, .shared-note-page .active-space-label, .shared-note-page #note-detail > .chat-head { display: none; }
.shared-note-page .topbar { justify-content: flex-start; }
.shared-note-loading, .shared-note-error { padding: 70px 20px; text-align: center; }
.shared-note-error h1 { width: 100%; margin: 0 auto 10px; text-align: center; }
.shared-note-error a { color: #2469a9; font-weight: 800; }
@media (max-width: 620px) { .visibility-switch { width: 100%; grid-template-columns: repeat(3,minmax(0,1fr)); } .visibility-switch button { min-width: 0; padding-inline: 6px; } }
.detail-note .note-copy { max-width: 650px; color: #344341; font-size: 17px; line-height: 1.65; }
.detail-tags span, .detail-tags button { border: 1px solid rgba(32, 48, 47, .45); background: rgba(255, 253, 247, .65); }
.detail-tags button { border-radius: 20px; padding: 5px 9px; color: var(--ink); font: 11px var(--mono); cursor: pointer; }
.detail-tags button:hover { background: var(--blue-soft); text-decoration: underline; text-underline-offset: 3px; }
.note-actions { padding-top: 4px; }
.edit-note { background: var(--yellow-soft); }
.delete-note, .saved-conversation-row [data-saved-delete] { background: var(--coral-soft); }
.continue-chat { background: var(--blue-soft); }
.review-box { border-top: 1px dashed rgba(32, 48, 47, .5); }

.note-edit-canvas [contenteditable="true"]:focus { border-radius: 6px; background: rgba(255, 253, 247, .45); box-shadow: 0 0 0 5px rgba(255, 253, 247, .45); }
.edit-note-meta select { border: 1px solid rgba(32, 48, 47, .5); background: rgba(255, 253, 247, .7); }
.edit-note-footer { border-top: 1px dashed rgba(32, 48, 47, .5); }

.landing-screen {
  min-height: 100vh;
  background:
    linear-gradient(rgba(32, 48, 47, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 48, 47, .035) 1px, transparent 1px),
    var(--paper);
  background-size: 24px 24px;
}
.landing-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(calc(100% - 48px), 1180px);
  height: 76px;
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}
.landing-auth-actions, .landing-hero-actions { display: flex; align-items: center; gap: 9px; }
.landing-auth-actions button, .landing-hero-actions button {
  min-height: 40px;
  border: 1.5px solid var(--ink);
  border-radius: 8px 6px 9px 7px;
  padding: 9px 16px;
  background: rgba(255, 253, 247, .86);
  color: var(--ink);
  font: 800 13px var(--sans);
  cursor: pointer;
}
.landing-auth-actions .primary, .landing-hero-actions .primary { background: var(--green-soft); box-shadow: 3px 3px 0 rgba(32, 48, 47, .16); }
.landing-main { width: min(calc(100% - 48px), 1180px); margin: 0 auto; padding: 74px 0 80px; }
.landing-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); align-items: center; gap: clamp(42px, 8vw, 110px); }
.landing-hero-copy h1 { margin: 14px 0 22px; font: 900 clamp(54px, 7vw, 88px)/.91 Fraunces, serif; letter-spacing: -3px; }
.landing-hero-copy h1 i { color: var(--coral); font-style: normal; }
.landing-hero-copy > p:not(.eyebrow) { max-width: 590px; margin: 0; color: #43504e; font-size: 18px; line-height: 1.65; }
.landing-hero-actions { margin-top: 30px; flex-wrap: wrap; }
.landing-hero-actions button { min-height: 47px; padding-inline: 20px; }
.landing-preview {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 29px;
  border: 1.5px solid var(--ink);
  border-radius: 19px 11px 22px 14px;
  background: rgba(255, 253, 247, .92);
  box-shadow: 9px 10px 0 rgba(32, 48, 47, .12);
  transform: rotate(1deg);
}
.landing-spark { position: absolute; top: -25px; right: 15px; color: var(--coral); font-size: 43px; transform: rotate(13deg); }
.landing-preview > p { margin: 0 0 4px; color: var(--muted); }
.landing-preview article { display: flex; align-items: center; gap: 13px; padding: 14px; border: 1px solid rgba(32, 48, 47, .3); border-radius: 10px 7px 11px 8px; background: var(--preview-color); }
.landing-preview article > b { display: grid; flex: 0 0 36px; height: 36px; place-items: center; border: 1px solid rgba(32, 48, 47, .45); border-radius: 50%; background: rgba(255, 253, 247, .66); }
.landing-preview article span { display: grid; gap: 3px; color: var(--ink); }
.landing-preview article strong { font-size: 14px; }
.landing-preview article small { color: #56615f; font: 400 10px var(--mono); }
.landing-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 86px; }
.landing-features article { padding: 25px; border: 1px solid var(--line); border-radius: 14px 9px 16px 11px; background: rgba(255, 253, 247, .7); }
.landing-features article > span { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 50%; background: var(--blue-soft); font-size: 19px; }
.landing-features article:nth-child(2) > span { background: var(--green-soft); }
.landing-features article:nth-child(3) > span { background: var(--coral-soft); }
.landing-features h2 { margin: 18px 0 7px; font: 900 23px Fraunces, serif; }
.landing-features p { margin: 0; color: #52605d; font-size: 14px; line-height: 1.55; }

.auth-screen {
  min-height: 100vh;
  padding: 34px 20px;
  background:
    linear-gradient(rgba(32, 48, 47, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 48, 47, .035) 1px, transparent 1px),
    var(--paper);
  background-size: 24px 24px;
}
.auth-card {
  position: relative;
  width: min(100%, 455px);
  padding: 34px;
  border: 1.5px solid var(--ink);
  border-radius: 19px 11px 22px 14px;
  background: rgba(255, 253, 247, .95);
  box-shadow: 8px 9px 0 rgba(32, 48, 47, .12);
}
.auth-back { position: absolute; top: 19px; right: 21px; border: 0; background: transparent; color: var(--muted); font: 800 12px var(--sans); cursor: pointer; }
.logout-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.logout-button:disabled { opacity: .45; cursor: wait; }
.auth-card .eyebrow { margin-top: 32px; }
.auth-card h1 { margin: 12px 0; font-size: 46px; line-height: .98; }
.auth-card form input { border: 1px solid #bdbcb3; border-radius: 8px 6px 9px 7px; box-shadow: none; }
.auth-card form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(72, 149, 239, .16); transform: none; }
.auth-step { display: grid; gap: 8px; min-width: 0; }
.auth-step[hidden] { display: none; }
.auth-card #auth-description { overflow-wrap: anywhere; line-height: 1.6; }
.auth-card #auth-code { text-align: center; font: 700 26px var(--mono); letter-spacing: .25em; }
.auth-code-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.auth-code-actions .text-button { margin: 0; padding: 8px 0; }
.auth-status { color: var(--muted); font-size: 13px; line-height: 1.5; }
.auth-status:empty, .auth-error:empty { display: none; }
.auth-card button:disabled { opacity: .55; cursor: default; }
.auth-card button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.auth-card form .primary { box-shadow: 3px 3px 0 rgba(32, 48, 47, .17); }

@media (max-width: 900px) {
  .landing-hero { grid-template-columns: 1fr 340px; gap: 36px; }
  .landing-hero-copy h1 { font-size: clamp(52px, 8vw, 70px); }
  .notes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-layout { grid-template-columns: 180px minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 680px) {
  .landing-topbar, .landing-main { width: calc(100% - 32px); }
  .landing-main { padding: 54px 0 58px; }
  .landing-hero { grid-template-columns: 1fr; gap: 56px; }
  .landing-hero-copy h1 { font-size: clamp(50px, 15vw, 70px); }
  .landing-preview { width: min(100%, 470px); justify-self: center; transform: rotate(.5deg); }
  .landing-features { grid-template-columns: 1fr; margin-top: 64px; }
  .brand .active-space-label { max-width: 150px; }
  .space-card { grid-template-columns: 42px minmax(0,1fr); }
  .space-card-actions { grid-column: 2; justify-content: flex-start; }
  .space-form-row { grid-template-columns: minmax(0,1fr) 72px 58px; }
  .app-shell { padding: 0 16px 16px; }
  .topbar { height: 68px; }
  .topbar, .chat-head { width: calc(100vw - 32px); margin-left: calc(50% - 50vw + 16px); padding-left: 0; padding-right: 0; }
  .brand .brand-mark { width: 38px; height: 38px; }
  .topbar .brand-copy small { display: none; }
  .nav-link { padding-inline: 10px; }
  .hero { min-height: 230px; padding: 38px 0 27px; }
  .hero h1 { font-size: clamp(41px, 13vw, 58px); }
  .guide-hero { padding: 44px 0 38px; }
  .guide-grid, .guide-sharing { grid-template-columns: 1fr; }
  .guide-steps { grid-template-columns: 1fr; }
  .guide-settings-list { grid-template-columns: 1fr; }
  .guide-settings-list > div:nth-child(odd), .guide-settings-list > div:nth-child(even) { padding: 14px 4px; border-left: 0; }
  .streak { display: none; }
  .settings-layout { grid-template-columns: 1fr; gap: 18px; }
  .settings-nav { position: static; flex-direction: row; align-items: center; padding: 10px; overflow-x: auto; border-radius: 12px; }
  .settings-nav .eyebrow { display: none; }
  .settings-tab { width: auto; white-space: nowrap; }
  .settings-content { max-width: none; }
  .usage-summary { grid-template-columns: 1fr 1fr; }
  .usage-summary button { grid-column: 1 / -1; min-height: 42px; }
}

@media (max-width: 520px) {
  .landing-topbar { height: 68px; }
  .landing-auth-actions { gap: 6px; }
  .landing-auth-actions button { min-height: 36px; padding: 7px 10px; font-size: 11px; }
  .landing-main { padding-top: 43px; }
  .landing-hero-copy h1 { letter-spacing: -2px; }
  .landing-hero-copy > p:not(.eyebrow) { font-size: 16px; }
  .landing-hero-actions { align-items: stretch; flex-direction: column; }
  .landing-hero-actions button { width: 100%; }
  .landing-preview { padding: 22px 17px; }
  .landing-preview article { padding: 12px; }
  .landing-features { gap: 12px; }
  .brand .active-space-label { max-width: 105px; }
  .space-form-row { grid-template-columns: 1fr 70px; }
  .space-form-row label:last-child { grid-column: 1 / -1; }
  .notes-grid { grid-template-columns: 1fr; }
  .note-card { min-height: 195px; }
  .topbar nav { gap: 1px; }
  .nav-link { padding-inline: 8px; font-size: 11px; }
  .icon-button { width: 32px; }
  .brand-copy strong { font-size: 15px; }
  .chat-head { align-items: flex-start; gap: 10px; }
  .chat-head-actions { align-items: flex-end; flex-direction: column; }
  .chat-intro { padding: 10px 8px; }
  .message { max-width: 90%; }
  .message.ai { max-width: 100%; }
  .usage-summary { grid-template-columns: 1fr; }
  .usage-summary button { grid-column: auto; }
  .ai-log-row > header { align-items: flex-start; flex-direction: column; }
  .ai-log-metrics { grid-template-columns: 1fr 1fr; }
  .ai-log-metrics > span:last-child { grid-column: 1 / -1; }
  .ai-log-payloads { grid-template-columns: 1fr; }
  .detail-note, .note-page-form { padding: 23px; }
  .auth-card { padding: 27px 22px; }
}

/* Structured visual notes: Dipinio Doodle */
.edit-note-meta { flex-wrap: wrap; }
.edit-note-meta select { margin-right: 2px; }
.note-components-editor { margin-top: 8px; }
.note-components-editor [contenteditable="true"] { cursor: text; }
.note-components-editor [contenteditable="true"]:focus {
  outline: 2px dashed rgba(32, 48, 47, .45);
  outline-offset: 3px;
}

.visual-note {
  --note-blue: #dceeff;
  --note-red: #ffe0dc;
  --note-teal: #d9f1ed;
  --note-green: #ddf1e4;
  --note-yellow: #fff0b9;
  --note-orange: #ffe4c9;
  --note-purple: #ebe1f5;
  --note-gray: #e9ebe8;
  --note-pink: #f9dfe9;
  display: grid;
  gap: 27px;
  margin-top: 32px;
}

.visual-section { display: grid; gap: 13px; }
.visual-section > header { display: flex; align-items: center; gap: 11px; }
.visual-section > header > span {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1.5px solid var(--ink);
  background: var(--note-blue);
  font: 800 11px var(--mono);
}
.visual-section.tone-red > header > span { background: var(--note-red); }
.visual-section.tone-teal > header > span { background: var(--note-teal); }
.visual-section.tone-green > header > span { background: var(--note-green); }
.visual-section.tone-yellow > header > span { background: var(--note-yellow); }
.visual-section.tone-orange > header > span { background: var(--note-orange); }
.visual-section.tone-purple > header > span { background: var(--note-purple); }
.visual-section.tone-gray > header > span { background: var(--note-gray); }
.visual-section.tone-pink > header > span { background: var(--note-pink); }
.visual-section > header h2 { margin: 0; font: 900 22px/1.1 var(--sans); letter-spacing: -.45px; }
.visual-blocks { display: grid; gap: 11px; }

.visual-box, .visual-sticky, .visual-quiz {
  padding: 17px 18px;
  border: 1px solid rgba(32, 48, 47, .72);
  background: var(--note-blue);
}
.visual-list-block { padding: 15px 17px; border: 1px dashed rgba(32, 48, 47, .55); border-radius: 11px 7px 13px 9px; background: rgba(255, 253, 247, .55); }
.visual-box.tone-red, .visual-sticky.tone-red { background: var(--note-red); }
.visual-box.tone-teal, .visual-sticky.tone-teal { background: var(--note-teal); }
.visual-box.tone-green, .visual-sticky.tone-green { background: var(--note-green); }
.visual-box.tone-yellow, .visual-sticky.tone-yellow { background: var(--note-yellow); }
.visual-box.tone-orange, .visual-sticky.tone-orange { background: var(--note-orange); }
.visual-box.tone-purple, .visual-sticky.tone-purple { background: var(--note-purple); }
.visual-box.tone-gray, .visual-sticky.tone-gray { background: var(--note-gray); }
.visual-box.tone-pink, .visual-sticky.tone-pink { background: var(--note-pink); }
.visual-box p, .visual-sticky p, .visual-quiz p { margin: 8px 0 0; font-size: 13px; line-height: 1.55; }
.visual-label { margin: 0 !important; font: 500 9px/1.2 var(--mono) !important; letter-spacing: .75px; text-transform: uppercase; }
.visual-label span { margin-right: 4px; font-size: 16px; }

.visual-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.visual-bullets { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.45; }
.visual-bullets li { position: relative; padding-left: 20px; }
.visual-bullets li::before { position: absolute; left: 1px; content: "→"; font-weight: 900; }
.visual-bullets.check li::before { content: "✓"; color: #277653; }
.visual-bullets.star li::before { content: "✦"; color: #b35d4d; }
.visual-bullets.dot li::before { content: "•"; }

.visual-tags, .visual-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.visual-tags > span, .visual-pills > span {
  padding: 5px 8px;
  border: 1px solid rgba(32, 48, 47, .55);
  border-radius: 99px;
  background: var(--surface);
  font: 500 9px var(--mono);
}
.visual-tags > span::before { content: "#"; }

.visual-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); border: 1px solid var(--ink); }
.visual-stats > div { display: grid; gap: 3px; padding: 15px; text-align: center; }
.visual-stats > div + div { border-left: 1px solid var(--ink); }
.visual-stats strong { font-size: 22px; font-weight: 900; }
.visual-stats span { color: var(--muted); font: 500 9px var(--mono); text-transform: uppercase; }

.visual-table-wrap { overflow-x: auto; border: 1px solid var(--ink); background: var(--surface); }
.visual-table-wrap table { width: 100%; border-collapse: collapse; font-size: 12px; }
.visual-table-wrap th, .visual-table-wrap td { min-width: 105px; padding: 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.visual-table-wrap th { background: var(--note-blue); font-weight: 900; }
.visual-table-wrap th + th, .visual-table-wrap td + td { border-left: 1px solid var(--line); }

.visual-sticky { width: min(100%, 430px); margin: 4px auto; box-shadow: 4px 5px 0 rgba(32, 48, 47, .13); transform: rotate(-.5deg); }
.visual-sticky strong { font-size: 14px; font-weight: 900; }
.visual-quiz { background: var(--surface); }
.visual-quiz h3 { margin: 9px 0; font-size: 16px; }
.visual-quiz ol { display: grid; gap: 6px; margin: 11px 0; padding-left: 25px; }
.visual-quiz li { padding: 5px 7px; font-size: 12px; }
.visual-quiz li.correct { background: var(--note-green); font-weight: 800; }

.visual-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.visual-tiers article { padding: 13px; border: 1px solid rgba(32, 48, 47, .5); background: var(--note-blue); }
.visual-tiers article.tone-red { background: var(--note-red); }
.visual-tiers article.tone-green { background: var(--note-green); }
.visual-tiers article.tone-yellow { background: var(--note-yellow); }
.visual-tiers article.tone-purple { background: var(--note-purple); }
.visual-tiers b, .visual-tiers strong { display: block; }
.visual-tiers span { display: block; margin-top: 4px; color: var(--muted); font: 500 9px var(--mono); }
.visual-tiers b { color: var(--muted); font: 500 9px var(--mono); }
.visual-tiers strong { margin-top: 4px; font-size: 13px; }
.visual-tiers p { margin: 5px 0 0; font-size: 11px; line-height: 1.45; }

.theme-doodle .visual-section > header > span { border-radius: 50% 42% 55% 44%; box-shadow: 2px 3px 0 rgba(32, 48, 47, .12); transform: rotate(-3deg); }
.theme-doodle .visual-box { border-radius: 12px 7px 14px 9px; box-shadow: 3px 4px 0 rgba(32, 48, 47, .1); }
.theme-doodle .visual-box:nth-child(even) { transform: rotate(.22deg); }
.theme-doodle .visual-section + .visual-section { padding-top: 24px; border-top: 1px dashed rgba(32, 48, 47, .35); }

@media (max-width: 620px) {
  .visual-two-col { grid-template-columns: 1fr; }
  .visual-stats > div + div { border-left: 0; border-top: 1px solid var(--ink); }
  .visual-section > header h2 { font-size: 19px; }
}

.variable-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.composer .variable-picker .variable-badge {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  min-height: 0;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font: 700 11px var(--sans);
}

.composer .variable-picker .variable-badge[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--lilac);
}

.variable-picker span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
}

.variable-picker b,
.variable-picker small {
  white-space: nowrap;
}

.variable-picker small {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-head .prompt-variable-help {
  margin-top: 13px;
  padding: 10px 12px;
  border: 1px solid #c8c5ba;
  border-radius: 8px 6px 9px 7px;
  background: var(--blue-soft);
  color: var(--ink);
  font-size: 12px;
}

.prompt-variable-help code {
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--surface);
  font: 700 11px var(--mono);
}

.pipeline-routing, .pipeline-step-context { display:grid; gap:7px; background-color:#eeeeee; padding:14px; border-radius:5px; border-top:1px solid var(--line); }
.pipeline-routing input, .pipeline-step-context input { width:100%; min-width:0; padding:8px; border:1px solid var(--ink); border-radius:5px; background:var(--surface); color:var(--ink); font:600 12px var(--sans); }

.pipeline-step-header { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.pipeline-step-header .pipeline-step-number { height:28px; font:800 12px var(--sans); }
.pipeline-step-header>b { color:var(--ink); font:800 12px var(--sans); letter-spacing:.4px; }
.pipeline-step-controls { display:flex; gap:5px; }
.pipeline-step-controls button { width:32px; height:32px; padding:0; border-radius:6px; }
.mode-pipeline-row>.pipeline-step-fields { width:100%; min-width:0; padding-top:4px; }
@media(max-width:520px) { .pipeline-step-header { gap:7px; } }

.prompt-card-actions { flex-wrap:wrap; }
.prompt-card-actions .prompt-reset { border:1px solid var(--ink); border-radius:6px; background:var(--lilac); padding:7px 10px; font:700 11px var(--sans); cursor:pointer; }
.prompt-card-actions .prompt-reset:hover:not(:disabled) { background:var(--mint); }

.pipeline-effects .pipeline-profile-summary { color:var(--muted); font:600 12px/1.5 var(--sans); }

.mcp-server-card {
  min-width: 0;
  padding: 20px;
}
.mcp-server-card > header { align-items: flex-start; gap: 12px; }
.mcp-server-card > header > div { min-width: 0; }
.mcp-server-card .built-in-action-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px 7px 11px 8px;
  background: var(--blue-soft);
  color: #2469a9;
}
.mcp-server-card h3 { margin: 3px 0 0; font: 900 20px/1.25 var(--sans); overflow-wrap: anywhere; }
.mcp-server-card .note-meta { color: var(--muted); font: 500 9px/1.5 var(--mono); letter-spacing: .6px; }
.mcp-server-card > p { margin: 10px 0 0; color: var(--muted); font: 600 12px/1.5 var(--sans); }
.mcp-server-card .mcp-server-url { overflow-wrap: anywhere; color: var(--ink); font: 500 11px/1.6 var(--mono); }
.mcp-server-tools { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.mcp-server-tools > b { color: var(--muted); font: 500 10px var(--mono); }
.mcp-server-tools ul { display: grid; gap: 9px; margin: 10px 0 0; padding: 0; list-style: none; }
.mcp-server-tools li { min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px 6px 9px 7px; background: rgba(229, 241, 255, .35); }
.mcp-server-tools code { color: var(--ink); font: 500 11px/1.5 var(--mono); overflow-wrap: anywhere; }
.mcp-server-tools p { margin: 5px 0 0; color: var(--muted); font: 600 12px/1.55 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.mcp-server-card details { border: 1px dashed var(--line); border-radius: 8px 6px 9px 7px; background: var(--yellow-soft); }
.mcp-server-card summary { font: 800 12px var(--sans); }
.mcp-server-card details ul { margin: 0; padding: 0 16px 12px 30px; font: 600 12px/1.5 var(--sans); overflow-wrap: anywhere; }
.mcp-server-card .provider-form-actions { flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.mcp-server-card .provider-form-actions button {
  flex: 0 1 auto;
  min-height: 38px;
  padding: 9px 13px;
  border: 1px solid var(--ink);
  border-radius: 7px 5px 8px 6px;
  background: var(--surface);
  color: var(--ink);
  font: 800 11px var(--sans);
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(32, 48, 47, .08);
}
.mcp-server-card .provider-form-actions [data-mcp-refresh] { background: var(--green-soft); }
.mcp-server-card .provider-form-actions [data-mcp-edit] { background: var(--blue-soft); }
.mcp-server-card .provider-form-actions [data-mcp-disconnect], .mcp-server-card .provider-form-actions [data-mcp-delete] { background: var(--coral-soft); }
.mcp-server-card .provider-form-actions button:hover:not(:disabled) { box-shadow: 3px 3px 0 rgba(32, 48, 47, .14); }
.mcp-server-card .provider-form-actions button:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: none; }
.mcp-server-card .provider-form-actions button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.mcp-server-card .provider-form-actions button:disabled { opacity: .45; cursor: wait; }
.mcp-server-card [data-mcp-status] { font: 600 12px/1.5 var(--sans); overflow-wrap: anywhere; }
.mcp-server-card [data-mcp-status]:empty { display: none; }
@media (max-width: 510px) {
  .mcp-server-card { padding: 16px; }
  .mcp-server-card .provider-form-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mcp-server-card .provider-form-actions button { width: 100%; min-width: 0; }
}
.api-approval-detail{overflow-wrap:anywhere}#ai-tool-approvals pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:180px;overflow:auto}

.provider-actions [data-delete-provider] { background: var(--peach); }

.provider { flex-wrap: wrap; }
.provider-status { flex: 0 0 100%; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink); font: 12px/1.5 var(--sans); overflow-wrap: anywhere; }
.provider-status[hidden] { display: none; }

.chat-retry { display: block; margin-top: 12px; padding: 8px 12px; border: 1px solid var(--ink); border-radius: 8px 6px 9px 7px; background: var(--blue-soft); color: var(--ink); font: 800 12px var(--sans); cursor: pointer; }
.chat-retry:disabled { opacity: .45; cursor: wait; }

.pipeline-advanced { width:100%; min-width:0; }
.pipeline-advanced>summary { cursor:pointer; color:var(--ink); font:700 12px var(--sans); padding:8px 0; }
.pipeline-advanced>summary:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.pipeline-advanced> .pipeline-step-fields { padding-top:4px; }

.review-box h3{font:800 17px/1.4 var(--sans);margin:0 0 8px}.review-box .review-hint{font:500 12px/1.6 var(--sans);color:var(--muted)}.review-box .review-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.review-box .review-rating{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:14px 12px;white-space:normal;border-radius:8px;color:var(--ink)}.review-rating b{font-size:14px}.review-rating small{font:500 11px/1.5 var(--sans);overflow-wrap:anywhere}.review-forgot{background:var(--peach,#ffebe7)}.review-hard{background:var(--yellow,#fff0ba)}.review-good{background:var(--mint,#e4f5eb)}.review-easy{background:var(--sky,#e5f1ff)}.review-rating:disabled{opacity:.55;cursor:default}.review-rating:focus-visible{outline:3px solid var(--ink);outline-offset:4px}.review-error{color:#bd3b30!important}@media(max-width:600px){.review-box .review-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}

.review-box .review-rating.is-last-selected{box-shadow:0 0 0 2px var(--ink);border-color:var(--ink)}.review-box .review-rating.is-last-selected:disabled{opacity:1}.review-selected-badge{font:800 10px/1.4 var(--sans);padding:3px 7px;border-radius:12px;background:var(--ink);color:var(--surface,#fff);margin-top:2px}

.review-history{margin-top:24px;padding-top:18px;border-top:1px dashed var(--line,#ccd1ca)}.review-history h4{margin:0 0 10px;font:800 15px var(--sans)}.review-box .review-history-count,.review-box .review-history-empty,.review-box .review-history-legacy{font:500 12px/1.6 var(--sans);color:var(--muted)}.review-history-list{list-style:none;padding:0;margin:12px 0;max-height:420px;overflow:auto}.review-history-list li{display:grid;grid-template-columns:minmax(120px,1fr) auto;gap:5px 14px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--line,#ccd1ca)}.review-history-rating{font:800 13px var(--sans)}.review-history-list time{font:500 11px/1.5 var(--mono);color:var(--muted)}.review-history-version{grid-column:1/-1;font:500 10px var(--mono);color:var(--muted)}.review-history-more{padding:9px 12px;border:1px solid var(--ink);border-radius:6px;background:var(--surface);color:var(--ink);font:700 12px var(--sans);cursor:pointer}.review-history-more:disabled{opacity:.5;cursor:wait}.review-history-more:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.review-box .review-history-error,.review-box .review-error{font:500 12px var(--sans);color:#bd3b30;margin-top:12px}@media(max-width:510px){.review-history-list li{grid-template-columns:1fr}.review-history-list time{grid-column:1}}

.category-proposal-details{display:grid;gap:12px;margin:16px 0}.category-proposal-details>div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px}.category-proposal-details dt{font-weight:800;font-size:12px}.category-proposal-details dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.6}.category-proposal-swatch{display:inline-block;width:14px;height:14px;border:1px solid var(--ink);border-radius:4px;margin-right:8px;vertical-align:middle}.category-proposal-status{color:#bd3b30;font-size:12px;overflow-wrap:anywhere}@media(max-width:510px){.category-proposal-details>div{grid-template-columns:1fr;gap:3px}}

.category-proposal-tree{list-style:none;margin:16px 0;padding:0}.category-proposal-tree>li{margin:12px 0 12px calc(var(--category-depth,0)*20px);padding:12px 14px;border-left:3px solid var(--ink);background:var(--surface)}.category-proposal-tree h4{margin:5px 0 10px;font-size:15px}.category-proposal-tree small{color:var(--muted);font-size:11px}.category-save-all{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px;border:2px solid var(--ink);border-radius:10px}.category-save-all button{cursor:pointer}.category-save-all span{font-size:12px;color:var(--muted)}

#category-change-proposals>article{padding:12px 14px}#category-change-proposals>article>header h3{font-size:15px;margin:3px 0}#category-change-proposals>article>p{font-size:12px;margin:7px 0}#category-change-proposals>article>footer{margin-top:10px}#category-change-proposals>article>footer button{padding:7px 11px}.category-proposal-tree{margin:10px 0}.category-proposal-tree>li{margin:0 0 0 calc(var(--category-depth,0)*12px);padding:7px 9px;border-left-width:2px;border-bottom:1px solid var(--line,#ddd)}.category-proposal-row-heading{display:flex;gap:6px 12px;align-items:baseline;justify-content:space-between;flex-wrap:wrap}.category-proposal-tree .category-proposal-row-heading h4{font:800 13px/1.4 var(--sans);margin:0;overflow-wrap:anywhere}.category-proposal-row-meta{font:500 10px/1.4 var(--sans);color:var(--muted);overflow-wrap:anywhere}.category-proposal-tree .category-proposal-row-definition{font:500 12px/1.5 var(--sans);margin:3px 0 0;overflow-wrap:anywhere}.category-proposal-details{gap:6px;margin:10px 0}.category-proposal-details>div{grid-template-columns:65px minmax(0,1fr);gap:8px}.category-proposal-details dd{font-size:12px;line-height:1.5}.category-save-all{padding:9px 12px;gap:8px}.category-save-all button{padding:7px 11px}.category-proposal-swatch{width:11px;height:11px;margin-right:6px}@media(max-width:510px){.category-proposal-row-heading{gap:2px}.category-proposal-details>div{grid-template-columns:60px minmax(0,1fr)}}

#prompt-proposals>article{padding:14px}#prompt-proposals h3{font-size:16px}.prompt-proposal-instructions{white-space:pre-wrap;overflow-wrap:anywhere;max-height:300px;overflow:auto;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:8px;font:12px/1.6 var(--mono)}.prompt-proposal-details,.prompt-proposal-provider{font-size:12px!important;line-height:1.5!important}.prompt-proposal-status{color:#bd3b30;font-size:12px}

.about-app{padding-bottom:22px;margin-bottom:24px;border-bottom:1px solid var(--line)}.about-app h2{font:700 30px/1.2 var(--display,var(--sans));margin:8px 0 14px}.about-app p{line-height:1.7;max-width:760px}.app-guide-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:16px 0 10px}.app-guide-toolbar button{font:700 12px var(--sans);padding:9px 12px;border:1px solid var(--ink);border-radius:6px;background:var(--surface);color:var(--ink);cursor:pointer}.app-guide-view-controls{display:flex;gap:4px}.app-guide-view-controls button[aria-pressed="true"]{background:var(--mint);box-shadow:inset 0 0 0 1px var(--ink)}.app-guide-toolbar button:disabled{opacity:.45;cursor:default}.app-guide-toolbar button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.app-guide-source{width:100%;box-sizing:border-box;min-height:340px;resize:vertical;margin:16px 0;padding:14px;border:1px solid var(--ink);border-radius:8px;color:var(--ink);background:var(--surface);font:12px/1.6 var(--mono);tab-size:2}.app-guide-status{font:500 12px/1.6 var(--sans);min-height:20px;overflow-wrap:anywhere}.app-guide-preview{border:1px solid var(--line);border-radius:10px;padding:20px;overflow-wrap:anywhere;line-height:1.75}.app-guide-preview h1{font-size:26px;line-height:1.3}.app-guide-preview h2{font-size:19px;margin:26px 0 10px}.app-guide-preview h3{font-size:16px}.app-guide-preview p,.app-guide-preview li{font-size:14px}.app-guide-preview code{font-size:12px;background:var(--mint);padding:2px 4px;border-radius:3px}.app-guide-preview .md-table-wrap{overflow:auto}.app-guide-preview table{border-collapse:collapse;width:100%;font-size:13px}.app-guide-preview th,.app-guide-preview td{border:1px solid var(--line);padding:8px;text-align:left;vertical-align:top}@media(max-width:600px){.app-guide-preview{padding:14px}.app-guide-toolbar{gap:6px}.app-guide-toolbar button{padding:8px 10px}}

.composer.composer{position:relative;overflow:visible}.composer-controls{overflow:hidden;border-radius:inherit}.inline-prompt-menu{position:absolute;bottom:calc(100% + 8px);left:0;right:0;z-index:15;background:var(--surface,#fff9ee);border:2px solid var(--ink);border-radius:10px;padding:10px;box-shadow:4px 4px 0 rgba(32,48,47,.12)}.inline-prompt-menu>p{font:800 12px var(--sans);margin:0 0 8px}.inline-prompt-menu>[role="listbox"]{max-height:240px;overflow:auto;display:grid;gap:4px}.inline-prompt-menu [role="option"]{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;width:100%;border:1px solid transparent;border-radius:6px;padding:8px 10px;background:transparent;color:var(--ink);cursor:pointer}.inline-prompt-menu [role="option"][aria-selected="true"]{background:var(--mint);border-color:var(--ink)}.inline-prompt-menu b{font:800 13px var(--sans);overflow-wrap:anywhere}.inline-prompt-menu small{font:500 11px/1.5 var(--sans);color:var(--muted);overflow-wrap:anywhere}.inline-prompt-menu>small{display:block;margin-top:8px}.inline-prompt-chip{display:flex;align-items:center;gap:10px;width:fit-content;max-width:100%;box-sizing:border-box;margin:0 0 8px;padding:6px 9px;background:var(--mint);border:1px solid var(--ink);border-radius:8px;font:800 12px var(--sans);overflow-wrap:anywhere}.inline-prompt-chip small{font-weight:500;color:var(--muted);margin-left:6px}.inline-prompt-chip button{border:0;background:transparent;color:var(--ink);cursor:pointer;font-size:18px;line-height:1}.inline-prompt-chip button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.message-inline-prompt{display:block;font:700 11px var(--sans);margin-bottom:7px;opacity:.8}#attach-inline-prompt{font-size:19px}

.inline-prompt-chip button{width:auto;flex:none;padding:0 2px}


.composer-controls #message-input:focus,.composer-controls #message-input:focus-visible{outline:none;outline-offset:0;box-shadow:none;border:0;caret-color:var(--ink)}.composer.composer:focus-within{outline:2px solid rgba(72,149,239,.28);outline-offset:2px}

.chat-control-undo{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--ink);border-radius:8px;background:var(--mint);font:600 13px var(--sans)}

.ai-tool-group-label{grid-column:1/-1;font:800 12px var(--sans);margin-top:8px;color:var(--muted)}
#mode-ai-tool-options{grid-template-columns:minmax(0,1fr);gap:8px}
.mode-ai-tool-group{min-width:0}
.mode-ai-tool-group-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0 8px;border-bottom:1px solid var(--line);margin-bottom:8px}
.mode-ai-tool-group-header h4{margin:0;color:var(--ink);font:800 12px var(--sans);letter-spacing:0}
.mode-ai-tool-group-count{flex:none;color:var(--muted);font:600 10px var(--sans);white-space:nowrap}
.mode-ai-tool-group-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
@media(max-width:620px){.mode-ai-tool-group-options{grid-template-columns:1fr}.mode-ai-tool-group-header{flex-wrap:wrap}.mode-ai-tool-group-count{margin-left:auto}}

.mode-available-section{display:block}.mode-available-section>summary{padding:10px 0}.mode-selected-count{display:inline-block;margin-inline-start:6px;padding:2px 7px;border-radius:999px;background:var(--mint);font:600 10px var(--sans);color:var(--ink)}.mode-available-content{display:grid;gap:8px;padding:4px 0 10px}

#conversation-search,#notes-search{width:100%;margin:16px 0}.saved-conversation-row{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:10px 0;background:var(--surface)}.saved-conversation-row h3{margin:0 0 4px;font:800 17px/1.3 var(--sans);overflow-wrap:anywhere}.saved-conversation-row p{margin:6px 0;overflow-wrap:anywhere;font:600 13px/1.45 var(--sans)}.saved-conversation-row small{display:block;color:var(--muted);font:500 11px/1.4 var(--sans)}.saved-conversation-buttons,.saved-conversation-notes,.conversation-linked-notes,.note-conversation-source{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0}.saved-conversation-row button,.conversation-note-marker button,.conversation-linked-notes button,.note-conversation-source button{padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:var(--mint);cursor:pointer;font:700 12px var(--sans)}.conversation-save-status{margin:8px 0;font:600 12px var(--sans);color:var(--muted)}.conversation-note-marker{margin:10px 0;padding:10px 14px;border:1px dashed var(--ink);border-radius:8px;display:flex;align-items:center;gap:12px;justify-content:space-between;background:var(--mint);font:500 12px var(--sans)}.conversation-note-marker span{overflow-wrap:anywhere}.saved-conversation-rename{display:flex;gap:8px;margin-top:12px}.conversation-linked-notes>span{font:700 12px var(--sans)}@media(max-width:600px){.chat-head>div{flex-wrap:wrap}.conversation-note-marker{flex-wrap:wrap}.saved-conversation-rename{flex-wrap:wrap}}

.conversation-save-status{overflow-wrap:anywhere}@media(max-width:700px){.topbar{height:auto;min-height:76px;flex-wrap:wrap;gap:10px;padding-block:12px}.topbar nav{max-width:100%;flex-wrap:wrap}}

.chat-head-actions #save-conversation:disabled{opacity:.45;cursor:not-allowed;border-color:var(--line)}

@media(max-width:600px){
  #chat>.chat-head{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:12px 10px}
  #chat .chat-head-actions{display:contents}
  #chat-back{grid-column:1;grid-row:1;justify-self:start}
  #chat-model{grid-column:2;grid-row:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
  #save-conversation{grid-column:1;grid-row:2;width:100%}
  #clear-chat{grid-column:2;grid-row:2;width:100%}
}

.saved-conversation-row > p:first-of-type { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.saved-conversation-row > [data-saved-status]:empty,.saved-conversation-row > .saved-conversation-notes:empty { display: none; }
.saved-conversation-row .saved-conversation-notes { gap: 6px; margin: 8px 0; font: 600 11px/1.4 var(--sans); }
.saved-conversation-row button { min-height: 30px; padding: 5px 8px; }
.saved-conversation-row>.saved-conversation-buttons{border-top:1px dashed var(--line);padding-top:8px;margin:8px 0 0;gap:6px;justify-content:flex-end}

.saved-conversation-row [data-saved-delete][data-confirm="yes"]{background:#ec7254;color:#fff}

#chat #conversation-save-status,#chat #conversation-linked-notes{display:none}

.saved-conversation-title-form{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}.saved-conversation-title-form input{flex:1;min-width:120px;padding:7px 10px;border:1.5px solid var(--ink);border-radius:7px 5px 8px 6px;background:var(--surface);color:var(--ink);font:800 17px var(--sans)}.saved-conversation-title-form input:focus{border-color:var(--blue)}

.saved-conversation-note-link{display:inline-flex;align-items:center;gap:6px;max-width:100%}.saved-conversation-note-link [data-saved-note]{min-width:0;overflow-wrap:anywhere;text-align:left}.saved-conversation-note-link [data-saved-unlink]{flex:none;background:var(--surface);color:var(--muted);font-size:11px}.saved-conversation-note-link [data-saved-unlink]:disabled{opacity:.45;cursor:not-allowed}

.saved-conversation-note-link [data-saved-unlink][data-confirm="yes"]{background:var(--coral-soft);color:var(--ink);border-color:var(--coral)}

#note-detail .note-conversation-source{display:none}

@media(max-width:700px){#app>header>.brand-area{flex-basis:100%}#app>header>nav{width:max-content;max-width:100%;margin-inline:auto;justify-content:center}}

.list-load-more{display:block;margin:20px auto;padding:10px 16px;border:1px solid var(--ink);border-radius:8px 6px 9px 7px;background:var(--surface);color:var(--ink);font:800 12px var(--sans);cursor:pointer}.list-load-more:disabled{opacity:.45;cursor:wait}.list-status{font:500 12px var(--sans);color:var(--muted)}.list-status:empty{display:none}

#home>.hero{min-height:0;padding:clamp(20px,4vw,30px) 0 20px}#home>.hero h1{max-width:none;font-size:clamp(17px,5vw,44px);line-height:1.15;letter-spacing:-.6px;white-space:nowrap}

.appearance-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.appearance-size{grid-column:1/-1}.appearance-size>span{display:flex;justify-content:space-between;gap:12px}.appearance-controls input[type="range"]{width:100%;padding:0;border:0;background:transparent;accent-color:var(--blue)}.appearance-preview-section h3{font:800 17px var(--sans);margin:22px 0 10px}.appearance-preview{padding:8px 10px 18px;overflow:hidden}.appearance-status{font:500 12px/1.6 var(--sans);min-height:20px}.appearance-form>.provider-form-actions{margin-top:14px}@media(max-width:600px){.appearance-controls{grid-template-columns:minmax(0,1fr)}.appearance-size{grid-column:auto}}

.appearance-controls option[value="inter"]{font-family:"Inter",sans-serif}
.appearance-controls option[value="literata"]{font-family:"Literata",sans-serif}
.appearance-controls option[value="atkinson"]{font-family:"Atkinson Hyperlegible Next",sans-serif}
.appearance-controls option[value="vazirmatn"]{font-family:"Vazirmatn",sans-serif}

.appearance-theme{grid-column:1/-1}

/* Full-width multiline Chat composer with controls on their own row. */
.composer.composer{background:var(--surface);min-width:0;border-radius:14px}
.composer-controls{display:flex;flex-direction:column;padding:12px;gap:8px;overflow:visible}
.composer-controls #message-input{display:block;width:100%;min-width:0;min-height:72px;max-height:calc(5 * 1.55em + 16px);margin:0;padding:8px 2px;border:0;border-radius:0;background:transparent;color:var(--ink);font:400 16px/1.55 var(--sans,Nunito,sans-serif);resize:none;box-sizing:border-box;overflow-y:hidden}
.composer-controls>.inline-prompt-chip{align-self:flex-start;max-width:100%;margin:0;padding:6px 9px;gap:8px}
.composer-controls>.inline-prompt-chip>span{min-width:0;overflow-wrap:anywhere}
.composer-controls>.inline-prompt-chip button{flex:none;width:24px;height:24px;padding:0;border:0;background:transparent;font-size:18px}
.composer-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:0}
.composer .composer-toolbar button{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);font:800 16px/1 var(--sans,Nunito,sans-serif);cursor:pointer}
.composer .composer-toolbar .attach-variable{font:800 12px/1 var(--mono,monospace)}
.composer .composer-toolbar .send-message{background:var(--green-soft);border-color:var(--ink);font-size:22px}
.composer .composer-toolbar button:not(:disabled):hover{background:var(--blue-soft)}
.composer .composer-toolbar button:not(:disabled):active{background:var(--mint)}
.composer .composer-toolbar button:disabled{opacity:.4;cursor:not-allowed}
.composer .variable-attachment-preview,.composer .image-attachment-preview{background:transparent;border-bottom:1px dashed var(--line);padding:10px 12px}
@media(max-width:510px){.composer-controls{padding:10px}.composer-toolbar{gap:6px}.inline-prompt-menu>[role="listbox"]{max-height:180px}}

.composer #variable-picker,.composer .inline-prompt-menu.is-picker{position:absolute;bottom:calc(100% + 8px);left:0;right:0;z-index:15;margin:0;padding:10px;border:2px solid var(--ink);border-radius:14px;background:var(--surface);box-shadow:4px 4px 0 rgba(32,48,47,.12);max-height:min(240px,50dvh);overflow:auto}
.inline-prompt-menu.is-picker>[role="group"]{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.composer .inline-prompt-menu.is-picker .prompt-badge{display:inline-flex;width:auto;max-width:100%;min-height:0;align-items:center;padding:6px 9px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer;font:700 11px var(--sans);text-align:left}
.composer .inline-prompt-menu.is-picker .prompt-badge[aria-pressed="true"]{border-color:var(--ink);background:var(--lilac)}
.inline-prompt-menu.is-picker .prompt-badge span{display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-width:0}
.composer .variable-picker b,.composer .inline-prompt-menu.is-picker .prompt-badge b{font:800 11px var(--sans)}.inline-prompt-menu.is-picker .prompt-badge small{font:500 10px/1.4 var(--sans);overflow-wrap:anywhere}

.composer .variable-attachment-preview button{background:transparent;border:0;color:var(--ink);box-shadow:none}

.composer .composer-toolbar button[aria-expanded="true"]:not(:disabled){background:var(--blue-soft);border-color:var(--ink)}

.chat-intro .chat-modes{margin-bottom:8px}

.composer .composer-toolbar .attach-image svg{width:18px;height:18px}

#chat-mode-title{letter-spacing:normal}

#appearance-panel,.appearance-form,.appearance-controls,.appearance-controls>label,.appearance-preview-section{min-width:0;max-width:100%}
.appearance-controls select{width:100%;min-width:0;max-width:100%}
.appearance-size>span{flex-wrap:wrap}
.appearance-preview{min-width:0;max-width:100%}
.appearance-form>.provider-form-actions{flex-wrap:wrap}
.appearance-form>.provider-form-actions button{min-width:0;white-space:normal;overflow-wrap:anywhere}
@media(max-width:600px){.settings-layout:has(#appearance-panel.active){grid-template-columns:minmax(0,1fr)}}

.category-row,.category-create { grid-template-columns: minmax(100px,1fr) 52px 52px; }
.category-row .category-emoji-input,.category-create .category-emoji-input { width: 52px; height: 38px; padding: 3px; text-align: center; font-size: 22px; }
@media(max-width:420px){.category-row,.category-create{grid-template-columns:minmax(80px,1fr) 44px 44px}.category-row .category-emoji-input,.category-create .category-emoji-input{width:44px}.category-create input[type="color"]{width:44px}}