/* Claude (claude.ai, Oct 2026) — components. Built only from claude-tokens.css. Study copy; Claude belongs to Anthropic.
   Every part has hover, focus-visible, pressed (:active / aria-pressed), selected (aria-selected / aria-current) and disabled states.
   No decorative pseudo-element drawings: parts copy cleanly into Figma. Class prefix: cl-. */

.cl-root { font-family: var(--cl-font-sans); font-size: var(--cl-fs-body); line-height: var(--cl-lh-body); color: var(--cl-text); background: var(--cl-page);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; letter-spacing: var(--cl-sans-track); }
.cl-serif, .cl-msg-claude, .cl-greet, .cl-page-head h1 { letter-spacing: 0; font-variation-settings: "opsz" var(--cl-serif-opsz); }
.cl-root *, .cl-root *::before, .cl-root *::after { box-sizing: border-box; }
:where(.cl-root) :where(button, input, textarea, select) { font: inherit; color: inherit; letter-spacing: inherit; }
.cl-ico { width: var(--cl-icon); height: var(--cl-icon); flex: none; display: inline-block; vertical-align: middle; }
.cl-ico-sm { width: var(--cl-icon-sm); height: var(--cl-icon-sm); }
.cl-serif { font-family: var(--cl-font-serif); }
.cl-mono { font-family: var(--cl-font-mono); }
.cl-muted { color: var(--cl-text-3); }
.cl-sub { color: var(--cl-text-2); }
.cl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cl-root :focus-visible { outline: none; box-shadow: var(--cl-focus); }

/* ---------- Buttons (real: 15px/22, radius 10, height 40 on the login page; 32 in the app) ---------- */
.cl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--cl-h-control); padding: 0 12px; border: 0; border-radius: var(--cl-radius);
  background: transparent; color: var(--cl-text); font-size: var(--cl-fs-body); line-height: var(--cl-lh-body); font-weight: var(--cl-w-medium); font-variation-settings: var(--cl-wght-medium);
  cursor: pointer; white-space: nowrap; user-select: none; text-decoration: none;
  transition: background-color var(--cl-dur-default) var(--cl-ease-standard), box-shadow var(--cl-dur-default) var(--cl-ease-standard), transform var(--cl-dur-snap) var(--cl-ease-snap), color var(--cl-dur-default) var(--cl-ease-standard); }
.cl-btn { transition: background-color var(--cl-dur-default) var(--cl-ease-standard), box-shadow var(--cl-dur-default) var(--cl-ease-standard), color var(--cl-dur-default) var(--cl-ease-standard), transform var(--cl-dur-slow) var(--cl-btn-spring); }
.cl-btn:active:not(:disabled) { transform: scale(var(--cl-press)); transition-duration: var(--cl-dur-fast); transition-timing-function: ease-out; }
.cl-btn:disabled, .cl-btn[aria-disabled="true"] { opacity: .4; cursor: default; }
.cl-btn--primary { background: var(--cl-primary); color: var(--cl-on-primary); }
.cl-btn--primary:hover:not(:disabled) { background: var(--cl-primary-hover); }
.cl-btn--secondary { background: var(--cl-secondary); box-shadow: var(--cl-secondary-ring); font-weight: var(--cl-w-regular); font-variation-settings: var(--cl-wght-regular); }
.cl-btn--secondary:hover:not(:disabled) { background: var(--cl-secondary-hover); }
.cl-btn--secondary[aria-pressed="true"] { background: var(--cl-selected); }
.cl-btn--ghost:hover:not(:disabled) { background: var(--cl-hover); }
.cl-btn--ghost[aria-pressed="true"], .cl-btn--ghost[aria-expanded="true"] { background: var(--cl-selected); }
.cl-btn--brand { background: var(--cl-brand); color: var(--cl-on-brand); }
.cl-btn--brand:hover:not(:disabled) { background: var(--cl-brand-hover); }
.cl-btn--danger { background: var(--cl-danger); color: #fff; }
.cl-btn--danger:hover:not(:disabled) { background: var(--cl-red-400); }
.cl-btn--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--cl-border); font-weight: var(--cl-w-regular); font-variation-settings: var(--cl-wght-regular); }
.cl-btn--outline:hover:not(:disabled) { background: var(--cl-hover); }
.cl-btn--sm { height: var(--cl-h-control-sm); padding: 0 10px; border-radius: var(--cl-radius-sm); font-size: var(--cl-fs-footnote); }
.cl-btn--lg { height: var(--cl-h-control-lg); padding: 0 16px; border-radius: var(--cl-radius-lg); font-size: var(--cl-fs-control); line-height: var(--cl-lh-control); }
.cl-btn--block { width: 100%; }
.cl-icon-btn { display: inline-grid; place-items: center; width: var(--cl-h-control); height: var(--cl-h-control); padding: 0; border: 0; border-radius: var(--cl-radius); background: transparent; color: var(--cl-text-2); cursor: pointer;
  transition: background-color var(--cl-dur-default) var(--cl-ease-standard), color var(--cl-dur-default) var(--cl-ease-standard), transform var(--cl-dur-snap) var(--cl-ease-snap); }
