/* Presentation boundary: Canvas commands and document geometry remain owned by their modules. */
:root {
  --cw-ink: #f4f0ee;
  --cw-secondary: #c7bab9;
  --cw-muted: #ab979b;
  --cw-panel: #211216;
  --cw-raised: #2d1a20;
  --cw-line: rgba(224, 205, 210, .14);
  --cw-ruby: #c34859;
  --cw-rose: #e6a1aa;
  --cw-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.atlas-ui-icon { width: 17px; height: 17px; flex: 0 0 auto; vertical-align: middle; }
[data-atlas-icon] { display: inline-flex; align-items: center; justify-content: center; }

/* Message controls: one labelled next step, icon-only secondary actions, the rest in "⋯". */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cmsg .message-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-top: 8px; padding: 0 2px; }
.cmsg.user .message-actions { justify-content: flex-end; }
.cmsg .message-actions .ma-btn {
  position: relative; min-width: 32px; min-height: 32px; padding: 0 8px; gap: 6px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent;
  background: transparent; color: var(--cw-muted); font: 500 11.5px/1 var(--cw-ui); letter-spacing: .01em;
  box-shadow: none; cursor: pointer; transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}
.cmsg .message-actions .ma-btn:not(.ma-primary) { padding: 0; width: 32px; }
.cmsg .message-actions .ma-btn:not(.ma-primary) .ma-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cmsg .message-actions .ma-btn:hover { color: var(--cw-ink); background: rgba(255, 255, 255, .055); }
.cmsg .message-actions .ma-btn:active { background: rgba(255, 255, 255, .09); }
.cmsg .message-actions .ma-primary {
  margin-right: 4px; padding: 0 11px 0 9px; color: var(--cw-ink);
  border-color: rgba(230, 161, 170, .28); background: rgba(195, 72, 89, .13);
}
.cmsg .message-actions .ma-primary:hover { border-color: rgba(230, 161, 170, .5); background: rgba(195, 72, 89, .22); }
.cmsg .message-actions .ma-primary .ma-icon { color: var(--cw-rose); }
.cmsg .message-actions .ma-btn[disabled] { cursor: default; opacity: 1; }
.cmsg .message-actions .ma-btn[data-state="success"], .cmsg .message-actions .ma-menu-item[data-state="success"] { color: #b9d8bd; }
.cmsg .message-actions .ma-btn[data-state="success"] .ma-icon { color: #b9d8bd; }
.cmsg .message-actions .ma-primary[data-state="success"] { border-color: rgba(185, 216, 189, .3); background: rgba(120, 170, 128, .1); }
.cmsg .message-actions .ma-btn[data-state="error"] { color: #f0a3a3; }
.cmsg .message-actions .ma-btn[aria-expanded="true"] { color: var(--cw-ink); background: rgba(255, 255, 255, .07); }
.message-actions .ma-icon { display: inline-flex; color: inherit; }
.message-actions .ma-icon svg { width: 16px; height: 16px; }
.cmsg .message-actions :is(.ma-btn, .ma-menu-item):focus-visible, .reply-retry-btn:focus-visible, #ws-draft :is(button, summary, select):focus-visible {
  outline: 2px solid var(--cw-rose); outline-offset: 2px;
}
/* Tooltip for icon-only actions; delayed so passing the pointer across the row stays quiet. */
.cmsg .message-actions .ma-btn[data-tip]::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); z-index: 30;
  padding: 5px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none;
  font: 500 11px/1.2 var(--cw-ui); color: var(--cw-ink); background: #120a0d; border: 1px solid var(--cw-line);
  box-shadow: 0 6px 18px #0006; opacity: 0; transform: translate(-50%, 3px);
  transition: opacity 120ms ease, transform 120ms ease; transition-delay: 0s;
}
.cmsg .message-actions .ma-btn[data-tip]:is(:hover, :focus-visible)::after { opacity: 1; transform: translate(-50%, 0); transition-delay: 380ms; }
.cmsg .message-actions .ma-btn[data-state][data-tip]::after { opacity: 1; transform: translate(-50%, 0); transition-delay: 0s; }
.cmsg .message-actions .ma-btn[aria-expanded="true"]::after { opacity: 0 !important; }
.ma-more { position: relative; display: inline-flex; }
.ma-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 196px; padding: 5px;
  display: flex; flex-direction: column; gap: 1px; border-radius: 9px;
  background: #1a0e12; border: 1px solid var(--cw-line); box-shadow: 0 14px 34px #0008;
  animation: cw-menu-in 120ms ease-out;
}
.ma-menu[hidden] { display: none; }
.ma-menu.ma-menu-up { top: auto; bottom: calc(100% + 4px); }
.cmsg.user .ma-menu, .ma-menu.ma-menu-end { left: auto; right: 0; }
.ma-menu .ma-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 0 10px;
  border: 0; border-radius: 6px; background: transparent; color: var(--cw-secondary);
  font: 400 12.5px/1.2 var(--cw-ui); text-align: left; cursor: pointer;
}
.ma-menu .ma-menu-item .ma-icon { color: var(--cw-muted); }
.ma-menu .ma-menu-item:is(:hover, :focus-visible) { background: rgba(255, 255, 255, .06); color: var(--cw-ink); outline: none; }
.ma-menu .ma-menu-item:focus-visible { box-shadow: inset 0 0 0 1px rgba(230, 161, 170, .55); }
.ma-menu .ma-menu-item[disabled] { color: var(--cw-muted); cursor: default; }
@keyframes cw-menu-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
/* Visibility: the latest answer keeps its actions in view; older messages reveal on hover/focus.
   Actions reserve their height while text streams so nothing jumps when they appear. */
#chatBox .cmsg .message-actions { opacity: 0; transition: opacity 180ms ease; }
#chatBox .cmsg:is(:hover, :focus-within) .message-actions,
#chatBox .cmsg.bot:not(:has(~ .cmsg.bot)) .message-actions,
#chatBox .cmsg .message-actions:has([aria-expanded="true"], [data-state]) { opacity: 1; }
#chatBox .cmsg:is([data-gen="preparing"], [data-gen="streaming"]) .message-actions,
#chatBox .cmsg[data-gen="settling"]:has(> .cb:not([data-paced-done])) .message-actions { display: flex; visibility: hidden; opacity: 0; }
#chatBox .cmsg[data-gen="preparing"] .message-actions { display: none; }
@media (hover: none) { #chatBox .cmsg .message-actions { opacity: 1; } }

/* Streaming caret: lives in CSS because PacedText rewrites the bubble on every frame. */
/* Petition rendering ends with empty spacer blocks; the caret sits on the last block that has text. */
#chatBox .cmsg[data-gen="streaming"] > .cb > :is(:last-child:not(:empty), :nth-last-child(2):has(+ :empty:last-child))::after,
#chatBox .cmsg[data-gen="settling"] > .cb:not([data-paced-done]) > :is(:last-child:not(:empty), :nth-last-child(2):has(+ :empty:last-child))::after {
  content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -.12em;
  border-radius: 1px; background: var(--cw-ruby); animation: cw-caret 1.05s steps(1) infinite;
}
@keyframes cw-caret { 50% { opacity: 0; } }
.reply-stopped { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 0 2px; font: 400 12px/1.3 var(--cw-ui); color: var(--cw-muted); }
.reply-stopped-label { display: inline-flex; align-items: center; gap: 6px; }
.reply-stopped-label .atlas-ui-icon { width: 13px; height: 13px; }
.reply-retry-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: 7px;
  border: 1px solid var(--cw-line); background: transparent; color: var(--cw-secondary); font: 500 11.5px/1 var(--cw-ui); cursor: pointer;
}
.reply-retry-btn:hover { color: var(--cw-ink); border-color: rgba(230, 161, 170, .4); background: rgba(195, 72, 89, .1); }
.reply-retry-btn .atlas-ui-icon { width: 14px; height: 14px; }

