/* Mesa (notes, posts and focus). It reads the shared panel tokens; the
   note, request, news and break colors belong to the Mesa itself. */
@layer tokens {
:root {
  --comp-mesa-dialog-shadow: 0 20px 80px #0007;
  --comp-mesa-pill-shadow: 0 8px 26px #0005;
  --comp-mesa-preview-backdrop: #000a;
  --comp-mesa-code-bg: #0002;
  --comp-mesa-phase: var(--comp-panel-accent);
  --comp-mesa-progress: 0;
  --domain-mesa-note: #d6b96f;
  --domain-mesa-request: #d3a348;
  --domain-mesa-news: #36b797;
  --domain-mesa-break: #2fb98a;
}
}

@layer legacy {
.mesa, .mesa-composer, .mesa-confirm {
  color: var(--comp-panel-fg); background: var(--comp-panel-bg); font: 13px/1.5 var(--sys-font, system-ui); box-sizing: border-box;
}
.mesa *, .mesa-composer *, .mesa-confirm * { box-sizing: border-box; }
.mesa [hidden], .mesa-composer [hidden] { display: none !important; }
.mesa[hidden] { display: none !important; }
.mesa { position: fixed; z-index: 950; inset: 78px 16px 16px auto; width: min(1010px, calc(100vw - 32px)); display: flex; flex-direction: column; border: 1px solid var(--comp-panel-line); border-radius: 20px; box-shadow: var(--comp-panel-shadow); overflow: hidden; }
.mesa-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 24px 16px; }
.mesa-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .13em; color: var(--comp-panel-muted); }
.mesa-heading h2 { margin: 3px 0 0; font-size: 26px; font-weight: 650; letter-spacing: -.04em; }
.mesa-heading h2 span { margin-left: 12px; color: var(--comp-panel-muted); font-size: 12px; font-weight: 400; letter-spacing: 0; }
.mesa-heading-actions { display: flex; gap: 6px; }
.mesa button, .mesa-composer button, .mesa-confirm button { color: inherit; background: transparent; border: 1px solid var(--comp-panel-line); border-radius: 9px; padding: 7px 11px; cursor: pointer; font: inherit; }
.mesa button:hover, .mesa-composer button:hover { background: color-mix(in srgb, var(--comp-panel-accent) 12%, transparent); }
.mesa button:disabled, .mesa-composer button:disabled { opacity: .5; cursor: default; }
.mesa button:focus-visible, .mesa input:focus-visible, .mesa textarea:focus-visible, .mesa-composer :focus-visible, .mesa-confirm :focus-visible { outline: 2px solid var(--comp-panel-accent); outline-offset: 2px; }
.mesa .mesa-primary, .mesa-composer .mesa-primary { background: var(--comp-panel-accent); color: var(--comp-button-on-accent); border-color: transparent; }
.mesa-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--comp-panel-line); padding: 0 24px 12px; }
.mesa-tabs button { border-color: transparent; font-weight: 600; }
.mesa-tabs button[aria-pressed=true] { color: var(--comp-panel-fg); background: color-mix(in srgb, var(--comp-panel-accent) 16%, transparent); }
.mesa-tabs button span { font-size: 10px; font-weight: 400; margin-left: 6px; color: var(--comp-panel-muted); }
.mesa-toolbar { display: flex; gap: 8px; padding: 16px 24px 0; align-items: center; flex-wrap: wrap; }
.mesa input:not([type=checkbox]), .mesa textarea, .mesa-composer input, .mesa-composer textarea, .mesa-composer select { background: color-mix(in srgb, var(--comp-panel-fg) 4%, var(--comp-panel-bg)); color: var(--comp-panel-fg); border: 1px solid var(--comp-panel-line); border-radius: 8px; padding: 9px 11px; font: inherit; min-width: 0; }
.mesa input::placeholder, .mesa textarea::placeholder, .mesa-composer input::placeholder, .mesa-composer textarea::placeholder { color: var(--comp-panel-muted); opacity: .85; }
.mesa-toolbar > input { flex: 1; min-width: 140px !important; }
.mesa-history { color: var(--comp-panel-muted); font-size: 11px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.mesa input[type=checkbox] { accent-color: var(--comp-panel-accent); width: 14px; height: 14px; min-width: 14px; flex: 0 0 14px; padding: 0; margin: 0; }
.mesa select { min-width: 0; max-width: 100%; border: 1px solid var(--comp-panel-line); border-radius: 8px; padding: 8px; background: var(--comp-panel-bg); color: inherit; font: inherit; }
.mesa [data-new-format] { max-width: 170px; }
.mesa-editor label:has(> [data-format]) { display: flex; align-items: center; gap: 10px; }
.mesa-editor [data-format] { flex: 1; }
.mesa-editor [data-body].mesa-body-context { flex: 0 0 auto; min-height: 70px; height: 90px; }
.mesa-code-editor { min-width: 0; }.mesa-code-controls { display: flex; gap: 7px; align-items: end; flex-wrap: wrap; }.mesa-code-controls label { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 130px; font-size: 11px; color: var(--comp-panel-muted); }.mesa-code-controls button { font-size: 11px; }
.mesa textarea[data-code] { display: block; width: 100%; min-height: 180px; margin: 8px 0; font: 12px/1.65 Consolas, 'Cascadia Code', monospace; tab-size: 2; white-space: pre; overflow: auto; resize: vertical; }
.mesa-code-preview { overflow: auto; max-height: 300px; border: 1px solid var(--comp-panel-line); border-radius: 8px; padding: 10px; }.mesa-code-preview pre { overflow: auto; }.mesa-code-preview code { font: 12px/1.65 Consolas, monospace; }
.mesa-checklist-progress { font-size: 11px; color: var(--comp-panel-muted); margin: 0 0 8px; }.mesa-task { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }.mesa-task [data-task-text] { width: 0; flex: 1; }.mesa-task.is-done [data-task-text] { text-decoration: line-through; color: var(--comp-panel-muted); }.mesa-task button { padding: 4px 8px; }.mesa-checklist > button { font-size: 12px; }
.mesa-note-files { border: 1px dashed var(--comp-panel-line); border-radius: 9px; padding: 11px; margin: 3px 0; }.mesa-files-heading { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 12px; }.mesa-files-heading button { font-size: 11px; }
.mesa-dragover { outline: 2px dashed var(--comp-panel-accent); outline-offset: -5px; background: color-mix(in srgb, var(--comp-panel-accent) 8%, transparent); }
.mesa-attachments { min-width: 0; }.mesa-attachment { display: flex; gap: 8px; border-top: 1px solid var(--comp-panel-line); margin-top: 8px; padding-top: 9px; align-items: center; }.mesa-attachment > div:first-of-type { min-width: 0; flex: 1; }.mesa-attachment strong { display: block; font-size: 11px; overflow-wrap: anywhere; }.mesa-attachment small { display: block; color: var(--comp-panel-muted); font-size: 10px; }.mesa-file-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }.mesa-file-actions button { font-size: 10px; padding: 5px 7px; }.mesa-file-status { margin: 6px 0 0; color: var(--comp-panel-muted); font-size: 11px; }
.mesa-attachment-selection { border: 1px solid var(--comp-panel-line); border-radius: 9px; margin: 12px 0; padding: 12px; }.mesa-attachment-selection legend { font-size: 12px; }.mesa-composer .mesa-attachment-selection label { flex-direction: row; align-items: center; gap: 8px; margin-bottom: 8px; overflow-wrap: anywhere; }.mesa-composer .mesa-attachment-selection input { width: 14px; flex: 0 0 14px; padding: 0; margin: 0; }.mesa-preview-files { font-size: 12px; font-weight: 600; }
.mesa-file-preview { margin: auto; max-width: min(850px, 94vw); max-height: 90vh; overflow: auto; border: 1px solid var(--comp-panel-line-strong); border-radius: 14px; padding: 18px; background: var(--comp-panel-bg); color: var(--comp-panel-fg); }.mesa-file-preview::backdrop { background: var(--comp-mesa-preview-backdrop); }.mesa-file-preview h3 { font: 14px system-ui; overflow-wrap: anywhere; }.mesa-file-preview img { display: block; max-width: 100%; max-height: 70vh; object-fit: contain; margin-top: 10px; }.mesa-file-preview button { color: inherit; background: transparent; border: 1px solid var(--comp-panel-line-strong); padding: 6px 10px; border-radius: 7px; cursor: pointer; }
.mesa-status { color: var(--comp-panel-muted); min-height: 20px; margin: 5px 24px; font-size: 12px; }
.mesa-workspace { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.mesa-collection { flex: 1; min-width: 0; overflow: auto; padding: 10px 24px 24px; }
.mesa-note-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; align-content: start; }
.mesa button.mesa-note-card { position: relative; display: flex; flex-direction: column; text-align: left; padding: 17px; min-height: 180px; gap: 10px; background: color-mix(in srgb, var(--comp-panel-fg) 3%, var(--comp-panel-bg)); border-radius: 13px; overflow-wrap: anywhere; }
.mesa-note-card::before { content: ''; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--comp-panel-accent) 65%, var(--domain-mesa-note)); width: 28px; }
.mesa-note-card.is-selected { border-color: var(--comp-panel-accent); }
.mesa-note-card strong { font-size: 15px; }
.mesa-note-meta, .mesa-note-card small { font-size: 10px; color: var(--comp-panel-muted); }
.mesa-note-excerpt { white-space: pre-wrap; color: var(--comp-panel-muted); font-size: 12px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mesa-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.mesa-tags span { background: color-mix(in srgb, var(--comp-panel-accent) 10%, transparent); padding: 2px 7px; border-radius: 5px; font-size: 10px; }
.mesa-empty { text-align: center; max-width: 330px; margin: 50px auto; color: var(--comp-panel-muted); }
.mesa-empty > span { display: block; color: var(--comp-panel-accent); font-size: 46px; }
.mesa-empty h3 { color: var(--comp-panel-fg); font-size: 19px; font-weight: 600; margin: 12px 0; }
.mesa-editor { display: flex; flex-direction: column; flex: 0 0 48%; min-width: 0; padding: 15px 24px 20px; border-left: 1px solid var(--comp-panel-line); overflow: auto; gap: 10px; }
.mesa-editor-top { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: var(--comp-panel-muted); letter-spacing: .06em; position: sticky; top: 0; z-index: 2; background: var(--comp-panel-bg); padding: 3px 0; }
.mesa-editor [data-title] { font-size: 18px !important; font-weight: 600 !important; }
.mesa-editor [data-body] { width: 100%; min-height: 170px; flex: 1; resize: vertical; line-height: 1.7; }
.mesa-editor label input:not([type=checkbox]) { width: 100%; display: block; margin-top: 5px; }
.mesa-pin { display: flex; align-items: center; gap: 8px; }
.mesa-note-status { color: var(--comp-panel-muted); font-size: 11px; margin: 0; }
.mesa-editor-actions, .mesa-conflict { display: flex; gap: 6px; flex-wrap: wrap; }
.mesa-editor-actions button { font-size: 11px; }
.mesa-hint { color: var(--comp-panel-muted); font-size: 11px; margin: 0; }
.mesa-footer { padding: 10px 24px; border-top: 1px solid var(--comp-panel-line); color: var(--comp-panel-muted); font-size: 10px; }
.mesa-post-list { display: grid; gap: 16px; max-width: 720px; margin: auto; }
.mesa-post { border: 1px solid var(--comp-panel-line); border-left: 3px solid var(--comp-panel-accent); padding: 20px; border-radius: 12px; overflow-wrap: anywhere; background: color-mix(in srgb, var(--comp-panel-fg) 2%, var(--comp-panel-bg)); }
.mesa-kind-pedido { border-left-color: var(--domain-mesa-request); }.mesa-kind-novidade { border-left-color: var(--domain-mesa-news); }
.mesa-post-top { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--comp-panel-muted); }
.mesa-kind { color: var(--comp-panel-fg); font-weight: 600; }
.mesa-post h3 { margin: 13px 0 8px; font-size: 19px; line-height: 1.3; }
.mesa-post-body, .mesa-publication-preview { line-height: 1.65; }
.mesa-post-body p { margin: 8px 0; }
.mesa-post-body pre, .mesa-publication-preview pre { max-width: 100%; overflow: auto; background: var(--comp-mesa-code-bg); padding: 12px; border-radius: 6px; }
.mesa-post-body a, .mesa-publication-preview a { color: var(--comp-panel-accent); }
.mesa-post-meta, .mesa-deadline { font-size: 11px; color: var(--comp-panel-muted); margin: 12px 0; }
.mesa-post-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.mesa-post-actions button { font-size: 11px; }
.mesa-post-actions [aria-pressed=true] { background: color-mix(in srgb, var(--comp-panel-accent) 22%, transparent); border-color: var(--comp-panel-accent); }
.mesa-responses { font-size: 11px; color: var(--comp-panel-muted); margin-top: 12px; }.mesa-responses summary { cursor: pointer; }
.mesa-post.is-expired { opacity: .72; border-left-color: var(--comp-panel-muted); }
.mesa-docked { width: min(430px, calc(100vw - 24px)); }.mesa-docked .mesa-workspace { flex-direction: column; }.mesa-docked.mesa-has-editor .mesa-collection { display: none; }.mesa-docked .mesa-editor { flex: 1; border-left: 0; }.mesa-docked .mesa-heading h2 span { display: none; }
.mesa-composer, .mesa-confirm { margin: auto; width: min(580px, calc(100vw - 24px)); max-height: 90vh; overflow: auto; border: 1px solid var(--comp-panel-line); border-radius: 16px; padding: 22px; box-shadow: var(--comp-mesa-dialog-shadow); }
.mesa-composer::backdrop, .mesa-confirm::backdrop { background: var(--comp-dialog-backdrop); }.mesa-composer .mesa-heading { padding: 0 0 16px; }.mesa-composer .mesa-heading h2 { font-size: 22px; }
.mesa-composer label { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; font-size: 12px; }.mesa-composer textarea { resize: vertical; }.mesa-compose-fields { display: flex; gap: 12px; }.mesa-compose-fields label { flex: 1; min-width: 0; }.mesa-compose-status { font-size: 12px; color: var(--comp-panel-muted); }.mesa-compose-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 15px; }.mesa-publication-preview { border: 1px solid var(--comp-panel-line); border-radius: 10px; padding: 14px; margin-top: 14px; overflow-wrap: anywhere; }.mesa-confirm button { margin: 4px 8px 0 0; }
.mesa-focus { max-width: 520px; margin: 8px auto 0; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.mesa-focus-break, .mesa-focus-pill.mesa-focus-break { --comp-mesa-phase: var(--domain-mesa-break); }
.mesa-focus-dial { --comp-mesa-progress: 0; width: 230px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--comp-mesa-phase) calc(var(--comp-mesa-progress) * 360deg), color-mix(in srgb, var(--comp-panel-fg) 9%, transparent) 0); transition: background .4s; }
.mesa-focus-dial > div { width: calc(100% - 18px); aspect-ratio: 1; border-radius: 50%; background: var(--comp-panel-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.mesa-focus-phase { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--comp-mesa-phase); }
.mesa-focus-dial strong { font: 600 52px/1.05 var(--sys-font, system-ui); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mesa-focus-dial small { color: var(--comp-panel-muted); font-size: 12px; max-width: 170px; }
.mesa-focus.is-running .mesa-focus-dial { box-shadow: 0 0 0 6px color-mix(in srgb, var(--comp-mesa-phase) 10%, transparent); }
.mesa-focus-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mesa .mesa-focus-actions .mesa-primary { background: var(--comp-mesa-phase); min-width: 150px; }
.mesa-focus-silence { display: flex; gap: 12px; align-items: flex-start; text-align: left; border: 1px solid var(--comp-panel-line); border-radius: 12px; padding: 13px 15px; cursor: pointer; width: 100%; }
.mesa-focus-silence:has(input:checked) { border-color: var(--comp-panel-accent); background: color-mix(in srgb, var(--comp-panel-accent) 9%, transparent); }
.mesa-focus-silence input { margin-top: 3px !important; }.mesa-focus-silence span { font-size: 12px; color: var(--comp-panel-muted); }.mesa-focus-silence strong { display: block; font-size: 13px; color: var(--comp-panel-fg); }
.mesa-focus-cycles { margin: 0; font-size: 12px; color: var(--comp-panel-muted); }.mesa-focus-cycles span { color: var(--comp-mesa-phase); letter-spacing: 3px; margin-right: 6px; }
.mesa-focus .mesa-hint { max-width: 440px; }
.mesa-focus-pill { position: fixed; z-index: 940; bottom: 92px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--comp-mesa-phase) 55%, transparent); background: color-mix(in srgb, var(--comp-mesa-phase) 18%, var(--comp-panel-bg)); color: var(--comp-panel-fg); font: 600 12px/1.4 var(--sys-font, system-ui); font-variant-numeric: tabular-nums; box-shadow: var(--comp-mesa-pill-shadow); cursor: pointer; white-space: nowrap; }
.mesa-focus-pill:hover { background: color-mix(in srgb, var(--comp-mesa-phase) 30%, var(--comp-panel-bg)); }
.mesa-focus-pill:focus-visible { outline: 2px solid var(--comp-mesa-phase); outline-offset: 2px; }
.mesa-focus-pill[hidden] { display: none; }
@media (max-width: 620px) {
  .mesa { inset: 8px; width: auto; border-radius: 14px; }.mesa-heading { padding: 16px; }.mesa-heading h2 span { display: none; }.mesa-tabs { padding: 0 12px 10px; gap: 2px; flex-wrap: wrap; }.mesa-focus-dial { width: 200px; }.mesa-focus-dial strong { font-size: 44px; }.mesa-focus-pill { bottom: 84px; }.mesa-tabs button { padding: 7px 8px; font-size: 12px; }.mesa-toolbar { padding: 12px 14px 0; }.mesa-status { margin: 5px 14px; }.mesa-workspace { flex-direction: column; }.mesa-has-editor .mesa-collection { display: none; }.mesa-editor { flex: 1; border-left: 0; padding: 10px 16px 16px; }.mesa-collection { padding: 10px 14px 14px; }.mesa-post { padding: 15px; }.mesa-footer { padding: 8px 14px; }.mesa-history { order: 4; width: 100%; }.mesa-composer { padding: 16px; }.mesa-compose-fields { flex-direction: column; gap: 0; }
}
}