/* ==========================================================
   Design "Atelier" — warm paper, ink and orange.
   Opt-in via Einstellungen > Design (body.design-atelier).
   Mirrors the editorial look of the landing page. Light-only:
   script.js keeps body.dark off while this design is active.
   ========================================================== */

body.design-atelier {
  --at-paper: #f4f2ed;
  --at-paper-deep: #ece8df;
  --at-card: #fffef9;
  --at-ink: #11110f;
  --at-ink-soft: #3a3833;
  --at-muted: #6f6b63;
  --at-faint: #9a958b;
  --at-line: rgba(17, 17, 15, 0.1);
  --at-line-strong: rgba(17, 17, 15, 0.18);
  --at-hover: rgba(17, 17, 15, 0.05);
  --at-orange: #ff6424;
  --at-orange-deep: #d9480f;
  --at-orange-tint: rgba(255, 100, 36, 0.1);
  --at-orange-glow: rgba(194, 65, 12, 0.32);

  color-scheme: light;
  --bg-0: var(--at-paper);
  --bg-1: var(--at-paper);
  --bg-2: var(--at-paper-deep);
  --line: var(--at-line);
  --text: var(--at-ink);
  --muted: var(--at-muted);
  --surface: rgba(17, 17, 15, 0.04);
  --surface-soft: rgba(17, 17, 15, 0.07);
  --glass-fill: rgba(255, 254, 249, 0.94);
  --glass-edge: var(--at-line);
  --glass-edge-soft: rgba(17, 17, 15, 0.07);
  --glass-highlight: rgba(255, 254, 249, 0.8);
  --shadow: 0 18px 44px -18px var(--at-orange-glow);
  --shadow-strong: 0 30px 70px -24px var(--at-orange-glow);
  --message-ai: transparent;
  --message-user: var(--at-ink);
  --button-bg: var(--at-ink);
  --button-text: var(--at-card);
  --link-color: var(--at-orange-deep);
  --link-hover-color: var(--at-orange);
  --accent: var(--at-orange);
  --primary-accent: var(--at-orange);
  --accent-rgb: 255, 100, 36;

  color: var(--at-ink);
  background-color: var(--at-paper);
  background-image:
    radial-gradient(60% 40% at 62% 108%, rgba(255, 100, 36, 0.16), transparent 70%),
    radial-gradient(40% 30% at 100% 0%, rgba(255, 201, 163, 0.22), transparent 70%);
  background-attachment: fixed;
}

body.design-atelier ::selection {
  color: var(--at-ink);
  background: rgba(255, 100, 36, 0.24);
}

/* Fixed orange dot grid behind the whole app, like the landing hero */
body.design-atelier .grid {
  opacity: 1;
  background-image: radial-gradient(rgba(255, 100, 36, 0.2) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 60% 45%, rgba(0, 0, 0, 0.25), #000 85%);
  mask-image: radial-gradient(ellipse 75% 70% at 60% 45%, rgba(0, 0, 0, 0.25), #000 85%);
}

body.design-atelier .backdrop-glow {
  display: none;
}

/* ---------- Sidebar ---------- */
body.design-atelier #sidebar,
body.design-atelier.sidebar-collapsed #sidebar {
  --ws-line: var(--at-line);
  --ws-hover: var(--at-hover);
  --ws-active: var(--at-orange-tint);
  --ws-faint: var(--at-faint);
  background: var(--at-card);
  border-color: var(--at-line);
  box-shadow: 1px 0 0 var(--at-line);
}

/* Mobile overlay sidebar: warm soft shadow, none while it is slid out of view */
@media (max-width: 980px) {
  body.design-atelier .sidebar {
    background: var(--at-card) !important;
    box-shadow: 0 0 40px rgba(17, 17, 15, 0.16) !important;
  }

  body.design-atelier.sidebar-collapsed .sidebar {
    box-shadow: none !important;
  }
}

body.design-atelier #sidebar .sidebar-logo {
  filter: none;
}

body.design-atelier #sidebar .sidebar-search-trigger,
body.design-atelier #sidebar .new-chat,
body.design-atelier #sidebar .sidebar-mode-switch .mode-chip {
  color: var(--at-ink-soft);
}

