/* Inbox uses the workspace's opaque surfaces and bilingual type system.
   Keep presentation scoped here; channel, draft and delivery state belong to JS. */
.collaboration-shell,
.panel.collaboration-shell.active {
  display: grid;
  gap: 1rem;
  max-inline-size: 72rem;
  min-inline-size: 0;
  align-content: start;
}
.collaboration-shell > * { min-inline-size: 0; }
.collaboration-shell > h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.3vw, 1.65rem);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
/* The local/cloud delivery warning stays fully visible, never a tooltip. */
.collaboration-shell > h2 + p {
  margin: 0;
  padding: .75rem 1rem;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--muted);
  border-radius: .75rem;
  background: var(--row);
  color: var(--text);
  font-size: .875rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.collaboration-shell > form,
.collaboration-shell > section {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
  box-shadow: var(--polish-panel-shadow, none);
}
.collaboration-shell > form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .75rem;
}
.collaboration-shell > form > input,
.collaboration-shell > form > select {
  flex: 1 1 16rem;
  inline-size: auto;
}
.collaboration-shell :is(input, select, textarea, button) {
  min-height: 44px;
  min-inline-size: 0;
  max-inline-size: 100%;
  border: 1px solid var(--border);
  border-radius: .65rem;
  padding: .65rem .85rem;
  font: inherit;
  font-size: .9rem;
  line-height: 1.6;
}
.collaboration-shell :is(input, select, textarea) {
  background: var(--input);
  color: var(--text);
}
.collaboration-shell :is(input, textarea)::placeholder {
  color: var(--muted);
  opacity: 1;
}
.collaboration-shell textarea {
  inline-size: 100%;
  min-height: 9rem;
  resize: vertical;
}
.collaboration-shell > form > textarea { flex: 1 0 100%; }
.collaboration-shell .collaboration-layout { display: grid; grid-template-columns: minmax(220px, .35fr) minmax(0, .65fr); gap: 1rem; }
.collaboration-shell .collaboration-library, .collaboration-shell .collaboration-thread { min-inline-size: 0; padding: 1rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--card); }
.collaboration-shell .collaboration-thread { display: grid; align-content: start; gap: .75rem; }
.collaboration-shell .collaboration-create, .collaboration-shell .collaboration-compose { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
.collaboration-shell .collaboration-create label, .collaboration-shell .collaboration-compose label { display: grid; gap: .5rem; min-inline-size: 0; flex: 1 1 12rem; }
.collaboration-shell .collaboration-compose label:has(textarea) { flex: 1 0 100%; }
.collaboration-shell .collaboration-compose textarea { flex: 1 0 100%; }
.collaboration-shell .collaboration-library h3, .collaboration-shell .collaboration-thread h3 { margin-block: 0 .75rem; }
.collaboration-shell .collaboration-library nav { display: grid; gap: .5rem; margin-block: 1rem; }
.collaboration-shell .collaboration-library p, .collaboration-shell .collaboration-thread > p { color: var(--muted); line-height: 1.7; }
@media (max-width: 900px) { .collaboration-shell .collaboration-layout { grid-template-columns: minmax(0, 1fr); } }
.collaboration-shell select[multiple] { min-height: 7rem; }
.collaboration-shell button {
  background: var(--row);
  color: var(--text);
  font-weight: 600;
  text-align: start;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.collaboration-shell > form > button[type="submit"] {
  background: var(--green);
  border-color: var(--green);
  color: var(--bg);
  text-align: center;
}
.collaboration-shell button:enabled:hover {
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green);
}
.collaboration-shell :is(button, input, select, textarea):focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}
.collaboration-shell :is(button, input, select, textarea):disabled,
.collaboration-shell > form > button[type="submit"]:disabled {
  background: var(--card);
  border-color: var(--border);
  color: var(--muted);
  cursor: not-allowed;
  box-shadow: none;
}
.collaboration-shell > nav {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: start;
  padding-block: .25rem;
}
.collaboration-shell > nav:empty { display: none; }
.collaboration-shell > nav > button { border-radius: 999px; padding-inline: 1rem; }
.collaboration-shell > section {
  display: grid;
  gap: .75rem;
}
.collaboration-shell > section > h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.collaboration-shell > section > article {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-block-start: .75rem;
  border-block-start: 1px solid var(--border);
}
.collaboration-shell > section > article > p {
  flex: 1 1 12rem;
  min-inline-size: 0;
  margin: 0;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.collaboration-shell .collaboration-comment {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  max-inline-size: 100%;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
  overflow-wrap: anywhere;
}
.collaboration-shell .collaboration-comment > p {
  flex: 1 0 100%;
  min-inline-size: 0;
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.75;
}
.collaboration-shell .collaboration-comment > small {
  flex: 1 1 12rem;
  min-inline-size: 0;
  color: var(--muted);
  line-height: 1.6;
}
.collaboration-shell .collaboration-comment > ol {
  flex: 1 0 100%;
  min-inline-size: 0;
  margin-block: .25rem;
  padding-inline-start: 1.5rem;
}
.collaboration-shell [role="alert"] {
  flex: 1 0 100%;
  margin: 0;
  padding: .75rem;
  color: var(--danger-chip-fg);
  background: var(--danger-surface);
  border: 1px solid var(--danger-border);
  border-inline-start: 3px solid var(--danger-chip-fg);
  border-radius: .65rem;
  font-weight: 600;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.collaboration-shell [aria-invalid="true"] { border-color: var(--danger-chip-fg); }
@media (max-width: 640px) {
  .collaboration-shell > form,
  .collaboration-shell > section,
  .collaboration-shell .collaboration-comment { padding: .85rem; }
  .collaboration-shell > form > * { flex-basis: 100%; inline-size: 100%; }
  .collaboration-shell > nav > button { border-radius: .65rem; }
  .collaboration-shell > section > article > button { inline-size: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .collaboration-shell, .collaboration-shell * { animation: none; transition: none; }
}
@media (forced-colors: active) {
  .collaboration-shell > form,
  .collaboration-shell > section,
  .collaboration-shell .collaboration-comment,
  .collaboration-shell > h2 + p,
  .collaboration-shell [role="alert"] { border-color: CanvasText; box-shadow: none; }
  .collaboration-shell :is(button, input, select, textarea) { border-color: ButtonText; }
  .collaboration-shell :is(button, input, select, textarea):focus-visible { outline-color: Highlight; }
  .collaboration-shell :is(button, input, select, textarea):disabled { color: GrayText; border-color: GrayText; }
}
.panel.collaboration-shell:not(.active) { display: none; }

/* Focus materials for the workspace inbox. The existing local/cloud markup,
   draft guards, live errors and permissions remain owned by the controller. */
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration {
  --collaboration-paper: var(--preview-dialog-surface);
  --glass-disabled: var(--preview-row);
  --glass-disabled-text: var(--preview-muted);
  --glass-border: var(--preview-line);
  max-inline-size: 82rem;
  min-inline-size: 0;
  gap: 18px;
  color: var(--preview-ink);
  font-family: var(--preview-ui);
}
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration > h1 {
  margin: 0;
  color: var(--preview-ink);
  font: 400 clamp(34px, 3.6vw, 48px)/1.2 var(--preview-display);
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}
html[lang="ar"][data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration > h1 { font-size: 32px; line-height: 1.55; letter-spacing: 0; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration > h1 + p {
  max-inline-size: 84ch;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--preview-line);
  border-inline-start: 3px solid var(--preview-accent);
  border-radius: 12px;
  background: var(--collaboration-paper);
  color: var(--preview-muted);
  font: 400 13px/1.8 var(--preview-ui);
  overflow-wrap: anywhere;
}
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration :is(.collaboration-library, .collaboration-thread),
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration > :is(form, section) {
  min-inline-size: 0;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--preview-line);
  border-radius: 22px;
  background: var(--collaboration-paper);
  color: var(--preview-ink);
  box-shadow: var(--preview-shadow);
}
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration .collaboration-layout { grid-template-columns: minmax(220px, .32fr) minmax(0, .68fr); gap: 18px; align-items: start; margin-block: 0; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration :is(.collaboration-library > h2, .collaboration-thread > h3, section > h3) {
  margin: 0 0 14px;
  color: var(--preview-ink);
  font: 400 26px/1.4 var(--preview-display);
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
html[lang="ar"][data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration :is(.collaboration-library > h2, .collaboration-thread > h3, section > h3) { font-size: 22px; line-height: 1.6; letter-spacing: 0; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration :is(.collaboration-library > p, .collaboration-thread > p) { color: var(--preview-muted); font: 400 13px/1.8 var(--preview-ui); margin-block: 8px; overflow-wrap: anywhere; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration :is(.collaboration-create, .collaboration-compose) { gap: 12px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration .collaboration-create > :is(label, button) { flex-basis: 100%; inline-size: 100%; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration :is(.collaboration-create, .collaboration-compose) label > span { color: var(--preview-muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration :is(input, select, textarea, button) {
  box-sizing: border-box;
  min-height: 44px;
  min-inline-size: 0;
  max-inline-size: 100%;
  padding: 10px 12px;
  border: 1px solid var(--preview-control-line);
  border-radius: 12px;
  background: var(--preview-field);
  color: var(--preview-ink);
  font: 400 13px/1.7 var(--preview-ui);
  box-shadow: none;
}
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration :is(.collaboration-create, .collaboration-compose) label > :is(input, textarea) { inline-size: 100%; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration :is(input, textarea)::placeholder { color: var(--preview-muted); opacity: 1; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration textarea { min-height: 144px; resize: vertical; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration select[multiple] { min-height: 112px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration select option { background: var(--collaboration-paper); color: var(--preview-ink); padding: 6px 8px; white-space: normal; overflow-wrap: anywhere; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration button { font-weight: 500; white-space: normal; overflow-wrap: anywhere; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration button:enabled:hover { background: var(--preview-row); border-color: var(--preview-accent); box-shadow: none; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration :is(.rt-btn-primary, button[type="submit"]) {
  background: var(--preview-action);
  border-color: var(--preview-action);
  color: var(--preview-action-ink);
  font-weight: 600;
  text-align: center;
}
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration :is(.rt-btn-primary, button[type="submit"]):enabled:hover { background: var(--preview-action); border-color: var(--preview-action); color: var(--preview-action-ink); filter: brightness(.96); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration :is(input, select, textarea, button):disabled {
  background: var(--preview-row);
  border-color: var(--preview-line);
  color: var(--preview-muted);
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
  filter: none;
}
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration :is(button, input, select, textarea):focus-visible { outline: 2px solid var(--preview-accent); outline-offset: 3px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration .collaboration-library nav { gap: 8px; margin-block: 18px 0; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration nav:empty { display: none; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration nav button { text-align: start; border-radius: 12px; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration nav button[aria-current="true"] { border-color: var(--preview-accent); background: var(--preview-row); color: var(--preview-accent); font-weight: 600; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration .collaboration-comment {
  min-inline-size: 0;
  padding: 18px;
  border: 1px solid var(--preview-line);
  border-radius: 16px;
  background: var(--collaboration-paper);
  color: var(--preview-ink);
  box-shadow: none;
}
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration .collaboration-comment > p { font: 400 14px/1.85 var(--preview-ui); white-space: pre-wrap; overflow-wrap: anywhere; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration .collaboration-comment > small { font: 400 11px/1.7 var(--preview-mono); color: var(--preview-muted); overflow-wrap: anywhere; unicode-bidi: isolate; }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration .collaboration-comment > ol { padding: 14px; padding-inline-start: 32px; border: 1px solid var(--preview-line); border-radius: 12px; background: var(--preview-row); color: var(--preview-ink); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration .collaboration-comment li { padding-block: 4px; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 13px/1.8 var(--preview-ui); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration > section > article { border-color: var(--preview-line); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration > section > article > p { font: 400 13px/1.8 var(--preview-ui); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration > [aria-live] {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--preview-line);
  border-radius: 16px;
  background: var(--collaboration-paper);
  color: var(--preview-ink);
  font: 400 13px/1.8 var(--preview-ui);
  overflow-wrap: anywhere;
}
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration [role="alert"] { border-radius: 12px; font: 500 13px/1.8 var(--preview-ui); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration [aria-invalid="true"] { border-color: var(--danger-chip-fg); }
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration[hidden],
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration [hidden],
html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration:not(.active) { display: none; }
@media (max-width: 1100px) {
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration .collaboration-layout { grid-template-columns: minmax(0, 1fr); }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration .collaboration-library nav { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
}
@media (max-width: 640px) {
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration :is(.collaboration-library, .collaboration-thread),
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration > :is(form, section) { padding: 16px; border-radius: 18px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration .collaboration-comment { padding: 14px; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration :is(.collaboration-compose > *, .collaboration-comment > button, nav > button) { inline-size: 100%; flex-basis: 100%; }
}
html[data-rattib-material="glass"][data-transparency="reduce"].rt-route:not(#_) body.workspace-framed #panel-collaboration { --collaboration-paper: var(--preview-surface); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration { --collaboration-paper: var(--preview-surface); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration,
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration * { animation: none; transition: none; scroll-behavior: auto; }
}
@media (forced-colors: active) {
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration { --collaboration-paper: Canvas; --preview-control-line: CanvasText; --preview-shadow: none; --glass-disabled: ButtonFace; --glass-disabled-text: GrayText; --glass-border: GrayText; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration :is(input, select, textarea, button):disabled { color: GrayText; border-color: GrayText; }
  html[data-rattib-material="glass"].rt-route:not(#_) body.workspace-framed #panel-collaboration [role="alert"] { color: CanvasText; background: Canvas; border-color: CanvasText; }
}