.cl-icon-btn:hover:not(:disabled) { background: var(--cl-hover); color: var(--cl-text); }
.cl-icon-btn:active:not(:disabled) { transform: scale(.94); }
.cl-icon-btn[aria-pressed="true"], .cl-icon-btn[aria-expanded="true"] { background: var(--cl-selected); color: var(--cl-text); }
.cl-icon-btn:disabled { opacity: .4; cursor: default; }
.cl-icon-btn--sm { width: var(--cl-h-control-sm); height: var(--cl-h-control-sm); }
.cl-icon-btn--lg { width: var(--cl-h-control-lg); height: var(--cl-h-control-lg); }
.cl-send { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--cl-radius); background: var(--cl-brand); color: var(--cl-on-brand); cursor: pointer;
  transition: background-color var(--cl-dur-default) var(--cl-ease-standard), opacity var(--cl-dur-default), transform var(--cl-dur-snap) var(--cl-ease-snap); }
.cl-send:hover:not(:disabled) { background: var(--cl-brand-hover); }
.cl-send:active:not(:disabled) { transform: scale(.94); }
.cl-send:disabled { opacity: .45; cursor: default; }
.cl-send--stop { background: transparent; color: var(--cl-text); }
.cl-send--stop:hover:not(:disabled) { background: var(--cl-hover); }

/* ---------- Fields ---------- */
.cl-input { display: block; width: 100%; height: var(--cl-h-control-lg); padding: 0 12px; border: 0; border-radius: var(--cl-radius-lg); background: var(--cl-field);
  box-shadow: var(--cl-ring), var(--cl-shadow-field); font-size: var(--cl-fs-control); line-height: var(--cl-lh-control); color: var(--cl-text);
  transition: box-shadow var(--cl-dur-default) var(--cl-ease-standard); }
.cl-input::placeholder, .cl-textarea::placeholder { color: var(--cl-text-3); }
.cl-input:hover:not(:disabled) { box-shadow: 0 0 0 1px var(--cl-border-strong), var(--cl-shadow-field); }
.cl-input:focus-visible, .cl-textarea:focus-visible { box-shadow: var(--cl-focus); outline: none; }
.cl-input[aria-invalid="true"] { box-shadow: 0 0 0 1px var(--cl-danger); }
.cl-input:disabled { opacity: .4; }
.cl-input--sm { height: var(--cl-h-control); font-size: var(--cl-fs-body); border-radius: var(--cl-radius); }
.cl-textarea { display: block; width: 100%; min-height: 96px; padding: 10px 12px; border: 0; border-radius: var(--cl-radius-lg); background: var(--cl-field); box-shadow: var(--cl-ring);
  font-size: var(--cl-fs-body); line-height: var(--cl-lh-body); resize: vertical; }
.cl-label { display: block; margin: 0 0 6px; font-size: var(--cl-fs-body); font-weight: var(--cl-w-medium); font-variation-settings: var(--cl-wght-medium); }
.cl-help { margin: 6px 0 0; font-size: var(--cl-fs-footnote); color: var(--cl-text-2); }
.cl-select { display: inline-flex; align-items: center; gap: 6px; height: var(--cl-h-control); padding: 0 8px 0 12px; border: 0; border-radius: var(--cl-radius); background: var(--cl-surface); box-shadow: var(--cl-ring); cursor: pointer; }
.cl-select:hover { background: var(--cl-hover); }

/* switch (real: track alpha-3, on = accent, knob white, height 20) */
.cl-switch { position: relative; display: inline-flex; flex: none; width: 36px; height: var(--cl-switch-h); padding: 2px; border: 0; border-radius: 999px; background: var(--cl-control-hover); cursor: pointer;
  transition: background-color var(--cl-dur-base) var(--cl-ease-out); }
.cl-switch:hover { background: rgb(11 11 11 / .35); }
html.cl-dark .cl-switch:hover { background: rgb(255 255 255 / .3); }
.cl-switch > span { width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: transform var(--cl-dur-base) var(--cl-ease-snap); }
.cl-switch[aria-checked="true"] { background: var(--cl-accent); }
.cl-switch[aria-checked="true"]:hover { background: var(--cl-accent-hover); }
.cl-switch[aria-checked="true"] > span { transform: translateX(16px); }
.cl-switch:disabled { opacity: .4; cursor: default; }
.cl-check { display: inline-grid; place-items: center; width: var(--cl-checkbox); height: var(--cl-checkbox); flex: none; border: 0; border-radius: var(--cl-checkbox-radius); background: transparent; box-shadow: inset 0 0 0 1.5px var(--cl-border-stronger); cursor: pointer; color: #fff; padding: 0; }
.cl-check:hover { background: var(--cl-hover); }
.cl-check svg { opacity: 0; width: 16px; height: 16px; transition: opacity var(--cl-dur-snap); }
.cl-check[aria-checked="true"] { background: var(--cl-accent); box-shadow: none; }
.cl-check[aria-checked="true"] svg { opacity: 1; }
.cl-radio { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--cl-border-stronger); cursor: pointer; padding: 0; }
.cl-radio > span { width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform var(--cl-dur-snap) var(--cl-ease-snap); }
.cl-radio[aria-checked="true"] { background: var(--cl-accent); box-shadow: none; }
.cl-radio[aria-checked="true"] > span { transform: scale(1); }