body.design-atelier #sidebar .sidebar-search-trigger:hover,
body.design-atelier #sidebar .new-chat:hover,
body.design-atelier #sidebar .sidebar-mode-switch .mode-chip:hover {
  color: var(--at-ink);
  background: var(--at-hover);
}

/* "Neue Unterhaltung" as the one ink pill in the sidebar */
body.design-atelier #sidebar .new-chat {
  margin: 0.15rem 0 0.35rem;
  color: var(--at-card);
  background: var(--at-ink);
  border-radius: 999px;
}

body.design-atelier #sidebar .new-chat .nav-icon {
  color: var(--at-orange);
}

body.design-atelier #sidebar .new-chat:hover {
  color: var(--at-card);
  background: var(--at-orange);
}

body.design-atelier #sidebar .new-chat:hover .nav-icon {
  color: var(--at-card);
}

/* Active entries: orange tint with an orange marker on the left */
body.design-atelier #sidebar .sidebar-mode-switch .mode-chip.active,
body.design-atelier #sidebar #chatList .chat-link.active {
  color: var(--at-ink);
  background:
    linear-gradient(var(--at-orange), var(--at-orange)) left center / 3px 56% no-repeat,
    var(--at-orange-tint) !important;
}

body.design-atelier #sidebar .mode-chip.active .nav-icon {
  color: var(--at-orange-deep);
}

body.design-atelier #sidebar #chatList .chat-link {
  color: var(--at-muted);
}

body.design-atelier #sidebar #chatList .chat-link:hover {
  color: var(--at-ink);
  background: var(--at-hover);
}

/* Editorial section label: small caps with tracking */
body.design-atelier #sidebar .section-label {
  padding-top: 0.4rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--at-orange-deep);
}

body.design-atelier .sidebar-foot,
body.design-atelier #sidebar .sidebar-foot {
  color: var(--at-ink);
  background: transparent;
  border-color: var(--at-line);
}

body.design-atelier .sidebar-foot p {
  color: var(--at-muted);
}

body.design-atelier .account-avatar {
  color: var(--at-card);
  background: var(--at-orange);
}

body.design-atelier .pro-badge {
  color: var(--at-card);
  background: var(--at-ink);
}

/* ---------- Menus & popovers ---------- */
body.design-atelier .account-menu,
body.design-atelier #commandSuggestions,
body.design-atelier .mention-suggestions {
  color: var(--at-ink);
  background: var(--at-card);
  border: 1px solid var(--at-line);
  box-shadow: 0 18px 44px -14px rgba(17, 17, 15, 0.22);
}

body.design-atelier .account-menu button {
  color: var(--at-ink-soft);
}

body.design-atelier .account-menu button:hover,
body.design-atelier #commandSuggestions .mention-item.active,
body.design-atelier #commandSuggestions .mention-item:hover {
  color: var(--at-ink);
  background: var(--at-orange-tint);
}

body.design-atelier .account-menu-divider {
  background: var(--at-line);
}

/* ---------- Toolbar & mode switch ---------- */
body.design-atelier .main-panel .toolbar #toolbarSessionTitle {
  color: var(--at-ink-soft);
}

body.design-atelier .toolbar-menu-btn {
  color: var(--at-ink);
}

body.design-atelier .mode-switcher-pill {
  background: var(--at-card);
  border: 1px solid var(--at-line);
  box-shadow: 0 6px 18px -10px rgba(17, 17, 15, 0.25);
}

body.design-atelier .mode-switch-btn {
  color: var(--at-muted);
}

body.design-atelier .mode-switch-btn:hover {
  color: var(--at-ink);
}

body.design-atelier .mode-switch-btn.active {
  color: var(--at-card);
  background: var(--at-ink);
}

/* ---------- Start screen ---------- */
body.design-atelier .main-panel.pristine-chat .pristine-brand strong {
  color: var(--at-ink);
  font-weight: 800;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

/* "MANETTI AI." — echoes "IDEAS THAT REACH." on the landing page */
body.design-atelier .main-panel.pristine-chat .pristine-brand strong::after {
  content: ".";
  color: var(--at-orange);
}

body.design-atelier .main-panel.pristine-chat .pristine-intro p {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--at-orange-deep);
}

/* Usage heatmap in orange steps */
body.design-atelier .usage-heatmap-cell,
body.design-atelier .usage-heatmap-legend i {
  background: rgba(17, 17, 15, 0.07);
}