/* CSS owns the ring transform because SVG background-image animations freeze in Chromium. */
.atlas-meridyen-mark { position: relative; background-image: url('/assets/atlas-meridyen-instrument.svg'); }
.atlas-meridyen-mark:has(> .atlas-compass-ring), .atlas-processing .atlas-meridyen-mark:has(> .atlas-compass-ring) { background-image: url('/assets/atlas-meridyen-core.svg'); }
.atlas-compass-ring { position: absolute; inset: 0; background: url('/assets/atlas-meridyen-ring.svg') center / contain no-repeat; pointer-events: none; transform-origin: center; }
.atlas-processing .atlas-compass-ring, .apt-mark > .atlas-compass-ring { animation: cw-compass-turn 10s linear infinite; }
.apt-mark { background-image: url('/assets/atlas-meridyen-core.svg') !important; }
body .sbf-seal .atlas-meridyen-mark:has(> .atlas-compass-ring) { background-image: url('/assets/atlas-meridyen-core.svg'); }
body .sbf-seal .atlas-meridyen-mark::before { content: none; }
body .sbf-seal .atlas-meridyen-mark::after, body.atlas-processing .sbf-seal .atlas-meridyen-mark::after { content: none; }
.sbf-seal .atlas-compass-ring { z-index: 1; opacity: .62; transition: opacity 340ms ease; }
body.atlas-processing .sbf-seal .atlas-compass-ring { opacity: 1; }
@keyframes cw-compass-turn { to { transform: rotate(360deg); } }

/* Generation: the bubble that will hold the answer shows one instrument whose heading reports the
   server stage (accepted → context → sources → writing). The first text replaces it in place. */
@property --apt-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
#chatBox .cmsg.bot .cb:has(> .atlas-premium-typing) {
  position: relative; isolation: isolate; overflow: hidden; min-height: 0;
  width: fit-content; min-width: min(100%, 420px); max-width: 100%;
  padding: 16px 22px 16px 16px; border-radius: 20px; border: 1px solid transparent;
  background:
    radial-gradient(140% 180% at 0% 0%, rgba(168, 52, 74, .13), transparent 52%) padding-box,
    radial-gradient(90% 140% at 100% 100%, rgba(58, 52, 78, .22), transparent 60%) padding-box,
    repeating-linear-gradient(115deg, transparent 0 7px, rgba(226, 214, 220, .016) 7px 8px) padding-box,
    linear-gradient(160deg, #241219 0%, #190c12 58%, #140a0f 100%) padding-box,
    conic-gradient(from var(--apt-angle), rgba(206, 168, 178, .05) 0deg, rgba(232, 205, 211, .58) 30deg, rgba(158, 72, 92, .36) 78deg, rgba(206, 168, 178, .05) 145deg, rgba(206, 168, 178, .05) 360deg) border-box;
  box-shadow: 0 20px 44px -26px rgba(0, 0, 0, .92), 0 0 34px -22px rgba(168, 52, 74, .5), inset 0 0 0 1px rgba(255, 255, 255, .025), inset 0 1px 0 rgba(255, 236, 238, .045), inset 0 -14px 28px -18px rgba(0, 0, 0, .6);
  animation: apt-border-orbit 7.2s linear infinite;
}
#chatBox .cmsg.bot .cb:has(> .atlas-premium-typing)::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(240, 222, 226, .032) 46%, rgba(240, 222, 226, .012) 54%, transparent 70%);
  background-size: 250% 100%; animation: apt-sheen 5.4s ease-in-out infinite;
}
@keyframes apt-border-orbit { to { --apt-angle: 360deg; } }
@keyframes apt-sheen { 0% { background-position: 130% 0; } 60%, 100% { background-position: -40% 0; } }
.atlas-premium-typing {
  position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 15px;
  width: auto; min-height: 46px; padding: 0; box-sizing: border-box;
  background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  animation: cw-arrive 260ms cubic-bezier(.2, .8, .2, 1) 120ms both;
}
.atlas-premium-typing::after { content: none; }
.apt-orb { position: relative; display: block; width: 54px; height: 54px; }
.apt-halo {
  position: absolute; inset: -14px; border-radius: 50%; pointer-events: none;
  /* Owner: "düşünce kısmı ekstra bir katman gibi görünüyor" — halo ayrı bir
     disk gibi duruyordu; kartın zeminine karışacak kadar yumuşatıldı. */
  background: radial-gradient(circle, rgba(196, 96, 118, .17) 0%, rgba(112, 62, 84, .07) 46%, transparent 72%);
  filter: blur(11px); animation: apt-breathe 4.2s ease-in-out infinite;
}
.apt-orb::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%;
  background: #e6d7da; box-shadow: 0 0 5px 1.5px rgba(226, 178, 190, .55), 0 0 12px 3px rgba(168, 62, 84, .3);
  animation: apt-orbit 4.6s cubic-bezier(.45, .05, .55, .95) infinite; pointer-events: none;
}
@keyframes apt-orbit { from { transform: rotate(0deg) translateX(26px); } to { transform: rotate(360deg) translateX(26px); } }
.apt-orb > .apt-mark { position: absolute; inset: 0; width: 54px !important; height: 54px !important; border-radius: 50%; background-size: contain; background-repeat: no-repeat;
  /* Parlaklık: ikon kartın içinde kayboluyordu — kontrast + hafif ışıma. */
  filter: drop-shadow(0 3px 9px rgba(0, 0, 0, .5)) saturate(1.08) brightness(1.1) contrast(1.06); animation: none; }
/* §11.5: HER gerçek araştırmada canonical uygulama ikonu hafifçe canlanır
   (atlasPulse .96↔1.04). Yalnız araştırma niyetinde uygulanır — genel sohbette
   sürekli nabız görsel gürültü olurdu. Specificity (0,3,0) yukarıdaki
   `.apt-orb > .apt-mark` animation:none kuralını bilinçli olarak geçersiz kılar. */