/* segmented control (real: track alpha-1, thumb = popover surface) */
.cl-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--cl-radius-lg); background: var(--cl-hover); }
.cl-seg > button { height: 28px; padding: 0 12px; border: 0; border-radius: var(--cl-radius); background: transparent; color: var(--cl-text-2); cursor: pointer; font-weight: var(--cl-w-medium); font-variation-settings: var(--cl-wght-medium);
  transition: background-color var(--cl-dur-base) var(--cl-ease-out), color var(--cl-dur-base); }
.cl-seg > button:hover { color: var(--cl-text); }
.cl-seg > button[aria-pressed="true"] { background: var(--cl-popover); color: var(--cl-text); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 0 0 .5px var(--cl-border); }
html.cl-dark .cl-seg > button[aria-pressed="true"] { background: var(--cl-control); }

/* chips, badges, tags */
.cl-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--cl-hover); color: var(--cl-text-2); font-size: var(--cl-fs-caption); line-height: 1; font-weight: var(--cl-w-medium); font-variation-settings: var(--cl-wght-medium); }
.cl-badge--accent { background: var(--cl-accent-bg); color: var(--cl-accent-text); }
.cl-badge--pro { background: var(--cl-pro-bg); color: var(--cl-pro-text); }
.cl-badge--success { background: var(--cl-success-bg); color: var(--cl-success-text); }
.cl-badge--warning { background: var(--cl-warning-bg); color: var(--cl-warning-text); }
.cl-badge--danger { background: var(--cl-danger-bg); color: var(--cl-danger-text); }
.cl-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--cl-radius); background: transparent; box-shadow: var(--cl-ring); color: var(--cl-text-2); cursor: pointer; font-size: var(--cl-fs-body);
  transition: background-color var(--cl-dur-default), color var(--cl-dur-default); }
.cl-chip:hover { background: var(--cl-hover); color: var(--cl-text); }
.cl-chip[aria-pressed="true"] { background: var(--cl-selected); color: var(--cl-text); }
.cl-kbd { display: inline-flex; align-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent); color: var(--cl-text-3); font-size: 11px; font-family: var(--cl-font-sans); }
.cl-avatar { display: inline-grid; place-items: center; width: var(--cl-avatar-md); height: var(--cl-avatar-md); flex: none; border-radius: 50%; background: var(--cl-text); color: var(--cl-page); font-size: 13px; font-weight: var(--cl-w-semibold); font-variation-settings: "wght" 580; }
.cl-avatar--sm { width: var(--cl-avatar-sm); height: var(--cl-avatar-sm); font-size: 11px; }
.cl-tile { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 7px; }
.cl-tile--docs { background: var(--cl-chip-docs); color: var(--cl-ico-docs); }
.cl-tile--slides { background: var(--cl-chip-slides); color: var(--cl-ico-slides); }
.cl-tile--design { background: var(--cl-chip-design); color: var(--cl-ico-design); }

/* ---------- Overlays ---------- */
.cl-menu { position: absolute; z-index: var(--cl-z-popover); min-width: 220px; padding: 6px; border-radius: var(--cl-radius-panel); background: var(--cl-popover); box-shadow: var(--cl-ring), var(--cl-shadow-popover); color: var(--cl-text);
  transform-origin: var(--cl-origin, top left); animation: cl-pop var(--cl-dur-base) var(--cl-ease-out); }