body.design-atelier .usage-heatmap-cell:hover {
  outline-color: var(--at-orange);
}

body.design-atelier .usage-heatmap-cell[data-level="1"],
body.design-atelier .usage-heatmap-legend i[data-level="1"] {
  background: rgba(255, 100, 36, 0.25);
}

body.design-atelier .usage-heatmap-cell[data-level="2"],
body.design-atelier .usage-heatmap-legend i[data-level="2"] {
  background: rgba(255, 100, 36, 0.48);
}

body.design-atelier .usage-heatmap-cell[data-level="3"],
body.design-atelier .usage-heatmap-legend i[data-level="3"] {
  background: rgba(255, 100, 36, 0.74);
}

body.design-atelier .usage-heatmap-cell[data-level="4"],
body.design-atelier .usage-heatmap-legend i[data-level="4"] {
  background: var(--at-orange-deep);
}

body.design-atelier .usage-heatmap-legend {
  color: var(--at-muted);
}

body.design-atelier .heatmap-tooltip {
  background: var(--at-ink);
  border-color: var(--at-ink);
  box-shadow: 0 16px 40px -12px rgba(17, 17, 15, 0.45);
}

body.design-atelier .starter-chip {
  color: var(--at-ink);
  background: rgba(255, 254, 249, 0.75);
  border: 1px solid var(--at-line);
}

body.design-atelier .starter-chip:hover {
  background: var(--at-card);
  border-color: rgba(255, 100, 36, 0.5);
}

/* ---------- Composer ---------- */
body.design-atelier #composer {
  background: var(--at-card);
  border: 1px solid var(--at-line-strong);
  border-radius: 22px;
  box-shadow: 0 22px 50px -22px var(--at-orange-glow), 0 2px 6px rgba(17, 17, 15, 0.04);
}

body.design-atelier #composer:focus-within {
  border-color: rgba(255, 100, 36, 0.55) !important;
  box-shadow: 0 22px 50px -18px rgba(194, 65, 12, 0.42), 0 0 0 4px rgba(255, 100, 36, 0.12) !important;
}

body.design-atelier #composer .prompt-editor {
  color: var(--at-ink);
}

body.design-atelier #composer .prompt-editor:empty::before {
  color: var(--at-faint);
}

body.design-atelier .composer-toolbar-divider {
  background: var(--at-line);
}

body.design-atelier .composer-tool {
  color: var(--at-muted);
}

body.design-atelier .composer-tool:hover {
  color: var(--at-ink);
  background: var(--at-hover);
}

body.design-atelier .composer-tool.active {
  color: var(--at-orange-deep);
  background: var(--at-orange-tint);
  border-color: rgba(255, 100, 36, 0.35);
}

body.design-atelier .composer-send,
body.design-atelier .send-pill {
  color: #ffffff !important;
  background: var(--at-orange) !important;
  box-shadow: 0 6px 16px -4px rgba(255, 100, 36, 0.55) !important;
}

body.design-atelier .composer-send:hover,
body.design-atelier .send-pill:hover {
  background: #f2561a !important;
}

body.design-atelier #composer:has(.prompt-editor:empty) .composer-send {
  opacity: 0.4;
  box-shadow: none !important;
}

body.design-atelier .image-intent-confirmation {
  color: var(--at-ink);
}

/* Image create / edit bars share the composer look */
body.design-atelier #imageView .image-create,
body.design-atelier #imageEditView .image-create {
  background: var(--at-card);
  border: 1px solid var(--at-line-strong);
  border-radius: 22px;
  box-shadow: 0 22px 50px -22px var(--at-orange-glow), 0 2px 6px rgba(17, 17, 15, 0.04);
}

body.design-atelier #imageView .image-create:focus-within,
body.design-atelier #imageEditView .image-create:focus-within {
  border-color: rgba(255, 100, 36, 0.55);
  box-shadow: 0 22px 50px -18px rgba(194, 65, 12, 0.42), 0 0 0 4px rgba(255, 100, 36, 0.12);
}

body.design-atelier #imageForm input,
body.design-atelier #imageEditForm input[type="text"] {
  color: var(--at-ink);
}

body.design-atelier #imageForm input::placeholder,
body.design-atelier #imageEditForm input[type="text"]::placeholder {
  color: var(--at-faint);
}