.atlas-premium-typing[data-intent="research"] .apt-mark { animation: atlasPulse 1.25s ease-in-out infinite; }
.apt-sweep {
  position: absolute; inset: 3px; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: conic-gradient(from 0deg, transparent 0deg 250deg, rgba(226, 168, 180, .04) 270deg, rgba(238, 196, 204, .3) 352deg, rgba(250, 235, 237, .55) 358deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%, #000 70%, transparent 72%);
  mask: radial-gradient(circle, transparent 38%, #000 40%, #000 70%, transparent 72%);
  animation: cw-compass-turn 3.4s linear infinite;
}
@keyframes apt-breathe { 0%, 100% { opacity: .4; transform: scale(.88); } 50% { opacity: .8; transform: scale(1.05); } }
.apt-mark > .atlas-compass-ring { animation: cw-compass-turn 18s linear infinite; }
.atlas-premium-typing[data-stage="1"] .apt-mark > .atlas-compass-ring { animation-duration: 13s; }
.atlas-premium-typing[data-stage="2"] .apt-mark > .atlas-compass-ring { animation-duration: 9s; }
.atlas-premium-typing[data-stage="3"] .apt-mark > .atlas-compass-ring { animation-duration: 5.5s; }
/* RENK DALGASI: kartın üzerinden düzenli aralıklarla geçen tek bant.
   Owner isteği (2026-10-02): "bir renk dalgası bu kartın üzerinden düzenli
   olarak geçip gitse". Kart zemininden bağımsız bir katman DEĞİL — aynı yüzeyin
   üzerinde gezinen yumuşak bir ışık bandı (mix-blend-mode ile zemine karışır). */
.atlas-premium-typing::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(214, 128, 148, .1) 47%, rgba(238, 186, 198, .17) 50%, rgba(214, 128, 148, .1) 53%, transparent 62%);
  background-size: 260% 100%; background-position: 160% 0;
  mix-blend-mode: screen; opacity: .9;
  animation: cw-color-wave 6.4s cubic-bezier(.42, 0, .58, 1) infinite;
}
@keyframes cw-color-wave {
  0% { background-position: 165% 0; }
  62% { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}
.atlas-premium-typing { position: relative; overflow: hidden; }
.apt-glow, .apt-dots, .apt-header { display: none; }
.apt-content { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.apt-brand {
  font: 600 10px/1.2 var(--cw-ui); letter-spacing: .34em; text-transform: uppercase;
  background: linear-gradient(90deg, #eccfd4, #caa1aa 45%, #96757e); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--cw-rose); animation: none;
}
.apt-status {
  font: 450 14.5px/1.45 var(--cw-ui); letter-spacing: .005em; overflow-wrap: anywhere;
  background: linear-gradient(90deg, #b3a6ab 0%, #b3a6ab 38%, #ece2de 50%, #b3a6ab 62%, #b3a6ab 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--cw-secondary);
  animation: apt-shimmer 3.2s linear infinite;
}
.apt-status.apt-swap { animation: apt-shimmer 3.2s linear infinite, apt-swap 420ms cubic-bezier(.2, .8, .2, 1); }
@keyframes apt-shimmer { from { background-position: 125% 0; } to { background-position: -125% 0; } }
@keyframes apt-swap { from { opacity: 0; transform: translateY(5px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.apt-track { display: inline-flex; gap: 5px; padding-left: 10px; align-self: center; }
.apt-track i { display: block; width: 15px; height: 2px; border-radius: 2px; background: rgba(210, 196, 202, .1); transition: background 420ms ease, box-shadow 420ms ease; }
.atlas-premium-typing[data-stage="0"] .apt-track i:nth-child(-n+1),
.atlas-premium-typing[data-stage="1"] .apt-track i:nth-child(-n+2),
.atlas-premium-typing[data-stage="2"] .apt-track i:nth-child(-n+3),
.atlas-premium-typing[data-stage="3"] .apt-track i { background: linear-gradient(90deg, #8e3a4c, #cf97a1); box-shadow: 0 0 7px rgba(208, 130, 146, .4); }
.atlas-premium-typing[data-stage="0"] .apt-track i:nth-child(1),
.atlas-premium-typing[data-stage="1"] .apt-track i:nth-child(2),
.atlas-premium-typing[data-stage="2"] .apt-track i:nth-child(3),
.atlas-premium-typing[data-stage="3"] .apt-track i:nth-child(4) { animation: cw-tick 1.5s ease-in-out infinite; }
@keyframes cw-tick { 50% { opacity: .35; } }
@keyframes cw-arrive { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* The document title bar separates file operations from text formatting. */
#ws-draft { min-width: 0; }
#ws-draft .canvas-toolbar {
  position: relative; z-index: 15; min-height: 65px; gap: 14px; padding: 12px 20px;
  background: #211216; border-bottom: 1px solid var(--cw-line); flex-wrap: wrap;
  font-family: var(--cw-ui);
}
#ws-draft .canvas-toolbar::after { display: none; }
#ws-draft .canvas-toolbar-left { gap: 12px; min-width: 0; }
.canvas-document-emblem { width: 33px; height: 39px; color: var(--cw-rose); border: 1px solid #c3485947; border-radius: 7px; background: #c348590c; }
.canvas-document-emblem svg { width: 20px; height: 20px; }
.canvas-document-identity { display: flex; flex-direction: column; gap: 3px; }
#ws-draft .canvas-label { color: var(--cw-ink); font: 600 18px/1.15 'Playfair Display', Georgia, serif; letter-spacing: -.02em; text-transform: none; }
.canvas-document-caption { font: 400 10px/1.4 var(--cw-ui); color: var(--cw-muted); letter-spacing: .02em; }
#ws-draft .canvas-status { border: 0; border-left: 1px solid var(--cw-line); border-radius: 0; margin-left: 3px; padding: 3px 0 3px 13px; background: none; font: 400 11px/1.4 var(--cw-ui); color: var(--cw-muted); }
#ws-draft .canvas-status.dirty { color: #e0a170; }
#ws-draft .canvas-page-counter { font: 400 10px/1.4 var(--cw-ui); color: var(--cw-muted); letter-spacing: .03em; padding-left: 10px; }
#ws-draft .canvas-page-counter:empty { display: none; }
#ws-draft .canvas-toolbar-right { gap: 6px; margin-left: auto; }
#ws-draft .canvas-action-btn, .canvas-command-menu > summary {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 34px; box-sizing: border-box; padding: 7px 11px;
  border: 1px solid var(--cw-line); border-radius: 6px; background: transparent;
  color: var(--cw-secondary); font: 500 11px/1.35 var(--cw-ui); white-space: nowrap;
  cursor: pointer; transition: color 160ms, background 160ms, border-color 160ms;
}
#ws-draft .canvas-action-btn:hover, .canvas-command-menu > summary:hover, .canvas-command-menu[open] > summary {
  background: var(--cw-raised); color: var(--cw-ink); border-color: #e6a1aa45;
}
#ws-draft .canvas-action-btn.accent { background: #982c3d; border-color: #c65b6b66; color: #fff2f3; }
#ws-draft .canvas-action-btn.accent:hover { background: #ad3548; }
.canvas-command-menu { position: relative; }
.canvas-command-menu > summary { list-style: none; }
.canvas-command-menu > summary::-webkit-details-marker { display: none; }
.canvas-command-menu > summary [data-atlas-icon="chevron"] svg { width: 12px; height: 12px; margin-left: 2px; }
.canvas-command-popover {
  position: absolute; right: 0; top: calc(100% + 8px); width: 224px; max-width: calc(100vw - 32px);
  max-height: min(430px, calc(100vh - 140px)); overflow-y: auto; overscroll-behavior: contain;
  padding: 7px; background: #2a191f; border: 1px solid #64434c; border-radius: 9px;
  box-shadow: 0 18px 45px #0007; z-index: 30; animation: cw-arrive 140ms ease-out;
  scrollbar-width: thin; scrollbar-color: #65414b #2a191f;
}
.canvas-menu-heading { display: block; color: var(--cw-muted); font: 500 10px/1.5 var(--cw-ui); letter-spacing: .08em; text-transform: uppercase; padding: 7px 9px 9px; }
#ws-draft .canvas-command-popover .canvas-action-btn { width: 100%; justify-content: flex-start; border-color: transparent; min-height: 38px; }
#ws-draft .canvas-command-popover .canvas-select { width: 100%; max-width: 100%; border-radius: 6px; margin-top: 7px; font: 400 11px/1.4 var(--cw-ui); }
.canvas-more-menu > summary { font-size: 12px; letter-spacing: 2px; }

/* A compact two-row ribbon keeps related tools together at every width. */
#ws-draft .canvas-ribbon { background: var(--cw-panel); border-bottom: 1px solid var(--cw-line); }
#ws-draft .canvas-ribbon-tabs-bar { background: #211216; border-bottom: 1px solid var(--cw-line); gap: 10px; padding: 0 20px; }
#ws-draft .ribbon-tab-btn { position: relative; padding: 11px 7px 10px; font: 500 12px/1.35 var(--cw-ui); color: var(--cw-muted); border: 0; border-radius: 0; background: transparent; }
#ws-draft .ribbon-tab-btn:hover { color: var(--cw-ink); }
#ws-draft .ribbon-tab-btn.active { color: var(--cw-ink); background: transparent; }
#ws-draft .ribbon-tab-btn.active::after { content: ''; position: absolute; left: 7px; right: 7px; bottom: 0; height: 2px; border-radius: 2px; background: var(--cw-ruby); }
#ws-draft .canvas-ribbon-content { padding: 10px 15px 8px; min-height: 102px; background: #26171c; scrollbar-width: thin; scrollbar-color: #65414b #26171c; }
#ws-draft .ribbon-pane { gap: 5px; width: max-content; min-width: 100%; }
#ws-draft .ribbon-group { padding: 0 6px; gap: 8px; }
#ws-draft .ribbon-group-tools { align-content: center; flex-wrap: wrap; column-gap: 5px; row-gap: 4px; }
#ws-draft .ribbon-group-tools:has(> .ribbon-row) { flex-direction: column; align-items: flex-start; justify-content: center; }
#ws-draft .ribbon-row { gap: 3px; }
#ws-draft .ribbon-divider { margin: 2px 7px; background: var(--cw-line); }
#ws-draft .ribbon-group-title { color: var(--cw-muted); font: 400 9px/1.2 var(--cw-ui); letter-spacing: .06em; padding: 0; text-transform: none; }
#ws-draft :is(.ribbon-tool-btn, .ribbon-mini-btn, .ribbon-icon-btn) { border-radius: 5px; color: var(--cw-secondary); font-family: var(--cw-ui); transition: background 160ms, color 160ms; }
#ws-draft .ribbon-tool-btn { height: 60px; padding: 7px 8px; gap: 5px; }
#ws-draft .ribbon-tool-btn .tool-icon { display: inline-flex; align-items: center; justify-content: center; height: 24px; margin: 0; }
#ws-draft .tool-icon svg { width: 23px; height: 23px; stroke-width: 1.4; }
#ws-draft .ribbon-tool-btn .tool-label { font: 400 10px/1.4 var(--cw-ui); }
#ws-draft .ribbon-mini-btn { justify-content: flex-start; gap: 7px; min-height: 25px; padding: 3px 6px; font-size: 10px; }
#ws-draft .ribbon-mini-btn svg { width: 14px; height: 14px; }
#ws-draft .ribbon-icon-btn { height: 29px; min-width: 29px; padding: 4px; font-size: 12px; }
#ws-draft :is(.ribbon-tool-btn, .ribbon-mini-btn, .ribbon-icon-btn):hover { color: var(--cw-ink); background: #ffffff09; border-color: var(--cw-line); }
#ws-draft :is(.ribbon-tool-btn, .ribbon-mini-btn, .ribbon-icon-btn).active,
#ws-draft .ribbon-icon-btn.on { background: #a6384b30; color: #f5bbc3; border-color: #c3485960; }
#ws-draft :is(.ribbon-select, .canvas-select) {
  appearance: none; -webkit-appearance: none; color-scheme: dark;
  border: 1px solid #70505a; border-radius: 5px; background-color: #2b1c22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4 3 3 3-3' fill='none' stroke='%23c7bab9' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center; padding: 5px 25px 5px 9px;
  height: 29px; font: 400 11px/1.4 var(--cw-ui); color: var(--cw-ink); box-shadow: none;
}
#ws-draft #ribbonFontFamily { width: 146px; }
#ws-draft .ribbon-size-select { width: 57px; }
#ws-draft .ribbon-spacing-select { width: 95px; }
#ws-draft .ribbon-styles-gallery { gap: 4px; max-width: 220px; }
#ws-draft .ribbon-style-card { background: #35232a; border-color: var(--cw-line); color: var(--cw-ink); min-width: 65px; width: 65px; border-radius: 5px; padding: 5px; }
#ws-draft .rsc-preview { color: var(--cw-ink); font-size: 10px; }
#ws-draft .ribbon-style-card:hover { border-color: #bd6978; background: #412630; }
#ws-draft .canvas-scroll-area { background: #1a1014; }
#ws-draft #canvasEditorWrap { background: #1a1014; padding-top: 32px; padding-bottom: 70px; }
#ws-draft #canvasEditorWrap:not(.draft-mode) #canvasEditor { border: 1px solid #ded8d5; border-radius: 1px; box-shadow: 0 12px 36px #0005, 0 1px 3px #0003; }
#ws-draft .canvas-ruler { background: #2b1b21; border-color: var(--cw-line); }
#ws-draft .canvas-findreplace { background: #2b1b21; }
@media (max-width: 900px) {
  #ws-draft .canvas-toolbar { padding: 10px 12px; gap: 10px; }
  #ws-draft .canvas-toolbar-right { flex-wrap: wrap; }
  .canvas-document-caption { display: none; }
  #ws-draft .canvas-ribbon-tabs-bar { padding-inline: 12px; gap: 6px; }
}
@media (max-width: 600px) {
  #ws-draft .canvas-toolbar { align-items: flex-start; }
  #ws-draft .canvas-toolbar-right { width: 100%; margin-left: 0; gap: 4px; }
  #ws-draft .canvas-toolbar-right > .canvas-action-btn:first-child { display: inline-flex; }
  #ws-draft .canvas-toolbar-right > .canvas-action-btn:first-child > span:last-child { display: none; }
  #ws-draft .canvas-action-btn, .canvas-command-menu > summary { min-height: 40px; padding: 7px 8px; font-size: 10px; }
  .canvas-command-popover { left: 0; right: auto; }
  .canvas-more-menu .canvas-command-popover { left: auto; right: 0; }
  #ws-draft .ribbon-tab-btn { font-size: 11px; padding-inline: 4px; }
  .cmsg .message-actions .ma-btn { min-height: 40px; }
  .cmsg .message-actions .ma-btn:not(.ma-primary) { width: 40px; }
  .apt-track { display: none; }
  .apt-status { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .atlas-premium-typing, .canvas-command-popover, .ma-menu { animation: none; }
  #chatBox .cmsg.bot .cb:has(> .atlas-premium-typing), #chatBox .cmsg.bot .cb:has(> .atlas-premium-typing)::before,
  .apt-halo, .apt-sweep, .apt-status, .apt-status.apt-swap { animation: none !important; }
  .apt-sweep, .apt-orb::after { display: none; }
  .atlas-processing .atlas-compass-ring, .apt-mark > .atlas-compass-ring, .apt-track i, .atlas-premium-typing[data-intent="research"] .apt-mark, .atlas-premium-typing::after { animation: none !important; transition: none; }
  #chatBox .cmsg .message-actions, .cmsg .message-actions .ma-btn[data-tip]::after { transition: none; }
  #chatBox .cmsg > .cb > *::after { animation: none !important; }
  .sbf-seal .atlas-compass-ring { transition: none; }
  .message-actions, .message-actions button, #ws-draft :is(button, summary), .sbf-seal .atlas-meridyen-mark::before, .sbf-seal .atlas-meridyen-mark::after { transition: none; }
}
@media print {
  #ws-draft .canvas-toolbar, #ws-draft .canvas-ribbon { display: none !important; }
  #ws-draft #canvasEditorWrap { background: white; padding: 0; }
  #ws-draft #canvasEditorWrap #canvasEditor { border: 0; box-shadow: none; }
}

#ws-draft .ribbon-styles-gallery { max-width: 249px; align-items: stretch; }
#ws-draft .ribbon-style-card { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 76px; width: 76px; height: 65px; }
#ws-draft .rsc-preview { font: 500 21px/1.2 'Source Serif 4', Georgia, serif; padding: 0; margin: 0; text-align: center; border: 0; background: none; }
#ws-draft .rsc-name { font: 400 8px/1.3 var(--cw-ui); color: var(--cw-secondary); white-space: normal; text-align: center; }
.provenance-panel > .provenance-toggle { border-radius: 6px; background: transparent; border-color: transparent; padding: 6px 8px; color: var(--cw-secondary); font: 400 11px/1.5 var(--cw-ui); }
.provenance-panel > .provenance-toggle:hover { background: #2d1a2040; border-color: var(--cw-line); }
.wf-progress { gap: 10px; font-family: var(--cw-ui); }
.wf-progress .wf-step { background: #27161c; border: 1px solid var(--cw-line); border-left: 2px solid var(--cw-ruby); border-radius: 7px; padding: 11px 14px; font: 400 13px/1.55 var(--cw-ui); }

/* Context menu & mini toolbar share the instrument icon language. */
.canvas-context-menu { border-radius: 9px; padding: 5px; background: #2a191f; border-color: #64434c; }
.canvas-context-menu .ccm-item { min-height: 32px; border-radius: 6px; font-family: var(--cw-ui); }
.canvas-context-menu .ccm-item:focus-visible { outline: 2px solid var(--cw-rose); outline-offset: -2px; }
.canvas-context-menu .ccm-icon { display: inline-flex; align-items: center; justify-content: center; }
.canvas-context-menu .ccm-icon svg { width: 15px; height: 15px; }
.canvas-context-menu .ccm-section-title { display: flex; align-items: center; gap: 6px; }
.canvas-context-menu .ccm-section-title svg { width: 12px; height: 12px; }
.canvas-mini-toolbar { border-radius: 10px; background: #2a191f; border-color: #64434c; }
.canvas-mini-toolbar .cmt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px; min-width: 30px; border-radius: 6px; }
.canvas-mini-toolbar .cmt-btn svg { width: 15px; height: 15px; }
.canvas-mini-toolbar .cmt-btn:focus-visible { outline: 2px solid var(--cw-rose); outline-offset: 1px; }

/* Find/replace option toggles. */
.canvas-find-opt { display: inline-flex; align-items: center; gap: 5px; font: 400 11px/1.3 var(--cw-ui); color: var(--cw-muted); cursor: pointer; user-select: none; padding: 3px 4px; border-radius: 5px; }
.canvas-find-opt:hover { color: var(--cw-ink); }
.canvas-find-opt input { accent-color: var(--cw-ruby); margin: 0; }
.canvas-find-opt:focus-within { outline: 2px solid var(--cw-rose); outline-offset: 1px; }

/* Ribbon controls outside the Home formatting row share the same instrument styling. */
#ws-draft .ribbon-undo-stack { flex-direction: column; justify-content: center; gap: 4px; }
/* The colour input must be positioned against its own wrapper: without it the invisible
   input stretched over the whole ribbon row and swallowed clicks on alignment/styles. */
#ws-draft .ribbon-color-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 29px; min-width: 29px; border-radius: 5px; cursor: pointer; color: var(--cw-secondary); }
#ws-draft .ribbon-color-wrap:hover { background: #ffffff09; color: var(--cw-ink); }
#ws-draft .ribbon-color-wrap:focus-within { outline: 2px solid var(--cw-rose); outline-offset: 1px; }
#ws-draft .ribbon-color-label { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; border: 0; padding: 0; font: 600 12px/1 var(--cw-ui); color: inherit; pointer-events: none; }
#ws-draft .ribbon-color-label svg { width: 14px; height: 14px; }
#ws-draft .ribbon-color-swatch { display: block; width: 15px; height: 3px; border-radius: 1px; box-shadow: 0 0 0 1px #ffffff26; }
#ws-draft .ribbon-color-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
/* style.css caps .ribbon-spacing-select at 80px, which cut "1.65 (Okuma)" to "1.65 (Ok". */
#ws-draft .ribbon-spacing-select { width: 108px; max-width: 108px; }
#ws-draft .ribbon-select-wide { width: 190px; max-width: 190px; }
#ws-draft .ribbon-styles-row { display: flex; align-items: stretch; gap: 4px; }
#ws-draft .ribbon-styles-gallery { max-width: 236px; scroll-snap-type: x mandatory; }
#ws-draft .ribbon-style-card { scroll-snap-align: start; }
#ws-draft .ribbon-style-more-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; padding: 0; border-radius: 5px; background: #35232a; border: 1px solid var(--cw-line); color: var(--cw-secondary); }
#ws-draft .ribbon-style-more-btn:hover, #ws-draft .ribbon-style-more-btn[aria-expanded="true"] { color: var(--cw-ink); border-color: #bd6978; background: #412630; }
#ws-draft .ribbon-style-more-btn svg { width: 13px; height: 13px; }
#ws-draft .ribbon-lbl { font: 400 11px/1.3 var(--cw-ui); color: var(--cw-muted); white-space: nowrap; margin-right: 2px; }
#ws-draft .ribbon-row + .ribbon-row { margin-top: 2px; }
#ws-draft .ribbon-num-field { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; }
#ws-draft .ribbon-num-input { width: 58px; height: 27px; box-sizing: border-box; padding: 3px 6px; border: 1px solid #70505a; border-radius: 5px; background: #2b1c22; color: var(--cw-ink); font: 400 11px/1.3 var(--cw-ui); color-scheme: dark; }
#ws-draft .ribbon-num-input:focus-visible { outline: 2px solid var(--cw-rose); outline-offset: 1px; }
#ws-draft .ribbon-unit { font: 400 10px/1 var(--cw-ui); color: var(--cw-muted); }
#ws-draft .ribbon-select:disabled { opacity: .6; cursor: not-allowed; }
#ws-draft .ribbon-chk-label { display: flex; align-items: center; gap: 7px; font: 400 11px/1.3 var(--cw-ui); color: var(--cw-secondary); cursor: pointer; padding: 3px 4px; border-radius: 5px; }
#ws-draft .ribbon-chk-label:hover { color: var(--cw-ink); }
#ws-draft .ribbon-chk-label:focus-within { outline: 2px solid var(--cw-rose); outline-offset: 1px; }
#ws-draft .ribbon-chk-label input, #ws-draft .ribbon-zoom-slider { accent-color: var(--cw-ruby); margin: 0; }
#ws-draft .ribbon-zoom-slider { width: 120px; }
#ws-draft .ribbon-zoom-val { font: 500 11px/1 var(--cw-ui); color: var(--cw-secondary); min-width: 36px; font-variant-numeric: tabular-nums; }
#ws-draft .ribbon-accept-btn { color: #a9ccaf; }
#ws-draft .ribbon-reject-btn { color: #e6a1aa; }
#ws-draft .ribbon-tab-btn:focus-visible { outline: 2px solid var(--cw-rose); outline-offset: -2px; }
.canvas-styles-menu {
  position: fixed; z-index: 9999; width: 240px; max-height: min(420px, calc(100vh - 24px)); overflow-y: auto;
  padding: 5px; background: #2a191f; border: 1px solid #64434c; border-radius: 9px; box-shadow: 0 18px 45px #0007;
  animation: cw-arrive 140ms ease-out;
}
.canvas-styles-menu .csm-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--cw-ink); text-align: left; cursor: pointer; }
.canvas-styles-menu .csm-item:hover, .canvas-styles-menu .csm-item:focus-visible { background: var(--cw-raised); outline: none; }
.canvas-styles-menu .csm-preview { width: 30px; flex: 0 0 auto; text-align: center; font: 500 16px/1 'Source Serif 4', Georgia, serif; color: var(--cw-rose); padding: 0; margin: 0; border: 0; background: none; }
.canvas-styles-menu .csm-name { font: 400 12px/1.3 var(--cw-ui); color: var(--cw-secondary); }
@media (prefers-reduced-motion: reduce) {
  .canvas-styles-menu { animation: none; }
}

/* Composer: Send and Stop occupy one slot; the empty state only looks inactive. */
.chat-input-wrap :is(#chatSendBtn, #chatStopBtn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 32px; margin: 6px 8px 6px 0; padding: 0 12px 0 14px; border-radius: 8px;
  font: 600 12px/1 var(--cw-ui); letter-spacing: .01em; white-space: nowrap;
  transition: opacity 140ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.chat-input-wrap .composer-btn-icon svg { width: 15px; height: 15px; stroke-width: 2; }
.chat-input-wrap #chatSendBtn[aria-disabled="true"] { opacity: .42; box-shadow: none; cursor: default; }
.chat-input-wrap[data-composer="generating"] #chatSendBtn { display: none; }
.chat-input-wrap #chatStopBtn {
  padding: 0 13px 0 11px; color: var(--cw-ink); background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(230, 161, 170, .38);
}
.chat-input-wrap #chatStopBtn:hover { background: rgba(195, 72, 89, .16); border-color: rgba(230, 161, 170, .6); }
.chat-input-wrap #chatStopBtn .composer-btn-icon svg { fill: currentColor; stroke-width: 0; width: 11px; height: 11px; }
.chat-input-wrap :is(#chatSendBtn, #chatStopBtn):focus-visible { outline: 2px solid var(--cw-rose); outline-offset: 2px; }
@media (max-width: 600px) {
  .chat-input-wrap :is(#chatSendBtn, #chatStopBtn) { min-width: 44px; height: 40px; padding: 0 12px; }
  .chat-input-wrap #chatSendBtn .composer-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* Error inside the reply bubble: one surface, a ruby rule marks it; no card nested in a card. */
#chatBox .cmsg[data-gen="error"] > .cb { border-color: rgba(195, 72, 89, .42); box-shadow: inset 3px 0 0 rgba(195, 72, 89, .7); }
#chatBox .cb > .error-notice { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; max-width: 62ch; }
#chatBox .cb > .error-notice .error-notice-title { font: 600 12.5px/1.3 var(--cw-ui); color: #f0a3a3; letter-spacing: .01em; }
#chatBox .cb > .error-notice .error-notice-msg { font-size: 14px; }
.error-notice-retry { display: inline-flex; align-items: center; gap: 6px; }
.error-notice-retry .atlas-ui-icon { width: 14px; height: 14px; }

/* Ribbon overflow: fade the edge that has more groups behind it. */
#ws-draft .canvas-ribbon-content[data-overflow="end"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); }
#ws-draft .canvas-ribbon-content[data-overflow="start"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px); mask-image: linear-gradient(90deg, transparent, #000 64px); }
#ws-draft .canvas-ribbon-content[data-overflow="start end"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent); }

/* Attachment chips: names truncate with the full name in the tooltip; removal is a real button. */
#fileChips .file-chip { display: inline-flex; align-items: center; gap: 6px; max-width: min(320px, 100%); min-width: 0; }
#fileChips .fc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fileChips .status-dot { flex: 0 0 auto; }
#fileChips .fc-x {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 22px; height: 22px; margin: -3px -6px -3px 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--cw-muted); cursor: pointer;
}
#fileChips .fc-x .atlas-ui-icon { width: 12px; height: 12px; }
#fileChips .fc-x:hover { color: var(--cw-ink); background: rgba(255, 255, 255, .08); }
#fileChips .fc-x:focus-visible, #fileBanner .fb-clear:focus-visible { outline: 2px solid var(--cw-rose); outline-offset: 1px; }
#fileBanner { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
#fileBanner em { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#fileBanner .fb-clear { margin-left: auto; flex: 0 0 auto; }

/* LAWYER_ATTESTED: a human statement, marked apart from text-verified status. */
.learning-attested { cursor: help; border-bottom: 1px dotted rgba(230, 161, 170, .6); }

/* Tracked changes in the document (canvasTrackChanges.js). */
#canvasEditor ins.tc-ins { color: #1d6b3a; text-decoration: underline; text-decoration-color: rgba(29, 107, 58, .75); background: rgba(29, 107, 58, .07); }
#canvasEditor del.tc-del { color: #a8323d; text-decoration: line-through; background: rgba(168, 50, 61, .06); }
#canvasEditor.tc-measure del.tc-del { display: none; }
#ws-draft .ribbon-row.ribbon-col { flex-direction: column; align-items: flex-start; gap: 3px; }
/* Markup views act on the tracked marks: simple shows the result with a quiet underline, none shows the result only. */
#canvasEditorWrap.review-simple-markup #canvasEditor del.tc-del,
#canvasEditorWrap.review-no-markup #canvasEditor del.tc-del { display: none; }
#canvasEditorWrap.review-simple-markup #canvasEditor ins.tc-ins { color: inherit; background: none; text-decoration: underline dotted rgba(29, 107, 58, .6); }
#canvasEditorWrap.review-no-markup #canvasEditor ins.tc-ins { color: inherit; background: none; text-decoration: none; }

/* Premium Canvas: the desk recedes into lit crimson depth, the sheet reads as warm paper under a
   soft key light, and the ribbon carries no stray scroll chrome. Print keeps pure white. */
#ws-draft .canvas-scroll-area {
  background:
    radial-gradient(1100px 460px at 50% -140px, rgba(206, 78, 104, .16), transparent 70%),
    radial-gradient(900px 600px at 50% 115%, rgba(0, 0, 0, .42), transparent 70%),
    linear-gradient(180deg, #1d1016 0%, #150a0f 100%);
}
#ws-draft #canvasEditorWrap { background: transparent; }
#ws-draft #canvasEditorWrap:not(.draft-mode) #canvasEditor,
#ws-draft #canvasEditorWrap.print-layout-mode #canvasEditor {
  background: linear-gradient(180deg, #fffdf9 0%, #fbf7f1 100%) !important;
  border: 0; border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(255, 238, 230, .5),
    0 0 0 2px rgba(34, 8, 16, .55),
    0 3px 6px rgba(0, 0, 0, .28),
    0 22px 44px -10px rgba(0, 0, 0, .6),
    0 60px 110px -40px rgba(150, 40, 66, .42) !important;
}
#ws-draft .canvas-ribbon-content {
  background: linear-gradient(180deg, #28181e 0%, #22141a 100%);
  scrollbar-width: thin; scrollbar-color: transparent transparent;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .35), 0 10px 22px -18px rgba(0, 0, 0, .9);
}
#ws-draft .canvas-ribbon-content:hover { scrollbar-color: rgba(230, 161, 170, .28) transparent; }
#ws-draft .canvas-ribbon-content::-webkit-scrollbar { height: 6px; }
#ws-draft .canvas-ribbon-content::-webkit-scrollbar-track, #ws-draft .canvas-ribbon-content::-webkit-scrollbar-corner { background: transparent; }
#ws-draft .canvas-ribbon-content::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
#ws-draft .canvas-ribbon-content:hover::-webkit-scrollbar-thumb { background: rgba(230, 161, 170, .28); }
#ws-draft .ribbon-styles-gallery { scrollbar-width: none; }
#ws-draft .ribbon-styles-gallery::-webkit-scrollbar { display: none; }
#ws-draft .ribbon-tab-btn.active::after { background: linear-gradient(90deg, #b8465f, #f0a9b3); box-shadow: 0 0 10px rgba(236, 130, 148, .55); }
#ws-draft .ribbon-style-card {
  background: linear-gradient(180deg, #3a252d 0%, #2e1c23 100%);
  box-shadow: inset 0 1px 0 rgba(255, 236, 238, .05), 0 4px 10px -6px rgba(0, 0, 0, .8);
  transition: border-color 160ms, background 160ms, transform 160ms;
}
#ws-draft .ribbon-style-card:hover { transform: translateY(-1px); }
#ws-draft .rsc-preview { background: linear-gradient(180deg, #fff3f0, #e6a1aa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#ws-draft .canvas-status:empty { display: none; }

/* Empty sheet: one lit card instead of a flat bordered box. */
#ws-draft .main:has(> .oa.empty) { padding: 28px 24px; }
#ws-draft .oa.empty {
  min-height: 300px; border-radius: 22px; border: 1px solid transparent; isolation: isolate;
  background:
    radial-gradient(520px 260px at 50% 0%, rgba(214, 92, 112, .16), transparent 70%) padding-box,
    linear-gradient(180deg, #23121a 0%, #1a0d13 100%) padding-box,
    linear-gradient(180deg, rgba(240, 169, 179, .34), rgba(240, 169, 179, .06) 45%, rgba(120, 40, 62, .3)) border-box;
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 236, 238, .04);
}
#ws-draft .oa.empty .ph { gap: 12px; padding: 56px 24px; }
#ws-draft .oa.empty .ph-atlas-seal { position: relative; width: 84px; height: 84px; margin-bottom: 6px; }
#ws-draft .oa.empty .ph-atlas-seal::before {
  content: ''; position: absolute; inset: -22px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(236, 110, 132, .34), rgba(196, 64, 90, .1) 45%, transparent 70%);
  animation: apt-breathe 4.2s ease-in-out infinite;
}
#ws-draft .oa.empty .ph-atlas-seal .atlas-meridyen-mark { width: 84px; height: 84px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); }
#ws-draft .oa.empty .ph-atlas-seal .atlas-compass-ring { animation: cw-compass-turn 60s linear infinite; }
#ws-draft .oa.empty .ph h3 { font: 600 19px/1.3 'Source Serif 4', Georgia, serif; letter-spacing: .01em; color: var(--cw-ink); }
#ws-draft .oa.empty .ph p { font: 400 13.5px/1.7 var(--cw-ui); color: var(--cw-secondary); max-width: 360px; }
#ws-draft .oa.empty .ph-motto { margin-top: 6px; font: 500 9.5px/1 var(--cw-ui); letter-spacing: .32em; color: #b9868f; opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  #ws-draft .oa.empty .ph-atlas-seal::before, #ws-draft .oa.empty .ph-atlas-seal .atlas-compass-ring, #ws-draft .ribbon-style-card { animation: none; transition: none; }
}
@media print {
  #ws-draft #canvasEditorWrap #canvasEditor, #ws-draft #canvasEditorWrap.print-layout-mode #canvasEditor { background: #fff !important; box-shadow: none !important; }
  #ws-draft .canvas-scroll-area { background: #fff; }
}
/* An empty header zone stays invisible until the pointer or caret reaches it, as in Word. */
/* Word draws no rule under a header or over a footer; the zone edge shows only while it is being reached or edited. */
#ws-draft .print-layout-mode .canvas-running-zone { transition: border-color 180ms ease; }
#ws-draft .print-layout-mode .canvas-running-zone:not(:focus):not(:hover) { border-color: transparent; }
#ws-draft .print-layout-mode .canvas-header-zone:empty:not(:focus)::before { opacity: 0; transition: opacity 180ms ease; }
#ws-draft #canvasEditorWrap.print-layout-mode .canvas-sheet:hover .canvas-header-zone:empty::before,
#ws-draft .print-layout-mode .canvas-header-zone:empty:hover::before { opacity: .75; }
#ws-draft .print-layout-mode .canvas-header-zone:empty:hover { border-bottom-color: rgba(30, 26, 24, .16); }
/* Word keeps the line height when a line carries a superscript (footnote number, ordinal); a raised
   glyph must not open a gap above its line. Running zones sit exactly on the page margins, as in Word. */
#canvasEditor sup, #canvasEditor sub { line-height: 0; }
#ws-draft .print-layout-mode .canvas-running-zone { padding-left: 0; padding-right: 0; }

/* Canvas pages carry the paper; the editor above them is transparent. */
#ws-draft #canvasEditorWrap.print-layout-mode.canvas-paged #canvasEditor { background: transparent !important; box-shadow: none !important; border: 0 !important; }
#ws-draft .canvas-page-card {
  background: linear-gradient(180deg, #fffdf9 0%, #fbf7f1 100%);
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(255, 238, 230, .5),
    0 0 0 2px rgba(34, 8, 16, .55),
    0 3px 6px rgba(0, 0, 0, .28),
    0 22px 44px -10px rgba(0, 0, 0, .6),
    0 60px 110px -40px rgba(150, 40, 66, .42);
}
@media print { #ws-draft .canvas-page-card { background: #fff; box-shadow: none; } }

/* ─── Aurora araştırma yüzeyi (tek ajan + alt ajan ağacı) ───────────────────
   Sözleşme: ARASTIRMA_AJANI_MIMARISI.md §11.5 + TASARIM_NOTLARI.md.
   - Her gerçek araştırmada canonical A.T.L.A.S. ikonu canlanır (atlasPulse).
   - Ağaç yalnız gerçek subagent spawn olayıyla açılır; timer ile ilerleme yok.
   - Sabit geometri: SVG ağaç alanı 160px (yaprak y ≤ 148), görev ızgarası
     top:176px → en az 16px opak ayırıcı. Etiketler çizgilerin üzerine binmez.
   - `delivered` yeşili doğrulama değildir; yalnız teslim durumudur. */
.aurora-research {
  --aur-bg: #17151b; --aur-panel: #211e26; --aur-card: #302832; --aur-line: #5e4b59;
  --aur-text: #f4eef1; --aur-muted: #c5b6c2; --aur-accent: #ef98ad; --aur-wine: #713649;
  --aur-green: #a7d3ba; --aur-amber: #edc28c;
  position: relative; margin-top: 10px; padding: 14px 16px 12px;
  border: 1px solid rgba(94, 75, 89, .55); border-radius: 12px;
  background: radial-gradient(ellipse at 50% 0%, rgba(113, 54, 73, .32), transparent 68%), var(--aur-panel);
  color: var(--aur-text); font-family: var(--cw-ui, 'Avenir Next', 'Segoe UI', sans-serif);
  animation: aur-arrive 260ms cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes aur-arrive { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.aur-mast { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.aur-mast-brand { display: inline-flex; align-items: center; gap: 9px; font: 10px/1 ui-monospace, monospace; letter-spacing: .16em; color: var(--aur-muted); text-transform: uppercase; }
.aur-icon { width: 22px; height: 22px; display: block; border-radius: 6px; box-shadow: 0 0 0 1px rgba(239, 152, 173, .27); animation: atlasPulse 1.25s ease-in-out infinite; }
.aur-kind { font: 10px/1 ui-monospace, monospace; letter-spacing: .16em; color: var(--aur-accent); text-transform: uppercase; white-space: nowrap; }
.aur-wordmark { margin: 12px 0 4px; text-align: center; font: normal clamp(15px, 1.9vw, 21px)/1.3 Georgia, 'Times New Roman', serif; letter-spacing: .045em; color: var(--aur-text); overflow-wrap: anywhere; }
.aur-micro { text-align: center; font: 11px/1.45 ui-monospace, monospace; color: var(--aur-muted); min-height: 16px; }
.aur-composition { position: relative; margin-top: 10px; }
.aur-svg { display: block; width: 100%; height: 160px; overflow: visible; }
.aur-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin-top: 16px; }
.aur-trunk, .aur-primary, .aur-branch { fill: none; stroke: var(--aur-accent); stroke-width: .9; opacity: .65; stroke-linecap: round; stroke-linejoin: round; }
.aur-trunk { stroke-width: 1.5; opacity: .9; }
.aur-node { fill: none; stroke: var(--aur-accent); stroke-width: .9; opacity: .65; }
/* Dal çizimi: pathLength="1" ile normalize edilir; offset ilk render'da inline 1,
   iki rAF sonra canlı düğümde 0'a geçer (~70 ms adım gecikmesiyle, §11.5). */
.aur-path-draw { stroke-dasharray: 1; transition: stroke-dashoffset 420ms cubic-bezier(.2, .8, .2, 1); }
.aur-drawn { stroke-dashoffset: 0; }
.aur-branch.st-running { stroke-dasharray: 3 4; animation: aur-flow 1.4s linear infinite; }
.aur-branch.st-queued { opacity: .32; }
.aur-branch.st-delivered { stroke: var(--aur-green); opacity: .8; }
.aur-branch.st-failed, .aur-branch.st-cancelled { stroke: var(--aur-amber); opacity: .6; }
.aur-leaf { fill: var(--aur-accent); stroke: var(--aur-bg); stroke-width: 1.5; }
.aur-leaf.st-queued { opacity: .35; }
.aur-leaf.st-delivered { fill: var(--aur-green); }
.aur-leaf.st-failed, .aur-leaf.st-cancelled { fill: var(--aur-amber); }
.aur-leaf-index { fill: var(--aur-muted); stroke: none; font: 8px ui-monospace, monospace; text-anchor: middle; }
.aur-strand {
  position: relative; min-height: 52px; min-width: 0; padding: 7px 10px; overflow: hidden;
  border: 1px solid rgba(113, 54, 73, .55); border-left: 2px solid var(--aur-accent); border-radius: 5px;
  background: var(--aur-panel); text-align: left;
  transition: opacity 120ms, border-color 180ms, background 180ms;
}
.aur-strand:hover { background: var(--aur-card); }
.aur-strand strong { display: flex; align-items: center; gap: 6px; font: normal 15px/1.3 Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aur-index { display: inline-grid; place-items: center; flex: 0 0 17px; height: 17px; border: 1px solid var(--aur-line); border-radius: 50%; font: 9px ui-monospace, monospace; color: var(--aur-muted); }
.aur-mark { order: -1; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--aur-accent); box-shadow: 0 0 8px var(--aur-accent); }
.aur-strand small { display: block; margin-top: 4px; font: 10px/1.35 ui-monospace, monospace; color: var(--aur-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aur-strand.st-queued { opacity: .62; }
.aur-strand.st-queued .aur-mark { background: var(--aur-line); box-shadow: none; }
.aur-strand.st-delivered { border-left-color: var(--aur-green); }
.aur-strand.st-delivered .aur-mark { background: var(--aur-green); box-shadow: 0 0 8px var(--aur-green); }
.aur-strand.st-failed, .aur-strand.st-cancelled { border-left-color: var(--aur-amber); }
.aur-strand.st-failed .aur-mark, .aur-strand.st-cancelled .aur-mark { background: var(--aur-amber); box-shadow: 0 0 8px var(--aur-amber); }
.aur-strand.st-running .aur-mark { animation: aur-pulse 1.6s ease-in-out infinite; }
.aur-ticker {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--aur-line);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 22px;
}
.aur-line { font: 11px/1.5 ui-monospace, monospace; color: var(--aur-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aur-line b { color: var(--aur-accent); font-weight: normal; margin-right: 9px; }
.aur-caption { margin-top: 10px; text-align: center; font: italic 12px/1.4 Georgia, serif; color: var(--aur-muted); }
.aur-mast-right { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
.aur-count { font: 10px/1 ui-monospace, monospace; color: var(--aur-muted); white-space: nowrap; }
@keyframes aur-flow { to { stroke-dashoffset: -7; } }
@keyframes aur-pulse { 50% { opacity: .35; } }
@keyframes atlasPulse {
  0%, 100% { transform: scale(.96); filter: drop-shadow(0 0 2px rgba(239, 152, 173, .2)); }
  50% { transform: scale(1.04); filter: drop-shadow(0 0 8px rgba(239, 152, 173, .6)); }
}
@media (max-width: 560px) {
  .aur-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .aur-strand { min-height: 48px; padding: 6px 8px; }
  .aur-strand strong { font-size: 13px; }
  .aur-ticker { grid-template-columns: 1fr; }
  .aur-svg { height: 148px; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora-research, .aur-icon, .aur-branch.st-running, .aur-strand.st-running .aur-mark { animation: none !important; }
  .aur-path-draw { transition: none; }
}

/* ─── Araştırma kaynak köprüsü (owner kararı 2026-10-02) ────────────────────
   Kaynak LİSTESİ yerine cevabın sonunda tek satırlık tıklanabilir köprü.
   Doğrulanmamış aday ° ile işaretlenir; doğrulanmış gibi sunulmaz. */
.research-bridges {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 6px 2px 0; font: 10.5px/1.5 ui-monospace, monospace; color: var(--cw-muted, #a89aa0);
}
.research-bridges .rb-label { letter-spacing: .12em; text-transform: uppercase; color: var(--cw-secondary, #b3a6ab); }
.research-bridges .rb-link { color: var(--cw-secondary, #cbbfc4); text-decoration: none; border-bottom: 1px dotted rgba(217, 138, 150, .45); }
.research-bridges .rb-link:hover { color: #edc28c; border-bottom-color: rgba(237, 194, 140, .7); }
.research-bridges .rb-link.is-unverified { opacity: .82; }
.research-bridges .rb-link sup { color: #edc28c; margin-left: 1px; }

/* ─── Aurora: araştırma TÜRÜNE göre ayrı görsel karakter (§11.5) ───────────
   "Karar araştırması" ile "konu araştırması" aynı animasyonu paylaşmaz:
   karar → keskin/çizgisel tarama, konu → yumuşak dalga. Renk ve hat karakteri
   farklıdır; durum renkleri (teslim/hata) her ikisinde de korunur. */
.aurora-research[data-kind="decision"] { --aur-accent: #e8a0ad; }
.aurora-research[data-kind="topic"] { --aur-accent: #d79bb6; }
.aurora-research[data-kind="decision"] .aur-trunk { stroke-width: 1.8; }
.aurora-research[data-kind="topic"] .aur-trunk { stroke-width: 1.2; }
.aurora-research[data-kind="decision"] .aur-primary,
.aurora-research[data-kind="decision"] .aur-branch { stroke-dasharray: 2 3; }
.aurora-research[data-kind="topic"] .aur-primary,
.aurora-research[data-kind="topic"] .aur-branch { stroke-dasharray: 6 4; }
.aurora-research[data-kind="decision"] .aur-branch.st-running { animation-duration: 1s; }
.aurora-research[data-kind="topic"] .aur-branch.st-running { animation-duration: 1.9s; }
/* Canonical uygulama ikonu TÜM araştırma türlerinde AYNI nabzı kullanır
   (§11.5: "FAST/STANDARD/DEEP aynı ikon animasyonunu kullanır"). Tür farkı
   ağacın hat karakterinde ve akış hızındadır, marka göstergesinde değil. */

/* KATLANMIŞ PANEL: yalnız mast + özet. Amaç: yanıt yazılırken yazıyı
   kapatmamak. Başlığa tıklayınca geri açılır. */
.aurora-research.is-collapsed { padding: 9px 14px; cursor: pointer; }
.aurora-research.is-collapsed .aur-mast { margin: 0; }
.aurora-research.is-collapsed .aur-micro,
.aurora-research.is-collapsed .aur-caption { display: none; }
.aurora-research.is-collapsed .aur-mast-right .aur-count { color: var(--aur-accent); }
.aurora-research .aur-mast { cursor: pointer; }
.petition-learning-stat .pl-sub { color: var(--cw-muted, #a89aa0); font-size: 10px; }

/* ─── Chat kağıt görünümü: açılır/kapanır (owner kararı 2026-10-02) ─────────
   "Chatteki kağıt görüntüsü açılıp kapanabilir olmalı. Talebe göre açılmalı."
   Kapalıyken yalnız başlık şeridi görünür; kağıt yazışmayı örtmez. */
.doc-fold { margin: 8px 0 2px; }
.doc-fold-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 12px; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, rgba(58, 30, 40, .55), rgba(38, 20, 27, .55));
  border: 1px solid rgba(150, 96, 112, .38); border-radius: 9px;
  color: var(--cw-secondary, #cbbfc4); font: 600 10.5px/1 var(--cw-ui, system-ui); letter-spacing: .16em; text-transform: uppercase;
  transition: border-color 180ms ease, background 180ms ease;
}
.doc-fold-head:hover { border-color: rgba(217, 138, 150, .6); background: linear-gradient(180deg, rgba(72, 36, 48, .6), rgba(44, 22, 30, .6)); }
.doc-fold-hint { margin-left: auto; letter-spacing: .1em; color: var(--cw-muted, #a89aa0); font-weight: 500; }
.doc-fold-body { display: none; padding-top: 8px; }
.doc-fold.is-open .doc-fold-body { display: block; animation: doc-unfold 220ms cubic-bezier(.2, .8, .2, 1); }
@keyframes doc-unfold { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.doc-fold.is-open .doc-fold-head { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
@media (prefers-reduced-motion: reduce) { .doc-fold.is-open .doc-fold-body { animation: none; } }

/* ─── Araştırma STİLİNE göre ayrı animasyon karakteri ──────────────────────
   Owner: "Ajanın araştırma stillerine göre farklı animasyonlar tasarlanmalı."
   Üç eksen: tür (karar/konu), derinlik (fast/normal/deep), karşı-kanıt kolu.
   Canonical ikon nabzı (atlasPulse 1.25s) DEĞİŞMEZ — §11.5 onu tüm araştırma
   türlerinde aynı tutar; fark ağacın çizim/hareket karakterindedir. */
/* NOT: SVG alan yüksekliği SABİTTİR (160px, §11.5 sözleşmesi: yaprak y ≤ 148,
   ızgara 176px'ten başlar). Derinlik farkı yükseklikle DEĞİL, hareketle anlatılır. */
.aurora-research[data-depth="fast"] .aur-branch.st-running { animation-duration: .85s; }
.aurora-research[data-depth="fast"] .aur-path-draw { transition-duration: 260ms; }
.aurora-research[data-depth="normal"] .aur-branch.st-running { animation-duration: 1.4s; }
.aurora-research[data-depth="deep"] .aur-branch.st-running { animation-duration: 2.1s; }
.aurora-research[data-depth="deep"] .aur-path-draw { transition-duration: 620ms; }
.aurora-research[data-depth="deep"] .aur-trunk { stroke-width: 2; }
/* Karşı-kanıt kolu kendi rengiyle akar: ağaçta "kim neyi arıyor" okunur olur. */
.aurora-research[data-counter="true"] .aur-strand[data-role*="Karşı" i],
.aurora-research[data-counter="true"] .aur-strand[data-role*="karşı" i] { border-color: rgba(237, 194, 140, .5); }
.aurora-research[data-counter="true"] .aur-strand[data-role*="Karşı" i] .aur-leaf,
.aurora-research[data-counter="true"] .aur-strand[data-role*="karşı" i] .aur-leaf { fill: var(--aur-amber); }
@media (prefers-reduced-motion: reduce) {
  .aurora-research .aur-branch.st-running, .aurora-research .aur-path-draw { animation: none !important; transition: none !important; }
}