.cl-menu[hidden] { display: none; }
.cl-menu--lg { border-radius: var(--cl-radius-menu); padding: 8px; }
.cl-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: var(--cl-radius); background: transparent; color: inherit; text-align: left; cursor: pointer; font-size: var(--cl-fs-body); line-height: var(--cl-lh-body); text-decoration: none; }
.cl-menu-item:hover, .cl-menu-item[data-active="true"] { background: var(--cl-hover); }
.cl-menu-item[aria-checked="true"] .cl-menu-check { opacity: 1; }
.cl-menu-item:disabled { opacity: .4; cursor: default; }
.cl-menu-item .cl-ico { color: var(--cl-text-2); }
.cl-menu-item .cl-tile .cl-ico, .cl-tile .cl-ico { color: inherit; }
.cl-menu-item .end { margin-left: auto; color: var(--cl-text-3); font-size: var(--cl-fs-footnote); }
.cl-menu-item .desc { display: block; color: var(--cl-text-3); font-size: var(--cl-fs-footnote); line-height: var(--cl-lh-footnote); }
.cl-menu-item--danger, .cl-menu-item--danger .cl-ico { color: var(--cl-danger-text); }
.cl-menu-check { margin-left: auto; opacity: 0; color: var(--cl-accent); }
.cl-menu-sep { height: 1px; margin: 6px 4px; background: var(--cl-border); }
.cl-menu-label { padding: 8px 10px 4px; color: var(--cl-text-3); font-size: var(--cl-fs-caption); }
@keyframes cl-pop { from { opacity: 0; transform: scale(.97) translateY(-2px); } to { opacity: 1; transform: none; } }
.cl-tip { position: absolute; z-index: var(--cl-z-tooltip); padding: 5px 8px; border-radius: 6px; background: var(--cl-tooltip-bg); color: var(--cl-tooltip-fg); font-size: var(--cl-fs-caption); line-height: 16px; white-space: nowrap; pointer-events: none;
  display: inline-flex; gap: 6px; align-items: center; animation: cl-fade var(--cl-dur-snap) var(--cl-ease-out); }
.cl-tip .cl-kbd { color: inherit; opacity: .7; height: 16px; min-width: 16px; }
@keyframes cl-fade { from { opacity: 0; } to { opacity: 1; } }
.cl-toast { position: fixed; z-index: var(--cl-z-toast); left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: var(--cl-radius-card);
  background: var(--cl-popover); color: var(--cl-text); box-shadow: var(--cl-ring), var(--cl-shadow-popover); font-size: var(--cl-fs-body); animation: cl-toast-in var(--cl-dur-sheet) var(--cl-ease-snap); }
.cl-toast .cl-btn { height: 28px; }
@keyframes cl-toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.cl-backdrop { position: fixed; inset: 0; z-index: var(--cl-z-modal); display: grid; place-items: center; padding: 24px; background: var(--cl-backdrop); animation: cl-fade var(--cl-dur-base) var(--cl-ease-out); }
.cl-backdrop[hidden] { display: none; }
.cl-dialog { position: relative; width: min(100%, 512px); max-height: calc(100vh - 48px); overflow: auto; padding: 24px; border-radius: 16px; background: var(--cl-popover); color: var(--cl-text); box-shadow: var(--cl-ring), var(--cl-shadow-lg);
  animation: cl-dialog-in var(--cl-dur-sheet) var(--cl-ease-snap); }
.cl-dialog h2 { margin: 0 0 6px; font-size: var(--cl-fs-title); line-height: var(--cl-lh-title); font-weight: var(--cl-w-medium); font-variation-settings: var(--cl-wght-medium); }
.cl-dialog .cl-dialog-sub { margin: 0 0 20px; color: var(--cl-text-2); font-size: var(--cl-fs-control); line-height: var(--cl-lh-control); }
.cl-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.cl-dialog-x { position: absolute; top: 16px; right: 16px; }
@keyframes cl-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- App frame ---------- */
.cl-app { position: relative; display: flex; width: 100%; height: 100%; overflow: hidden; background: var(--cl-page); }
.cl-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cl-side { flex: none; width: var(--cl-sidebar-w); height: 100%; display: flex; flex-direction: column; background: var(--cl-sidebar); box-shadow: inset -1px 0 0 var(--cl-border);
  transition: width var(--cl-dur-sheet) var(--cl-ease-snap); overflow: hidden; }
.cl-side[data-state="rail"] { width: var(--cl-sidebar-rail); }
.cl-side[data-state="hidden"] { width: 0; box-shadow: none; }
.cl-side-top { display: flex; align-items: center; gap: 4px; height: 52px; padding: 0 10px; flex: none; }
.cl-side-brand { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; height: 32px; border-radius: var(--cl-radius); font-family: var(--cl-font-serif); font-size: 20px; letter-spacing: -.01em; color: var(--cl-text); text-decoration: none; white-space: nowrap; }
.cl-side-brand:hover { background: var(--cl-hover); }
.cl-side-modes { display: flex; gap: 2px; margin: 4px 10px 8px; padding: 2px; border-radius: var(--cl-radius-lg); background: var(--cl-hover); }
.cl-side-modes > button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; border: 0; border-radius: var(--cl-radius); background: transparent; color: var(--cl-text-2); cursor: pointer; font-size: var(--cl-fs-footnote); }
.cl-side-modes > button:hover { color: var(--cl-text); }
.cl-side-modes > button[aria-pressed="true"] { background: var(--cl-popover); color: var(--cl-text); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 0 0 .5px var(--cl-border); }
html.cl-dark .cl-side-modes > button[aria-pressed="true"] { background: var(--cl-control); }
.cl-side-nav { display: flex; flex-direction: column; gap: 1px; padding: 0 8px; }
.cl-nav-item { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 8px; border: 0; border-radius: var(--cl-radius); background: transparent; color: var(--cl-text); text-decoration: none; cursor: pointer; white-space: nowrap; font-size: var(--cl-fs-body); text-align: left; width: 100%;
  transition: background-color var(--cl-dur-default) var(--cl-ease-standard); }