body.design-atelier #imageForm .image-tool,
body.design-atelier #imageEditForm .image-tool {
  color: var(--at-muted);
}

body.design-atelier #imageForm .image-tool:hover,
body.design-atelier #imageEditForm .image-tool:hover {
  color: var(--at-ink);
  background: var(--at-hover);
}

body.design-atelier #imageForm select.image-tool option {
  color: var(--at-ink);
  background: var(--at-card);
}

body.design-atelier .image-submit {
  color: #ffffff !important;
  background: var(--at-orange) !important;
  box-shadow: 0 6px 16px -4px rgba(255, 100, 36, 0.55);
}

body.design-atelier .image-submit:hover {
  background: #f2561a !important;
}

body.design-atelier #imageView .image-regenerate:hover,
body.design-atelier #imageEditView .image-regenerate:hover {
  color: var(--at-ink);
  background: var(--at-hover);
}

/* ---------- Messages ---------- */
body.design-atelier #messages {
  --chat-line: var(--at-line);
  --chat-faint: var(--at-faint);
}

body.design-atelier #messages .msg.ai {
  color: var(--at-ink-soft);
}

body.design-atelier #messages .msg.user {
  color: var(--at-card);
  background: var(--at-ink);
  border-radius: 20px 20px 4px 20px;
}

body.design-atelier #messages .msg.user a {
  color: #ffb27d;
}

body.design-atelier #messages .msg-content h1,
body.design-atelier #messages .msg-content h2,
body.design-atelier #messages .msg-content h3,
body.design-atelier #messages .msg-content h4,
body.design-atelier #messages .msg-content strong {
  color: var(--at-ink);
}

body.design-atelier #messages .msg-content li::marker {
  color: var(--at-orange);
}

body.design-atelier #messages .msg-content blockquote {
  border-left-color: var(--at-orange);
  color: var(--at-muted);
}

body.design-atelier #messages .msg.ai .msg-content a {
  color: var(--at-orange-deep);
  text-decoration-color: rgba(217, 72, 15, 0.35);
}

body.design-atelier #messages .msg-content :not(pre) > code {
  color: var(--at-orange-deep);
  background: var(--at-orange-tint);
}

/* Code blocks stay dark: ink slab on paper */
body.design-atelier #messages pre.msg-code {
  color: #f1ede6;
  background: var(--at-ink);
  border-color: var(--at-ink);
}

body.design-atelier #messages pre.msg-code::before {
  color: #ff9a6b;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.design-atelier #messages .msg-code-copy {
  color: #b7b1a6;
}

body.design-atelier #messages .msg-code-copy:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

body.design-atelier #messages .msg-content table {
  border-color: var(--at-line);
}

body.design-atelier #messages .msg-content th {
  color: var(--at-ink);
  background: var(--at-paper-deep);
}

body.design-atelier .msg-model {
  color: var(--at-faint);
}

body.design-atelier .scroll-to-bottom-btn {
  color: var(--at-ink);
  background: var(--at-card);
  border: 1px solid var(--at-line);
  box-shadow: 0 8px 20px -10px rgba(17, 17, 15, 0.3);
}

body.design-atelier .code-mode-banner {
  color: var(--at-ink);
  background: var(--at-card);
  border-color: var(--at-line);
}

/* ---------- Modals: settings, search ---------- */
body.design-atelier .settings-modal-backdrop,
body.design-atelier .search-modal-backdrop {
  background: rgba(17, 17, 15, 0.28);
}

body.design-atelier .settings-modal,
body.design-atelier .search-modal {
  color: var(--at-ink);
  background: var(--at-paper);
  border: 1px solid var(--at-line);
  box-shadow: 0 30px 80px -30px rgba(17, 17, 15, 0.4);
}

body.design-atelier .settings-nav button {
  color: var(--at-muted);
}

body.design-atelier .settings-nav button:hover {
  color: var(--at-ink);
  background: var(--at-hover);
}

body.design-atelier .settings-nav button.active {
  color: var(--at-card);
  background: var(--at-ink);
}

body.design-atelier .settings-nav button.active span {
  color: var(--at-orange);
}

body.design-atelier .settings-panel-head h3 {
  color: var(--at-ink);
  letter-spacing: -0.02em;
}