.cl-nav-item .cl-ico { color: var(--cl-text-2); }
.cl-nav-item:hover { background: var(--cl-hover); }
.cl-nav-item[aria-current="page"], .cl-nav-item[aria-selected="true"] { background: var(--cl-selected); }
.cl-nav-item .lbl { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.cl-nav-item--new .cl-ico { color: var(--cl-brand); }
.cl-side-label { padding: 16px 16px 6px; color: var(--cl-text-3); font-size: var(--cl-fs-caption); white-space: nowrap; }
.cl-side-list { flex: 1; min-height: 0; overflow: auto; padding: 0 8px 8px; }
.cl-side-list .cl-nav-item { height: 32px; color: var(--cl-text); }
.cl-side-list .cl-nav-item .more { opacity: 0; margin-right: -4px; }
.cl-side-list .cl-nav-item:hover .more, .cl-side-list .cl-nav-item:focus-within .more { opacity: 1; }
.cl-side-foot { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; box-shadow: inset 0 1px 0 var(--cl-border); }
.cl-side-foot .who { min-width: 0; flex: 1; }
.cl-side-foot .who b { display: block; font-weight: var(--cl-w-medium); font-variation-settings: var(--cl-wght-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-side-foot .who span { display: block; color: var(--cl-text-3); font-size: var(--cl-fs-caption); }
.cl-side[data-state="rail"] .lbl, .cl-side[data-state="rail"] .cl-side-label, .cl-side[data-state="rail"] .cl-side-list, .cl-side[data-state="rail"] .cl-side-modes, .cl-side[data-state="rail"] .who, .cl-side[data-state="rail"] .cl-side-brand span { display: none; }
.cl-top { display: flex; align-items: center; gap: 6px; height: 52px; padding: 0 12px; flex: none; }
.cl-title-btn { display: inline-flex; align-items: center; gap: 4px; height: 32px; max-width: 420px; padding: 0 8px; border: 0; border-radius: var(--cl-radius); background: transparent; color: var(--cl-text); cursor: pointer; font-size: var(--cl-fs-body); }
.cl-title-btn:hover, .cl-title-btn[aria-expanded="true"] { background: var(--cl-hover); }
.cl-title-btn .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Home ---------- */
.cl-home { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 0 24px; overflow: auto; }
.cl-greet { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 24px; font-family: var(--cl-font-serif); font-weight: 420;
  font-size: var(--cl-fs-greeting); line-height: var(--cl-lh-greeting); letter-spacing: -.02em; color: var(--cl-text); text-align: center; }
.cl-greet .cl-spark { width: .86em; height: .86em; }
.cl-spark { display: inline-block; flex: none; color: var(--cl-clay); }
.cl-spark--busy { animation: cl-spin 1.6s var(--cl-ease-standard) infinite; }
@keyframes cl-spin { to { transform: rotate(360deg); } }

/* ---------- Composer (measured: radius 20, white, 1px ring, soft lift) ---------- */
.cl-composer { position: relative; width: 100%; max-width: var(--cl-thread-w); border-radius: var(--cl-radius-composer); background: var(--cl-surface); box-shadow: var(--cl-shadow-composer);
  transition: box-shadow var(--cl-dur-base) var(--cl-ease-out); }
.cl-composer:hover { box-shadow: 0 0 0 1px var(--cl-border-strong), 0 4px 20px rgb(11 11 11 / .05); }
html.cl-dark .cl-composer:hover { box-shadow: inset 0 0 0 1px var(--cl-border-strong), 0 4px 20px rgb(0 0 0 / .3); }
.cl-composer:focus-within { box-shadow: 0 0 0 1px var(--cl-border-strong), 0 6px 24px rgb(11 11 11 / .06); }
html.cl-dark .cl-composer:focus-within { box-shadow: inset 0 0 0 1px var(--cl-border-strong), 0 6px 24px rgb(0 0 0 / .35); }
.cl-composer textarea { display: block; width: 100%; min-height: 48px; max-height: 320px; padding: 18px 20px 6px; border: 0; background: transparent; resize: none; outline: none; box-shadow: none !important;
  font-size: var(--cl-fs-prose); line-height: var(--cl-lh-prose); color: var(--cl-text); }
.cl-composer textarea::placeholder { color: var(--cl-text-3); }
.cl-composer-bar { display: flex; align-items: center; gap: 4px; padding: 6px 10px 10px; }
.cl-composer-bar .grow { flex: 1; }
.cl-composer-files { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px 0; }
.cl-file { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px 0 6px; border-radius: var(--cl-radius-lg); background: var(--cl-page); box-shadow: var(--cl-ring); font-size: var(--cl-fs-footnote); }
.cl-file .meta { color: var(--cl-text-3); font-size: var(--cl-fs-caption); display: block; }
.cl-under { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; max-width: var(--cl-thread-w); padding: 10px 12px 0; }
.cl-under .grow { flex: 1; }
.cl-pick { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px; border: 0; border-radius: var(--cl-radius); background: transparent; color: var(--cl-text-2); cursor: pointer; font-size: var(--cl-fs-control); white-space: nowrap;
  transition: background-color var(--cl-dur-default), color var(--cl-dur-default); }
.cl-pick:hover, .cl-pick[aria-expanded="true"] { background: var(--cl-hover); color: var(--cl-text); }
.cl-pick .cl-ico-sm { color: var(--cl-text-3); }
.cl-model { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border: 0; border-radius: var(--cl-radius); background: transparent; color: var(--cl-text); cursor: pointer; font-size: var(--cl-fs-control); white-space: nowrap; }
.cl-model:hover, .cl-model[aria-expanded="true"] { background: var(--cl-hover); }
.cl-model .lvl, .cl-model .auto { color: var(--cl-text-3); }
.cl-model .auto { color: var(--cl-text-2); }
.cl-mode-toggle { display: inline-flex; padding: 2px; border-radius: 10px; background: var(--cl-hover); }
.cl-mode-toggle > button { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--cl-text-3); cursor: pointer; font-weight: var(--cl-w-medium); font-variation-settings: var(--cl-wght-medium); }
.cl-mode-toggle > button[aria-pressed="true"] { background: var(--cl-popover); color: var(--cl-text); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }

/* ---------- Conversation ---------- */
.cl-thread { width: 100%; max-width: var(--cl-thread-w); margin: 0 auto; padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 20px; }
.cl-msg-user { align-self: flex-end; max-width: 85%; padding: 10px 16px; border-radius: var(--cl-radius-bubble); background: var(--cl-user-bubble); font-family: var(--cl-font-user); font-size: var(--cl-fs-prose); line-height: var(--cl-lh-prose); white-space: pre-wrap; overflow-wrap: anywhere; }
.cl-msg-claude { font-family: var(--cl-font-response); font-size: var(--cl-fs-prose); line-height: var(--cl-lh-prose); font-weight: 400; overflow-wrap: break-word; }
.cl-msg-claude .cl-step, .cl-msg-claude .cl-art-card, .cl-msg-claude .cl-msg-actions, .cl-msg-claude .cl-working { letter-spacing: var(--cl-sans-track); font-variation-settings: normal; }
.cl-msg-claude p { margin: 0 0 .75em; }
.cl-msg-claude p:last-child { margin-bottom: 0; }
.cl-msg-claude ul, .cl-msg-claude ol { margin: 0 0 .75em; padding-left: 1.25em; }
.cl-msg-claude li { margin: .25em 0; }
.cl-msg-claude strong { font-weight: 600; }
.cl-msg-claude h3 { font-family: var(--cl-font-sans); font-size: 1.125em; line-height: 1.3; margin: 1.2em 0 .5em; font-weight: var(--cl-w-semibold); }
.cl-msg-claude code { font-family: var(--cl-font-mono); font-size: .85em; padding: 1px 4px; border-radius: 4px; background: var(--cl-hover); }
.cl-step { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--cl-text-3); font-family: var(--cl-font-sans); font-size: var(--cl-fs-body); cursor: pointer; text-align: left; }
.cl-step:hover { color: var(--cl-text-2); }
.cl-step[aria-expanded="true"] .cl-ico-sm { transform: rotate(90deg); }
.cl-step .cl-ico-sm { transition: transform var(--cl-dur-base) var(--cl-ease-snap); }
.cl-steps { margin: 8px 0 0 2px; padding: 4px 0 4px 14px; box-shadow: inset 1px 0 0 var(--cl-border); color: var(--cl-text-2); font-family: var(--cl-font-sans); font-size: var(--cl-fs-footnote); line-height: 20px; }
.cl-steps[hidden] { display: none; }
.cl-art-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 8px 8px 8px; border: 0; border-radius: var(--cl-radius-card); background: var(--cl-page-0); box-shadow: var(--cl-ring); text-align: left; cursor: pointer; font-family: var(--cl-font-sans);
  transition: background-color var(--cl-dur-default), box-shadow var(--cl-dur-default); }