body.design-atelier .settings-subtitle,
body.design-atelier .settings-card-info p,
body.design-atelier .settings-card-info small {
  color: var(--at-muted);
}

body.design-atelier .settings-card-row,
body.design-atelier .settings-input,
body.design-atelier .settings-textarea,
body.design-atelier .search-modal-input-wrap {
  color: var(--at-ink);
  background: var(--at-card);
  border-color: var(--at-line);
}

body.design-atelier .settings-input:focus,
body.design-atelier .settings-textarea:focus {
  border-color: rgba(255, 100, 36, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 100, 36, 0.12);
  outline: none;
}

body.design-atelier .settings-switch-pill {
  background: var(--at-paper-deep);
  border-color: var(--at-line-strong);
}

body.design-atelier .settings-switch-label input:checked + .settings-switch-pill {
  background: var(--at-orange) !important;
  border-color: var(--at-orange) !important;
}

body.design-atelier .segmented-control {
  background: var(--at-paper-deep);
  border-color: var(--at-line);
}

body.design-atelier .segmented-control button {
  color: var(--at-muted);
}

body.design-atelier .segmented-control button.active {
  color: var(--at-card) !important;
  background: var(--at-ink) !important;
  box-shadow: none !important;
}

body.design-atelier .settings-btn-primary {
  color: var(--at-card) !important;
  background: var(--at-ink) !important;
  box-shadow: none !important;
}

body.design-atelier .settings-btn-primary:hover {
  background: var(--at-orange) !important;
}

body.design-atelier .settings-progress-fill {
  background: var(--at-orange) !important;
}

body.design-atelier .theme-choice-grid button,
body.design-atelier .design-choice-grid button {
  color: var(--at-ink);
  background: var(--at-card);
  border-color: var(--at-line);
}

body.design-atelier .theme-choice-grid button.active,
body.design-atelier .design-choice-grid button.active {
  border-color: var(--at-orange) !important;
  box-shadow: 0 0 0 3px rgba(255, 100, 36, 0.18) !important;
}

body.design-atelier .design-choice-text small,
body.design-atelier .theme-choice-grid small {
  color: var(--at-muted);
}

/* Colour mode and accent are paused while Atelier is active */
body.design-atelier .design-override-hint {
  display: block;
  margin: 0;
  padding: 0.75rem 0.9rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--at-ink-soft);
  background: var(--at-orange-tint);
  border: 1px solid rgba(255, 100, 36, 0.3);
  border-radius: 12px;
}

body.design-atelier #themeChoiceGrid,
body.design-atelier #accentColorGrid {
  opacity: 0.4;
  pointer-events: none;
}

body.design-atelier .theme-toggle {
  display: none;
}

/* ---------- Agent modal ---------- */
body.design-atelier .agent-modal {
  color: var(--at-ink);
  background: var(--at-paper);
  border: 1px solid var(--at-line);
}

body.design-atelier .agent-save-btn {
  color: var(--at-card);
  background: var(--at-ink);
}

body.design-atelier .agent-save-btn:hover {
  background: var(--at-orange);
}

/* ---------- Notebook (notes.css tokens) ---------- */
body.design-atelier .nb-app {
  --nb-bg: var(--at-paper);
  --nb-nav-bg: var(--at-card);
  --nb-page-default: var(--at-card);
  --nb-line: rgba(17, 17, 15, 0.1);
  --nb-hover: var(--at-hover);
  --nb-active: var(--at-orange-tint);
  --nb-field: rgba(17, 17, 15, 0.045);
  --nb-ink: var(--at-ink);
  --nb-text: var(--at-ink-soft);
  --nb-strong: var(--at-ink);
  --nb-muted: var(--at-muted);
  --nb-faint: var(--at-faint);
  --nb-paper-line: rgba(255, 100, 36, 0.16);
  --nb-accent: var(--at-orange-deep);
  --nb-focus: var(--at-orange);
  --nb-pop: var(--at-card);
  --nb-shadow: 0 10px 30px -10px rgba(17, 17, 15, 0.22), 0 1px 3px rgba(17, 17, 15, 0.06);
}

/* ---------- Scrollbars ---------- */
body.design-atelier ::-webkit-scrollbar-thumb {
  background: rgba(17, 17, 15, 0.16);
}

body.design-atelier ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 100, 36, 0.55);
}