html.cl-dark .cl-art-card { background: var(--cl-surface); }
.cl-art-card:hover { box-shadow: 0 0 0 1px var(--cl-border-strong); }
.cl-art-card[aria-pressed="true"] { box-shadow: 0 0 0 1px var(--cl-border-strong); background: var(--cl-surface); }
.cl-art-card .thumb { display: grid; place-items: center; width: 44px; height: 40px; border-radius: var(--cl-radius); background: var(--cl-surface); box-shadow: var(--cl-ring); flex: none; }
.cl-art-card .t { display: block; font-size: var(--cl-fs-body); line-height: 18px; font-weight: var(--cl-w-medium); font-variation-settings: var(--cl-wght-medium); color: var(--cl-text); }
.cl-art-card .m { display: flex; align-items: center; gap: 4px; color: var(--cl-text-3); font-size: var(--cl-fs-caption); line-height: 16px; }
.cl-art-card .body { flex: 1; min-width: 0; }
.cl-working { display: flex; align-items: center; gap: 12px; color: var(--cl-text-3); font-family: var(--cl-font-sans); }
.cl-shimmer { background: linear-gradient(90deg, var(--cl-text-3) 0%, var(--cl-text-3) 40%, var(--cl-text) 50%, var(--cl-text-3) 60%, var(--cl-text-3) 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: cl-shine 2.2s linear infinite; }
@keyframes cl-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
.cl-msg-actions { display: flex; gap: 2px; margin-top: 6px; color: var(--cl-text-3); }
.cl-codeblock { margin: 0 0 .75em; border-radius: var(--cl-radius-card); background: var(--cl-page-0); box-shadow: var(--cl-ring); overflow: hidden; font-family: var(--cl-font-sans); }
.cl-codeblock .bar { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 6px 0 14px; color: var(--cl-text-3); font-size: var(--cl-fs-caption); }
.cl-codeblock pre { margin: 0; padding: 0 14px 14px; overflow: auto; font-family: var(--cl-font-mono); font-size: var(--cl-fs-code); line-height: var(--cl-lh-code); color: var(--cl-text); }

/* ---------- Artifact panel (measured from the 16 Sep 2026 video) ---------- */
.cl-panel { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; margin: 8px 8px 8px 0; border-radius: var(--cl-radius-card); background: var(--cl-canvas); box-shadow: var(--cl-ring); overflow: hidden; }
.cl-panel-head { display: flex; align-items: center; gap: 6px; height: 52px; padding: 0 8px 0 12px; background: var(--cl-surface); box-shadow: inset 0 -1px 0 var(--cl-border); flex: none; }
.cl-panel-head .grow { flex: 1; }
.cl-panel-tools { position: absolute; top: 64px; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--cl-radius-card); background: var(--cl-surface); box-shadow: var(--cl-shadow-panel); }
.cl-panel-tools .sep { width: 1px; height: 20px; margin: 0 4px; background: var(--cl-border); }
.cl-panel-body { flex: 1; min-height: 0; display: grid; place-items: center; padding: 72px 40px 24px; overflow: auto; }
.cl-panel-strip { display: flex; align-items: center; gap: 12px; padding: 12px 16px 16px; flex: none; overflow-x: auto; background: var(--cl-surface); box-shadow: inset 0 1px 0 var(--cl-border); }
.cl-thumb { position: relative; flex: none; width: 112px; height: 63px; border: 0; padding: 0; border-radius: 6px; overflow: hidden; cursor: pointer; box-shadow: var(--cl-ring); background: #121516; }
.cl-thumb[aria-current="true"] { box-shadow: 0 0 0 2px var(--cl-accent); }
.cl-thumb .n { position: absolute; left: 4px; bottom: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 4px; background: #fff; color: #0b0b0b; font-size: 10px; line-height: 16px; text-align: center; font-weight: 600; }

/* ---------- Pages: projects, artifacts, settings ---------- */
.cl-page { flex: 1; min-height: 0; overflow: auto; }
.cl-page-in { max-width: 896px; margin: 0 auto; padding: 32px 32px 64px; }
.cl-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.cl-page-head h1 { margin: 0; font-family: var(--cl-font-serif); font-weight: 400; font-size: 28px; line-height: 36px; letter-spacing: -.01em; }
.cl-search { position: relative; display: block; }
.cl-search .cl-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--cl-text-3); pointer-events: none; }
.cl-search .cl-input { padding-left: 40px; }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cl-card { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 148px; padding: 16px 18px; border: 0; border-radius: var(--cl-radius-card); background: var(--cl-surface); box-shadow: var(--cl-ring); text-align: left; cursor: pointer; color: inherit; text-decoration: none;
  transition: box-shadow var(--cl-dur-default) var(--cl-ease-standard), transform var(--cl-dur-base) var(--cl-ease-out); }
.cl-card:hover { box-shadow: 0 0 0 1px var(--cl-border-strong), var(--cl-shadow-sm); }
.cl-card h3 { margin: 0; font-size: var(--cl-fs-heading); line-height: var(--cl-lh-heading); font-weight: var(--cl-w-medium); font-variation-settings: var(--cl-wght-medium); }
.cl-card p { margin: 0; color: var(--cl-text-2); font-size: var(--cl-fs-body); line-height: var(--cl-lh-body); }
.cl-card .foot { margin-top: auto; color: var(--cl-text-3); font-size: var(--cl-fs-caption); display: flex; gap: 6px; align-items: center; }
.cl-tabs { display: flex; gap: 4px; margin-bottom: 16px; box-shadow: inset 0 -1px 0 var(--cl-border); }
.cl-tab { height: 36px; padding: 0 10px; border: 0; background: transparent; color: var(--cl-text-2); cursor: pointer; box-shadow: inset 0 -2px 0 transparent; font-size: var(--cl-fs-body); }
.cl-tab:hover { color: var(--cl-text); }
.cl-tab[aria-selected="true"] { color: var(--cl-text); box-shadow: inset 0 -2px 0 var(--cl-text); }
.cl-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 24px; text-align: center; color: var(--cl-text-2); }
.cl-empty img, .cl-empty svg.pict { width: 64px; height: 64px; }
.cl-empty h3 { margin: 0; color: var(--cl-text); font-size: var(--cl-fs-heading); font-weight: var(--cl-w-medium); }
.cl-skel { display: block; height: 12px; border-radius: 6px; background: var(--cl-hover); animation: cl-skel 1.4s ease-in-out infinite; }
@keyframes cl-skel { 50% { opacity: .5; } }

/* settings (measured from claude.com's 2026 settings image) */
.cl-settings { display: flex; width: 100%; height: 100%; border-radius: 16px; background: var(--cl-surface); box-shadow: var(--cl-ring), var(--cl-shadow-lg); overflow: hidden; }
.cl-set-nav { flex: none; width: 192px; padding: 12px 8px; background: var(--cl-page); box-shadow: inset -1px 0 0 var(--cl-border); overflow: auto; }
.cl-set-nav .cl-search .cl-input { height: 32px; font-size: var(--cl-fs-body); border-radius: var(--cl-radius); }
.cl-set-nav .cl-side-label { padding: 14px 8px 6px; }
.cl-set-nav .cl-nav-item { height: 33px; }
.cl-set-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cl-set-head { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 14px 0 14px; flex: none; }
.cl-set-head h2 { margin: 0; font-size: var(--cl-fs-control); font-weight: var(--cl-w-medium); font-variation-settings: var(--cl-wght-medium); }
.cl-set-body { flex: 1; min-height: 0; overflow: auto; padding: 0 6px 0 14px; }
.cl-set-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; box-shadow: inset 0 -1px 0 var(--cl-border); }
.cl-set-row .txt { flex: 1; min-width: 0; }
.cl-set-row b { display: block; font-weight: var(--cl-w-medium); font-variation-settings: var(--cl-wght-medium); }
.cl-set-row span { display: block; color: var(--cl-text-3); }
.cl-set-row a { color: var(--cl-accent-text); }
.cl-set-h { margin: 18px 0 0; padding: 0 0 8px; font-size: var(--cl-fs-body); font-weight: var(--cl-w-semibold); font-variation-settings: "wght" 580; box-shadow: inset 0 -1px 0 var(--cl-border); }
.cl-set-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cl-set-table td { padding: 0 8px 0 0; height: 45px; box-shadow: inset 0 -1px 0 var(--cl-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-set-table tr { cursor: pointer; }
.cl-set-table tr:hover td { background: var(--cl-hover); }
.cl-set-table td.k { width: 30%; font-weight: var(--cl-w-medium); font-variation-settings: var(--cl-wght-medium); }
.cl-set-table td.v { color: var(--cl-text-2); }
.cl-set-table td.d { width: 19%; color: var(--cl-text-3); }
.cl-set-ask { flex: none; margin: 8px 6px 10px 12px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 14px; border-radius: 20px; background: var(--cl-surface); box-shadow: var(--cl-ring), var(--cl-shadow-sm); }
.cl-set-ask input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: var(--cl-fs-body); }
.cl-set-ask input::placeholder { color: var(--cl-text-3); }

/* login (real values from the live sign-in page, 12 Oct 2026) */
.cl-login { display: grid; grid-template-columns: 1fr 1fr; min-height: 100%; }
.cl-login-card { width: 448px; max-width: 100%; padding: 28px; border-radius: var(--cl-radius-login-card); background: var(--cl-page); box-shadow: inset 0 0 0 1px var(--cl-border), 0 4px 24px rgb(11 11 11 / .04); }
html.cl-dark .cl-login-card { background: var(--cl-gray-870); }
.cl-login-or { margin: 12px 0; text-align: center; color: var(--cl-text-2); font-size: var(--cl-fs-caption); line-height: 16px; }
.cl-link { color: var(--cl-accent-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.cl-link:hover { text-decoration-color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .cl-root *, .cl-root *::before, .cl-root *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}