:root {
  color-scheme: dark;
  --bg: #05080d;
  --surface: #09111a;
  --surface-raised: #0d1823;
  --surface-soft: #111e2b;
  --line: #1c3043;
  --line-bright: #28506e;
  --blue: #159ee9;
  --cyan: #55c9ff;
  --text: #f5f8fc;
  --muted: #8fa5ba;
  --green: #43d59a;
  --danger: #ff5e73;
  --orange: #ff9f43;
  --timeline-accent: #159ee9;
}

:root[data-timeline-zoom="2"] { --timeline-accent: #43d59a; }
:root[data-timeline-zoom="4"] { --timeline-accent: #ff9f43; }
:root[data-timeline-zoom="8"] { --timeline-accent: #a87cff; }
:root[data-timeline-zoom="16"] { --timeline-accent: #ff5e73; }

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 60% -18%, rgba(23, 111, 171, 0.24), transparent 38%),
    var(--bg);
  color: var(--text);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

button,
input,
textarea,
select {
  font: inherit;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.comment:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.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;
}

.hidden {
  display: none !important;
}

.mobile-videos-button,
.mobile-tools-button,
.mobile-comment-tabs,
.mobile-workspace-dock {
  display: none;
}

.topbar {
  min-height: 76px;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: auto minmax(540px, 1fr) auto;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 8, 13, 0.94);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 30;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--cyan), #0874c2);
  box-shadow: 0 0 26px rgba(18, 159, 232, 0.32);
  color: #03111e;
  font-weight: 900;
}

.brand small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.workflow-tabs {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(125px, 1fr));
  gap: 7px;
}

.workflow-tab {
  position: relative;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #0a121b;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  transition: 160ms ease;
}

.workflow-tab:hover {
  border-color: var(--line-bright);
  color: var(--text);
}

.workflow-tab.active {
  border-color: #168ed0;
  background: linear-gradient(145deg, #0c2b42, #0d1924);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(18, 159, 232, 0.13), 0 0 20px rgba(18, 159, 232, 0.1);
}

.workflow-tab.drop-target {
  border-color: var(--green);
  box-shadow: 0 0 24px rgba(67, 213, 154, 0.25);
  transform: translateY(-2px);
}

.workflow-tab b {
  display: grid;
  place-items: center;
  min-width: 23px;
  height: 23px;
  padding: 0 6px;
  border-radius: 999px;
  background: #172431;
  color: var(--muted);
  font-size: 9px;
}

.workflow-tab .review-badge.has-work {
  background: #d93650;
  color: #fff;
  box-shadow: 0 0 14px rgba(217, 54, 80, 0.5);
}

.icon-button {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--cyan);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 19px;
}

.dashboard-loading .icon-button {
  color: var(--cyan);
}

.dashboard-loading #topRefreshButton,
.dashboard-loading #refreshButton {
  animation: refresh-spin 850ms linear infinite;
}

@keyframes refresh-spin {
  to { transform: rotate(360deg); }
}

.shell {
  display: grid;
  grid-template-columns: minmax(255px, 300px) minmax(510px, 1fr) minmax(285px, 340px);
  gap: 12px;
  padding: 12px;
  height: calc(100vh - 76px);
}

.library-panel,
.review-panel,
.comments-panel {
  min-height: 0;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(15, 24, 35, 0.97), rgba(7, 12, 18, 0.98));
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.16);
}

.library-panel,
.comments-panel {
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.section-head,
.review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.section-head small,
.review-head small {
  color: var(--blue);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.section-head h1,
.section-head h2,
.review-head h2 {
  margin: 3px 0 0;
}

.section-head h1 {
  font-size: 21px;
}

.section-head h2 {
  font-size: 19px;
}

.library-head-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.button.compact {
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid #1b658f;
  border-radius: 10px;
  background: #0b2d45;
  color: var(--cyan);
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 9px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #070c12;
}

.search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.library-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 11px;
}

.project-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.project-sort select {
  min-width: 0;
  max-width: 190px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 26px 7px 10px;
  background: #0a1119;
  color: var(--text);
  cursor: pointer;
  font: inherit;
}

.media-type-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  min-height: 38px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0a1119;
}

.media-type-button {
  min-width: 0;
  padding: 5px 4px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.media-type-button.active {
  border-color: var(--line-bright);
  background: #12344d;
  color: var(--text);
}

.source-type-buttons {
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.35fr) minmax(0, .8fr);
}

.source-type-button {
  min-width: 0;
  padding: 5px 4px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.source-type-button.active {
  border-color: var(--line-bright);
  background: #12344d;
  color: var(--text);
}

.filter,
.tool-button {
  border: 1px solid var(--line);
  background: #0a1119;
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 11px;
  cursor: pointer;
  font-size: 11px;
}

.filter.active,
.tool-button.active {
  color: var(--text);
  border-color: #168ed0;
  background: #0a2a40;
  box-shadow: 0 0 0 1px rgba(18, 159, 232, 0.2);
}

.item-list,
.comment-list {
  min-height: 0;
  overflow: auto;
  padding-right: 3px;
  scrollbar-color: #274157 transparent;
  scrollbar-width: thin;
}

.episode-group {
  --episode-accent: #159ee9;
  margin-bottom: 11px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--episode-accent);
  border-radius: 13px;
  background: #081018;
  overflow: hidden;
  transition: 160ms ease;
}

.episode-group.tone-1,
.episode-card.tone-1 {
  --episode-accent: #7f6cff;
}

.episode-group.tone-2,
.episode-card.tone-2 {
  --episode-accent: #32c2a0;
}

.episode-group.tone-3,
.episode-card.tone-3 {
  --episode-accent: #e09a4a;
}

.episode-group.tone-4,
.episode-card.tone-4 {
  --episode-accent: #ef6f9a;
}

.episode-group.tone-5,
.episode-card.tone-5 {
  --episode-accent: #9ccc4a;
}

.episode-group.tone-6,
.episode-card.tone-6 {
  --episode-accent: #27c7d9;
}

.episode-group.tone-7,
.episode-card.tone-7 {
  --episode-accent: #c76dff;
}

.episode-group.dragging {
  opacity: 0.5;
}

.episode-group.selected-project {
  border-color: color-mix(in srgb, var(--episode-accent) 88%, #ffffff);
  border-left-width: 5px;
  background: color-mix(in srgb, var(--episode-accent) 8%, #081018);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--episode-accent) 30%, transparent),
    0 12px 34px rgba(0, 0, 0, .34);
}

.episode-group.selected-project > .episode-group-head {
  background: linear-gradient(100deg, color-mix(in srgb, var(--episode-accent) 27%, #0d1e2b), #0a121a);
}

.episode-group-head {
  width: 100%;
  border: 0;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 10px;
  text-align: left;
  background: linear-gradient(100deg, color-mix(in srgb, var(--episode-accent) 12%, #0d1e2b), #0a121a);
}

.episode-group-collapse {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.episode-group-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.group-chevron {
  color: var(--episode-accent);
  font-size: 19px;
}

.group-copy {
  min-width: 0;
}

.group-copy b,
.group-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-copy b {
  font-size: 13px;
}

.selected-project-indicator {
  display: none;
  width: fit-content;
  margin-top: 5px;
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--episode-accent) 70%, #ffffff);
  border-radius: 999px;
  background: color-mix(in srgb, var(--episode-accent) 22%, #07121a);
  color: #ffffff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1;
}

.episode-group.selected-project .selected-project-indicator { display: inline-flex; }

.group-copy small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.group-progress {
  display: block;
  height: 3px;
  margin-top: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: #172431;
}

.group-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--episode-accent);
  box-shadow: 0 0 9px var(--episode-accent);
}

.episode-group-actions em {
  padding: 4px 7px;
  border-radius: 999px;
  background: #102d41;
  color: var(--cyan);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.episode-group.collapsed .episode-group-body {
  display: none;
}

.episode-group.collapsed .editor-routing {
  display: none;
}

.editor-routing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(5, 10, 16, 0.86);
}

.editor-routing > span:first-child {
  min-width: 0;
}

.editor-routing b,
.editor-routing small {
  display: block;
}

.editor-routing b {
  color: #f1f6fb;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.editor-routing.snrt-editor b { color: var(--cyan); }
.editor-routing.human-editor b { color: #e7b46b; }

.editor-routing small {
  max-width: 155px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.25;
}

.editor-routing > span:last-child {
  display: flex;
  flex-shrink: 0;
  gap: 5px;
}

.route-action {
  min-height: 27px;
  padding: 0 7px;
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  background: #0d1a25;
  color: var(--muted);
  cursor: pointer;
  font-size: 8px;
  font-weight: 800;
}

.route-action.activate {
  border-color: rgba(67, 213, 154, 0.5);
  color: var(--green);
}

.route-action.pause { color: #ffbf70; }

.media-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 11px;
  margin: 4px 5px;
  overflow: hidden;
}

.media-row.unseen::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  z-index: 2;
}

.media-row.unseen {
  background: linear-gradient(100deg, rgba(18, 159, 232, 0.16), rgba(9, 17, 26, 0.1));
}

.media-row.has-local-draft {
  border-color: rgba(255, 94, 115, 0.8);
  background: linear-gradient(100deg, rgba(255, 94, 115, 0.18), rgba(9, 17, 26, 0.15));
}

.media-row.active {
  border: 2px solid #55c7ff;
  background: linear-gradient(100deg, #0b3958, #0c1f2e);
  box-shadow: 0 0 0 2px rgba(63, 188, 249, .2), 0 8px 24px rgba(0, 0, 0, .35);
}

.media-row.active .media-item {
  box-shadow: inset 4px 0 0 #62d0ff;
}

.media-row.active .item-icon {
  background: #5acaff;
  color: #03111b;
  box-shadow: 0 0 18px rgba(86, 200, 255, .38);
}

.media-row.active .item-copy b {
  color: #ffffff;
}

.media-item {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 10px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr);
  gap: 10px;
}

.media-item:hover {
  background: rgba(19, 45, 65, 0.5);
}

.item-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 10px;
  background: #101f2d;
  color: var(--cyan);
  font-size: 14px;
  font-weight: 800;
}

.revision-count-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 2px solid #08111a;
  border-radius: 999px;
  background: var(--danger);
  color: white;
  box-shadow: 0 0 15px rgba(255, 94, 115, 0.55);
  font-size: 10px;
  line-height: 1;
}

.item-copy {
  min-width: 0;
}

.item-copy b,
.item-copy > span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-copy b {
  font-size: 13px;
}

.item-copy > span:not(.item-chips) {
  color: var(--muted);
  font-size: 10px;
  margin-top: 4px;
}

.item-chips {
  display: flex !important;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.version-badge,
.sample-status-badge,
.revision-effect-badge,
.downloaded-badge,
.item-status {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 999px;
  background: #14212d;
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.version-badge {
  color: var(--cyan);
  background: #0c2b41;
}

.episode-group.sample-project {
  --episode-accent: #f6a23a;
  border-color: rgba(246, 162, 58, .72);
  background: #151008;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}

.episode-group.sample-project > .episode-group-head {
  background: linear-gradient(100deg, rgba(116, 66, 13, .72), #101218);
}

.sample-status-badge {
  color: #ffd08a;
  background: rgba(255, 159, 67, .16);
  border: 1px solid rgba(255, 159, 67, .42);
}

.downloaded-badge { color: #8ff0c6; background: rgba(67, 213, 154, .16); border: 1px solid rgba(67, 213, 154, .38); }

.revision-effect-badge {
  color: #ffc27d;
  background: #3a2711;
}

.item-status.approved {
  background: #0e3329;
  color: var(--green);
}

.item-status.revision_requested {
  background: #35131c;
  color: var(--danger);
}

.item-status.revision_staged {
  background: #3a2711;
  color: #ffb85c;
}

.revision-work-badge {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 999px;
  background: #3a121b;
  color: #ff94a5;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.editor-route-badge {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 999px;
  background: #2d2415;
  color: #e7b46b;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.editor-route-badge.snrt {
  background: #0b2b40;
  color: var(--cyan);
}

.revise-shortcut {
  width: 31px;
  height: 31px;
  border-radius: 9px;
  border: 1px solid #294054;
  background: #111d28;
  color: var(--cyan);
  cursor: pointer;
  font-size: 16px;
}

.episode-card {
  --episode-accent: #159ee9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px;
  margin-bottom: 7px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--episode-accent);
  border-radius: 12px;
  background: #0a1119;
}

.episode-card b,
.episode-card span {
  display: block;
}

.episode-card b {
  font-size: 13px;
}

.episode-card span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
}

.episode-card em {
  flex: 0 0 auto;
  padding: 5px 7px;
  border-radius: 999px;
  background: #102638;
  color: var(--cyan);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.episode-card-side {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.episode-card-side em {
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.review-head {
  padding: 14px 16px;
}

.review-head h2 {
  font-size: 18px;
}

.review-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.head-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}

.button {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 11px;
  color: var(--text);
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
}

.button:disabled,
.tool-button:disabled,
.control-button:disabled,
.color-tool:has(input:disabled) {
  opacity: 0.36;
  cursor: not-allowed;
}

.button.primary {
  border-color: #1189c7;
  background: linear-gradient(145deg, #18aef7, #087cc0);
  color: #02101a;
}

.button.secondary {
  background: #101a25;
}

.button.danger {
  border-color: #67303a;
  background: #251219;
  color: #ff9cac;
}

.button.attention {
  border-color: var(--danger);
  background: linear-gradient(145deg, #ff6a7d, #c9324b);
  color: white;
  box-shadow: 0 0 20px rgba(255, 94, 115, 0.24);
}

.draft-banner {
  margin: 0 16px 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #84394a;
  border-radius: 10px;
  background: linear-gradient(100deg, #33131d, #161019);
  color: #ffd4db;
  font-size: 11px;
}

.draft-banner span {
  color: #dda8b2;
}

.stage {
  position: relative;
  flex: 1 1 260px;
  min-height: 180px;
  width: 100%;
  max-height: none;
  margin: 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  contain: paint;
  isolation: isolate;
}

.stage.vertical {
  width: min(100%, 470px);
  aspect-ratio: 9 / 16;
  max-height: none;
}

.stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: none;
  cursor: pointer;
}

/* Fill the portrait review surface for shorts delivered inside a pillarboxed
   16:9 file. The source media remains unchanged; only the review viewport crops
   the encoded side bars. */
.stage.vertical #video,
.stage.vertical #compareVideo {
  object-fit: contain;
}

.stage #compareVideo {
  display: none;
  z-index: 2;
  pointer-events: none;
}

.stage.compare-enabled #compareVideo {
  display: block;
}

.stage.compare-wipe #compareVideo {
  clip-path: inset(0 calc(100% - var(--compare-position, 50%)) 0 0);
}

.compare-divider {
  display: none;
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: var(--compare-position, 50%);
  width: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  transform: translateX(-50%);
  background: transparent;
  cursor: ew-resize;
  pointer-events: auto;
  touch-action: none;
}

.compare-divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background: white;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 18px rgba(22, 169, 255, 0.75);
}

.compare-divider::after {
  content: "↔";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 2px solid white;
  border-radius: 50%;
  background: #087fc0;
  color: white;
  box-shadow: 0 0 14px rgba(22, 169, 255, .9);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.stage.compare-enabled.compare-wipe .compare-divider {
  display: block;
}

.compare-divider:hover::after,
.compare-divider:focus-visible::after { background: #16a9ff; transform: translate(-50%, -50%) scale(1.08); }

.mobile-compare-button { display: none !important; }

.stage.compare-side #video {
  left: 50%;
  right: auto;
  width: 50%;
}

.stage.compare-side #compareVideo {
  right: auto;
  width: 50%;
  clip-path: none;
}

.stage.compare-old #video,
.stage.compare-new #compareVideo {
  visibility: hidden;
}

.stage.ready video {
  display: block;
}

.stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  touch-action: none;
  z-index: 4;
}

.stage.drawing canvas {
  pointer-events: auto;
  cursor: crosshair;
}

.empty-state {
  position: absolute;
  text-align: center;
  color: var(--muted);
}

.empty-state span {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid #1f4762;
  border-radius: 50%;
  color: var(--cyan);
  background: #0b1722;
  font-size: 22px;
}

.empty-state p {
  font-size: 12px;
}

.stage.ready .empty-state {
  display: none;
}

.stage-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(85, 201, 255, 0.62);
  border-radius: 50%;
  background: rgba(4, 18, 29, 0.78);
  color: var(--cyan);
  font-size: 23px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: 150ms ease;
  z-index: 5;
}

.media-loading {
  display: none;
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid rgba(85, 201, 255, 0.38);
  border-radius: 999px;
  background: rgba(4, 13, 21, 0.9);
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.media-loading span {
  width: 13px;
  height: 13px;
  border: 2px solid rgba(85, 201, 255, 0.22);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: refresh-spin 750ms linear infinite;
}

.stage.loading .media-loading {
  display: flex;
}

.range-focus {
  display: none;
  position: absolute;
  z-index: 6;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid rgba(22, 169, 255, 0.75);
  border-radius: 999px;
  padding: 8px 13px;
  background: rgba(3, 12, 21, 0.9);
  box-shadow: 0 0 28px rgba(22, 169, 255, 0.24);
  color: var(--text);
  font-size: 10px;
  white-space: nowrap;
}

.range-focus b {
  color: var(--cyan);
  margin-right: 8px;
}

.stage.range-capturing .range-focus {
  display: block;
}

.stage.ready .stage-play {
  opacity: 1;
  pointer-events: auto;
}

.stage.playing .stage-play {
  opacity: 0;
}

.stage:hover.playing .stage-play {
  opacity: 0.7;
}

.player-controls {
  display: grid;
  grid-template-columns: 52px 92px 76px 52px minmax(100px, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #07101a;
}

.timeline-shell {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 100px;
}

.timeline-marks {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.timeline-mark {
  position: absolute;
  top: 50%;
  min-width: 4px;
  height: 16px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 999px;
  background: var(--marker-color);
  box-shadow: 0 0 8px color-mix(in srgb, var(--marker-color) 72%, transparent);
  cursor: pointer;
  pointer-events: auto;
}

.timeline-selection {
  display: none;
  position: absolute;
  z-index: 0;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--timeline-accent) 42%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--timeline-accent) 55%, transparent);
  pointer-events: none;
}

.timeline-selection.visible {
  display: block;
}

.timeline-selection.capturing {
  animation: range-pulse 900ms ease-in-out infinite alternate;
}

@keyframes range-pulse {
  to { opacity: 0.45; }
}

.control-button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #101b27;
  color: var(--text);
  padding: 6px 10px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

#rewindButton,
#forwardButton { width: 52px; }

#playPauseButton { width: 92px; }

#stopButton { width: 76px; }

.control-button.primary-control {
  border-color: #197eb6;
  color: var(--cyan);
}

.video-progress {
  position: relative;
  z-index: 1;
  width: 100%;
  accent-color: var(--timeline-accent);
  cursor: pointer;
}

.scrub-preview {
  position: absolute;
  z-index: 12;
  bottom: calc(100% + 12px);
  width: 184px;
  padding: 5px;
  transform: translateX(-50%);
  border: 1px solid #248fd0;
  border-radius: 10px;
  background: #06101a;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55), 0 0 0 1px rgba(112, 204, 255, .12);
  pointer-events: none;
}

.scrub-preview video {
  display: block;
  width: 100%;
  height: 102px;
  border-radius: 6px;
  background: #000;
  object-fit: contain;
}

.scrub-preview span {
  display: block;
  padding: 4px 3px 1px;
  color: var(--cyan);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

@media (hover: none), (pointer: coarse) {
  .scrub-preview { display: none !important; }
}

.compare-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: #08121c;
  flex-wrap: wrap;
}

.compare-modes {
  display: flex;
  gap: 4px;
}

.compare-version-field {
  min-width: 132px;
  display: grid;
  grid-template-columns: max-content minmax(58px, 1fr);
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.compare-version-field select {
  height: 34px;
  min-width: 68px;
  padding: 4px 26px 4px 9px;
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  background: #08131d;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}

.compare-mode,
.mini-action {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0c1721;
  color: var(--muted);
  padding: 6px 8px;
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
}

.compare-mode.active {
  border-color: #168ed0;
  color: var(--cyan);
  background: #0a2a3f;
}

.wipe-control,
.timeline-zoom,
.inspection-hold {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
}

.wipe-control input {
  width: 110px;
  accent-color: var(--blue);
}

.timeline-zoom select,
.inspection-hold select,
.drawing-tool select,
.note-type select {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b151f;
  color: var(--text);
  padding: 5px 7px;
}

.timeline-zoom select {
  border-color: color-mix(in srgb, var(--timeline-accent) 65%, var(--line));
  color: var(--timeline-accent);
}

.compare-help {
  margin-left: auto;
  color: var(--muted);
  font-size: 9px;
}

.player-time {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--text);
  font-family: "Cascadia Mono", monospace;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.player-time b,
.player-time .time-colon,
.player-time em {
  color: var(--cyan);
}

.player-time b { font-size: 17px; }

.player-time em {
  font-size: 9px;
  font-style: normal;
}

.draw-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}

.time-pill {
  font-family: "Cascadia Mono", monospace;
  background: #061019;
  border: 1px solid #17425d;
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--cyan);
  font-size: 10px;
  cursor: pointer;
}

.tool-divider {
  align-self: stretch;
  width: 1px;
  min-width: 1px;
  background: var(--line);
}

.drawing-tool,
.note-type {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
}

.blue-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  background: var(--blue);
  box-shadow: 0 0 8px var(--blue);
}

.color-tool {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 31px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 9px 4px 5px;
  background: #0a1119;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}

.color-tool input {
  width: 24px;
  height: 23px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.draw-help {
  margin-left: auto;
  color: var(--muted);
  font-size: 10px;
}

.review-navigation-bar {
  display: grid;
  grid-template-columns: auto minmax(190px, 1fr) auto auto auto auto;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  background: #07101a;
}

.review-nav-button,
.review-video-picker select {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #101b27;
  color: var(--text);
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 800;
}

.review-nav-button {
  cursor: pointer;
  white-space: nowrap;
}

.review-nav-button:disabled {
  opacity: 0.36;
  cursor: not-allowed;
}

.review-video-picker {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.review-video-picker select {
  min-width: 0;
  width: 100%;
  cursor: pointer;
}

.comments-head-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.fullscreen-close-comments {
  display: none;
  width: 29px;
  height: 29px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b1721;
  color: var(--text);
  cursor: pointer;
  font-size: 18px;
}

body.immersive-review-open {
  overflow: hidden;
}

.shell.immersive-review,
.shell:fullscreen {
  position: fixed;
  z-index: 100;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  padding: 0;
  display: block;
  background: #000;
}

.shell.immersive-review .library-panel,
.shell:fullscreen .library-panel {
  display: none;
}

.shell.immersive-review .review-panel,
.shell:fullscreen .review-panel {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
  background: #000;
}

.shell.immersive-review .review-head,
.shell:fullscreen .review-head {
  position: absolute;
  z-index: 13;
  top: 10px;
  left: 12px;
  max-width: min(680px, calc(100% - 24px));
  border: 1px solid rgba(40, 80, 110, 0.74);
  border-radius: 12px;
  background: rgba(5, 12, 19, 0.68);
  opacity: 0.7;
  backdrop-filter: blur(14px);
  transition: opacity 150ms ease;
}

.shell.immersive-review .head-actions,
.shell:fullscreen .head-actions,
.shell.immersive-review .draft-banner,
.shell:fullscreen .draft-banner {
  display: none;
}

.shell.immersive-review .stage,
.shell:fullscreen .stage,
.shell.immersive-review .stage.vertical,
.shell:fullscreen .stage.vertical {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
}

.shell.immersive-review .player-controls,
.shell:fullscreen .player-controls,
.shell.immersive-review .draw-toolbar,
.shell:fullscreen .draw-toolbar,
.shell.immersive-review .review-navigation-bar,
.shell:fullscreen .review-navigation-bar {
  position: absolute;
  z-index: 14;
  right: 14px;
  left: 14px;
  border: 1px solid rgba(40, 80, 110, 0.72);
  border-radius: 12px;
  background: rgba(5, 12, 19, 0.62);
  opacity: 0.66;
  backdrop-filter: blur(15px);
  transition: opacity 150ms ease, background 150ms ease;
}

.shell.immersive-review .player-controls,
.shell:fullscreen .player-controls {
  bottom: 62px;
}

.shell.immersive-review .review-navigation-bar,
.shell:fullscreen .review-navigation-bar {
  bottom: 10px;
}

.shell.immersive-review .draw-toolbar,
.shell:fullscreen .draw-toolbar {
  top: 80px;
}

.shell.immersive-review .review-head:hover,
.shell:fullscreen .review-head:hover,
.shell.immersive-review .player-controls:hover,
.shell:fullscreen .player-controls:hover,
.shell.immersive-review .draw-toolbar:hover,
.shell:fullscreen .draw-toolbar:hover,
.shell.immersive-review .review-navigation-bar:hover,
.shell:fullscreen .review-navigation-bar:hover,
.shell.immersive-review .player-controls:focus-within,
.shell:fullscreen .player-controls:focus-within,
.shell.immersive-review .draw-toolbar:focus-within,
.shell:fullscreen .draw-toolbar:focus-within,
.shell.immersive-review .review-navigation-bar:focus-within,
.shell:fullscreen .review-navigation-bar:focus-within,
.shell.immersive-review.controls-active .player-controls,
.shell.immersive-review.controls-active .draw-toolbar,
.shell.immersive-review.controls-active .review-navigation-bar {
  opacity: 1;
  background: rgba(5, 12, 19, 0.9);
}

.shell.immersive-review .comments-panel,
.shell:fullscreen .comments-panel {
  display: none;
  position: absolute;
  z-index: 16;
  top: 68px;
  right: 14px;
  bottom: 118px;
  width: min(390px, 38vw);
  max-height: none;
  border-color: rgba(40, 80, 110, 0.76);
  background: rgba(5, 12, 19, 0.72);
  opacity: 0.76;
  backdrop-filter: blur(18px);
  transition: opacity 150ms ease;
}

.shell.immersive-review.comments-open .comments-panel,
.shell:fullscreen.comments-open .comments-panel {
  display: flex;
}

.shell.immersive-review .comments-panel:hover,
.shell:fullscreen .comments-panel:hover,
.shell.immersive-review .comments-panel:focus-within,
.shell:fullscreen .comments-panel:focus-within {
  opacity: 1;
}

.shell.immersive-review .fullscreen-close-comments,
.shell:fullscreen .fullscreen-close-comments {
  display: grid;
  place-items: center;
}

.composer {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #08111a;
}

.composer textarea {
  width: 100%;
  resize: none;
  min-height: 84px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #070c12;
  color: var(--text);
  padding: 11px;
  outline: 0;
}

.composer textarea:focus {
  border-color: #168ed0;
  box-shadow: 0 0 0 3px rgba(18, 159, 232, 0.1);
}

.composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 10px;
}

.composer-action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.composer-meta,
.composer-preferences {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.composer-meta {
  margin-bottom: 8px;
}

#pinnedIndicator {
  color: var(--cyan);
  font-family: "Cascadia Mono", monospace;
  font-size: 10px;
  font-weight: 700;
}

.composer-preferences {
  margin-top: 8px;
}

.submit-mode {
  display: flex;
  align-items: center;
  gap: 6px;
}

.submit-mode select {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b151f;
  color: var(--text);
  padding: 5px 7px;
}

.composer-help {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 9px;
}

.count {
  display: grid;
  place-items: center;
  min-width: 27px;
  height: 27px;
  padding: 0 8px;
  border-radius: 999px;
  background: #0a2b43;
  color: var(--cyan);
  font-size: 11px;
}

.comment-list {
  margin-top: 14px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.comments-panel .composer {
  flex: 0 0 auto;
  margin-top: 12px;
}

@media (min-width: 1181px) {
  body.reviewing-short .shell {
    grid-template-columns: minmax(245px, 280px) minmax(390px, 0.72fr) minmax(370px, 0.82fr);
  }

  body.reviewing-short .stage.vertical {
    width: min(100%, calc((100vh - 335px) * 9 / 16));
  }
}

.comment {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #090f16;
  padding: 11px;
  margin-bottom: 8px;
  cursor: pointer;
}

.comment:hover {
  border-color: var(--line-bright);
}

.comment.revision {
  border-color: #743645;
  background: linear-gradient(135deg, #251019, #0a1016);
}

.comment.va-review-note {
  border-color: #318da5;
  background: linear-gradient(110deg, rgba(23, 91, 111, .32), #0a1016 62%);
}

.note-author-badge {
  align-self: flex-start;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.note-author-badge.va { color: #78e5ef; }
.note-author-badge.kif { color: #c4a7ff; }
.note-author-badge.human { color: #b6d8eb; }

.comment[data-annotation-id] {
  border-left: 3px solid var(--note-color);
}

.comment[data-annotation-id].active-time {
  background: color-mix(in srgb, var(--note-color) 15%, #090f16);
  box-shadow: 0 0 0 1px var(--note-color), 0 0 24px color-mix(in srgb, var(--note-color) 28%, transparent);
}

.comment-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.time-link {
  border: 0;
  background: transparent;
  color: var(--cyan);
  padding: 0;
  cursor: pointer;
  font-family: "Cascadia Mono", monospace;
  font-weight: 700;
}

.comment-tag {
  color: var(--danger);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.comment p {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.5;
}

.notes-divider {
  margin: 13px 2px 7px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.revision-check {
  position: relative;
  border-left: 3px solid var(--check-color);
}

.revision-check.previous-version-note {
  border-color: rgba(167, 139, 250, .5);
  border-left-color: var(--check-color);
  background: linear-gradient(135deg, rgba(61, 42, 95, .72), rgba(9, 15, 22, .96) 72%);
}

.revision-check.previous-version-note .comment-tag {
  color: #c4b5fd;
}

.revision-check.active-time {
  border-color: var(--check-color);
  background: color-mix(in srgb, var(--check-color) 15%, #090f16);
  box-shadow: 0 0 0 1px var(--check-color), 0 0 24px color-mix(in srgb, var(--check-color) 28%, transparent);
}

.revision-check.accepted {
  opacity: 0.7;
  border-left-color: var(--success);
}

.revision-check.previous-version-note.accepted .comment-tag { color: var(--success); }

.revision-check.rejected {
  border-left-color: var(--danger);
}

.revision-check.previous-version-note.rejected .comment-tag { color: var(--danger); }

.lineage-copy,
.rejection-reason {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

.check-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.mini-action.dismiss {
  color: var(--muted);
  border-color: var(--line);
}

.mini-action.accept {
  color: var(--success);
  border-color: #246548;
}

.mini-action.reject,
.mini-action.reject-save {
  color: #ff8fa2;
  border-color: #733341;
}

.reject-editor {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.reject-editor textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid #733341;
  border-radius: 8px;
  background: #120a0e;
  color: var(--text);
  padding: 8px;
}

.drawing-badge {
  display: inline-block;
  margin-top: 7px;
  color: var(--orange);
  font-size: 9px;
}

.blank-note {
  padding: 26px 11px;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 120px);
  padding: 11px 16px;
  background: #0e2130;
  border: 1px solid #1b668f;
  border-radius: 10px;
  color: var(--text);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.7);
  transition: 220ms ease;
  z-index: 50;
  font-size: 11px;
}

.toast.show {
  transform: translate(-50%, 0);
}

@media (max-width: 1180px) {
  .topbar {
    grid-template-columns: auto minmax(480px, 1fr) auto;
  }

  .shell {
    grid-template-columns: 250px minmax(470px, 1fr);
    grid-template-rows: minmax(420px, 1fr) minmax(210px, 280px);
    overflow: auto;
  }

  .comments-panel {
    grid-column: 1 / -1;
    grid-row: 2;
    max-height: 280px;
  }

  .library-panel,
  .review-panel {
    grid-row: 1;
  }

  .stage {
    max-height: none;
  }
}

@media (max-width: 850px) {
  .topbar {
    grid-template-columns: auto auto;
  }

  .workflow-tabs {
    grid-column: 1 / -1;
    grid-row: 2;
    overflow-x: auto;
    grid-template-columns: repeat(4, minmax(145px, 1fr));
  }

  .top-refresh {
    justify-self: end;
  }

  .shell {
    height: auto;
    display: block;
    padding: 8px 8px calc(126px + env(safe-area-inset-bottom));
  }

  .library-panel,
  .review-panel,
  .comments-panel {
    border-radius: 13px;
    margin-bottom: 9px;
  }

  .library-panel {
    height: clamp(420px, 72svh, 620px);
    max-height: none;
  }

  .item-list {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .library-controls {
    align-items: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-sort {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    margin-left: 0;
  }

  .project-sort select,
  .media-filter select {
    width: 100%;
    max-width: none;
  }

  #kifStatusFilterField {
    grid-column: 1 / -1;
  }

  .review-head {
    display: block;
  }

  .mobile-videos-button {
    display: inline-flex;
    align-items: center;
    margin: 0 0 8px;
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #08131d;
    color: var(--cyan);
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
  }

  .head-actions {
    justify-content: stretch;
    margin-top: 10px;
  }

  .head-actions .button {
    flex: 1 1 180px;
    min-height: 40px;
  }

  .stage {
    flex: 0 0 auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    max-height: 68vh;
  }

  .stage.vertical {
    width: min(100%, 430px, calc(72svh * 9 / 16));
    max-height: 72vh;
  }

  .comments-panel {
    max-height: none;
  }

  .mobile-comment-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 12px 0 0;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #060c13;
  }

  .mobile-comment-tab {
    min-height: 39px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
  }

  .mobile-comment-tab.active {
    border-color: #197eb6;
    background: #0a2a40;
    color: var(--text);
  }

  .mobile-comment-tab b,
  .mobile-workspace-dock b {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 999px;
    background: #12334a;
    color: var(--cyan);
    font-size: 9px;
  }

  .comments-panel[data-mobile-tab="compose"] .comment-list,
  .comments-panel[data-mobile-tab="notes"] .composer {
    display: none;
  }

  .comments-panel[data-mobile-tab="notes"] .comment-list {
    display: block;
    max-height: 58svh;
    margin-top: 10px;
  }

  .mobile-workspace-dock {
    position: fixed;
    z-index: 45;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: 8px;
    display: grid;
    gap: 5px;
    padding: 6px;
    border: 1px solid var(--line-bright);
    border-radius: 14px;
    background: rgba(5, 12, 19, 0.96);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(18px);
  }

  .mobile-decision-row,
  .mobile-location-row {
    display: grid;
    gap: 5px;
  }

  .mobile-decision-row {
    grid-template-columns: minmax(0, 0.8fr) minmax(80px, 1.35fr) minmax(0, 0.9fr) minmax(0, 0.8fr);
  }

  .mobile-location-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) 42px;
  }

  .mobile-video-picker,
  .mobile-video-picker select {
    min-width: 0;
    width: 100%;
    height: 100%;
  }

  .mobile-video-picker select {
    border: 1px solid #197eb6;
    border-radius: 9px;
    background: #0a2a40;
    color: var(--text);
    padding: 0 6px;
    font-size: 10px;
    font-weight: 800;
  }

  .mobile-workspace-dock button {
    min-width: 0;
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
  }

  .mobile-workspace-dock button:active,
  .mobile-workspace-dock button.active {
    border-color: #197eb6;
    background: #0a2a40;
    color: var(--cyan);
  }

  .mobile-workspace-dock .mobile-approve:not(:disabled) {
    border-color: #1189c7;
    background: linear-gradient(145deg, #18aef7, #087cc0);
    color: #02101a;
  }

  .mobile-workspace-dock button:disabled,
  .mobile-video-picker select:disabled {
    opacity: 0.35;
  }

  .review-navigation-bar {
    display: none;
  }

  .shell.immersive-review .review-navigation-bar,
  .shell:fullscreen .review-navigation-bar {
    display: none;
  }

  .shell.immersive-review .review-head,
  .shell:fullscreen .review-head {
    top: 8px;
    right: 8px;
    left: 8px;
    max-width: none;
    padding: 10px 12px;
  }

  .shell.immersive-review .review-head p,
  .shell:fullscreen .review-head p,
  .shell.immersive-review .review-head small,
  .shell:fullscreen .review-head small {
    display: none;
  }

  .shell.immersive-review .draw-toolbar,
  .shell:fullscreen .draw-toolbar {
    top: 66px;
    right: 8px;
    left: 8px;
  }

  .shell.immersive-review .player-controls,
  .shell:fullscreen .player-controls {
    right: 8px;
    bottom: 122px;
    left: 8px;
  }

  .shell.immersive-review .comments-panel,
  .shell:fullscreen .comments-panel {
    top: 60px;
    right: 8px;
    bottom: 122px;
    left: 8px;
    width: auto;
    border-radius: 13px;
  }

  body.immersive-review-open .mobile-workspace-dock {
    z-index: 120;
    background: rgba(5, 12, 19, 0.68);
    opacity: 0.68;
    transition: opacity 150ms ease, background 150ms ease;
  }

  body.immersive-review-open .mobile-workspace-dock:focus-within,
  body.immersive-review-open .mobile-workspace-dock:active,
  .shell.immersive-review.controls-active ~ .mobile-workspace-dock {
    opacity: 1;
    background: rgba(5, 12, 19, 0.94);
  }
}

/* Client-sharing and avatar intake repair. */
.share-recipient-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 10px 14px;
  margin-top: 14px;
}

.share-recipient-fields.hidden { display: none; }
.share-recipient-fields .field-help,
.share-recipient-fields .toggle-field { grid-column: 1 / -1; }
.share-recipient-or { padding-bottom: 13px; color: var(--muted); font-weight: 800; text-transform: uppercase; }
.share-dialog-actions { flex-wrap: wrap; gap: 9px; }
.share-message-fields { display: grid; gap: 11px; margin-top: 14px; }
.share-message-fields textarea { min-height: 78px; }
.share-validation {
  margin-top: 9px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #07121b;
  color: var(--muted);
  font-size: 12px;
}

.share-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.share-mode-card {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #07131d;
  cursor: pointer;
}

.share-mode-card:has(input:checked) {
  border-color: var(--cyan);
  background: #0a2b42;
  box-shadow: 0 0 0 1px rgba(22, 169, 255, .18);
}

.share-project-card .share-mode-card input {
  width: auto;
  flex: 0 0 auto;
  margin-top: 4px;
  accent-color: var(--cyan);
}
.share-mode-card span { display: grid; gap: 5px; }
.share-mode-card b { color: var(--text); font-size: 17px; }
.share-mode-card small { color: var(--muted); font-size: 14px; line-height: 1.4; }

.selected-video-indicator {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 999px;
  background: #4fc5ff;
  color: #02111a;
  font-size: 8px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .07em;
}

.project-approval-status {
  flex: 0 0 auto;
  min-width: 38px;
  min-height: 32px;
  display: inline-grid;
  place-items: center;
  padding: 5px 9px;
  border: 1px solid rgba(68, 219, 157, .65);
  border-radius: 999px;
  background: rgba(22, 98, 70, .34);
  color: #78edbb;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.project-approval-status.approved {
  min-width: 32px;
  box-shadow: 0 0 14px rgba(55, 216, 151, .24);
}

.episode-card .project-approval-status {
  display: grid;
  margin: 0;
  color: #78e0b7;
  font-size: 16px;
}

.project-approve-all-button {
  flex: 0 0 auto;
  min-height: 32px;
  display: inline-grid;
  place-items: center;
  padding: 6px 11px;
  border: 1px solid #59636f;
  border-radius: 999px;
  background: #252b33;
  color: #c8ced6;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}

.project-approve-all-button:hover:not(:disabled),
.project-approve-all-button:focus-visible {
  border-color: #8793a0;
  background: #333b45;
  color: #ffffff;
}

.project-approve-all-button:disabled { cursor: wait; opacity: .62; }

.project-approve-revisions-button {
  flex: 0 0 auto;
  min-height: 36px;
  display: inline-grid;
  place-items: center;
  padding: 7px 11px;
  border: 1px solid rgba(96, 206, 255, .76);
  border-radius: 999px;
  background: rgba(20, 82, 112, .42);
  color: #8bddff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
}

.project-approve-revisions-button:hover:not(:disabled),
.project-approve-revisions-button:focus-visible {
  border-color: #bcecff;
  background: rgba(31, 111, 148, .62);
  color: #ffffff;
}

.project-approve-revisions-button:disabled { cursor: wait; opacity: .62; }
.share-validation.validated { border-color: #286b54; color: #72e0b4; }
.share-validation.failed { border-color: #733541; color: #ff9cac; }
.share-active-section { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); }
.share-active-head { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.share-active-head b { color: var(--text); }
.share-active-invites { display: grid; gap: 7px; margin-top: 9px; }
.share-invite-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #07121b;
}
.share-invite-row small { display: block; margin-top: 3px; color: var(--muted); }
.share-invite-row.revoked { opacity: 0.62; }
.share-confirm-card { width: min(700px, 100%); }
.share-confirm-summary { display: grid; gap: 11px; margin: 16px 0; }
.share-confirm-summary > div { padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: #07121b; }
.share-confirm-summary dt { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase; }
.share-confirm-summary dd { margin: 5px 0 0; overflow-wrap: anywhere; color: var(--text); }
.share-confirm-summary pre { margin: 7px 0 0; white-space: pre-wrap; font: inherit; }
.confirmation-check { margin-top: 8px; }
.client-avatar-status { display: block; margin-top: 6px; color: var(--muted); }

@media (max-width: 600px) {
  .share-mode-grid { grid-template-columns: 1fr; }
  .share-recipient-fields { grid-template-columns: 1fr; }
  .share-recipient-fields .field-help,
  .share-recipient-fields .toggle-field { grid-column: 1; }
  .share-recipient-or { padding: 0; text-align: center; }
}

/* Authoritative review-workspace layout. Keep portrait media uncropped and
   make every immersive control surface movable, resizable, and compact. */
.player-controls {
  grid-template-columns: 46px 80px 62px 46px 86px minmax(100px, 1fr) auto auto;
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
}

.volume-control button {
  min-width: 32px;
  min-height: 32px;
  padding: 2px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.volume-control button:disabled { cursor: default; opacity: 0.45; }

.volume-control input { width: 58px; min-width: 34px; accent-color: var(--blue); }
.stage.vertical #video,
.stage.vertical #compareVideo { object-fit: contain !important; }

.draw-toolbar.tools-collapsed > :not(.panel-grip):not(.collapse-tools) { display: none !important; }
.draw-toolbar.tools-collapsed { width: auto !important; min-width: 126px !important; }
.collapse-tools { white-space: nowrap; }

.folder-browser-card { width: min(760px, 100%); }
.folder-browser-path { display: flex; align-items: center; gap: 10px; margin: 15px 0 10px; }
.folder-browser-path code { min-width: 0; overflow: hidden; color: var(--cyan); text-overflow: ellipsis; white-space: nowrap; }
.folder-browser-list {
  display: grid;
  gap: 6px;
  max-height: min(52vh, 520px);
  padding: 7px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #050b11;
}
.folder-browser-list button {
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #0b1722;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.folder-browser-list button:hover,
.folder-browser-list button:focus-visible { border-color: #268bc4; background: #0d2232; }
.share-project-card input { width: 100%; }
.share-access-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.share-project-card select,
.share-project-card textarea { width: 100%; }
.client-view-only .composer,
.client-view-only .draw-toolbar,
.client-view-only #approveItemButton,
.client-view-only #bottomApproveButton,
.client-view-only #mobileApproveButton { opacity: .55; }
.field-help { display: block; margin-top: 7px; color: var(--muted); }

@media (max-width: 680px) {
  .share-access-grid { grid-template-columns: 1fr; }
}

.editor-routing.human-editor b,
.editor-route-badge:not(.snrt) { color: #ff7182; }
.editor-routing.human-editor { box-shadow: inset 3px 0 rgba(255, 71, 94, 0.72); }
.editor-routing.snrt-editor { box-shadow: inset 3px 0 rgba(22, 169, 255, 0.72); }
.route-action.reopen-editing { color: #ffb25b; border-color: rgba(255, 163, 61, 0.52); }

.player-controls > .panel-grip,
.review-navigation-bar > .panel-grip { display: none; }

.shell.immersive-review .stage.vertical,
.shell:fullscreen .stage.vertical {
  position: absolute;
  inset: 0;
  width: min(100vw, calc(100dvh * 9 / 16)) !important;
  height: min(100dvh, calc(100vw * 16 / 9)) !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  margin: auto;
  aspect-ratio: 9 / 16 !important;
}

.shell.immersive-review .player-controls,
.shell:fullscreen .player-controls,
.shell.immersive-review .draw-toolbar,
.shell:fullscreen .draw-toolbar,
.shell.immersive-review .review-navigation-bar,
.shell:fullscreen .review-navigation-bar,
.shell.immersive-review .comments-panel,
.shell:fullscreen .comments-panel {
  min-width: 220px;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow: auto;
  resize: both;
}

.shell.immersive-review .player-controls,
.shell:fullscreen .player-controls { right: 12px; bottom: 10px; left: 12px; }
.shell.immersive-review .review-navigation-bar,
.shell:fullscreen .review-navigation-bar { right: 12px; bottom: 64px; left: 12px; }
.shell.immersive-review .draw-toolbar,
.shell:fullscreen .draw-toolbar {
  top: auto;
  right: 12px;
  bottom: 118px;
  left: 12px;
  width: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.shell.immersive-review .player-controls > .panel-grip,
.shell:fullscreen .player-controls > .panel-grip,
.shell.immersive-review .review-navigation-bar > .panel-grip,
.shell:fullscreen .review-navigation-bar > .panel-grip,
.shell.immersive-review .draw-toolbar > .panel-grip,
.shell:fullscreen .draw-toolbar > .panel-grip {
  display: block;
  position: absolute;
  z-index: 2;
  top: 4px;
  left: 4px;
}

.shell.immersive-review .player-controls,
.shell:fullscreen .player-controls,
.shell.immersive-review .review-navigation-bar,
.shell:fullscreen .review-navigation-bar,
.shell.immersive-review .draw-toolbar,
.shell:fullscreen .draw-toolbar { padding-left: 44px; }

@media (max-width: 850px) {
  .player-controls {
    grid-template-columns: 42px 74px 56px 42px minmax(82px, 1fr) auto;
  }
  .player-controls .volume-control { grid-column: 1 / span 2; grid-row: 2; }
  .player-controls .timeline-shell { grid-column: 3 / span 3; grid-row: 2; }
  .player-controls .player-time { grid-column: 6; grid-row: 2; }
  .player-controls .fullscreen-control { display: none; }
  .shell.immersive-review .draw-toolbar,
  .shell:fullscreen .draw-toolbar {
    right: 8px;
    bottom: 126px;
    left: 8px;
    max-height: 34vh;
  }
}

@media (max-width: 600px) {
  .topbar {
    position: static;
    padding: 9px;
    gap: 9px;
  }

  .workflow-tabs {
    margin: 0 -2px;
    grid-template-columns: repeat(4, 138px);
  }

  .workflow-tab {
    min-height: 42px;
  }

  .library-panel {
    height: clamp(420px, 72svh, 600px);
    max-height: none;
  }

  .review-head {
    padding: 13px;
  }

  .head-actions .button {
    flex-basis: calc(50% - 4px);
  }

  .draft-banner {
    margin: 0 12px 9px;
    display: block;
  }

  .draft-banner span {
    display: block;
    margin-top: 3px;
  }

  .stage {
    width: 100%;
    max-height: 62vh;
  }

  .stage.vertical {
    width: min(100%, calc(66svh * 9 / 16));
    max-height: 66svh;
  }

  .player-controls {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    padding: 8px;
    overflow: hidden;
  }

  #rewindButton,
  #playPauseButton,
  #stopButton,
  #forwardButton {
    width: 100%;
    min-width: 0;
    padding: 6px 3px;
    font-size: 9px;
  }

  .timeline-shell {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .player-time {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: center;
  }

  .draw-help {
    display: none;
  }

  .draw-toolbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
    overflow: visible;
  }

  .draw-toolbar > * {
    min-width: 0;
  }

  .draw-toolbar .time-pill {
    grid-column: span 2;
    width: 100%;
  }

  .draw-toolbar .tool-button,
  .draw-toolbar .color-tool {
    min-height: 38px;
    padding: 6px 7px;
    justify-content: center;
    text-align: center;
  }

  .mobile-tools-button {
    display: block;
    grid-column: span 2;
  }

  .draw-toolbar .timeline-zoom,
  .draw-toolbar .inspection-hold,
  .draw-toolbar .drawing-tool,
  .draw-toolbar .color-tool,
  .draw-toolbar #clearDrawing,
  .draw-toolbar .tool-divider {
    display: none;
  }

  .draw-toolbar.mobile-tools-open .timeline-zoom,
  .draw-toolbar.mobile-tools-open .inspection-hold,
  .draw-toolbar.mobile-tools-open .drawing-tool,
  .draw-toolbar.mobile-tools-open .color-tool,
  .draw-toolbar.mobile-tools-open #clearDrawing {
    display: flex;
    grid-column: span 2;
  }

  .draw-toolbar.mobile-tools-open .timeline-zoom select,
  .draw-toolbar.mobile-tools-open .inspection-hold select,
  .draw-toolbar.mobile-tools-open .drawing-tool select {
    flex: 1;
    min-width: 0;
  }

  .compare-help {
    width: 100%;
    margin-left: 0;
  }

  .range-focus {
    max-width: calc(100% - 18px);
    white-space: normal;
    text-align: center;
  }

  .composer-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .composer-action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .composer-actions > #drawingStatus {
    display: none;
  }

  .composer-meta,
  .composer-preferences {
    align-items: flex-start;
    flex-direction: column;
  }

  .composer-actions .button {
    min-height: 42px;
    padding: 7px 6px;
    font-size: 9px;
  }

}

/* Project-scoped client review. */
.client-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.client-identity > span { display: flex; align-items: flex-end; flex-direction: column; gap: 2px; min-width: 0; }

.client-identity-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 2px solid var(--reviewer-color, #38bdf8);
  border-radius: 50%;
  background: color-mix(in srgb, var(--reviewer-color, #38bdf8) 34%, #071019) center/cover no-repeat;
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.client-identity small {
  max-width: 220px;
  overflow: hidden;
  color: var(--cyan);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.client-identity b { font-size: 11px; }

.client-invite-button {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #24506d;
  border-radius: 10px;
  background: #0c1a27;
  color: var(--cyan);
  font: inherit;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
}

.client-invite-button:hover,
.client-invite-button:focus-visible { border-color: var(--cyan); background: #12283a; }

.client-watermark {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  place-items: center;
  gap: clamp(36px, 8vw, 120px);
  padding: 8%;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.1);
  font-size: clamp(15px, 2.3vw, 30px);
  font-weight: 900;
  letter-spacing: 0.14em;
  pointer-events: none;
  text-align: center;
  transform: rotate(-17deg) scale(1.18);
}

.client-watermark span { min-width: 240px; white-space: nowrap; }

body.client-mode .client-watermark { display: grid; }
body.client-mode .workflow-tabs,
body.client-mode #moveFolderButton,
body.client-mode .note-type,
body.client-mode .top-refresh,
body.client-mode #refreshButton,
body.client-mode .owner-only,
body.client-mode .review-manager-only { display: none !important; }

body.coordinator-mode .owner-only,
body.coordinator-mode #localAssistantButton { display: none !important; }

body.editor-mode .owner-only,
body.editor-mode #localAssistantButton,
body.editor-mode #ownerAccessRequestsButton,
body.editor-mode #ownerTeamChatButton,
body.editor-mode #feedbackButton,
body.editor-mode #moveFolderButton,
body.editor-mode #approveItemButton,
body.editor-mode #bottomApproveButton,
body.editor-mode #mobileApproveButton,
body.editor-mode #mobilePrimaryApproveButton { display: none !important; }

body.editor-mode .workflow-tab b,
body.editor-team-portal .workflow-tab b { display: none; }

.request-check-icon,
.share-project-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#ownerAccessRequestsButton.has-pending {
  border-color: #ff6685;
  background: rgba(180, 35, 63, .25);
  color: #ff8aa2;
  box-shadow: 0 0 0 1px rgba(255, 102, 133, .18), 0 0 18px rgba(180, 35, 63, .22);
}

#projectAdminButton,
#ownerAccessRequestsButton { display: inline-grid; place-items: center; }

.project-downloads-card { width: min(760px, calc(100vw - 28px)); }
.project-download-select-all,
.project-download-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(4, 12, 19, .72);
}
.project-download-select-all { margin-bottom: 8px; color: var(--cyan); font-weight: 850; }
.project-download-select-all input,
.project-download-row input { width: 19px; height: 19px; accent-color: var(--cyan); }
.project-downloads-list { display: grid; gap: 7px; max-height: min(56vh, 520px); overflow: auto; }
.project-download-row span { min-width: 0; display: grid; gap: 2px; }
.project-download-row b,
.project-download-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-download-row small { color: var(--muted); }
.editor-assignment-grid select { width: 100%; min-height: 46px; }

.local-assistant-card {
  width: min(720px, calc(100vw - 28px));
  height: min(820px, calc(100dvh - 28px));
  max-height: min(820px, calc(100dvh - 28px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 24px;
  background: #050b11;
}

.local-assistant-conversation-head {
  position: relative;
  z-index: 3;
  min-height: 78px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(68, 111, 140, .42);
  background: rgba(10, 20, 29, .96);
}

.local-assistant-head-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #162633;
  color: var(--cyan);
  font: 800 22px/1 inherit;
  cursor: pointer;
}

.local-assistant-head-button:hover,
.local-assistant-head-button:focus-visible { background: #21384a; color: #fff; }

.local-assistant-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: left;
}

.local-assistant-avatar {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(150deg, #57c8ff, #187bc0);
  color: #03101a;
  font-size: 13px;
  font-weight: 950;
}

.local-assistant-identity h2 {
  margin: 0;
  overflow: hidden;
  color: #f7fbff;
  font-size: 17px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.local-assistant-settings { position: relative; }
.local-assistant-settings > summary { list-style: none; font-size: 16px; }
.local-assistant-settings > summary::-webkit-details-marker { display: none; }

.local-assistant-settings-panel {
  position: absolute;
  z-index: 5;
  top: 48px;
  right: 0;
  width: min(430px, calc(100vw - 44px));
  padding: 16px;
  border: 1px solid #285574;
  border-radius: 18px;
  background: #0c1924;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .58);
}

.local-assistant-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.local-assistant-toolbar .field-label { grid-column: 1 / -1; margin: 0; }

.local-assistant-toolbar select {
  min-height: 44px;
  border: 1px solid var(--line-strong, #27516d);
  border-radius: 14px;
  background: #07111a;
  color: var(--text, #f4f8fb);
  padding: 0 14px;
  font: inherit;
}

.local-assistant-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #9fb4c2;
  font-size: 14px;
  line-height: 1.2;
}

.local-assistant-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

.local-assistant-status[data-state="ready"] {
  color: #8df0c0;
}

.local-assistant-status[data-state="offline"],
.local-assistant-status[data-state="no_models"] {
  color: #ffc17b;
}

.local-assistant-messages {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 22px 18px 16px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #071019, #03080d);
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.local-assistant-message {
  position: relative;
  max-width: min(78%, 500px);
  justify-self: start;
  padding: 10px 14px;
  border: 0;
  border-radius: 18px 18px 18px 5px;
  background: #26313a;
  color: #f6f8fa;
}

.local-assistant-message.user {
  justify-self: end;
  border-radius: 18px 18px 5px 18px;
  background: #1688e5;
  color: #fff;
}

.local-assistant-message b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.local-assistant-message p { margin: 0; white-space: pre-wrap; line-height: 1.45; }

.local-assistant-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: center;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(68, 111, 140, .42);
  background: #09121a;
}

.local-assistant-form textarea {
  width: 100%;
  min-height: 40px;
  max-height: 120px;
  resize: none;
  overflow-y: auto;
  border: 1px solid #3a4c59;
  border-radius: 21px;
  background: #121c24;
  color: #f4f8fb;
  padding: 8px 14px;
  font: inherit;
  line-height: 22px;
}

.local-assistant-send {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #1688e5;
  color: #fff;
  font: 900 24px/1 inherit;
  cursor: pointer;
}

.local-assistant-send:disabled { opacity: .38; cursor: default; }
.local-assistant-footnote { display: block; color: #8296a4; font-size: 14px; line-height: 1.45; }
.local-assistant-settings-panel .dialog-copy { margin: 14px 0; }
.local-assistant-card > .form-error { min-height: 0; margin: 0; padding: 0 16px; background: #09121a; }
.local-assistant-card > .form-error:not(:empty) { padding-block: 8px; }

@media (max-width: 850px) {
  .topbar-actions #localAssistantButton { display: none; }
  .local-assistant-card { width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .local-assistant-conversation-head { padding-top: calc(8px + env(safe-area-inset-top)); }
  .local-assistant-settings-panel { position: fixed; top: auto; right: 10px; bottom: calc(68px + env(safe-area-inset-bottom)); left: 10px; width: auto; }
  .local-assistant-message { max-width: 84%; }
}
body.client-mode .topbar { grid-template-columns: auto 1fr auto; min-height: 58px; }
body.client-mode .shell { height: calc(100vh - 58px); }
body.client-mode .client-identity { grid-column: 3; }
body.client-mode .section-head h1 { font-size: 18px; }
body.client-mode #sectionEyebrow::after { content: " · CLIENT"; }
body.client-mode .review-navigation-bar { grid-template-columns: 28px auto minmax(190px, 1fr) auto auto auto; }
body.client-registration-required { overflow: hidden; }

.compact-dialog { width: min(540px, 100%); }

.operations-card {
  width: min(980px, 100%);
}

.operations-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(14, 27, 39, 0.9);
}

.operations-summary div {
  display: grid;
  gap: 4px;
}

.operations-summary small,
.operations-footnote {
  color: var(--muted);
  font-size: 14px;
}

.operations-overall,
.operations-state {
  display: inline-flex;
  min-width: max-content;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(22, 169, 255, 0.45);
  border-radius: 999px;
  padding: 7px 11px;
  color: #c7ecff;
  background: rgba(22, 169, 255, 0.12);
  font-size: 14px;
  font-weight: 800;
}

.operations-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.operations-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  min-height: 96px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(7, 15, 23, 0.75);
}

.operations-row b {
  font-size: 18px;
}

.operations-row p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.operations-row[data-state="Online"] .operations-state {
  border-color: rgba(66, 211, 146, 0.5);
  color: #bdf7da;
  background: rgba(66, 211, 146, 0.13);
}

.operations-row[data-state="Pending"] .operations-state,
.operations-row[data-state="Retry Available"] .operations-state,
.operations-row[data-state="Attention"] .operations-state {
  border-color: rgba(255, 189, 69, 0.55);
  color: #ffe0a1;
  background: rgba(255, 189, 69, 0.14);
}

.operations-row[data-state="Failed"] .operations-state,
.operations-row[data-state="Service Unavailable"] .operations-state {
  border-color: rgba(255, 100, 118, 0.52);
  color: #ffc0c8;
  background: rgba(255, 100, 118, 0.14);
}

.operations-activity {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(7, 15, 23, 0.82);
}

.operations-activity-head,
.operations-activity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.operations-activity-head h3 {
  margin: 2px 0 0;
  font-size: 19px;
}

.operations-activity-head small {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.operations-activity-list {
  display: grid;
  gap: 8px;
}

.operations-activity-list > p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.operations-activity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 11px 12px;
  border: 1px solid rgba(255, 100, 118, 0.3);
  border-radius: 11px;
  background: rgba(255, 100, 118, 0.07);
}

.operations-activity-row p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.operations-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

.operations-details {
  max-height: 260px;
  overflow: auto;
  margin: 14px 0 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: #d5e7f5;
  background: #050a0f;
  font: 14px/1.5 Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .operations-grid {
    grid-template-columns: 1fr;
  }

  .operations-summary {
    align-items: flex-start;
  }

  .operations-actions .button {
    flex: 1 1 44%;
  }

  .operations-activity-head {
    align-items: flex-start;
  }
}

.dialog-backdrop {
  position: fixed;
  z-index: 520;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(1, 5, 10, 0.88);
  backdrop-filter: blur(18px);
}

.dialog-card {
  width: min(610px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 22px;
  border: 1px solid #24506d;
  border-radius: 18px;
  background: linear-gradient(155deg, #101e2b, #070c12 68%);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62), 0 0 45px rgba(21, 158, 233, 0.1);
}

.dialog-head,
.dialog-actions,
.editor-routing-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dialog-head small {
  color: var(--cyan);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.dialog-head h2 {
  margin: 4px 0 0;
  font-size: 23px;
}

.dialog-copy {
  margin: 15px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.field-label {
  display: grid;
  flex: 1;
  gap: 6px;
  margin-top: 12px;
  color: #b8c9d9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.field-label input,
.field-label textarea,
.field-label select {
  width: 100%;
  border: 1px solid var(--line-bright);
  border-radius: 11px;
  background: #050a10;
  color: var(--text);
  padding: 11px 12px;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
}

.field-label textarea {
  resize: vertical;
  min-height: 122px;
  font-family: "Cascadia Mono", Consolas, monospace;
  line-height: 1.45;
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.field-label-row button {
  border: 0;
  background: transparent;
  color: var(--cyan);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  text-transform: none;
}

.field-help {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 10px;
}

.toggle-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 15px;
  padding: 12px;
  border: 1px solid #1f4057;
  border-radius: 12px;
  background: rgba(15, 43, 62, 0.5);
  cursor: pointer;
}

.toggle-field input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.toggle-field b,
.toggle-field small { display: block; }
.toggle-field b { font-size: 12px; }
.toggle-field small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.4; }

.form-error {
  min-height: 18px;
  margin: 11px 0 0;
  color: #ff91a0;
  font-size: 11px;
}

.dialog-actions {
  justify-content: flex-end;
  margin-top: 4px;
}

.client-join-modal {
  position: fixed;
  z-index: 500;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(1, 5, 10, 0.88);
  backdrop-filter: blur(18px);
}

.client-join-card {
  position: relative;
  width: min(620px, 100%);
  max-height: calc(100svh - 28px);
  overflow: auto;
  padding: 26px;
  border: 1px solid #255778;
  border-radius: 20px;
  background: linear-gradient(155deg, #101d2b, #071019 72%);
  box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 60px rgba(21,158,233,.13);
}

.client-join-card .brand { margin-bottom: 22px; }
.client-join-card h1 { margin: 5px 0 7px; font-size: 28px; }
.client-join-card > p { color: var(--muted); line-height: 1.55; }
.client-kicker { color: var(--cyan); font-weight: 900; letter-spacing: .16em; }
.client-join-card label { display: grid; gap: 6px; margin-top: 14px; color: #bdd1e3; font-size: 11px; font-weight: 800; }
.client-join-card input {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid var(--line-bright);
  border-radius: 11px;
  background: #050b12;
  color: var(--text);
}

.client-contact-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; }
.client-contact-grid > span { padding-bottom: 13px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.client-contact-rule, .client-privacy { font-size: 10px; }
.client-join-error { min-height: 20px; color: #ff9cac !important; font-size: 11px; }
.client-join-card > .button { width: 100%; min-height: 46px; }
.client-avatar-field span { color: var(--muted); font-weight: 500; }
.client-avatar-preview {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-top: 9px;
  border: 2px solid #38bdf8;
  border-radius: 50%;
  background: linear-gradient(145deg, #184c6b, #0b2537) center/cover no-repeat;
  color: white;
  font-size: 14px;
  font-weight: 900;
}

.reviewer-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: #c9d8e6;
  font-size: 9px;
  font-weight: 800;
}

.reviewer-chip i {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 2px solid var(--reviewer-color);
  border-radius: 50%;
  background: color-mix(in srgb, var(--reviewer-color) 32%, #0b1621) center/cover no-repeat;
  color: white;
  font-size: 7px;
  font-style: normal;
}

@media (min-width: 1181px) {
  body.reviewing-short .stage.vertical {
    width: min(78%, calc((100dvh - 130px) * 9 / 16));
    height: calc(100dvh - 130px);
    max-height: calc(100dvh - 130px);
  }
  body.reviewing-short .review-navigation-bar { min-height: 44px; }
  body.reviewing-short .player-controls { min-height: 48px; }
}

@media (max-width: 600px) {
  body.client-mode .topbar { position: sticky; min-height: 48px; padding: 6px 9px; }
  body.client-mode .shell { height: auto; }
  body.client-mode .client-identity small { max-width: 145px; }
  .client-invite-button { padding-inline: 7px; font-size: 8px; }
  .client-contact-grid { grid-template-columns: 1fr; gap: 0; }
  .client-contact-grid > span { padding: 8px 0 0; text-align: center; }
  .client-join-card { padding: 20px; }
  .client-join-card h1 { font-size: 23px; }
  body.reviewing-short .stage.vertical {
    width: min(100%, calc(82svh * 9 / 16));
    max-height: 82svh;
  }
}

/* Review ergonomics: compact short focus, editable notes, and recoverable panel movement. */
.review-panel { position: relative; }

.player-controls {
  grid-template-columns: 46px 80px 62px 46px minmax(100px, 1fr) auto auto;
}

#rewindButton,
#forwardButton { width: 46px; }

#playPauseButton { width: 80px; }

#stopButton { width: 62px; }

.fullscreen-control {
  width: auto;
  min-width: 86px;
}

.player-time {
  font-size: 16px;
  letter-spacing: 0.02em;
}

.player-time .time-colon,
.player-time b {
  color: #33b9ff;
  text-shadow: 0 0 10px rgba(22, 169, 255, 0.5);
}

.draw-toolbar {
  flex-wrap: wrap;
  overflow-x: hidden;
}

.review-navigation-bar {
  grid-template-columns: 28px auto minmax(190px, 1fr) auto auto auto;
}

.panel-grip {
  display: none;
  width: 26px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(10, 22, 32, 0.9);
  color: var(--muted);
  cursor: grab;
  font-size: 15px;
  touch-action: none;
}

.panel-grip:active { cursor: grabbing; }

.draggable-panel-head {
  justify-content: flex-start;
}

.draggable-panel-head .comments-head-actions { margin-left: auto; }

.floating-note-button {
  position: absolute;
  z-index: 24;
  top: 82px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid #197eb6;
  border-radius: 999px;
  background: rgba(7, 20, 31, 0.9);
  color: var(--cyan);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  cursor: grab;
  backdrop-filter: blur(12px);
  touch-action: none;
}

.floating-note-button b { font-size: 10px; }
.floating-note-button em {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #15364d;
  color: white;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.comment p {
  font-size: 13px;
  line-height: 1.5;
}

.comment.internal-note {
  border-color: #247fbe;
  border-left: 3px solid #46b9ff;
  background: linear-gradient(110deg, rgba(22, 90, 139, .3), #0a121a 54%);
}

.comment.internal-note .comment-tag {
  color: #a8dcff;
  background: #143f5d;
}

.note-actions {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}

.note-action {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #101b27;
  color: var(--muted);
  padding: 4px 6px;
  cursor: pointer;
  font-size: 8px;
  font-weight: 800;
}

.note-action:hover { color: white; border-color: #2879a8; }
.note-action.delete-note:hover { color: #ff9cac; border-color: #67303a; }

.group-copy small {
  color: #b6c9d9;
  font-size: 10px;
  font-weight: 700;
}

.composer-action-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}

.composer-help {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.4;
}

@media (min-width: 1181px) {
  body.reviewing-short .review-head {
    position: absolute;
    z-index: 9;
    top: 8px;
    right: 8px;
    left: 8px;
    padding: 9px 11px;
    border: 1px solid rgba(37, 78, 107, 0.6);
    border-radius: 11px;
    background: rgba(5, 12, 19, 0.76);
    backdrop-filter: blur(12px);
  }

  body.reviewing-short .review-head p { display: none; }

  body.reviewing-short .stage.vertical {
    flex: 1 1 auto;
    width: min(72%, calc((100dvh - 180px) * 9 / 16));
    max-height: calc(100dvh - 180px);
  }

  body.reviewing-short .draw-toolbar {
    position: absolute;
    z-index: 11;
    top: 82px;
    right: 9px;
    width: 150px;
    max-height: calc(100% - 190px);
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(37, 78, 107, 0.65);
    border-radius: 12px;
    background: rgba(5, 12, 19, 0.78);
    overflow: auto;
    backdrop-filter: blur(12px);
  }

  body.reviewing-short .draw-toolbar .panel-grip { display: block; justify-self: end; }
  body.reviewing-short .draw-toolbar .tool-divider,
  body.reviewing-short .draw-toolbar .draw-help,
  body.reviewing-short .draw-toolbar .mobile-tools-button { display: none; }
  body.reviewing-short .draw-toolbar > *,
  body.reviewing-short .draw-toolbar label,
  body.reviewing-short .draw-toolbar select { width: 100%; min-width: 0; }
  body.reviewing-short .draw-toolbar label { justify-content: space-between; }
  body.reviewing-short .time-pill { white-space: normal; }
  body.reviewing-short .floating-note-button { top: auto; right: 9px; bottom: 104px; }
  body.reviewing-short .review-navigation-bar { padding-block: 6px; }
  body.reviewing-short .player-controls { padding-block: 7px; }
}

.shell.immersive-review .panel-grip,
.shell:fullscreen .panel-grip { display: block; }

.shell.immersive-review .draw-toolbar,
.shell:fullscreen .draw-toolbar {
  top: auto;
  right: 12px;
  bottom: 64px;
  left: 12px;
}

.shell.immersive-review .player-controls,
.shell:fullscreen .player-controls {
  right: 12px;
  bottom: 10px;
  left: 12px;
}

.shell.immersive-review .review-navigation-bar,
.shell:fullscreen .review-navigation-bar {
  right: 12px;
  bottom: 116px;
  left: 12px;
}

.shell.immersive-review .floating-note-button,
.shell:fullscreen .floating-note-button {
  position: fixed;
  z-index: 118;
  top: 14px;
  right: 14px;
  bottom: auto;
  opacity: 0.68;
}

.shell.immersive-review .floating-note-button:hover,
.shell.immersive-review .floating-note-button:focus,
.shell:fullscreen .floating-note-button:hover,
.shell:fullscreen .floating-note-button:focus { opacity: 1; }

@media (max-width: 850px) {
  .floating-note-button { display: none; }
  .composer-action-buttons { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .library-panel .section-head {
    align-items: center;
  }

  .library-head-actions .button.compact {
    width: 38px;
    padding: 0;
    overflow: hidden;
    font-size: 0;
  }

  .library-head-actions .button.compact::after {
    content: "+";
    display: grid;
    place-items: center;
    color: var(--cyan);
    font-size: 20px;
  }

  .dialog-backdrop { padding: 8px; }
  .dialog-card { max-height: calc(100dvh - 16px); padding: 16px; border-radius: 14px; }
  .editor-routing-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
  .editor-routing { align-items: flex-start; flex-direction: column; }
  .editor-routing small { max-width: none; }

  .review-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px;
    padding: 9px 10px;
  }

  .review-head h2 { font-size: 15px; }
  .review-head p { margin-top: 2px; font-size: 9px; }
  .head-actions { margin-top: 0; align-content: start; }
  .head-actions #moveFolderButton { display: none; }

  .stage.vertical {
    width: min(100%, calc(76svh * 9 / 16));
    max-height: 76svh;
  }

  .player-controls {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 6px;
  }

  .timeline-shell {
    grid-column: 1 / 4;
    grid-row: 2;
  }

  .player-time {
    grid-column: 4;
    grid-row: 2;
    justify-self: end;
    gap: 3px;
    font-size: 10px;
  }

  .fullscreen-control { display: none; }

  .draw-toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 6px;
  }

  .draw-toolbar .time-pill { grid-column: span 2; }
  .mobile-tools-button { grid-column: span 1; }
  .draw-toolbar .tool-button,
  .draw-toolbar .color-tool { min-height: 34px; }
}

/* Review workspace polish: compact actions, clear routing, project sharing, and calm docks. */
.project-share-button {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--episode-accent) 55%, #284052);
  border-radius: 8px;
  background: color-mix(in srgb, var(--episode-accent) 10%, #0b1721);
  color: var(--episode-accent);
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
}

.project-share-button:hover,
.project-share-button:focus-visible {
  border-color: var(--episode-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--episode-accent) 15%, transparent);
}

.editor-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.editor-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #08121c;
  cursor: pointer;
}

.editor-checkbox:has(input:checked) {
  border-color: #178fcf;
  background: #0a2538;
  box-shadow: inset 3px 0 #21b3ff;
}

.editor-checkbox input { width: 18px; height: 18px; accent-color: #1baaf5; }
.editor-checkbox span { min-width: 0; }
.editor-checkbox b,
.editor-checkbox small { display: block; }
.editor-checkbox small { margin-top: 3px; color: var(--muted); line-height: 1.35; }

.composer-action-buttons { gap: 6px; }
.composer-action-buttons .button {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 9px;
  line-height: 1.12;
}

.panel-dock-actions,
.shortcut-help { display: none; }

.panel-dock-actions {
  align-items: center;
  gap: 4px;
}

.panel-dock-actions button,
.shortcut-help {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #091521;
  color: var(--muted);
  cursor: pointer;
}

.panel-dock-actions button.active {
  border-color: #169bdd;
  background: #0c2d43;
  color: var(--cyan);
}

.floating-note-button { display: none; }

.review-navigation-bar {
  grid-template-columns: auto minmax(190px, 1fr) auto auto;
}

@media (min-width: 1181px) {
  body.reviewing-short .shell:not(.immersive-review) .review-head {
    position: static;
    padding: 14px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
  }

  body.reviewing-short .shell:not(.immersive-review) .review-head p { display: block; }

  body.reviewing-short .shell:not(.immersive-review) .stage.vertical {
    width: min(78%, calc((100dvh - 250px) * 9 / 16));
    height: calc(100dvh - 250px);
    max-height: calc(100dvh - 250px);
  }

  body.reviewing-short .shell:not(.immersive-review) .draw-toolbar {
    position: static;
    width: auto;
    max-height: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: #07111a;
    overflow: hidden;
    backdrop-filter: none;
  }

  body.reviewing-short .shell:not(.immersive-review) .draw-toolbar .panel-grip,
  body.reviewing-short .shell:not(.immersive-review) .draw-toolbar .panel-dock-actions { display: none; }
  body.reviewing-short .shell:not(.immersive-review) .draw-toolbar > *,
  body.reviewing-short .shell:not(.immersive-review) .draw-toolbar label,
  body.reviewing-short .shell:not(.immersive-review) .draw-toolbar select { width: auto; }
}

.shell.immersive-review .floating-note-button,
.shell:fullscreen .floating-note-button { display: inline-flex; }

.shell.immersive-review .panel-dock-actions,
.shell:fullscreen .panel-dock-actions,
.shell.immersive-review .shortcut-help,
.shell:fullscreen .shortcut-help { display: inline-flex; }

.shell.immersive-review .review-navigation-bar,
.shell:fullscreen .review-navigation-bar {
  right: 12px;
  bottom: 64px;
  left: 12px;
}

.shell.immersive-review .player-controls,
.shell:fullscreen .player-controls {
  right: 12px;
  bottom: 10px;
  left: 12px;
}

.shell.immersive-review .draw-toolbar.dock-bottom,
.shell:fullscreen .draw-toolbar.dock-bottom {
  top: auto;
  right: 12px;
  bottom: 116px;
  left: 12px;
}

.shell.immersive-review .draw-toolbar.dock-side,
.shell:fullscreen .draw-toolbar.dock-side {
  top: 76px;
  right: 12px;
  bottom: 116px;
  left: auto;
  width: 180px;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  overflow: auto;
}

.shell.immersive-review .draw-toolbar.dock-side > *,
.shell.immersive-review .draw-toolbar.dock-side label,
.shell.immersive-review .draw-toolbar.dock-side select,
.shell:fullscreen .draw-toolbar.dock-side > *,
.shell:fullscreen .draw-toolbar.dock-side label,
.shell:fullscreen .draw-toolbar.dock-side select { width: 100%; min-width: 0; }

.shell.immersive-review .draw-toolbar.dock-float,
.shell:fullscreen .draw-toolbar.dock-float {
  top: 78px;
  right: auto;
  bottom: auto;
  left: 16px;
  width: min(660px, calc(100vw - 32px));
}

.shell.immersive-review .draw-toolbar.dock-float .panel-grip,
.shell:fullscreen .draw-toolbar.dock-float .panel-grip { display: block; }

@media (max-width: 850px) {
  .composer-action-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .editor-checkbox-grid { grid-template-columns: 1fr; }

  .shell.immersive-review .draw-toolbar.dock-side,
  .shell:fullscreen .draw-toolbar.dock-side {
    top: 60px;
    right: 8px;
    bottom: 126px;
    left: auto;
    width: min(152px, 42vw);
    grid-template-columns: 1fr;
  }

  .shell.immersive-review .draw-toolbar.dock-bottom,
  .shell:fullscreen .draw-toolbar.dock-bottom {
    top: auto;
    right: 8px;
    bottom: 122px;
    left: 8px;
  }
}

/* Final cascade authority for the player repair. */
.player-controls {
  grid-template-columns: 46px 80px 62px 46px auto minmax(180px, 1fr) auto auto;
  column-gap: 8px;
  row-gap: 6px;
}

.player-controls .volume-control { width: auto; min-width: 76px; }
.player-controls .volume-control input { width: 54px; min-width: 40px; }
.player-controls .timeline-shell { width: 100%; min-width: 180px; }
.player-controls .fullscreen-control { display: inline-flex; justify-self: end; white-space: nowrap; }

@media (min-width: 851px) {
  .draw-toolbar:not(.dock-side) {
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: hidden;
  }

  .draw-toolbar:not(.dock-side) .tool-button,
  .draw-toolbar:not(.dock-side) label,
  .draw-toolbar:not(.dock-side) select {
    min-width: 0;
  }

  .draw-toolbar:not(.dock-side) .tool-button,
  .draw-toolbar:not(.dock-side) .color-tool {
    padding-inline: 9px;
  }
}

@media (max-width: 850px) {
  .player-controls {
    grid-template-columns: 42px minmax(70px, 1fr) minmax(54px, .8fr) 42px minmax(42px, .65fr);
    gap: 5px;
    padding: 7px;
  }

  .player-controls .volume-control {
    grid-column: 5;
    grid-row: 1;
    min-width: 0;
    justify-content: center;
  }

  .player-controls .volume-control input { width: min(48px, 9vw); min-width: 28px; }
  .player-controls .timeline-shell { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
  .player-controls .player-time {
    grid-column: 1 / 5;
    grid-row: 3;
    justify-self: end;
    align-self: center;
    font-size: 10px;
  }

  .player-controls .fullscreen-control {
    display: inline-flex;
    grid-column: 5;
    grid-row: 3;
    width: 42px;
    min-width: 42px;
    min-height: 32px;
    padding: 5px;
    justify-content: center;
  }

  .player-controls .fullscreen-label { display: none; }
}

@media (max-width: 600px) {
  .draw-toolbar.mobile-tools-open {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .draw-toolbar.mobile-tools-open .drawing-tool { grid-column: 1 / 3; }
  .draw-toolbar.mobile-tools-open .color-tool { grid-column: 3 / 5; }
  .draw-toolbar.mobile-tools-open #undoDrawing,
  .draw-toolbar.mobile-tools-open #clearDrawing {
    display: flex;
  }
  .draw-toolbar.mobile-tools-open #undoDrawing { grid-column: 1 / 3; }
  .draw-toolbar.mobile-tools-open #clearDrawing { grid-column: 3 / 5; }
}

.client-delivery-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin: 0 0 16px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--blue) 45%, var(--line));
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(22, 169, 255, .12), rgba(6, 13, 22, .96));
}

.client-delivery-panel h3,
.client-delivery-panel p { margin: 3px 0 0; }
.client-delivery-panel small { color: var(--blue); font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.client-delivery-panel p { color: var(--muted); font-size: 18px; }
.client-delivery-files { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.client-delivery-files a { min-height: 44px; display: inline-flex; align-items: center; }
.client-delivery-file-group { display: flex; flex-wrap: wrap; gap: 6px; }
.client-delivery-file-group .button { min-height: 44px; }
.client-delivery-actions { min-width: min(100%, 520px); display: grid; gap: 10px; }
.client-raw-footage-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.client-raw-action {
  min-width: 0;
  min-height: 38px;
  padding: 5px 11px;
  display: grid;
  align-content: center;
  border: 1px solid rgba(90, 202, 255, .5);
  border-radius: 9px;
  background: rgba(8, 25, 38, .9);
  color: var(--cyan);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.client-raw-action:hover,
.client-raw-action:focus-visible { border-color: var(--cyan); background: #102536; }
.client-raw-action span { font-size: 12px; font-weight: 850; }
.client-raw-action small { color: var(--muted); font-size: 9px; line-height: 1.1; }

.raw-footage-settings {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(8, 22, 33, .72);
}

.shorts-cart-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  padding: 14px 18px;
  border: 1px solid rgba(90, 202, 255, .55);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(28, 113, 164, .18), rgba(6, 13, 22, .97));
}
.shorts-cart-panel small { color: var(--cyan); font-weight: 800; letter-spacing: .08em; }
.shorts-cart-panel h3,
.shorts-cart-panel p { margin: 3px 0 0; }
.shorts-cart-panel p { color: var(--muted); }
.shorts-cart-summary { display: grid; justify-items: end; gap: 2px; white-space: nowrap; }
.shorts-cart-summary strong { color: var(--cyan); font-size: 22px; }
.media-row.has-cart-action { grid-template-columns: minmax(0, 1fr) auto 38px; }
.shorts-cart-button {
  min-height: 36px;
  margin-right: 4px;
  padding: 6px 10px;
  border: 1px solid var(--line-bright);
  border-radius: 9px;
  background: #102233;
  color: var(--cyan);
  font-weight: 800;
  cursor: pointer;
}
.shorts-cart-button.added { border-color: rgba(67, 213, 154, .65); background: #0e3329; color: var(--green); }

.payment-release-card { width: min(880px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: auto; }
.payment-release-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.payment-release-summary > div,
.payment-reminder-panel { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); }
.payment-release-summary small,
.payment-reminder-panel small { display: block; margin-bottom: 5px; color: var(--muted); font-size: 14px; }
.payment-release-summary b,
.payment-reminder-panel b { font-size: 18px; }
.automatic-download-policy {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(103, 225, 169, .5);
  border-radius: 12px;
  background: rgba(17, 91, 63, .2);
}
.automatic-download-policy b { color: #8ff0bf; font-size: 18px; }
.automatic-download-policy span { color: #c5d8cf; line-height: 1.45; }
.ala-carte-settings { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); }
.ala-carte-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.payment-release-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px; margin: 18px 0; }
.payment-release-wide { grid-column: 1 / -1; }
.payment-reminder-panel textarea { width: 100%; margin-top: 10px; }
.project-payment-button { white-space: nowrap; }

@media (max-width: 850px) {
  .client-delivery-panel,
  .shorts-cart-panel,
  .payment-release-summary,
  .payment-release-grid { grid-template-columns: 1fr; }
  .shorts-cart-summary { justify-items: start; }
  .ala-carte-prices { grid-template-columns: 1fr; }
  .client-delivery-files { justify-content: flex-start; }
  .payment-release-wide { grid-column: auto; }
  .payment-release-card { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
}

/* Always-on review ergonomics: compact eye line, visible work state, and mobile-first notes. */
.topbar {
  min-height: 54px;
  padding: 6px 12px;
  gap: 10px;
}

.brand { gap: 8px; }
.brand-mark { width: 31px; height: 31px; border-radius: 9px; }
.workflow-tab { min-height: 36px; padding-block: 5px; }
.workflow-tab b { min-width: 20px; height: 20px; }
.shell { height: calc(100vh - 54px); padding: 8px; gap: 8px; }

.review-head {
  min-height: 54px;
  padding: 7px 10px;
  align-items: center;
}

.review-head h2 { margin-top: 1px; font-size: 14px; line-height: 1.1; }
.review-head p { margin-top: 2px; font-size: 9px; }
.review-head small { font-size: 8px; }
.head-actions { gap: 5px; flex-wrap: nowrap; align-items: center; }
.head-actions .button { min-height: 32px; padding: 6px 8px; font-size: 9px; }

.new-review-banner {
  width: calc(100% - 16px);
  margin: 0 8px 7px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(67, 213, 154, 0.62);
  border-radius: 9px;
  background: linear-gradient(90deg, rgba(18, 86, 67, 0.95), rgba(10, 29, 35, 0.95));
  color: white;
  cursor: pointer;
  text-align: left;
}

.new-review-banner span { color: #8ff0c6; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.new-review-banner b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.new-review-banner-count { display: none; }
.review-badge.new-review-ready { animation: new-review-pulse 1.6s ease-in-out infinite; }
@keyframes new-review-pulse { 50% { box-shadow: 0 0 0 5px rgba(67, 213, 154, 0.12); } }

.new-review-badge,
.work-state-badge,
.shorts-requested-badge {
  border: 1px solid transparent;
}

.new-review-badge { background: rgba(67, 213, 154, .18) !important; color: #8ff0c6 !important; border-color: rgba(67, 213, 154, .38); }
.work-state-badge.queued_for_snrt,
.work-state-badge.in_progress { background: rgba(22, 169, 255, .16) !important; color: var(--cyan) !important; }
.work-state-badge.queued_editor_inactive { background: rgba(255, 159, 67, .16) !important; color: #ffc27d !important; }
.shorts-requested-badge { background: rgba(168, 124, 255, .16) !important; color: #c6aaff !important; }
.shorts-routing-status { color: #c6aaff !important; font-weight: 800; }
.media-row.new-review { box-shadow: inset 3px 0 #43d59a; }

.stage:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.stage.playing .stage-play,
.stage:hover.playing .stage-play { opacity: 0; pointer-events: none; }

.player-controls {
  grid-template-columns: 46px 80px 62px 46px auto minmax(180px, 1fr) auto auto auto;
}

.captions-control { min-width: 56px; }
.captions-control[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); background: rgba(22, 169, 255, .12); }
.timeline-shell { cursor: ew-resize; }
.timeline-shell::after {
  content: "SCROLL TO ZOOM";
  position: absolute;
  right: 5px;
  bottom: -12px;
  color: var(--muted);
  font-size: 7px;
  letter-spacing: .08em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.timeline-shell:hover::after { opacity: .8; }

body.connection-offline::before {
  content: "RECONNECTING TO REVIEW BOARD";
  position: fixed;
  z-index: 80;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 9px;
  border: 1px solid rgba(255, 159, 67, .6);
  border-radius: 999px;
  background: rgba(40, 21, 7, .94);
  color: #ffc27d;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
}

@media (max-width: 850px) {
  .topbar { min-height: 48px; padding: 5px 8px; }
  .shell { height: auto; padding-top: 6px; }
  .review-head { padding: 7px 8px; }
  .review-head > div:first-child { min-width: 0; }
  .review-head h2,
  .review-head p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .head-actions {
    margin-top: 6px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .head-actions .button { min-height: 34px; padding: 5px; }
  #requestShortsButton,
  #exportNotesButton,
  #moveFolderButton { grid-column: 1 / -1; }
  .player-controls {
    grid-template-columns: 42px minmax(70px, 1fr) minmax(54px, .8fr) 42px minmax(42px, .65fr);
  }
  .player-controls .captions-control {
    grid-column: 1;
    grid-row: 3;
    min-width: 48px;
  }
  .player-controls .player-time { grid-column: 2 / 5; }
  .new-review-banner { margin-inline: 6px; width: calc(100% - 12px); }
}

@media (max-width: 600px) {
  .topbar .brand > span:last-child { display: none; }
  .workflow-tabs { grid-template-columns: repeat(4, 124px); }
  .workflow-tab { min-height: 34px; font-size: 9px; }
  .review-head { min-height: 0; }
  .mobile-videos-button { margin-bottom: 4px; padding-block: 4px; }
  .stage { max-height: 68vh; }
}

/* Castle Design Lead default: readable at 100% zoom without shrinking core UI. */
body { font-size: 18px; }
button,
input,
textarea,
select { font-size: 17px; }

.topbar { min-height: 60px; padding: 8px 12px; }
.shell { height: calc(100vh - 60px); }
.brand-mark { width: 40px; height: 40px; font-size: 20px; }
.brand b { font-size: 18px; }
.brand small { font-size: 14px; letter-spacing: .08em; }
.workflow-tab { min-height: 44px; padding: 8px 12px; font-size: 17px; letter-spacing: 0; text-transform: none; }
.workflow-tab b { min-width: 28px; height: 28px; font-size: 14px; }
.icon-button { width: 44px; height: 44px; font-size: 22px; }

.library-panel,
.comments-panel { padding: 16px; }
.section-head small,
.review-head small { font-size: 16px; letter-spacing: .06em; }
.section-head h1 { font-size: 32px; }
.section-head h2 { font-size: 26px; }
.search { min-height: 48px; margin-block: 16px 12px; padding: 10px 12px; }
.search input { font-size: 18px; }
.filter,
.tool-button { min-height: 44px; padding: 9px 14px; font-size: 17px; }

.episode-group-head { min-height: 56px; padding: 12px; }
.group-copy b { font-size: 20px; }
.group-copy small { margin-top: 4px; font-size: 15px; white-space: normal; }
.group-chevron { font-size: 24px; }
.episode-group-actions em,
.version-badge,
.item-status,
.revision-work-badge,
.editor-route-badge,
.new-review-badge,
.downloaded-badge,
.work-state-badge,
.shorts-requested-badge { padding: 5px 8px; font-size: 14px; letter-spacing: .02em; }
.project-share-button,
.route-action,
.revise-shortcut { min-width: 44px; min-height: 44px; font-size: 17px; }
.editor-routing { min-height: 64px; padding: 10px 12px; }
.editor-routing b { font-size: 16px; letter-spacing: .02em; }
.editor-routing small { max-width: 320px; font-size: 15px; line-height: 1.4; }
.media-item { min-height: 68px; padding: 12px; grid-template-columns: 48px minmax(0, 1fr); }
.item-icon { width: 48px; height: 48px; font-size: 16px; }
.revision-count-badge { min-width: 26px; height: 26px; font-size: 14px; }
.item-copy b { font-size: 18px; white-space: normal; line-height: 1.25; }
.item-copy > span:not(.item-chips) { font-size: 15px; white-space: normal; }
.item-chips { gap: 6px; margin-top: 8px; }

.review-head { min-height: 64px; padding: 8px 12px; }
.review-head h2 { font-size: 20px; line-height: 1.2; }
.review-head p { font-size: 15px; line-height: 1.35; }
.head-actions { flex: 0 0 auto; gap: 8px; }
.head-actions .button,
.review-more-actions > summary { min-height: 44px; padding: 10px 14px; font-size: 17px; }

.review-more-actions { position: relative; }
.review-more-actions > summary {
  min-width: 76px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-bright);
  border-radius: 10px;
  background: #0d1a25;
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.review-more-actions > summary::-webkit-details-marker { display: none; }
.review-more-actions > summary::after { content: " ⋯"; color: var(--cyan); }
.review-more-actions[open] > summary { border-color: var(--cyan); }
.review-more-actions > div {
  position: absolute;
  z-index: 35;
  top: calc(100% + 8px);
  right: 0;
  width: min(340px, calc(100vw - 32px));
  padding: 8px;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line-bright);
  border-radius: 12px;
  background: #08131d;
  box-shadow: 0 18px 52px rgba(0, 0, 0, .58);
}
.review-more-actions > div .button { width: 100%; min-height: 48px; text-align: left; }
.new-review-banner { min-height: 48px; padding: 9px 12px; }
.new-review-banner span { font-size: 15px; letter-spacing: .05em; }
.new-review-banner b { font-size: 16px; }

.player-controls { grid-template-columns: 56px 100px 82px 56px minmax(100px, 1fr) auto 72px auto; gap: 8px; }
.player-controls .timeline-shell { grid-column: 1 / -1; grid-row: 2; min-height: 32px; }
.control-button { min-height: 44px; padding: 8px 10px; font-size: 17px; }
#rewindButton,
#forwardButton { width: 56px; }
#playPauseButton { width: 100px; }
#stopButton { width: 82px; }
.volume-control { min-height: 44px; font-size: 17px; }
.player-time { font-size: 18px; }
.player-time em { font-size: 14px; }
.captions-control { min-width: 72px; }
.timeline-shell::after { font-size: 14px; bottom: -18px; }

.draw-toolbar { gap: 8px; padding: 8px 12px; }
.time-pill { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 12px; font-size: 16px; }
.wipe-control,
.timeline-zoom,
.inspection-hold,
.drawing-tool,
.note-type { font-size: 16px; }
.timeline-zoom select,
.inspection-hold select,
.drawing-tool select,
.note-type select { min-height: 44px; padding: 8px 10px; font-size: 17px; }
.compare-mode,
.mini-action { min-height: 44px; padding: 8px 12px; font-size: 16px; }
.compare-help { font-size: 15px; }

.composer { padding: 16px; }
.composer textarea { min-height: 120px; padding: 12px; font-size: 18px; line-height: 1.5; }
.composer-actions { font-size: 15px; }
#pinnedIndicator { font-size: 16px; }
.composer-help { font-size: 15px; }
.count { min-width: 36px; height: 36px; font-size: 16px; }
.comment { padding: 14px; margin-bottom: 12px; }
.time-link { min-height: 44px; font-size: 17px; }
.comment-tag,
.notes-divider { font-size: 14px; letter-spacing: .05em; }
.comment p { font-size: 18px; line-height: 1.5; }
.blank-note { font-size: 16px; line-height: 1.45; }

@media (max-width: 1180px) {
  .topbar { grid-template-columns: auto minmax(560px, 1fr) auto; }
  .shell { grid-template-columns: 300px minmax(520px, 1fr); }
}

@media (max-width: 850px) {
  .topbar { min-height: 56px; padding: 6px 8px; }
  .shell { height: auto; }
  .workflow-tabs { grid-template-columns: repeat(4, minmax(170px, 1fr)); }
  .review-head { padding: 10px; }
  .review-head h2 { font-size: 22px; }
  .review-head p { font-size: 15px; }
  .head-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .head-actions .button,
  .review-more-actions > summary { width: 100%; min-height: 48px; padding-inline: 8px; }
  .review-more-actions { grid-column: auto; }
  .review-more-actions > div { right: 0; }
  .player-controls { grid-template-columns: repeat(5, minmax(48px, 1fr)); }
  .player-controls .captions-control { min-width: 0; min-height: 48px; }
  .player-controls .player-time { grid-column: 2 / 5; font-size: 16px; }
  .timeline-shell::after { display: none; }
  .mobile-comment-tab,
  .mobile-workspace-dock button,
  .mobile-video-picker select { min-height: 48px; font-size: 16px; }
  .mobile-workspace-dock { gap: 8px; padding: 8px; }
}

@media (max-width: 600px) {
  .brand-mark { width: 44px; height: 44px; }
  .workflow-tabs { grid-template-columns: repeat(4, 168px); }
  .workflow-tab { min-height: 48px; font-size: 17px; }
  .mobile-videos-button { min-height: 44px; padding: 8px 12px; font-size: 16px; }
  .new-review-banner {
    width: auto;
    max-width: calc(100% - 16px);
    min-height: 40px;
    margin: 6px 8px 8px auto;
    padding: 7px 10px;
    align-items: center;
    flex-direction: row;
    justify-content: flex-end;
    gap: 7px;
    border-radius: 999px;
    background: rgba(14, 51, 41, .96);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  }
  .new-review-banner::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 999px;
    background: #8ff0c6;
    box-shadow: 0 0 0 4px rgba(143, 240, 198, .12);
  }
  .new-review-banner-label { font-size: 12px !important; letter-spacing: .04em !important; }
  .new-review-banner b { display: none; }
  .new-review-banner-count {
    display: inline-flex;
    min-width: 42px;
    justify-content: center;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(143, 240, 198, .14);
    color: #d9ffef !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
  }
}

@media (min-width: 851px) {
  .review-panel > .draw-toolbar:not(.dock-side) {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-gutter: stable;
  }

  .review-panel > .draw-toolbar:not(.dock-side) > * {
    flex: 0 0 auto;
    width: auto;
  }

  .review-panel > .draw-toolbar:not(.dock-side) label,
  .review-panel > .draw-toolbar:not(.dock-side) button,
  .review-panel > .draw-toolbar:not(.dock-side) select {
    white-space: nowrap;
  }
}

/* V3 visual contract. This final cascade is authoritative for the standard
   owner and client review surfaces. */
:root {
  --blue: #0aaeff;
  --cyan: #63d8ff;
  --line-bright: #25648a;
}

.mobile-review-decision { display: none; }

.topbar {
  min-height: 64px;
  padding: 8px 16px;
  grid-template-columns: 190px minmax(520px, 1fr) auto;
  gap: 16px;
}

.topbar-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.topbar-actions .button.compact,
.library-head-actions .button.compact {
  min-height: 44px;
  padding: 8px 12px;
  font-size: 16px;
}

.shell {
  height: calc(100vh - 64px);
  grid-template-columns: 310px minmax(0, 1fr) 340px;
  gap: 20px;
  padding: 20px;
}

.library-panel,
.comments-panel { padding: 16px; }

.library-panel .section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.library-panel .section-head h1 { font-size: 26px; line-height: 1.12; }
.library-head-actions { width: 100%; }
.library-head-actions #addReviewFilesButton { flex: 1 1 auto; }
.library-head-actions #refreshButton { flex: 0 0 44px; }

.review-panel { overflow-y: auto; overflow-x: hidden; }
.review-head { flex: 0 0 64px; min-height: 64px; padding: 8px 12px; }
.review-head > div:first-child { min-width: 0; }
.review-head h2,
.review-head p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-head h2 { font-size: 20px; }
.review-head p { font-size: 15px; }

.stage:not(.vertical) {
  flex: 0 0 auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
}

.stage.vertical {
  flex: 0 0 auto;
  max-height: calc(100vh - 260px);
}

.stage-play {
  width: 64px;
  height: 64px;
  font-size: 25px;
}

.player-controls {
  flex: 0 0 auto;
  grid-template-columns: 56px 100px 82px 56px minmax(90px, 1fr) auto 72px auto;
  gap: 8px;
  padding: 10px 12px 12px;
}

.player-controls .timeline-shell { grid-column: 1 / -1; grid-row: 2; min-height: 32px; }
.player-controls .fullscreen-control { width: 48px; min-width: 48px; justify-content: center; }
.player-controls .fullscreen-label { display: none; }
.player-controls > .panel-grip { display: none; }
.draw-toolbar { flex: 0 0 auto; }
.draw-toolbar.tools-collapsed { min-width: 0 !important; width: 100% !important; padding: 8px 12px; }
.draw-toolbar.tools-collapsed .collapse-tools { min-width: 140px; }
.review-navigation-bar { flex: 0 0 auto; }

.comments-panel .section-head { align-items: center; }
.comments-panel .section-head h2 { font-size: 24px; }
.comments-panel .composer-action-buttons { grid-template-columns: 1fr; width: 100%; }
.comments-panel .composer-action-buttons .button {
  min-height: 44px;
  padding: 9px 11px;
  font-size: 16px;
}
.note-action { min-width: 44px; min-height: 44px; padding: 7px; font-size: 14px; }
.review-nav-button { min-height: 44px; padding: 8px 10px; font-size: 14px; }
.review-video-picker { font-size: 14px; }
.review-video-picker select { min-height: 40px; font-size: 14px; }

.episode-group-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
}
.episode-group-collapse { min-height: 58px; }
.episode-group-actions { width: 100%; display: flex; flex-wrap: wrap; }
.episode-group-actions .project-payment-button {
  flex: 1 1 170px;
  min-width: 0;
  min-height: 44px;
  font-size: 15px;
}
.episode-group-actions .project-share-button { flex: 0 0 44px; width: 44px; height: 44px; }

.project-admin-card,
.request-shorts-card,
.request-specific-short-card,
.recovery-card,
.privacy-card { width: min(880px, calc(100vw - 32px)); }

.recovery-card,
.privacy-card {
  max-height: min(850px, calc(100vh - 28px));
  overflow: auto;
}

.recovery-policy {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(140px, 180px) auto;
  gap: 12px;
  align-items: end;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
}

.check-field {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 750;
}

.check-field input { width: 20px; height: 20px; accent-color: var(--cyan); }

.recovery-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.recovery-status-grid > div,
.privacy-section-head {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
}

.recovery-status-grid small,
.privacy-section-head small { display: block; color: var(--muted); margin-bottom: 5px; }

.restore-confirmation {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(248, 113, 113, .55);
  border-radius: 12px;
  background: rgba(127, 29, 29, .18);
}

.privacy-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.privacy-identity-list { display: grid; gap: 10px; margin-top: 12px; }

.privacy-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.privacy-identity b,
.privacy-identity small { display: block; overflow-wrap: anywhere; }
.privacy-identity small { margin-top: 4px; color: var(--muted); }

.dialog-card { font-size: 18px; }
.dialog-card .dialog-copy { font-size: 17px; line-height: 1.5; }
.dialog-card .field-label { font-size: 16px; line-height: 1.4; }
.dialog-card input,
.dialog-card select,
.dialog-card textarea { min-height: 44px; padding: 9px 11px; font-size: 17px; }
.dialog-card textarea { min-height: 88px; }
.dialog-card .field-help { font-size: 14px; line-height: 1.45; }
.dialog-card .button { min-height: 44px; padding: 9px 12px; font-size: 16px; }
.dialog-card .form-error { font-size: 15px; }

.project-admin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.project-admin-grid article,
.share-protection-grid > div,
.share-step-summary,
.project-protection-note {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #07131d;
}

.project-admin-grid article { display: flex; min-height: 230px; flex-direction: column; }
.project-admin-grid article > span,
.project-protection-note b {
  color: var(--cyan);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: .06em;
}
.project-admin-grid h3 { margin: 7px 0 0; font-size: 22px; }
.project-admin-grid p { flex: 1 1 auto; color: var(--muted); font-size: 16px; line-height: 1.5; }
.project-admin-grid .button { min-height: 48px; font-size: 16px; }
.project-protection-note { display: grid; gap: 5px; }
.project-protection-note span { color: var(--muted); font-size: 16px; line-height: 1.45; }

.request-shorts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.request-shorts-grid input,
.request-shorts-grid select,
.request-shorts-grid textarea { width: 100%; }
.request-shorts-wide { grid-column: 1 / -1; }
.request-shorts-advanced { margin-top: 18px; }
.request-shorts-advanced summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--cyan);
  cursor: pointer;
  font-weight: 750;
}

.owner-access-requests-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.owner-access-requests-button.has-pending {
  border-color: #d95268;
  color: #ff91a0;
}

.owner-access-requests-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

.owner-access-requests-card { width: min(860px, 100%); }

.request-specific-short-card {
  max-height: min(900px, calc(100dvh - 28px));
  overflow: auto;
}
.specific-short-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.specific-short-match {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(86, 191, 255, .52);
  border-radius: 12px;
  background: rgba(21, 158, 233, .09);
}
.specific-short-match small { color: var(--cyan); font-weight: 850; letter-spacing: .06em; }
.specific-short-match b { font-family: var(--mono); font-size: 19px; color: var(--text); }
.specific-short-match p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.45; }

.share-project-card {
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}
.share-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 20px;
}
.share-step-tab {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #08131d;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  font-weight: 750;
}
.share-step-tab b { color: var(--cyan); }
.share-step-tab.active { border-color: var(--blue); background: #0a2b42; color: var(--text); }
.share-step h3 { margin: 0; font-size: 24px; }
.share-step-summary { display: grid; gap: 5px; margin-top: 16px; }
.share-step-summary span { color: var(--muted); font-size: 16px; }
.share-protection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.share-protection-grid > div { display: grid; gap: 6px; }
.share-protection-grid span { color: var(--muted); font-size: 15px; line-height: 1.4; }
.share-protection-grid [aria-disabled="true"] { opacity: .7; }
.share-project-card:not([data-share-step="3"]) .share-delivery-action { display: none !important; }
.share-dialog-actions { justify-content: flex-end; }
.share-dialog-actions #shareStepBackButton { margin-right: auto; }

@media (max-width: 1180px) and (min-width: 851px) {
  .topbar { grid-template-columns: auto minmax(520px, 1fr) auto; }
  .shell {
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 300px;
    gap: 14px;
    padding: 14px;
  }
  .comments-panel { grid-column: 1 / -1; grid-row: 2; max-height: 300px; }
}

@media (max-width: 850px) {
  body { overflow-x: hidden; }
  .topbar {
    position: static;
    min-height: 56px;
    padding: 6px 8px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
  }
  .topbar-actions { min-height: 44px; }
  .topbar-actions .button.compact { min-height: 44px; padding-inline: 10px; font-size: 15px; }
  .workflow-tabs {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(4, minmax(146px, 1fr));
    gap: 6px;
    overflow-x: auto;
  }
  .workflow-tab { min-height: 46px; font-size: 16px; }
  .shell {
    width: 100%;
    height: auto;
    display: block;
    padding: 16px 16px calc(94px + env(safe-area-inset-bottom));
  }
  .library-panel,
  .review-panel,
  .comments-panel { width: 100%; margin: 0 0 16px; border-radius: 14px; }
  body:not(.immersive-review-open):not(.mobile-notes-open):not(.mobile-composer-open) .comments-panel {
    display: none;
  }
  .library-panel { height: min(620px, 74svh); }
  .review-panel { overflow: hidden; scroll-margin-top: 0; }
  .review-head {
    min-height: 80px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
  }
  .review-head h2 { font-size: 19px; }
  .review-head p { font-size: 14px; }
  .review-head small { font-size: 14px; }
  .mobile-videos-button { min-height: 30px; margin: 0 0 2px; padding: 3px 9px; font-size: 14px; }
  .head-actions { display: block; margin: 0; }
  .head-actions #approveItemButton { display: none; }
  .review-more-actions > summary { min-width: 70px; min-height: 44px; padding: 8px; font-size: 16px; }
  .review-more-actions > div { width: min(330px, calc(100vw - 52px)); }
  .stage:not(.vertical) { width: 100%; aspect-ratio: 16 / 9; max-height: none; }
  .stage.vertical { width: min(100%, calc(66svh * 9 / 16)); max-height: 66svh; }
  .stage-play { width: 56px; height: 56px; }
  .player-controls {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 8px 9px 10px;
  }
  .player-controls .control-button { width: 100% !important; min-width: 0; min-height: 44px; padding: 7px 4px; font-size: 15px; }
  .player-controls .volume-control,
  .player-controls .fullscreen-control { display: none; }
  .player-controls .timeline-shell { grid-column: 1 / -1; grid-row: 2; min-height: 34px; }
  .player-controls .player-time { grid-column: 1 / 4; grid-row: 3; justify-self: start; font-size: 15px; }
  .player-controls .captions-control { grid-column: 4; grid-row: 3; min-width: 0; }
  .mobile-review-decision {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #08131d;
  }
  .mobile-review-decision > div:first-child { display: grid; gap: 3px; }
  .mobile-review-decision b { font-size: 17px; }
  .mobile-review-decision span { color: var(--muted); font-size: 14px; line-height: 1.35; }
  .mobile-review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mobile-review-actions .button { min-height: 48px; font-size: 17px; }
  .draw-toolbar,
  .draw-toolbar.tools-collapsed { width: 100% !important; min-width: 0 !important; padding: 8px; }
  .draw-toolbar.tools-collapsed { display: flex; }
  .draw-toolbar.tools-collapsed .collapse-tools { width: 100%; min-height: 44px; }
  .draw-toolbar:not(.tools-collapsed) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .draw-toolbar:not(.tools-collapsed) > * { min-width: 0; }
  .draw-toolbar:not(.tools-collapsed) .collapse-tools,
  .draw-toolbar:not(.tools-collapsed) .time-pill { grid-column: 1 / -1; }
  .review-navigation-bar { display: none; }
  .comments-panel { min-height: calc(100svh - 96px); max-height: none; }
  .mobile-comment-tabs { margin-top: 12px; }
  .composer { padding: 12px 0 0; }
  .composer textarea { min-height: 132px; }
  .mobile-workspace-dock {
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: 8px;
    display: block;
    padding: 7px;
    border-color: var(--line-bright);
    background: rgba(4, 12, 19, .97);
  }
  .mobile-workspace-dock .mobile-dock-legacy-action { display: none !important; }
  .mobile-workspace-dock .mobile-location-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .mobile-workspace-dock button { min-height: 52px; font-size: 16px; }
  body.local-assistant-open .mobile-workspace-dock { z-index: 540; }
  body.local-assistant-open #localAssistantModal { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
  body.local-assistant-open .local-assistant-card {
    max-height: calc(100dvh - 96px - env(safe-area-inset-bottom));
  }
  .selected-project-indicator { font-size: 10px; }
  .project-approval-status,
  .project-approve-all-button { min-height: 38px; padding-inline: 10px; font-size: 12px; }
  .project-admin-grid,
  .recovery-policy,
  .recovery-status-grid,
  .share-protection-grid,
  .request-shorts-grid { grid-template-columns: 1fr; }
  .project-admin-grid article { min-height: 0; }
  .request-shorts-wide { grid-column: auto; }
  .share-stepper { grid-template-columns: 1fr; }
  .share-step-tab { min-height: 48px; justify-content: flex-start; }
  .share-project-card,
  .project-admin-card,
  .recovery-card,
  .privacy-card,
  .request-shorts-card,
  .request-specific-short-card { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .privacy-section-head { align-items: stretch; flex-direction: column; }
  .privacy-identity { grid-template-columns: 1fr; }
  .share-dialog-actions .button { flex: 1 1 46%; min-height: 48px; }
}

@media (max-width: 430px) {
  .topbar .brand > span:last-child { display: none; }
  .topbar-actions #ownerTeamChatButton { width: 48px; padding-inline: 6px; }
  .session-logout-button { width: 44px; padding-inline: 5px !important; font-size: 0 !important; }
  .session-logout-button::after { content: "Exit"; font-size: 12px; }
  .workflow-tabs { grid-template-columns: repeat(4, 154px); }
  .shell { padding-inline: 16px; }
  .review-head h2 { font-size: 18px; }
  .client-identity small { max-width: 120px; }
}

/* V3.1 workspace cleanup: compact project cards, permanent drawing controls,
   a collapsible note editor, and a password-gated owner entry point. */
.owner-portal-trigger {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.owner-portal-trigger:hover .brand-mark,
.owner-portal-trigger:focus-visible .brand-mark {
  box-shadow: 0 0 0 3px rgba(99, 216, 255, .2), 0 0 26px rgba(18, 159, 232, .38);
}

.topbar {
  min-height: 54px;
  padding: 6px 12px;
  grid-template-columns: 150px minmax(420px, 1fr) auto;
  gap: 10px;
}

.shell {
  height: calc(100vh - 54px);
  gap: 14px;
  padding: 14px;
}

.brand-mark { width: 34px; height: 34px; font-size: 17px; }
.brand b { font-size: 15px; }
.brand small { font-size: 10px; }
.workflow-tab { min-height: 38px; padding: 6px 9px; font-size: 14px; }
.workflow-tab b { min-width: 24px; height: 24px; font-size: 12px; }
.topbar-actions .button.compact { min-height: 38px; padding: 6px 10px; font-size: 14px; }
.topbar .icon-button { width: 38px; height: 38px; }
.topbar .icon-button svg,
.team-tab-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.episode-group-head {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  padding: 9px 10px;
}

.episode-group-collapse { min-height: 0; }
.group-copy b { font-size: 16px; line-height: 1.15; }
.group-copy small { margin-top: 3px; font-size: 11px; line-height: 1.25; white-space: nowrap; }
.group-chevron { font-size: 18px; }
.episode-group-actions { width: auto; align-self: center; }
.episode-group-actions em { padding: 4px 7px; font-size: 10px; }

.editor-routing {
  position: relative;
  min-height: 0;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 10px;
}

.editor-routing > span:first-child { display: grid; gap: 5px; }
.editor-routing b { font-size: 11px; letter-spacing: .08em; }
.editor-routing small { max-width: none; margin: 0; font-size: 11px; line-height: 1.3; }
.shorts-routing-status { color: #c8a7ff !important; font-weight: 750; }

.editor-assignment-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.editor-assignment-summary span {
  padding: 3px 6px;
  border: 1px solid #203e53;
  border-radius: 999px;
  background: #0b1a25;
  color: #c5d7e5;
  font-size: 10px;
  font-weight: 750;
}

.editor-assignment-summary .active { border-color: rgba(66, 211, 146, .5); color: #8ce8c5; }
.editor-assignment-summary .paused { border-color: rgba(255, 175, 91, .45); color: #ffc078; }

.editor-routing-actions { position: relative; flex: 0 0 auto; }
.editor-routing-actions > summary {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-bright);
  border-radius: 9px;
  background: #0d1a25;
  color: var(--cyan);
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  list-style: none;
}
.editor-routing-actions > summary::-webkit-details-marker { display: none; }
.editor-routing-menu {
  position: absolute;
  z-index: 20;
  top: 42px;
  right: 0;
  width: 150px;
  display: grid;
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--line-bright);
  border-radius: 10px;
  background: #07121c;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .5);
}
.editor-routing-menu .route-action { width: 100%; min-height: 38px; font-size: 12px; }

.media-row { grid-template-columns: minmax(0, 1fr) 34px; }
.media-item { min-height: 0; padding: 9px; grid-template-columns: 40px minmax(0, 1fr); gap: 9px; }
.item-icon { width: 40px; height: 40px; font-size: 13px; }
.revision-count-badge { min-width: 22px; height: 22px; font-size: 11px; }
.item-copy b {
  display: -webkit-box;
  max-height: 2.5em;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.25;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.item-copy > span:not(.item-chips) { margin-top: 3px; font-size: 11px; white-space: nowrap; }
.item-chips { gap: 4px; margin-top: 5px; }
.version-badge,
.item-status,
.revision-work-badge,
.editor-route-badge,
.new-review-badge,
.downloaded-badge,
.work-state-badge { padding: 3px 6px; font-size: 10px; letter-spacing: 0; }
.revise-shortcut { min-width: 34px; min-height: 38px; font-size: 15px; }

.review-head { min-height: 52px; flex-basis: 52px; padding: 6px 10px; }
.review-head h2 { font-size: 17px; }
.review-head p { font-size: 12px; }
.review-head small { font-size: 11px; }
.head-actions .button,
.review-more-actions > summary { min-height: 38px; padding: 7px 10px; font-size: 14px; }

.player-controls {
  grid-template-columns: 46px 80px 62px 46px auto minmax(250px, 1fr) auto 68px 44px;
  grid-template-areas:
    "rewind play stop forward volume quick time captions fullscreen"
    "timeline timeline timeline timeline timeline timeline timeline timeline timeline";
  gap: 7px;
  padding: 8px 10px 10px;
}
#rewindButton { grid-area: rewind; }
#playPauseButton { grid-area: play; }
#stopButton { grid-area: stop; }
#forwardButton { grid-area: forward; }
.volume-control { grid-area: volume; }
.quick-review-tools { grid-area: quick; }
.player-time { grid-area: time; }
.captions-control { grid-area: captions; }
.fullscreen-control { grid-area: fullscreen; }
.player-controls .timeline-shell { grid-area: timeline; min-width: 0; min-height: 30px; }

.quick-review-tools {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.quick-review-tools .tool-button,
.quick-review-tools label,
.quick-review-tools select {
  min-height: 38px;
  flex: 0 0 auto;
  font-size: 12px;
}
.quick-review-tools .tool-button { padding: 6px 9px; }
.quick-review-tools label { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.quick-review-tools select { max-width: 90px; padding: 5px 7px; }
.quick-review-tools .timeline-zoom select { width: 58px; }
.quick-review-tools .color-tool { min-height: 38px; padding: 5px 7px; }
.quick-review-tools .color-tool input { width: 26px; height: 26px; }
.quick-review-tools .drawing-utility { min-width: 48px; }

.draw-toolbar { min-height: 48px; padding: 6px 10px; }
.draw-toolbar.tools-collapsed { min-height: 0; padding: 6px 10px; }
.draw-toolbar.tools-collapsed .collapse-tools { min-width: 112px; min-height: 36px; }
.draw-toolbar:not(.tools-collapsed) { flex-wrap: wrap; }
.draw-toolbar:not(.tools-collapsed) .collapse-tools { order: -2; }
.draw-toolbar:not(.tools-collapsed) .time-pill { order: -1; }

.review-navigation-bar {
  grid-template-columns: 42px minmax(180px, 420px) 42px;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
}
.review-navigation-bar > .panel-grip,
.review-navigation-bar #bottomApproveButton { display: none; }
.review-picker-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.review-video-picker select { width: 100%; min-height: 38px; font-size: 12px; }
.review-nav-button { min-width: 42px; min-height: 38px; padding: 5px; font-size: 18px; }

.comments-panel .section-head { gap: 8px; }
.comments-panel .section-head h2 { font-size: 19px; line-height: 1.1; }
.comments-panel .section-head small { font-size: 11px; }
.comments-head-actions { display: flex; align-items: center; gap: 6px; }
.notes-composer-toggle {
  min-height: 36px;
  padding: 5px 8px;
  border: 1px solid var(--line-bright);
  border-radius: 9px;
  background: #0c1a26;
  color: var(--cyan);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.review-panel { container: review-workspace / inline-size; }
.comments-panel.composer-collapsed .composer { display: none; }
.comments-panel.composer-collapsed .comment-list { flex: 1 1 auto; margin-top: 8px; }
.comments-panel.composer-collapsed .mobile-comment-tabs { margin-bottom: 0; }
.note-action { width: 36px; min-width: 36px; min-height: 36px; padding: 0; font-size: 17px; }
.owner-login-card { width: min(430px, calc(100vw - 24px)); }

@media (max-width: 1280px) and (min-width: 851px) {
  .player-controls {
    grid-template-columns: 42px 72px 56px 42px auto minmax(210px, 1fr) auto 64px 42px;
  }
  .quick-review-tools label > span { display: none; }
  .quick-review-tools .drawing-utility { min-width: 42px; padding-inline: 6px; }
}

@media (max-width: 850px) {
  .topbar {
    min-height: 0;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 5px 8px;
  }
  .topbar-actions { gap: 5px; }
  .workflow-tabs {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
  }
  .workflow-tab { min-width: 0; min-height: 34px; padding: 4px 3px; gap: 3px; font-size: 9px; line-height: 1.05; }
  .workflow-tab b { min-width: 20px; height: 20px; padding-inline: 4px; font-size: 9px; }
  .shell { height: auto; padding: 10px 10px calc(92px + env(safe-area-inset-bottom)); }
  .review-head { min-height: 58px; padding: 6px 8px; }
  .review-head h2 { font-size: 16px; }
  .review-head p { font-size: 11px; }
  .review-more-actions > summary { min-width: 58px; min-height: 38px; font-size: 13px; }
  .player-controls {
    grid-template-columns: 42px minmax(68px, 1fr) minmax(54px, .8fr) 42px minmax(42px, .65fr);
    grid-template-areas:
      "rewind play stop forward volume"
      "timeline timeline timeline timeline timeline"
      "quick quick quick quick quick"
      "time time time captions fullscreen";
    gap: 5px;
    padding: 7px;
  }
  .player-controls .control-button { min-height: 40px; }
  .quick-review-tools {
    justify-content: flex-start;
    padding-top: 2px;
    overflow-x: auto;
  }
  .quick-review-tools .tool-button,
  .quick-review-tools label,
  .quick-review-tools select { min-height: 40px; font-size: 12px; }
  .quick-review-tools label > span { display: none; }
  .quick-review-tools .drawing-utility { min-width: 48px; }
  .player-controls .player-time { justify-self: start; font-size: 13px; }
  .player-controls .captions-control { min-width: 0; }
  .player-controls .fullscreen-control { display: inline-flex; width: 42px; min-width: 42px; }
  .draw-toolbar,
  .draw-toolbar.tools-collapsed { width: 100% !important; padding: 6px 8px; }
  .draw-toolbar.tools-collapsed { display: flex; }
  .draw-toolbar.tools-collapsed .collapse-tools { width: 100%; min-height: 40px; }
  .draw-toolbar:not(.tools-collapsed) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .draw-toolbar:not(.tools-collapsed) .collapse-tools,
  .draw-toolbar:not(.tools-collapsed) .time-pill { grid-column: 1 / -1; }
  .comments-panel { min-height: min(76svh, 680px); }
  .comments-panel.composer-collapsed { min-height: min(62svh, 560px); }
  .comments-panel.composer-collapsed .comment-list { min-height: 280px; }
  .notes-composer-toggle { min-height: 38px; font-size: 11px; }
  .editor-routing { flex-direction: row; }
  .editor-routing-menu { right: 0; }
}

@media (max-width: 430px) {
  .brand-mark { width: 38px; height: 38px; }
  .topbar-actions #projectAdminButton,
  .topbar-actions #ownerTeamChatButton,
  .topbar-actions #ownerAccessRequestsButton { width: 38px; min-width: 38px; padding: 0; font-size: 0; }
  .topbar-actions #projectAdminButton::after { content: none; }
  .topbar-actions #ownerTeamChatButton::after { content: none; }
  .topbar-actions #ownerAccessRequestsButton::after { content: none; }
  .owner-access-requests-badge { position: absolute; top: -6px; right: -6px; }
  .topbar .icon-button { width: 38px; height: 38px; }
  .client-identity span { display: none; }
  .workflow-tab { font-size: 8px; }
  .workflow-tab b { display: none; }
  .comments-panel .section-head h2 { font-size: 17px; }
  .comments-panel .section-head small { font-size: 9px; }
  .notes-composer-toggle { padding-inline: 6px; font-size: 10px; }
  .count { min-width: 30px; height: 30px; font-size: 13px; }
}

/* The full tool strip occupies the gap beside volume only when the player is
   actually wide enough. In the normal three-panel workspace it receives its
   own row, preventing controls from stacking on top of Play or the timecode. */
@container review-workspace (max-width: 1000px) {
  .player-controls {
    grid-template-columns: 42px minmax(68px, 1fr) minmax(54px, .8fr) 42px minmax(42px, .65fr);
    grid-template-areas:
      "rewind play stop forward volume"
      "timeline timeline timeline timeline timeline"
      "quick quick quick quick quick"
      "time time time captions fullscreen";
  }
  .player-controls .timeline-shell { grid-area: timeline; }
  .player-controls .quick-review-tools {
    grid-area: quick;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: visible;
  }
  .quick-review-tools > * { width: 100%; min-width: 0; }
  .quick-review-tools select { width: 100%; max-width: none; }
  .player-controls .player-time { grid-area: time; justify-self: start; }
  .player-controls .captions-control { grid-area: captions; }
  .player-controls .fullscreen-control { grid-area: fullscreen; }
}

@media (max-width: 600px) {
  .player-controls .quick-review-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Mobile fullscreen is a true edge-to-edge review surface. Its chrome can be
   reduced to one persistent icon, with Exit available as soon as it is opened. */
.immersive-mobile-actions { display: none; }

@media (max-width: 850px), (hover: none) and (pointer: coarse) {
  body.immersive-review-open {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    margin: 0;
    background: #000;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .shell.immersive-review {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    max-height: none;
    padding: 0;
    overflow: hidden;
  }

  .shell.immersive-review .review-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .shell.immersive-review .stage,
  .shell.immersive-review .stage.vertical {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
    border: 0;
    border-radius: 0;
    background: #000;
  }

  .shell.immersive-review .stage video {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
  }

  body.immersive-review-open .mobile-workspace-dock { display: none !important; }

  .shell.immersive-review .immersive-mobile-actions {
    position: fixed;
    z-index: 125;
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .immersive-icon-button {
    width: 46px;
    min-width: 46px;
    height: 46px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(89, 185, 242, .72);
    border-radius: 999px;
    background: rgba(4, 13, 21, .88);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    color: #77d2ff;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    backdrop-filter: blur(14px);
  }

  .immersive-exit-button { color: #fff; font-size: 30px; }

  .shell.immersive-review.immersive-controls-collapsed #immersiveControlsToggle {
    display: none;
  }

  .shell.immersive-review.immersive-controls-collapsed .immersive-exit-button {
    display: grid;
    width: 52px;
    min-width: 52px;
    height: 52px;
    border-color: rgba(255, 255, 255, .82);
    background: rgba(4, 13, 21, .92);
  }

  .shell.immersive-review.immersive-controls-collapsed .review-head,
  .shell.immersive-review.immersive-controls-collapsed .player-controls,
  .shell.immersive-review.immersive-controls-collapsed .draw-toolbar,
  .shell.immersive-review.immersive-controls-collapsed .review-navigation-bar,
  .shell.immersive-review.immersive-controls-collapsed .floating-note-button,
  .shell.immersive-review.immersive-controls-collapsed .comments-panel {
    display: none !important;
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  .shell.immersive-review,
  .shell.immersive-review .review-panel,
  .shell.immersive-review .stage,
  .shell.immersive-review .stage.vertical {
    width: 100vw !important;
    height: 100dvh !important;
  }
}

@media (max-width: 850px), (hover: none) and (pointer: coarse) {
  body.mobile-drawing-active {
    overscroll-behavior: none;
  }

  body.mobile-drawing-active .stage,
  body.mobile-drawing-active .stage canvas {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
  }

  body.mobile-composer-open:not(.immersive-review-open) {
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.mobile-composer-open:not(.immersive-review-open) .comments-panel {
    position: fixed;
    z-index: 140;
    inset: max(8px, env(safe-area-inset-top)) 8px calc(82px + env(safe-area-inset-bottom));
    width: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 14px;
    border-color: var(--line-bright);
    border-radius: 16px;
    background: rgba(5, 13, 21, .985);
    overflow: auto;
    overscroll-behavior: contain;
    box-shadow: 0 18px 56px rgba(0, 0, 0, .68);
  }

  body.mobile-composer-open:not(.immersive-review-open) .composer textarea {
    min-height: min(32dvh, 220px);
  }
}

/* Authorized mobile owner-card correction slice. */
.owner-brand-copy {
  min-width: 0;
  max-width: 100%;
}

.owner-brand-copy b,
.owner-brand-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-brand-copy b { display: block; }

.project-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.project-payment-button {
  width: 44px;
  min-width: 44px;
  padding-inline: 0;
  font-size: 20px;
  font-weight: 900;
}

.episode-group-head {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.episode-group-actions { width: 100%; }

@media (max-width: 850px) {
  .owner-portal-trigger {
    min-width: 0;
    max-width: calc(100vw - 150px);
  }

  .episode-group-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 8px;
  }

  .episode-group-actions > .work-state-badge,
  .episode-group-actions > .episode-review-badge { justify-self: start; }

  .episode-group-actions > .episode-review-badge { grid-column: 1; }

  .project-card-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    gap: 12px;
  }

  .episode-group-actions .project-payment-button,
  .episode-group-actions .project-share-button {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
  }
}

@media (max-width: 430px) {
  .topbar .brand > span.owner-brand-copy { display: block; }
  .owner-brand-copy b { font-size: 13px; }
  .owner-brand-copy small { font-size: 8px; }
}

/* Compact review workspace: grouped transport, inline video navigation, and a
   persistent chat control keep the desktop player inside one viewport. */
.floating-ai-button {
  position: fixed;
  z-index: 550;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 58px;
  height: 58px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(99, 216, 255, .82);
  border-radius: 999px;
  background: linear-gradient(145deg, #12334a, #07131e);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .52), 0 0 22px rgba(22, 169, 255, .2);
  color: #051019;
  cursor: pointer;
}

.floating-ai-glyph {
  position: relative;
  width: 29px;
  height: 23px;
  border-radius: 9px;
  background: var(--cyan);
  font-size: 0;
}

.floating-ai-glyph::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: -5px;
  border-width: 6px 0 0 7px;
  border-style: solid;
  border-color: transparent transparent transparent var(--cyan);
}

.floating-ai-bubble {
  position: absolute;
  margin-top: -4px;
  color: #07131e;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
}

.floating-ai-button:hover,
.floating-ai-button:focus-visible,
.floating-ai-button.active {
  border-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 15px 38px rgba(0, 0, 0, .58), 0 0 28px rgba(99, 216, 255, .32);
}

.floating-ai-button.active .floating-ai-glyph {
  width: 25px;
  height: 3px;
  border-radius: 3px;
  transform: rotate(45deg);
}

.floating-ai-button.active .floating-ai-glyph::after {
  right: 0;
  bottom: 0;
  width: 25px;
  height: 3px;
  border: 0;
  border-radius: 3px;
  background: var(--cyan);
  transform: rotate(90deg);
}

.floating-ai-button.active .floating-ai-bubble { display: none; }

.stage-fullscreen-button {
  position: absolute;
  z-index: 8;
  right: 12px;
  bottom: 12px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(99, 216, 255, .68);
  border-radius: 12px;
  background: rgba(5, 14, 23, .86);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .38);
  color: white;
  font-size: 23px;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.stage-fullscreen-button:disabled { display: none; }

.stage-caption-button {
  position: absolute;
  z-index: 8;
  right: 72px;
  bottom: 12px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(99, 216, 255, .68);
  border-radius: 12px;
  background: rgba(5, 14, 23, .86);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .38);
  color: white;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.stage-caption-button[aria-pressed="true"] {
  border-color: var(--cyan);
  background: rgba(22, 169, 255, .24);
  color: var(--cyan);
}

.stage-caption-button:disabled { cursor: wait; opacity: .7; }
.stage-caption-button.hidden { display: none; }

.caption-overlay {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 72px;
  width: max-content;
  max-width: min(86%, 920px);
  padding: 7px 12px;
  border-radius: 7px;
  background: rgba(0, 0, 0, .82);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .5);
  color: #fff;
  font-size: clamp(15px, 2vw, 27px);
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
  white-space: pre-line;
  pointer-events: none;
  transform: translateX(-50%);
  text-wrap: balance;
}

.caption-overlay.hidden { display: none; }

.stage.vertical .caption-overlay {
  bottom: 68px;
  max-width: 88%;
  font-size: clamp(14px, 3.6vw, 21px);
}

.shell.immersive-review .caption-overlay,
.shell.desktop-fullscreen-layout .caption-overlay {
  bottom: max(84px, calc(env(safe-area-inset-bottom) + 72px));
  max-width: min(88%, 1000px);
}

.stage-seek-feedback {
  position: absolute;
  z-index: 9;
  top: 50%;
  min-width: 78px;
  min-height: 78px;
  padding: 12px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(119, 210, 255, .7);
  border-radius: 999px;
  background: rgba(3, 11, 18, .82);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(.82);
  transition: opacity 100ms ease, transform 100ms ease;
  backdrop-filter: blur(10px);
}

.stage-seek-feedback.left { left: 8%; }
.stage-seek-feedback.right { right: 8%; }
.stage-seek-feedback.visible { opacity: 1; transform: translateY(-50%) scale(1); }
.stage-seek-feedback.holding { min-width: 112px; border-radius: 18px; font-size: 14px; }
.stage { touch-action: manipulation; -webkit-touch-callout: none; }

.transport-controls {
  grid-area: transport;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.transport-controls .player-time { margin-left: 3px; }

.inline-review-navigation {
  flex: 1 1 260px;
  width: auto;
  min-width: 250px;
  max-width: 620px;
  display: grid;
  grid-template-columns: 36px minmax(140px, 1fr) 36px;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
}

.inline-review-navigation #bottomApproveButton { display: none; }
.inline-review-navigation .review-nav-button { min-width: 36px; width: 36px; }
.draw-toolbar > .time-pill,
.draw-toolbar > .tool-divider { display: none; }

.desktop-note-visibility {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(4, 12, 20, .75);
}

.desktop-note-visibility button {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 850;
  cursor: pointer;
}

.desktop-note-visibility button.active {
  border-color: rgba(99, 216, 255, .7);
  background: rgba(22, 169, 255, .16);
  color: white;
}

@media (min-width: 851px) {
  .review-panel { overflow: hidden; }

  .stage:not(.vertical) {
    flex: 1 1 0;
    min-height: 220px;
    aspect-ratio: auto;
  }

  .player-controls {
    grid-template-columns: max-content minmax(280px, 1fr) max-content;
    grid-template-areas:
      "transport quick captions"
      "timeline timeline timeline";
    gap: 7px 10px;
    padding: 8px 10px 9px;
  }

  .player-controls .quick-review-tools { grid-area: quick; }
  .player-controls .captions-control { grid-area: captions; }
  .player-controls .timeline-shell { grid-area: timeline; }
  .draw-toolbar { min-height: 52px; padding: 6px 10px; overflow: hidden; }
  .draw-toolbar .shortcut-help { display: none; }
}

@container review-workspace (max-width: 1000px) {
  .player-controls {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas:
      "transport captions"
      "quick quick"
      "timeline timeline";
  }
  .player-controls .quick-review-tools { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
  .desktop-note-visibility {
    position: sticky;
    top: 0;
    z-index: 2;
    grid-template-columns: 1fr 1fr;
  }

  .desktop-note-visibility button { min-height: 44px; }
  .floating-ai-button {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(82px + env(safe-area-inset-bottom));
    width: 54px;
    height: 54px;
  }

  body.local-assistant-open .floating-ai-button { bottom: calc(18px + env(safe-area-inset-bottom)); }
  .mobile-workspace-dock .mobile-location-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .player-controls {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas:
      "transport captions"
      "timeline timeline"
      "quick quick";
  }

  .transport-controls {
    display: grid;
    grid-template-columns: 42px minmax(68px, 1fr) minmax(54px, .8fr) 42px;
    gap: 5px;
  }

  .transport-controls .volume-control { display: none; }
  .transport-controls .player-time { grid-column: 1 / -1; justify-self: start; margin: 0; }
  .draw-toolbar { flex-wrap: wrap; overflow: hidden; }
  .draw-toolbar .inline-review-navigation {
    flex: 1 0 100%;
    width: 100%;
    max-width: none;
    min-width: 0;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
  }
  .shell.immersive-review .stage-fullscreen-button { display: none; }
}

/* Batch notes keep repeated shorts feedback one-step, reviewable, and linked. */
.project-batch-note-button {
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid rgba(99, 216, 255, .58);
  border-radius: 999px;
  background: #0c273a;
  color: var(--cyan);
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
}

.project-batch-note-button:hover,
.project-batch-note-button:focus-visible {
  border-color: var(--cyan);
  background: #12364e;
  color: #fff;
}

.batch-note-attention {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #f59e0b;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-submit-revisions-button {
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid rgba(167, 139, 250, .72);
  border-radius: 999px;
  background: #241b43;
  color: #c4b5fd;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
}

.project-submit-revisions-button:hover,
.project-submit-revisions-button:focus-visible {
  border-color: #c4b5fd;
  background: #33245f;
  color: #fff;
}

.batch-note-card { width: min(760px, calc(100vw - 24px)); }

.batch-note-visibility {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #050d14;
}

.batch-note-visibility button {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
}

.batch-note-visibility button.active {
  border-color: var(--line-bright);
  background: #0d253d;
  color: #fff;
}

.batch-note-selection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 8px;
}

.batch-note-selection-head .check-field {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
}

.batch-note-selection-head input,
.batch-note-target input { width: 20px; height: 20px; accent-color: var(--cyan); }
#batchNoteSelectedCount { color: var(--cyan); }

.batch-note-targets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 260px;
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #050d14;
}

.batch-note-target {
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid #173247;
  border-radius: 10px;
  background: #091722;
  cursor: pointer;
}

.batch-note-target:has(input:checked) {
  border-color: var(--cyan);
  background: #0c273a;
}

.batch-note-target span,
.batch-note-target b,
.batch-note-target small { min-width: 0; display: block; }
.batch-note-target b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.batch-note-target small { margin-top: 3px; color: var(--muted); font-size: 13px; }
.batch-note-copy { display: grid; gap: 7px; margin-top: 14px; }
.batch-note-copy textarea { resize: vertical; }
.batch-note-help { margin: 9px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }

.batch-note-tag {
  margin-left: auto;
  padding: 4px 7px;
  border: 1px solid rgba(167, 139, 250, .72);
  border-radius: 999px;
  background: rgba(76, 29, 149, .42);
  color: #d8b4fe;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.comment.batch-note {
  border-color: #7c5ac7;
  background: linear-gradient(125deg, rgba(76, 29, 149, .42), #0a1018 62%);
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .08);
}

.comment.batch-note[data-annotation-id] { border-left-color: #a78bfa; }

@media (max-width: 850px) {
  .project-batch-note-button { min-height: 40px; justify-self: start; }
  .batch-note-card {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    overflow: auto;
  }
  .batch-note-targets { grid-template-columns: 1fr; max-height: min(34dvh, 300px); }
  .batch-note-selection-head { align-items: flex-start; }
  #batchNoteSelectedCount { padding-top: 12px; white-space: nowrap; }
}

/* Desktop fullscreen is one stable review surface: compact title, attached
   notes drawer, and a single responsive dock with an always-reachable exit. */
.fullscreen-dock-action { display: none; }

.shell.desktop-fullscreen-layout .review-head {
  position: fixed !important;
  z-index: 116;
  top: 12px !important;
  right: 154px !important;
  bottom: auto !important;
  left: 12px !important;
  width: min(760px, calc(100vw - 178px)) !important;
  height: auto !important;
  max-width: none !important;
  min-height: 0;
  padding: 8px 11px;
  overflow: hidden;
  border: 1px solid rgba(75, 157, 211, .64);
  border-radius: 11px;
  background: rgba(3, 11, 18, .9);
  opacity: 1;
  transform: none !important;
  resize: none !important;
}

.shell.desktop-fullscreen-layout .review-head > div:first-child {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.shell.desktop-fullscreen-layout .review-head .mobile-videos-button,
.shell.desktop-fullscreen-layout .review-head p { display: none !important; }

.shell.desktop-fullscreen-layout .review-head small {
  flex: 0 0 auto;
  margin: 0;
  color: var(--cyan);
  font-size: 10px;
  letter-spacing: .09em;
  white-space: nowrap;
}

.shell.desktop-fullscreen-layout .review-head h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #f7fbff;
  font-size: 15px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell.desktop-fullscreen-layout .floating-note-button {
  position: fixed !important;
  z-index: 121;
  top: 12px !important;
  right: 12px !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  min-width: 116px;
  height: 42px !important;
  min-height: 42px;
  padding: 7px 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 11px;
  background: rgba(3, 11, 18, .94);
  opacity: 1;
  transform: none !important;
  resize: none !important;
}

.shell.desktop-fullscreen-layout .floating-note-button span { font-size: 16px; }
.shell.desktop-fullscreen-layout .floating-note-button b { font-size: 13px; }
.shell.desktop-fullscreen-layout .floating-note-button em { display: none; }

.shell.desktop-fullscreen-layout .comments-panel,
.shell.desktop-fullscreen-layout.comments-open .comments-panel {
  position: fixed !important;
  z-index: 120;
  top: 62px !important;
  right: 12px !important;
  bottom: 142px !important;
  left: auto !important;
  width: clamp(390px, 34vw, 540px) !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  border-color: rgba(75, 157, 211, .72);
  background: rgba(3, 11, 18, .96);
  opacity: 1;
  transform: none !important;
  transform-origin: top right;
  resize: none !important;
}

.shell.desktop-fullscreen-layout.comments-open .comments-panel {
  animation: fullscreen-notes-open 150ms ease-out both;
}

@keyframes fullscreen-notes-open {
  from { opacity: 0; transform: scale(.98) translateY(-5px); }
  to { opacity: 1; transform: none; }
}

.shell.desktop-fullscreen-layout .comments-panel > .section-head .panel-grip,
.shell.desktop-fullscreen-layout .player-controls > .panel-grip { display: none !important; }

.shell.desktop-fullscreen-layout .draw-toolbar,
.shell.desktop-fullscreen-layout .mobile-review-decision,
.shell.desktop-fullscreen-layout .client-delivery-panel { display: none !important; }

.shell.desktop-fullscreen-layout .compare-toolbar:not(.hidden) {
  position: fixed !important;
  z-index: 118;
  top: 62px !important;
  right: auto !important;
  bottom: auto !important;
  left: 12px !important;
  width: min(760px, calc(100vw - 178px));
  min-height: 42px;
  padding: 6px 8px;
  display: flex !important;
  gap: 6px;
  overflow: visible;
  border: 1px solid rgba(75, 157, 211, .64);
  border-radius: 11px;
  background: rgba(3, 11, 18, .94);
  box-shadow: 0 9px 24px rgba(0, 0, 0, .38);
}

.shell.desktop-fullscreen-layout .compare-toolbar .tool-button,
.shell.desktop-fullscreen-layout .compare-toolbar .compare-mode,
.shell.desktop-fullscreen-layout .compare-toolbar select {
  min-height: 32px;
}

.shell.desktop-fullscreen-layout .compare-toolbar .compare-help { display: none; }

.shell.desktop-fullscreen-layout .player-controls {
  position: fixed !important;
  z-index: 119;
  top: auto !important;
  right: 10px !important;
  bottom: 10px !important;
  left: 10px !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  padding: 8px 9px;
  display: grid !important;
  grid-template-columns: max-content minmax(330px, 1fr) minmax(280px, 1fr) max-content max-content max-content max-content;
  grid-template-areas:
    "transport quick nav time captions toggle exit"
    "timeline timeline timeline timeline timeline toggle exit";
  align-items: center;
  gap: 7px;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  border: 1px solid rgba(75, 157, 211, .72);
  border-radius: 12px;
  background: rgba(3, 11, 18, .94);
  opacity: 1;
  transform: none !important;
  resize: none !important;
}

.shell.desktop-fullscreen-layout .transport-controls { grid-area: transport; }
.shell.desktop-fullscreen-layout .quick-review-tools { grid-area: quick; min-width: 0; }
.shell.desktop-fullscreen-layout .review-navigation-bar {
  position: static !important;
  grid-area: nav;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  min-width: 0;
  max-width: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: 1;
  transform: none !important;
  resize: none !important;
}

.shell.desktop-fullscreen-layout .review-video-picker,
.shell.desktop-fullscreen-layout .review-video-picker select { min-width: 0; width: 100%; }
.shell.desktop-fullscreen-layout .review-picker-label { display: none; }
.shell.desktop-fullscreen-layout .player-time { grid-area: time; margin: 0; font-size: 13px; }
.shell.desktop-fullscreen-layout .captions-control { grid-area: captions; }
.shell.desktop-fullscreen-layout .timeline-shell { grid-area: timeline; width: 100%; min-width: 0; }

.shell.desktop-fullscreen-layout .fullscreen-dock-action {
  min-width: 48px;
  min-height: 42px;
  padding: 5px 8px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid rgba(89, 185, 242, .64);
  border-radius: 9px;
  background: #0c1a26;
  color: var(--cyan);
  cursor: pointer;
}

.shell.desktop-fullscreen-layout .fullscreen-dock-action span { font-size: 18px; line-height: .8; }
.shell.desktop-fullscreen-layout .fullscreen-dock-action b { font-size: 9px; }
.shell.desktop-fullscreen-layout .fullscreen-dock-toggle { grid-area: toggle; }
.shell.desktop-fullscreen-layout .fullscreen-dock-exit { grid-area: exit; color: #fff; }

.shell.desktop-fullscreen-layout.fullscreen-dock-collapsed .player-controls {
  right: 10px !important;
  left: auto !important;
  width: auto !important;
  padding: 6px;
  display: flex !important;
  gap: 6px;
  overflow: visible !important;
}

.shell.desktop-fullscreen-layout.fullscreen-dock-collapsed .player-controls > *:not(.fullscreen-dock-action) {
  display: none !important;
}

.shell.desktop-fullscreen-layout.fullscreen-dock-collapsed .fullscreen-dock-toggle,
.shell.desktop-fullscreen-layout.fullscreen-dock-collapsed .fullscreen-dock-exit {
  display: inline-flex !important;
}

.shell.desktop-fullscreen-layout.fullscreen-dock-collapsed .comments-panel { bottom: 76px !important; }

@media (min-width: 851px) and (max-width: 1500px) {
  .shell.desktop-fullscreen-layout .player-controls {
    grid-template-columns: minmax(430px, 1fr) minmax(280px, 1fr) max-content max-content max-content;
    grid-template-areas:
      "transport nav time toggle exit"
      "quick quick captions toggle exit"
      "timeline timeline timeline toggle exit";
  }
  .shell.desktop-fullscreen-layout .comments-panel { bottom: 184px !important; }
}

@media (min-width: 851px) and (max-width: 1120px) {
  .shell.desktop-fullscreen-layout .player-controls {
    grid-template-columns: minmax(0, 1fr) max-content max-content max-content;
    grid-template-areas:
      "transport time toggle exit"
      "nav nav toggle exit"
      "quick captions toggle exit"
      "timeline timeline toggle exit";
  }
  .shell.desktop-fullscreen-layout .comments-panel { bottom: 230px !important; }
}

@media (min-width: 851px) {
  .client-delivery-panel:not(.has-actions) {
    display: block;
    margin: 0 0 8px;
    padding: 7px 12px;
    border-radius: 10px;
  }

  .client-delivery-panel:not(.has-actions) > div:first-child {
    min-width: 0;
    display: grid;
    grid-template-columns: auto max-content minmax(0, 1fr);
    align-items: center;
    gap: 10px;
  }

  .client-delivery-panel:not(.has-actions) small,
  .client-delivery-panel:not(.has-actions) h3,
  .client-delivery-panel:not(.has-actions) p { margin: 0; }
  .client-delivery-panel:not(.has-actions) small { font-size: 10px; white-space: nowrap; }
  .client-delivery-panel:not(.has-actions) h3 { font-size: 14px; white-space: nowrap; }
  .client-delivery-panel:not(.has-actions) p {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .client-delivery-panel:not(.has-actions) .client-delivery-files,
  .client-delivery-panel:not(.has-actions) #clientPaymentSentButton { display: none !important; }
}

/* Range marking has been retired from the review surface. Existing saved
   range data remains readable, but new reviewing stays focused on exact notes. */
.legacy-range-control { display: none !important; }
.retired-stop-control { display: none !important; }

.player-time {
  margin-left: auto;
  justify-self: end;
  text-align: right;
}

.timecode-jump-trigger {
  min-height: 38px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
}

.timecode-jump-trigger:hover,
.timecode-jump-trigger:focus-visible {
  border-color: var(--line-bright);
  background: #0b1b28;
}

.timecode-jump-form {
  grid-area: time;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.timecode-jump-form label { color: var(--muted); font-size: 11px; font-weight: 800; }
.timecode-jump-form input {
  width: 94px;
  min-width: 0;
  height: 38px;
  padding: 5px 8px;
  border: 1px solid var(--cyan);
  border-radius: 8px;
  background: #050d14;
  color: #fff;
  font: 800 13px "Cascadia Mono", monospace;
  text-align: right;
}
.timecode-jump-form button {
  min-width: 42px;
  height: 38px;
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  background: #0c273a;
  color: var(--cyan);
  font-weight: 850;
  cursor: pointer;
}

.shell.desktop-fullscreen-layout .timecode-jump-form { grid-area: time; }

@media (min-width: 851px) {
  .player-controls:not(.fullscreen-dock-collapsed) {
    grid-template-columns: max-content minmax(280px, 1fr) max-content max-content;
    grid-template-areas:
      "transport quick captions time"
      "timeline timeline timeline timeline";
  }
  .player-controls .player-time { grid-area: time; }
}

@media (max-width: 850px) {
  .player-controls {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas:
      "transport transport"
      "timeline timeline"
      "quick quick"
      "captions time";
  }
  .transport-controls { grid-template-columns: 44px minmax(86px, 1fr) 44px; }
  .player-controls .player-time { grid-area: time; justify-self: end; margin-left: auto; }
  .timecode-jump-form { grid-area: time; }
  .timecode-jump-form label { display: none; }
}

.draw-toolbar,
body.reviewing-short .shell:not(.immersive-review) .draw-toolbar {
  min-height: 50px;
  justify-content: center;
  padding: 6px 12px;
  overflow: hidden;
}

.draw-toolbar .inline-review-navigation,
body.reviewing-short .shell:not(.immersive-review) .draw-toolbar .inline-review-navigation {
  flex: 0 1 860px;
  width: min(100%, 860px);
  max-width: 860px;
  margin: 0 auto;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
}

@media (min-width: 1181px) {
  body.reviewing-short .shell:not(.immersive-review) .stage.vertical {
    width: min(92%, calc((100dvh - 176px) * 9 / 16));
    height: calc(100dvh - 176px);
    max-height: calc(100dvh - 176px);
  }
}

@container review-workspace (max-width: 1000px) {
  @media (min-width: 851px) {
    .player-controls:not(.fullscreen-dock-collapsed) {
      grid-template-columns: minmax(0, 1fr) max-content;
      grid-template-areas:
        "transport time"
        "quick quick"
        "timeline timeline"
        "captions captions";
    }
    .player-controls .quick-review-tools {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      overflow: hidden;
    }
  }
}

@media (max-width: 850px) {
  .draw-toolbar,
  .draw-toolbar.tools-collapsed {
    min-height: 50px;
    display: flex;
    justify-content: center;
    padding: 5px 8px;
  }

  .draw-toolbar .inline-review-navigation {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  body.reviewing-short .shell:not(.immersive-review) .stage.vertical {
    width: min(100%, calc(82svh * 9 / 16));
    max-height: 82svh;
  }
}

/* Conversation-first assistant. Keep the workspace and its floating launcher
   out of the way while the dedicated chat surface is open. */
.local-assistant-card .local-assistant-form textarea {
  min-height: 40px;
  padding: 8px 14px;
}

.dialog-card.local-assistant-card { padding: 0; }

body.local-assistant-open .floating-ai-button { display: none; }

/* Keep the scrub timeline visually first. It remains full-width above playback,
   drawing, navigation, time, and fullscreen actions in every review layout. */
@media (min-width: 851px) {
  .player-controls:not(.fullscreen-dock-collapsed) {
    grid-template-areas:
      "timeline timeline timeline timeline"
      "transport quick captions time";
  }

  .shell.desktop-fullscreen-layout .player-controls {
    grid-template-areas:
      "timeline timeline timeline timeline timeline toggle exit"
      "transport quick nav time captions toggle exit";
  }
}

@media (min-width: 851px) and (max-width: 1500px) {
  .shell.desktop-fullscreen-layout .player-controls {
    grid-template-areas:
      "timeline timeline timeline toggle exit"
      "transport nav time toggle exit"
      "quick quick captions toggle exit";
  }
}

@media (min-width: 851px) and (max-width: 1120px) {
  .shell.desktop-fullscreen-layout .player-controls {
    grid-template-areas:
      "timeline timeline toggle exit"
      "transport time toggle exit"
      "nav nav toggle exit"
      "quick captions toggle exit";
  }
}

@container review-workspace (max-width: 1000px) {
  @media (min-width: 851px) {
    .player-controls:not(.fullscreen-dock-collapsed) {
      grid-template-areas:
        "timeline timeline"
        "transport time"
        "quick quick"
        "captions captions";
    }
  }
}

@media (max-width: 850px) {
  .player-controls {
    grid-template-areas:
      "timeline timeline"
      "transport transport"
      "quick quick"
      "captions time";
  }
}

@media (max-width: 850px) {
  .review-head .head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
  }
  .review-head .mobile-compare-button:not(.hidden) {
    min-height: 38px;
    display: inline-flex !important;
    align-items: center;
    padding: 6px 9px;
    font-size: 11px;
    white-space: nowrap;
  }

  body.local-assistant-open #localAssistantModal {
    z-index: 700;
    padding: 0;
  }

  body.local-assistant-open .local-assistant-card {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  body.local-assistant-open .mobile-workspace-dock {
    visibility: hidden;
    pointer-events: none;
  }
}

.kif-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid #657385;
  border-radius: 999px;
  background: rgba(101, 115, 133, .15);
  color: #cbd5e1;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .045em;
  line-height: 1.15;
  text-transform: uppercase;
  cursor: pointer;
}

.kif-tone-blue { border-color: #2f9fda; background: rgba(21, 111, 164, .24); color: #87d8ff; }
.kif-tone-orange-red { border-color: #e45d45; background: rgba(157, 52, 34, .24); color: #ff9e88; }
.kif-tone-purple { border-color: #8b5cf6; background: rgba(92, 55, 170, .24); color: #c4a7ff; }
.kif-tone-green { border-color: #2f9a68; background: rgba(29, 112, 80, .24); color: #78e3b9; }
.kif-tone-gray-amber { border-color: #b78a3e; background: rgba(128, 91, 28, .2); color: #f1ca7a; }
.kif-tone-yellow { border-color: #c59125; background: rgba(154, 108, 16, .22); color: #ffd36f; }
.kif-tone-red { border-color: #d34d5f; background: rgba(151, 38, 55, .25); color: #ff8fa1; }

.kif-report-card { width: min(760px, calc(100vw - 28px)); }
.kif-provider-policy { display: grid; gap: 8px; margin: 12px 0 18px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(8, 18, 30, .72); }
.kif-provider-policy label { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.kif-provider-policy select { min-height: 44px; width: 100%; }
.kif-provider-policy .dialog-copy { margin: 0; }
.kif-report-status { display: inline-flex; margin: 0 0 14px; padding: 7px 10px; border: 1px solid; border-radius: 999px; font-weight: 900; }
.kif-report-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0 0 16px; }
.kif-report-facts div { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(3, 10, 16, .55); }
.kif-report-facts dt { color: var(--cyan); font-size: 11px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.kif-report-facts dd { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--text); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.kif-report-content section { margin-top: 15px; }
.kif-report-content h3 { margin: 0 0 7px; font-size: 15px; }
.kif-report-content ul { margin: 0; padding-left: 20px; color: var(--muted); }
.kif-report-content li + li { margin-top: 5px; }

@media (max-width: 650px) {
  .kif-report-facts { grid-template-columns: 1fr; }
}

/* Keep mobile navigation labels optically centered while their live counts
   sit at the label's upper-right edge. */
.mobile-workspace-dock button { overflow: visible; }
.mobile-dock-label {
  position: relative;
  display: inline-block;
  line-height: 1.1;
}
.mobile-workspace-dock .mobile-dock-label > b {
  position: absolute;
  top: -12px;
  left: calc(100% + 2px);
  min-width: 18px;
  height: 18px;
  margin: 0;
  padding: 0 4px;
  font-size: 9px;
  line-height: 18px;
  pointer-events: none;
}
#mobileDockNotesCount {
  border: 1px solid #ff8aa2;
  background: #b4233f;
  color: #fff;
}
#mobileDockInternalCount {
  border: 1px solid #ffe08a;
  background: #f2b833;
  color: #171006;
}

.comments-head-counts {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.revision-note-count {
  border: 1px solid #ff8aa2;
  background: #b4233f;
  color: #fff;
}

.internal-note-count {
  border: 1px solid #ffe08a;
  background: #f2b833;
  color: #171006;
}

.composer-action-row { display: contents; }

/* Mobile keeps the exact current version and every authorized comparison
   control at the top of the player workspace. */
.mobile-review-compare-toolbar { display: none; }

@media (max-width: 850px) {
  .review-head .mobile-compare-button { display: none !important; }
  .review-panel > #compareToolbar { display: none !important; }

  .mobile-review-compare-toolbar:not(.hidden) {
    position: sticky;
    z-index: 46;
    top: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    margin: 0 6px 7px;
    padding: 7px;
    border: 1px solid var(--line-bright);
    border-radius: 11px;
    background: rgba(3, 12, 20, .97);
    box-shadow: 0 9px 24px rgba(0, 0, 0, .38);
  }

  .mobile-current-version,
  .mobile-compare-version-field {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .mobile-current-version span,
  .mobile-compare-version-field span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
  }

  .mobile-current-version strong {
    color: var(--cyan);
    font-size: 14px;
    line-height: 1.15;
  }

  .mobile-current-version { grid-template-columns: auto auto; align-items: baseline; gap: 5px; }
  .mobile-current-version span { font-size: 10px; }

  .mobile-current-version.final-video {
    display: flex;
    align-items: center;
  }

  .mobile-current-version.final-video strong {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(69, 223, 155, .72);
    border-radius: 999px;
    background: rgba(22, 128, 85, .22);
    color: #7ef0b5;
    font-size: 12px;
    letter-spacing: .05em;
  }

  .mobile-review-compare-toolbar.single-version .mobile-current-version {
    grid-column: 1 / -1;
  }

  .mobile-version-navigation {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 6px;
  }

  .mobile-version-navigation button,
  .mobile-version-navigation select {
    min-width: 0;
    min-height: 40px;
    border: 1px solid var(--line-bright);
    border-radius: 9px;
    background: #08131d;
    color: var(--cyan);
    font-size: 15px;
    font-weight: 850;
  }

  .mobile-version-navigation select {
    width: 100%;
    padding: 6px 28px 6px 9px;
    color: #fff;
  }

  .mobile-version-navigation button:disabled { opacity: .38; }
  .mobile-version-navigation .mobile-approve { display: none; }

  .draw-toolbar .inline-review-navigation,
  body.reviewing-short .shell:not(.immersive-review) .draw-toolbar .inline-review-navigation {
    display: none;
  }

  .mobile-compare-version-field select {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 4px 26px 4px 8px;
    border: 1px solid var(--line-bright);
    border-radius: 8px;
    background: #08131d;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
  }

  #mobileCompareTopButton {
    min-width: 84px;
    min-height: 34px;
    padding: 5px 8px;
    font-size: 14px;
    white-space: nowrap;
  }

  .mobile-compare-options:not(.hidden) {
    grid-column: 1 / -1;
    display: grid;
    gap: 7px;
  }

  .mobile-compare-options .compare-modes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .mobile-compare-options .compare-mode {
    min-width: 0;
    min-height: 34px;
    padding: 5px 3px;
    font-size: 12px;
  }

  .mobile-compare-options .wipe-control:not(.hidden) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    font-size: 12px;
  }

  .mobile-compare-options .wipe-control input { width: 100%; }

  /* Version navigation belongs to the review workspace, not the viewing
     surface. Keeping it out of mobile fullscreen prevents it from cropping
     the picture in landscape and covering the video in portrait. */
  .shell.immersive-review .mobile-review-compare-toolbar:not(.hidden),
  .shell:fullscreen .mobile-review-compare-toolbar:not(.hidden) {
    display: none !important;
  }
}

@media (min-width: 851px) {
  .comments-panel .composer {
    padding: 10px;
  }

  .comments-panel .desktop-note-visibility {
    gap: 5px;
    padding: 3px;
  }

  .comments-panel .desktop-note-visibility button {
    min-height: 38px;
    padding: 5px 8px;
  }

  .comments-panel .composer textarea {
    min-height: 96px;
    padding: 9px 10px;
    line-height: 1.35;
  }

  .comments-panel .composer-action-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    width: 100%;
  }

  .comments-panel .composer-action-row {
    display: flex;
    gap: 6px;
  }

  .comments-panel .composer-action-row .button {
    flex: 1 1 0;
    width: auto;
    min-height: 40px;
    padding: 7px 8px;
    font-size: 14px;
  }
}

@media (max-width: 850px) {
  .client-delivery-panel.has-actions { grid-template-columns: 1fr; align-items: stretch; }
  .client-delivery-actions,
  .client-delivery-files { min-width: 0; width: 100%; }
  .client-delivery-files { justify-content: stretch; }
  .client-delivery-files a { width: 100%; justify-content: center; }
  .client-raw-footage-actions { gap: 5px; }
  .client-raw-action { min-height: 36px; padding: 4px 7px; }
  .client-raw-action span { font-size: 0; }
  #clientRawDownloadAll span::after { content: "All Raw"; font-size: 10px; }
  #clientRawBrowse span::after { content: "Specific Raw"; font-size: 10px; }
  .client-raw-action small { display: none; }
}

/* Mobile fullscreen keeps one compact, predictable control dock. The normal
   review workspace (version picker, drawing strip, and assistant bubble) is
   intentionally excluded so it cannot obscure the picture or captions. */
@media (max-width: 850px), (hover: none) and (pointer: coarse) {
  body.immersive-review-open .floating-ai-button { display: none !important; }

  .shell.immersive-review .mobile-review-compare-toolbar,
  .shell.immersive-review .draw-toolbar,
  .shell.immersive-review .review-navigation-bar {
    display: none !important;
  }

  .shell.immersive-review .immersive-mobile-actions {
    top: auto !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    justify-content: flex-end;
  }

  .shell.immersive-review .immersive-mobile-actions .player-time {
    min-width: 0;
    min-height: 46px;
    margin: 0 auto 0 0;
    padding: 7px 10px;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(89, 185, 242, .72);
    border-radius: 12px;
    background: rgba(4, 13, 21, .9);
    color: #fff;
    font-size: 14px;
    opacity: 1;
    backdrop-filter: blur(14px);
  }

  .shell.immersive-review .immersive-mobile-actions .timecode-jump-form {
    position: absolute;
    right: 0;
    bottom: 56px;
    padding: 6px;
    border: 1px solid rgba(89, 185, 242, .72);
    border-radius: 10px;
    background: rgba(4, 13, 21, .96);
  }

  .shell.immersive-review:not(.immersive-controls-collapsed) .review-head {
    position: fixed !important;
    top: auto !important;
    right: 8px !important;
    bottom: calc(66px + env(safe-area-inset-bottom)) !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 1;
  }

  .shell.immersive-review:not(.immersive-controls-collapsed) .review-head > div:first-child {
    display: none !important;
  }

  .shell.immersive-review:not(.immersive-controls-collapsed) .review-head .head-actions {
    display: flex;
    gap: 6px;
  }

  .shell.immersive-review:not(.immersive-controls-collapsed) .head-actions #approveItemButton {
    min-height: 46px;
    display: inline-flex !important;
  }

  .shell.immersive-review:not(.immersive-controls-collapsed) .review-more-actions > summary {
    min-height: 46px;
  }

  .shell.immersive-review:not(.immersive-controls-collapsed) .player-controls {
    position: fixed !important;
    top: auto !important;
    right: 8px !important;
    bottom: calc(122px + env(safe-area-inset-bottom)) !important;
    left: 8px !important;
    width: auto !important;
    max-height: none !important;
    padding: 8px 10px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "timeline"
      "transport" !important;
    gap: 6px !important;
    overflow: hidden !important;
    resize: none !important;
    opacity: 1;
    background: rgba(4, 13, 21, .9);
  }

  .shell.immersive-review:not(.immersive-controls-collapsed) .player-controls > .panel-grip,
  .shell.immersive-review:not(.immersive-controls-collapsed) .player-controls > .quick-review-tools,
  .shell.immersive-review:not(.immersive-controls-collapsed) .player-controls > .fullscreen-dock-action {
    display: none !important;
  }

  .shell.immersive-review:not(.immersive-controls-collapsed) .player-controls .timeline-shell {
    grid-area: timeline !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 30px;
  }

  .shell.immersive-review:not(.immersive-controls-collapsed) .player-controls .transport-controls {
    grid-area: transport !important;
    width: min(100%, 230px);
    margin: 0 auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .shell.immersive-review:not(.immersive-controls-collapsed) .player-controls .transport-controls > * {
    grid-area: auto !important;
  }

  .shell.immersive-review:not(.immersive-controls-collapsed) .player-controls #rewindButton,
  .shell.immersive-review:not(.immersive-controls-collapsed) .player-controls #forwardButton {
    flex: 0 0 42px;
  }

  .shell.immersive-review:not(.immersive-controls-collapsed) .player-controls #playPauseButton {
    flex: 1 1 110px;
    max-width: 120px;
  }

  .shell.immersive-review:not(.immersive-controls-collapsed) .player-controls #stopButton,
  .shell.immersive-review:not(.immersive-controls-collapsed) .player-controls .volume-control {
    display: none !important;
  }

  .shell.immersive-review:not(.immersive-controls-collapsed) .player-controls .control-button {
    min-width: 0;
    min-height: 38px;
    padding: 5px 7px;
  }

  .shell.immersive-review .floating-note-button {
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: calc(68px + env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    height: 46px !important;
    min-height: 46px;
    padding: 7px 11px !important;
    display: inline-flex !important;
    resize: none !important;
  }

  .shell.immersive-review:not(.immersive-controls-collapsed) .stage-caption-button {
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    bottom: auto;
  }

  .shell.immersive-review:not(.immersive-controls-collapsed) .caption-overlay {
    bottom: min(52dvh, calc(222px + env(safe-area-inset-bottom)));
  }

  .shell.immersive-review .mobile-review-decision { display: none !important; }
}

.access-gateway-actions { display: grid; gap: 10px; }
.portal-choice {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 16px;
  text-align: left;
  color: var(--text);
  border: 1px solid var(--line-strong, #28516d);
  border-radius: 12px;
  background: #09131e;
}
.portal-choice:hover, .portal-choice:focus-visible { border-color: #6dc9ff; background: #102538; }
.portal-choice b { font-size: 18px; }
.portal-choice span { color: var(--muted); line-height: 1.4; }
.team-access-modal { padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
.team-access-card { width: min(980px, 100%); max-height: calc(100dvh - 24px); overflow: auto; }
.team-auth-form { display: grid; gap: 12px; max-width: 520px; margin: 0 auto; }
.team-password-field { margin-top: 0; }
.password-input-row { position: relative; }
.password-input-row input { min-width: 0; padding-right: 52px; }
.password-visibility-button { position: absolute; top: 50%; right: 7px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; color: var(--muted); border: 0; border-radius: 8px; background: transparent; cursor: pointer; transform: translateY(-50%); }
.password-visibility-button:hover, .password-visibility-button:focus-visible, .password-visibility-button[aria-pressed="true"] { color: var(--cyan); background: #102538; }
.password-eye-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.credential-space-warning { color: #ff7188; font-size: 1.15em; font-weight: 900; line-height: 1; }
.password-match-message { min-height: 22px; margin: -4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.password-match-message[data-state="error"] { color: #ff91a0; }
.password-match-message[data-state="success"] { color: #8ce8b2; }
.team-password-field input[aria-invalid="true"] { border-color: #ff7188; box-shadow: 0 0 0 1px rgba(255, 113, 136, 0.28); }
.team-portal { display: grid; gap: 14px; }
.team-identity-row, .team-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.team-identity-row h3, .team-tab-panel h3 { margin: 0; }
.team-view-field { display: flex; align-items: center; gap: 7px; margin-left: auto; color: var(--muted); }
.team-view-field select { min-width: 150px; }
.team-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.team-tabs button { min-height: 42px; padding: 8px 12px; white-space: nowrap; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; background: #08111b; }
.team-tabs button.active { color: #fff; border-color: #6dc9ff; background: #153047; }
.team-tabs .team-chat-tab { position: relative; min-width: 46px; display: inline-flex; align-items: center; justify-content: center; }
.team-chat-badge { min-width: 20px; height: 20px; margin-left: 4px; display: inline-grid; place-items: center; border-radius: 999px; background: #e94f64; color: #fff; font-size: 11px; }
.team-chat-layout { min-height: 520px; display: grid; grid-template-columns: minmax(190px, 260px) minmax(0, 1fr); gap: 12px; }
.team-chat-layout > aside, .team-chat-conversation { min-width: 0; display: grid; align-content: start; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #07111a; }
.team-chat-sidebar-head, .team-chat-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.team-chat-sidebar-head h3 { margin: 0; }
.team-chat-people { display: grid; gap: 6px; }
.team-chat-list-label { padding: 9px 7px 2px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.team-chat-person { width: 100%; min-height: 58px; padding: 7px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #fff; text-align: left; }
.team-chat-person:hover, .team-chat-person.active { border-color: var(--blue); background: #142d42; }
.team-chat-group i { color: #d9b4ff; background-color: #40245c; }
.team-chat-person i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background-color: #1b3a53; background-position: center; background-size: cover; font-style: normal; font-weight: 800; }
.team-chat-person span { min-width: 0; display: grid; }
.team-chat-person small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.team-chat-person strong { min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: #e94f64; font-size: 11px; }
.team-chat-conversation { grid-template-rows: auto minmax(260px, 1fr) auto auto; }
.team-chat-title-row { min-height: 42px; border-bottom: 1px solid var(--line); }
.team-chat-title { min-width: 0; display: flex; align-items: center; font-weight: 850; }
.team-chat-messages { min-height: 260px; max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 8px 2px; }
.team-chat-bubble { max-width: min(78%, 620px); padding: 9px 11px; border-radius: 16px; background: #142432; }
.team-chat-bubble.mine { align-self: flex-end; background: #1769a0; }
.team-chat-bubble.theirs { align-self: flex-start; }
.team-chat-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.team-chat-sender { display: block; margin-bottom: 3px; color: #aee8ff; font-size: 11px; }
.team-chat-bubble small { display: block; margin-top: 4px; color: rgba(255,255,255,.65); font-size: 10px; }
.team-chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: end; }
.team-chat-form textarea { min-height: 50px; resize: vertical; }
.team-group-chat-form { display: grid; gap: 13px; }
.team-group-chat-form > label { display: grid; gap: 6px; color: var(--muted); }
.team-group-chat-form input[type="text"], .team-group-chat-form > label input { min-height: 44px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 9px; background: #040a10; color: #fff; }
.team-group-chat-form fieldset { min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.team-group-chat-form legend { padding: 0 5px; color: var(--muted); }
.team-group-chat-members { max-height: 280px; overflow-y: auto; display: grid; gap: 6px; }
.team-group-chat-members label { min-width: 0; min-height: 48px; display: grid; grid-template-columns: auto 34px minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px; border-radius: 8px; background: #091722; }
.team-group-chat-members input { width: 19px; height: 19px; }
.team-group-chat-members i, .team-profile-dialog-body > i { display: grid; place-items: center; border-radius: 50%; background-color: #1b3a53; background-position: center; background-size: cover; color: #fff; font-style: normal; font-weight: 850; }
.team-group-chat-members i { width: 34px; height: 34px; }
.team-profile-dialog-body { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 18px; }
.team-profile-dialog-body > i { width: 88px; height: 88px; font-size: 28px; }
.team-profile-dialog-body p { margin: 5px 0; color: var(--muted); text-transform: capitalize; }
.team-profile-dialog-body a { color: var(--cyan); }
.team-tab-panel { display: grid; gap: 12px; }
.team-dashboard { align-content: start; }
.team-dashboard > div:first-child p, .team-dashboard-section p { margin: 4px 0 0; color: var(--muted); }
.team-dashboard-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.team-dashboard-metric { min-width: 0; padding: 12px; display: grid; gap: 3px; border: 1px solid var(--line); border-radius: 11px; background: linear-gradient(145deg, #0d1b28, #08121c); }
.team-dashboard-metric b { color: #fff; font-size: clamp(24px, 4vw, 34px); line-height: 1; }
.team-dashboard-metric span { color: var(--muted); font-size: 13px; }
.team-dashboard-metric.is-blue { border-color: rgba(88, 190, 250, .55); }
.team-dashboard-metric.is-green { border-color: rgba(78, 216, 144, .55); }
.team-dashboard-metric.is-yellow { border-color: rgba(232, 189, 85, .6); }
.team-dashboard-section { display: grid; gap: 9px; padding-top: 4px; }
.team-dashboard-section + .team-dashboard-section { padding-top: 14px; border-top: 1px solid var(--line); }
.team-dashboard-search { width: min(100%, 360px); min-height: 42px; padding: 8px 10px; color: var(--text); border: 1px solid var(--line-strong, #28516d); border-radius: 9px; background: #040a10; }
.team-dashboard-controls { width: min(100%, 720px); display: grid; grid-template-columns: minmax(220px, 1fr) minmax(170px, auto); gap: 8px; }
.team-dashboard-controls .team-dashboard-search { width: 100%; }
.team-dashboard-controls select { min-height: 42px; padding: 8px 30px 8px 10px; border: 1px solid var(--line-strong, #28516d); border-radius: 9px; background: #040a10; color: var(--text); }
.team-editor-workload { display: grid; gap: 9px; }
.team-editor-workload-card { display: grid; gap: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: #07111a; }
.team-editor-workload-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 0; border: 0; background: transparent; color: #fff; text-align: left; }
.team-editor-workload-head > div { display: flex; align-items: center; gap: 9px; }
.team-editor-workload-head i { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border: 1px solid var(--blue); border-radius: 50%; background-color: #153047; background-position: center; background-size: cover; color: #fff; font-style: normal; font-weight: 850; }
.team-editor-workload-head span { min-width: 0; display: grid; }
.team-editor-workload-head small, .team-dashboard-job small { color: var(--muted); }
.team-editor-workload-chevron { color: var(--cyan); font-size: 28px; line-height: 1; }
.team-editor-workload-card.collapsed .team-dashboard-jobs { display: none; }
.team-dashboard-jobs { display: grid; gap: 7px; }
.team-dashboard-job { min-width: 0; padding: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid hsl(var(--job-age-hue, 205) 72% 54% / .72); border-radius: 10px; background: linear-gradient(100deg, hsl(var(--job-age-hue, 205) 62% 24% / .22), #0a1621 42%); }

.coordinator-editor-group { display: grid; gap: 9px; padding: 10px; border: 1px solid rgba(107, 205, 255, .5); border-radius: 14px; background: rgba(5, 17, 27, .8); }
.coordinator-editor-group + .coordinator-editor-group { margin-top: 12px; }
.coordinator-editor-group-head { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 2px 3px 7px; }
.coordinator-editor-group-head i { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--cyan); border-radius: 50%; background: #17354b; color: #fff; font-style: normal; font-weight: 850; }
.coordinator-editor-group-head span { min-width: 0; display: grid; }
.coordinator-editor-group-head small { color: var(--cyan); font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.coordinator-editor-group-head b { color: #fff; font-size: 18px; }
.coordinator-editor-group-head strong { padding: 5px 9px; border-radius: 999px; background: #153047; color: #bfeaff; font-size: 12px; }
.coordinator-awaiting-folder { display: grid; gap: 10px; margin-bottom: 14px; padding: 11px; border: 1px solid rgba(216, 197, 255, .58); border-radius: 14px; background: rgba(36, 24, 58, .34); }
.coordinator-awaiting-folder-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 4px; color: #fff; cursor: pointer; list-style: none; }
.coordinator-awaiting-folder-head::-webkit-details-marker, .coordinator-editor-group-head::-webkit-details-marker { display: none; }
.coordinator-awaiting-folder-head > span { display: grid; }
.coordinator-awaiting-folder-head small { color: #d8c5ff; font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.coordinator-awaiting-folder-head b { font-size: 20px; }
.coordinator-awaiting-folder-head strong { padding: 5px 9px; border-radius: 999px; background: rgba(105, 75, 158, .28); color: #e7dcff; font-size: 12px; }
.coordinator-pending-editor { display: grid; gap: 9px; padding: 9px; border: 1px solid rgba(123, 209, 255, .34); border-radius: 12px; background: rgba(5, 17, 27, .72); }
.coordinator-pending-editor > .coordinator-editor-group-head { cursor: pointer; list-style: none; }
.coordinator-assignment-card { display: grid; gap: 7px; padding: 12px; border: 1px solid rgba(123, 209, 255, .48); border-radius: 11px; background: linear-gradient(105deg, rgba(22, 105, 160, .18), rgba(7, 17, 26, .96) 44%); }
.coordinator-assignment-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.coordinator-assignment-heading b { min-width: 0; color: #fff; overflow-wrap: anywhere; }
.coordinator-assignment-card > p { margin: 0; color: var(--muted); }
.coordinator-assignment-metadata { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 3px; }
.coordinator-assignment-metadata > span { display: grid; gap: 1px; }
.coordinator-assignment-metadata small, .team-assigned-by { color: var(--cyan); font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.coordinator-assignment-metadata strong { color: #fff; font-size: 13px; }
.coordinator-media-pool-controls { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 9px; margin-bottom: 12px; padding: 11px; border: 1px solid rgba(123, 209, 255, .35); border-radius: 12px; background: rgba(5, 17, 27, .78); }
.coordinator-media-pool-controls label { display: grid; gap: 5px; }
.coordinator-media-pool-controls label > span { color: var(--cyan); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.coordinator-media-pool-controls select { width: 100%; min-height: 42px; padding: 8px 30px 8px 10px; border: 1px solid var(--line-strong, #28516d); border-radius: 9px; background: #040a10; color: var(--text); }
.coordinator-media-pool { display: grid; gap: 9px; }
.coordinator-owner-folder { border: 1px solid #27445a; border-radius: 15px; background: rgba(7, 19, 29, .82); overflow: hidden; }
.coordinator-owner-folder > summary { cursor: pointer; list-style: none; padding: 13px; background: rgba(31, 74, 105, .32); }
.coordinator-owner-folder > summary::-webkit-details-marker { display: none; }
.coordinator-owner-folder > article { margin: 9px; }
.coordinator-media-pool-card { display: grid; gap: 10px; padding: 13px; border: 1px solid rgba(123, 209, 255, .44); border-radius: 12px; background: linear-gradient(105deg, rgba(20, 79, 118, .2), rgba(7, 17, 26, .96) 46%); }
.coordinator-media-pool-metadata { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 10px 16px; }
.coordinator-media-pool-metadata > span { display: grid; gap: 2px; min-width: 0; }
.coordinator-media-pool-metadata small { color: var(--cyan); font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.coordinator-media-pool-metadata strong { color: #fff; font-size: 14px; overflow-wrap: anywhere; }
.coordinator-new-footage { display: grid; gap: 10px; margin-bottom: 12px; padding: 11px; border: 1px solid rgba(255, 224, 138, .54); border-radius: 14px; background: rgba(65, 45, 9, .2); }
.coordinator-new-footage > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 4px; color: #fff; cursor: pointer; list-style: none; }
.coordinator-new-footage > summary::-webkit-details-marker { display: none; }
.coordinator-new-footage > summary > span { display: grid; }
.coordinator-new-footage > summary small { color: #ffe08a; font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.coordinator-new-footage > summary b { font-size: 20px; }
.coordinator-new-footage > summary strong { padding: 5px 9px; border-radius: 999px; background: rgba(137, 99, 18, .28); color: #ffe8a8; font-size: 12px; }
.coordinator-new-footage-list { display: grid; gap: 8px; }
.coordinator-new-footage-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, auto); align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(255, 224, 138, .38); border-radius: 11px; background: rgba(7, 17, 26, .92); }
.coordinator-new-footage-card p { margin: 4px 0 0; color: var(--muted); }
.coordinator-assignment-actions { display: grid; grid-template-columns: minmax(180px, 1fr) auto; align-items: center; gap: 7px; }
.coordinator-assignment-actions select { min-height: 42px; padding: 8px 30px 8px 10px; border: 1px solid var(--line-strong, #28516d); border-radius: 9px; background: #040a10; color: var(--text); }
.coordinator-assignment-actions small { grid-column: 1 / -1; min-height: 16px; color: #ff9aa8; }
body.assignment-media-pool-mode .shell { grid-template-columns: minmax(0, 1fr); }
body.assignment-media-pool-mode .review-panel,
body.assignment-media-pool-mode .comments-panel { display: none; }
body.assignment-media-pool-mode .library-panel { width: 100%; }
@media (max-width: 900px) {
  .coordinator-media-pool-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coordinator-media-pool-metadata { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coordinator-new-footage-card { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .coordinator-media-pool-controls, .coordinator-media-pool-metadata { grid-template-columns: 1fr; }
}
.team-dashboard-job-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.team-dashboard-job-heading b { min-width: 0; overflow-wrap: anywhere; }
.team-dashboard-job p { margin: 3px 0; color: var(--muted); }
.team-work-status { flex: 0 0 auto; padding: 3px 7px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 850; letter-spacing: .02em; text-transform: uppercase; }
.team-work-status-assigned { color: #7bd1ff; background: rgba(23, 105, 160, .2); }
.team-work-status-original { color: #d8c5ff; background: rgba(105, 75, 158, .2); }
.team-work-status-new { color: #ffe08a; background: rgba(137, 99, 18, .22); }
.team-work-status-coordinator { color: #ffbf7a; background: rgba(142, 70, 17, .22); }
.team-work-status-in-review { color: #8ce8b2; background: rgba(22, 105, 69, .2); }
.team-work-status-route-ready { color: #ffd978; background: rgba(115, 82, 18, .2); }
.team-dashboard-job-actions { min-width: max-content; }
.team-grid-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #071019; }
.team-grid-form label { display: grid; gap: 5px; color: var(--muted); }
.team-grid-form .team-field-heading { display: flex; min-height: 2.5rem; flex-direction: column; justify-content: flex-end; gap: 2px; }
.team-grid-form .team-field-heading .optional { display: block; }
.team-grid-form .team-role-description { min-height: 2.6em; line-height: 1.3; }
.team-grid-form .team-checkbox { display: flex; align-items: center; gap: 9px; }
.team-grid-form .team-checkbox input { width: 20px; min-height: 20px; }
.team-grid-form input, .team-grid-form select, .team-grid-form textarea, .team-view-field select { width: 100%; min-height: 42px; padding: 8px 10px; color: var(--text); border: 1px solid var(--line-strong, #28516d); border-radius: 9px; background: #040a10; }
.team-wide { grid-column: 1 / -1; }
.optional { color: var(--muted); font-size: 12px; font-weight: 400; }
.team-list { display: grid; gap: 8px; }
.team-list-card { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #0a1520; }
.team-list-card p { margin: 4px 0 0; color: var(--muted); }
.team-assignment-inbox { margin-bottom: 24px; }
.team-source-assignment-card { border-color: rgba(86, 186, 244, .5); background: rgba(9, 27, 40, .95); }
.team-source-assignment-actions { min-width: min(430px, 45vw); }
.team-source-assignment-actions select { min-height: 42px; padding: 8px 10px; color: var(--text); border: 1px solid var(--line-strong, #28516d); border-radius: 9px; background: #040a10; }
.team-action-status { min-height: 22px; margin: 0; color: #8ce8b2; font-size: 14px; }
.team-action-status[data-state="error"] { color: #ff91a0; }
.team-assigned-source-download { border-color: #8060b6; color: #d8c5ff; }
.team-list-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.team-download-all-disclosure { order: 1; min-width: 190px; color: var(--muted); }
.team-choose-files { order: 2; }
.team-download-all-disclosure > summary { min-height: 38px; padding: 7px 12px; display: flex; align-items: center; justify-content: center; border: 1px solid #856f3c; border-radius: 9px; background: rgba(92, 67, 19, .22); color: #e8c76f; cursor: pointer; font-weight: 800; list-style: none; }
.team-download-all-disclosure > summary::-webkit-details-marker { display: none; }
.team-download-all-disclosure > summary::before { content: "▸"; margin-right: 6px; }
.team-download-all-disclosure[open] > summary::before { transform: rotate(90deg); }
.team-download-all-disclosure > div { padding: 8px; display: grid; gap: 7px; border: 1px solid #856f3c; border-top: 0; border-radius: 0 0 9px 9px; background: #11130f; }
.team-download-all-disclosure > div p { max-width: 240px; margin: 0; font-size: 13px; }
.team-bulk-download { justify-content: center; border: 1px solid #b38a31; background: #6d4d12; color: #fff3c4; }
.team-project-disclosure { grid-column: 1 / -1; min-width: 0; }
.team-project-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style-position: outside; }
.team-project-disclosure > summary::after { content: "›"; color: var(--cyan); font-size: 28px; line-height: 1; transform: rotate(0); transition: transform 120ms ease; }
.team-project-disclosure[open] > summary::after { transform: rotate(90deg); }
.team-project-disclosure-body { display: grid; gap: 10px; padding-top: 10px; }
.team-agency-group { border: 1px solid #7658a4; border-radius: 12px; background: rgba(39, 25, 63, .34); overflow: hidden; }
.team-agency-group > summary { position: relative; padding: 13px 44px 13px 15px; display: grid; gap: 3px; cursor: pointer; list-style: none; }
.team-agency-group > summary::-webkit-details-marker { display: none; }
.team-agency-group > summary::after { position: absolute; top: 8px; right: 16px; content: "›"; color: #c6a5ff; font-size: 30px; line-height: 1; transition: transform 120ms ease; }
.team-agency-group[open] > summary::after { transform: rotate(90deg); }
.team-agency-group > summary small { color: #c6a5ff; }
.team-agency-clients { padding: 0 9px 9px; display: grid; gap: 8px; }
.team-agency-clients .team-assignment-card { border-color: rgba(152, 116, 207, .45); background: rgba(8, 17, 27, .88); }
.team-folder-overview { display: grid; gap: 6px; }
.team-folder-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 7px 8px 7px calc(8px + var(--folder-depth, 0) * 14px); border-top: 1px solid var(--line); }
.team-folder-row span { min-width: 0; overflow-wrap: anywhere; }
.team-folder-row small { color: var(--muted); white-space: nowrap; }
.access-request-card { border-left-width: 5px; }
.access-request-card.request-state-approved { border-color: #4ed890; background: rgba(22, 105, 69, .2); }
.access-request-card.request-state-approved p { color: #8af0b8; }
.access-request-card.request-state-denied { border-color: #f06372; background: rgba(123, 28, 43, .2); }
.access-request-card.request-state-denied p { color: #ff9eaa; }
.access-request-card.request-state-pending { border-color: #e8bd55; background: rgba(115, 82, 18, .2); }
.access-request-card.request-state-pending p { color: #ffd978; }
.team-work-controls { min-width: min(100%, 440px); display: grid; grid-template-columns: minmax(160px, 1fr) auto; gap: 7px; }
.team-work-controls input, .team-work-controls select { min-height: 42px; }
.team-profile-photo { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; }
.team-profile-photo > i { width: 72px; height: 72px; display: grid; place-items: center; border: 2px solid var(--blue); border-radius: 50%; background-color: #153047; background-size: cover; background-position: center; color: #fff; font-size: 24px; font-style: normal; font-weight: 850; }
.team-profile-photo label { display: grid; gap: 5px; }
.team-profile-photo small { color: var(--muted); }
.raw-footage-browser-card { width: min(920px, calc(100vw - 24px)); max-height: min(88vh, 900px); }
.raw-footage-browser { min-height: 160px; max-height: 58vh; overflow: auto; display: grid; gap: 7px; padding-right: 3px; }
.raw-footage-browser h3 { margin: 10px 0 2px; }
.raw-browser-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #08111b; }
.raw-browser-file.has-thumbnail { grid-template-columns: 144px minmax(0, 1fr) auto; }
.raw-file-thumbnail { position: relative; width: 144px; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #02060a; cursor: pointer; }
.raw-file-thumbnail img { width: 100%; height: 100%; display: block; object-fit: cover; }
.raw-file-thumbnail.thumbnail-unavailable img { opacity: 0; }
.raw-file-thumbnail.thumbnail-unavailable::after { content: "Preview unavailable"; padding: 24px 8px 8px; color: var(--muted); font-size: 11px; }
.raw-browser-row p { margin: 3px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.raw-file-copy { min-width: 0; }
.raw-file-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.raw-file-heading b { min-width: 0; overflow-wrap: anywhere; }
.raw-media-badge { position: absolute; z-index: 1; top: 6px; left: 6px; min-width: 25px; height: 20px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 999px; color: #fff; font-size: 10px; line-height: 1; font-weight: 900; letter-spacing: .03em; box-shadow: 0 1px 5px rgba(0, 0, 0, .55); }
.raw-quality-controls .raw-media-badge { position: static; box-shadow: none; }
.raw-quality-hq { background: #1769a0; border: 1px solid #63c8ff; }
.raw-quality-px { background: #66409b; border: 1px solid #c49aff; }
.raw-virtual-proxy-folder { border-color: #7650a7; background: rgba(102, 64, 155, 0.12); }
.raw-media-png { background: #a44c0b; border: 1px solid #ffad52; }
.raw-media-jpg, .raw-media-tif, .raw-media-tiff { background: #992d3a; border: 1px solid #ff7d8b; }
.raw-audio-thumbnail { color: #9dffc5; background: linear-gradient(145deg, #082219, #0e3c29); }
.raw-audio-thumbnail.raw-media-sound { color: #ffe087; background: linear-gradient(145deg, #2b2106, #56400a); }
.raw-audio-waveform { width: 70%; display: grid; place-items: center; }
.raw-audio-waveform svg { width: 100%; max-height: 54px; fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.raw-media-audio { background: #17683d; border: 1px solid #71e8a7; }
.raw-media-sound { background: #8a6814; border: 1px solid #ffd56c; }
.raw-quality-controls { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 9px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: #07111a; }
.raw-quality-controls label { min-width: min(100%, 240px); display: grid; gap: 4px; color: var(--muted); }
.raw-quality-controls select { min-height: 40px; padding: 7px 9px; color: var(--text); border: 1px solid var(--line-bright); border-radius: 9px; background: #040a10; }
.raw-quality-controls small { display: flex; align-items: center; gap: 5px; color: var(--muted); }
.raw-folder-navigator { position: sticky; z-index: 8; top: 0; margin-left: auto; width: fit-content; max-width: 100%; display: flex; align-items: center; gap: 6px; padding: 7px; border: 1px solid var(--line-bright); border-radius: 10px; background: rgba(3, 10, 16, .96); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.raw-folder-navigator select { min-width: min(310px, 42vw); min-height: 38px; padding: 6px 8px; color: var(--text); border: 1px solid var(--line-bright); border-radius: 8px; background: #040a10; }
.raw-browser-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.raw-folder-tree,
.raw-folder-contents { display: grid; gap: 7px; }
.raw-folder-node { border: 1px solid var(--line); border-radius: 10px; background: #08111b; overflow: hidden; }
.raw-folder-node > summary { position: relative; padding: 11px 12px 11px 36px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.raw-folder-node > summary::-webkit-details-marker { display: none; }
.raw-folder-node > summary::before { position: absolute; top: 14px; left: 14px; content: "▸"; color: var(--cyan); transition: transform 120ms ease; }
.raw-folder-node[open] > summary::before { transform: rotate(90deg); }
.raw-folder-node > summary span { min-width: 0; display: grid; gap: 3px; }
.raw-folder-node > summary b { overflow-wrap: anywhere; }
.raw-folder-node > summary small { color: var(--muted); }
.raw-folder-contents { padding: 0 10px 10px 24px; }
.raw-folder-contents > .raw-folder-node { background: rgba(12, 27, 40, .78); }
.raw-folder-download { justify-self: end; border: 1px solid #4f78a0; background: #17334a; color: #b9e5ff; text-decoration: none; }
.raw-main-folder { border-color: #8b7135; background: rgba(49, 37, 12, .24); }
.raw-main-folder-download { border-color: #c69a3d; background: #715015; color: #fff0ba; }
.raw-preview-card { width: min(980px, calc(100vw - 24px)); }
.raw-preview-card video, .raw-preview-card img { width: 100%; max-height: 70vh; object-fit: contain; background: #000; }
.raw-preview-card audio { width: 100%; margin-top: 14px; }
.raw-preview-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.sized-download-card { width: min(560px, calc(100vw - 24px)); }
.sized-download-form { display: grid; gap: 14px; }
.sized-download-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.sized-download-input b { color: var(--cyan); }
.sized-download-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.sized-download-presets button { min-height: 38px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; background: #0a1520; color: var(--muted); }
.sized-download-form p { margin: 0; color: var(--muted); }
.team-empty { padding: 18px; color: var(--muted); text-align: center; border: 1px dashed var(--line); border-radius: 11px; }
body.team-access-only .shell, body.team-access-only .topbar { visibility: hidden; }

@media (max-width: 700px) {
  .team-access-card { padding: 14px; }
  .team-identity-row, .team-section-head { align-items: stretch; flex-direction: column; }
  .team-view-field { width: 100%; margin: 0; }
  .team-grid-form { grid-template-columns: 1fr; }
  .team-wide { grid-column: auto; }
  .team-list-card { grid-template-columns: 1fr; }
  .team-source-assignment-actions { min-width: 0; }
  .raw-folder-navigator { width: 100%; }
  .raw-folder-navigator select { min-width: 0; flex: 1 1 100%; }
  .team-list-actions { justify-content: stretch; }
  .team-list-actions .button, .team-list-actions a { flex: 1 1 auto; }
  .team-download-all-disclosure { width: 100%; }
  .team-download-all-disclosure > div p { max-width: none; }
  .team-work-controls { width: 100%; grid-template-columns: 1fr; }
  .team-dashboard-summary { grid-template-columns: 1fr 1fr; }
  .team-dashboard-search { width: 100%; }
  .team-dashboard-controls { width: 100%; grid-template-columns: 1fr; }
  .team-dashboard-job { grid-template-columns: 1fr; }
  .team-dashboard-job-actions { min-width: 0; }
  .team-chat-layout { min-height: 0; grid-template-columns: 1fr; }
  .team-chat-people { display: flex; overflow-x: auto; }
  .team-chat-person { min-width: 190px; }
  .team-chat-messages { max-height: 48vh; }
  .team-chat-form { grid-template-columns: 1fr; }
  .team-profile-dialog-body { grid-template-columns: 64px minmax(0, 1fr); }
  .team-profile-dialog-body > i { width: 64px; height: 64px; font-size: 20px; }
  .raw-browser-row { grid-template-columns: 1fr; }
  .raw-browser-file.has-thumbnail { grid-template-columns: minmax(112px, 34vw) minmax(0, 1fr); }
  .raw-file-thumbnail { width: 100%; }
  .raw-browser-file.has-thumbnail .raw-browser-actions { grid-column: 1 / -1; }
  .raw-browser-row .button { width: 100%; justify-content: center; }
  .team-folder-row { grid-template-columns: minmax(0, 1fr) auto; }
  .team-folder-row .button { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .raw-browser-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .raw-folder-node > summary { grid-template-columns: 1fr; }
  .raw-folder-download { width: 100%; justify-content: center; justify-self: stretch; }
}

/* Shared feedback inbox: a compact top-bar entry and one focused working surface. */
.feedback-button {
  position: relative;
  flex: 0 0 auto;
}
.feedback-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feedback-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border: 2px solid var(--bg);
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}
.feedback-card {
  width: min(1120px, 100%);
  max-height: calc(100dvh - 24px);
  overflow: auto;
}
.feedback-modal { z-index: 720; }
.feedback-layout {
  min-height: 420px;
  display: grid;
  grid-template-columns: minmax(300px, .8fr) minmax(420px, 1.2fr);
  gap: 16px;
}
.feedback-form,
.feedback-inbox {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #071019;
}
.feedback-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.feedback-form .button { width: 100%; }
.feedback-context,
.feedback-rule,
.feedback-inbox-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.feedback-inbox-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
}
.feedback-inbox-head small { color: var(--cyan); font-weight: 800; letter-spacing: .08em; }
.feedback-inbox-head h3 { margin: 3px 0 0; font-size: 22px; }
.feedback-list {
  min-height: 180px;
  max-height: min(58dvh, 640px);
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 9px;
  padding-right: 3px;
}

.learning-history-card { width: min(1000px, 96vw); max-height: 92vh; overflow: auto; }
.learning-history-summary { color: var(--cyan); font-weight: 800; margin: 12px 0; }
.learning-history-list { display: grid; gap: 12px; }
.learning-history-item { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: var(--panel-2); display: grid; gap: 8px; }
.learning-history-head, .learning-history-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.learning-history-item p { margin: 0; white-space: pre-wrap; }
.learning-history-item small { color: var(--muted); }
.learning-history-actions { justify-content: flex-end; }
.feedback-item {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-bright);
  border-radius: 12px;
  background: #0b1722;
}
.feedback-item[data-impact="blocking"] { border-left-color: var(--danger); }
.feedback-item[data-state="ready_for_review"] { border-color: var(--orange); }
.feedback-item[data-state="done"] { border-left-color: var(--green); opacity: .82; }
.feedback-item-head,
.feedback-item-meta,
.feedback-plan-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.feedback-item-head { justify-content: space-between; }
.feedback-item-head b { font-size: 17px; line-height: 1.35; }
.feedback-chip {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--line-bright);
  border-radius: 999px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .035em;
}
.feedback-item p { margin: 0; white-space: pre-wrap; line-height: 1.45; }
.feedback-item-meta { color: var(--muted); font-size: 13px; }
.feedback-plan {
  display: grid;
  gap: 8px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}
.feedback-plan-row select,
.feedback-plan-row input {
  flex: 1 1 150px;
  min-width: 0;
  min-height: 40px;
  padding: 7px 9px;
  border: 1px solid var(--line-bright);
  border-radius: 9px;
  background: #040a10;
  color: var(--text);
}
.feedback-plan textarea {
  width: 100%;
  min-height: 66px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #040a10;
  color: var(--text);
  resize: vertical;
}
body.team-access-only .shell { visibility: hidden; }
body.team-access-only .topbar {
  visibility: visible;
  z-index: 540;
  grid-template-columns: auto 1fr auto;
}
body.team-access-only .workflow-tabs,
body.team-access-only .client-raw-footage-actions,
body.team-access-only .topbar-actions > :not(#feedbackButton):not(#sessionControls) { display: none !important; }
body.team-access-only .team-access-modal { padding-top: calc(76px + env(safe-area-inset-top)); }

/* An editor uses the same Review Board shell as the owner, but with four
   editor-specific destinations instead of a second navigation bar. */
body.team-access-only.editor-team-portal .workflow-tabs {
  display: grid !important;
}

body.team-access-only.editor-team-portal .topbar {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

body.editor-team-portal .team-tabs,
body.editor-team-portal .team-identity-row,
body.editor-team-portal #closeTeamAccessButton,
body.editor-team-portal .team-access-card > .dialog-head {
  display: none !important;
}

body.editor-team-portal .team-access-modal {
  align-items: stretch;
  padding-inline: 0;
  padding-bottom: 0;
}

body.editor-team-portal .team-access-card {
  width: min(1180px, 100%);
  max-height: calc(100dvh - 76px - env(safe-area-inset-top));
  margin-inline: auto;
  padding: 18px;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
}

.team-quick-upload {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid var(--line-bright);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(16, 51, 75, .76), rgba(7, 17, 27, .96));
}

.team-quick-upload .team-section-head { margin-bottom: 12px; }
.team-quick-upload h3 { font-size: 22px; }
.team-quick-upload p { margin: 3px 0 0; color: var(--muted); line-height: 1.45; }

.team-upload-progress {
  position: relative;
  min-height: 34px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #050c13;
}

.team-upload-progress i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, #087fb8, #35bcf4);
  transition: width 140ms ease;
}

.team-upload-progress span {
  position: relative;
  z-index: 1;
  min-height: 32px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 850;
}

.session-controls { min-width: 0; display: flex; align-items: center; gap: 7px; }
.session-identity { max-width: 210px; overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.session-logout-button { flex: 0 0 auto; }

@media (max-width: 850px) {
  .feedback-modal { padding: 8px; }
  .feedback-card { width: 100%; max-height: calc(100dvh - 16px); padding: 14px; }
  .feedback-layout { grid-template-columns: 1fr; }
  .feedback-list { max-height: none; }
  .feedback-field-row { grid-template-columns: 1fr; }
  body.team-access-only .team-access-modal { padding-top: calc(64px + env(safe-area-inset-top)); }
  body.editor-team-portal .team-access-card {
    max-height: calc(100dvh - 64px - env(safe-area-inset-top));
    padding: 12px;
    border-radius: 0;
  }
  body.editor-team-portal .workflow-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.editor-team-portal .workflow-tab { padding-inline: 4px; font-size: 10px; }
  .team-quick-upload { padding: 12px; }
  .session-identity { display: none; }
  .session-logout-button { min-height: 40px !important; padding-inline: 9px !important; }
}

/* Owner-wide client link ledger. */
.shared-links-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.shared-links-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shared-links-card {
  width: min(1180px, calc(100vw - 32px));
  max-height: min(900px, calc(100dvh - 32px));
}

.shared-links-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.shared-links-stat {
  appearance: none;
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 2px;
  min-height: 76px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #08131e;
}

.shared-links-stat:hover,
.shared-links-stat:focus-visible {
  background: #0d2131;
  border-color: var(--cyan);
  outline: none;
}

.shared-links-stat.selected {
  box-shadow: inset 0 0 0 2px rgba(84, 199, 255, .28);
  background: #10283a;
}

.shared-links-stat b { color: var(--text); font-size: 26px; line-height: 1; }
.shared-links-stat span { color: var(--muted); font-size: 14px; }
.shared-links-stat.active { border-color: #2c7098; }
.shared-links-stat.opened { border-color: #7f61bb; }
.shared-links-stat.delivered { border-color: #2f8a69; }

.shared-links-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(170px, 220px) 46px;
  align-items: end;
  gap: 10px;
}

.shared-links-search { margin: 0; }
.shared-links-filter { gap: 4px; }
.shared-links-filter select { width: 100%; }

.shared-links-list {
  min-height: 130px;
  max-height: min(54dvh, 560px);
  margin-top: 12px;
  padding-right: 4px;
  display: grid;
  gap: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.shared-links-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  padding: 22px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
}

.shared-link-group {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(4, 12, 19, .7);
  overflow: clip;
}

.shared-link-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  color: var(--text);
  list-style-position: inside;
}

.shared-link-group > summary:hover,
.shared-link-group > summary:focus-visible { background: rgba(30, 99, 139, .17); outline: none; }
.shared-link-group > summary b { font-size: 16px; overflow-wrap: anywhere; }
.shared-link-group > summary span { color: var(--muted); font-size: 13px; white-space: nowrap; }

.shared-link-group-body {
  display: grid;
  gap: 10px;
  padding: 0 10px 10px;
}

.shared-link-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(12, 39, 57, .78), rgba(6, 14, 22, .97) 68%);
}

.shared-link-card.inactive { border-left-color: #657385; opacity: .78; }
.shared-link-card.needs-attention { border-left-color: var(--danger); }

.shared-link-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.shared-link-head h3 { margin: 0; color: var(--text); font-size: 19px; line-height: 1.3; }
.shared-link-head small { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; }

.shared-link-status {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .04em;
}

.shared-link-status.active { border-color: #2f8a69; background: rgba(29, 112, 80, .2); color: #78e3b9; }

.shared-link-facts {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) repeat(2, minmax(135px, .8fr)) minmax(180px, 1.25fr) minmax(180px, 1.25fr);
  gap: 8px;
  margin: 13px 0 0;
}

.shared-link-facts > div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(37, 100, 138, .5);
  border-radius: 9px;
  background: rgba(3, 10, 16, .55);
}

.shared-link-facts dt {
  margin-bottom: 4px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.shared-link-facts dd { margin: 0; min-width: 0; }
.shared-link-facts dd b { display: block; overflow-wrap: anywhere; color: var(--text); font-size: 14px; line-height: 1.35; }
.shared-link-facts dd small { display: block; margin-top: 4px; overflow-wrap: anywhere; color: var(--muted); font-size: 12px; line-height: 1.35; }

.shared-link-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

@media (max-width: 1100px) {
  .shared-links-button span { display: none; }
  .shared-links-button { width: 44px; min-width: 44px; padding-inline: 10px !important; }
  .shared-link-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shared-link-facts > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 850px) {
  .shared-links-card { width: 100%; max-height: calc(100dvh - 16px); padding: 14px; }
  .shared-links-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shared-links-controls { grid-template-columns: minmax(0, 1fr) 46px; }
  .shared-links-filter { grid-column: 1 / -1; grid-row: 2; }
  .shared-links-list { max-height: none; }
  .shared-link-facts { grid-template-columns: 1fr; }
  .shared-link-facts > div:last-child { grid-column: auto; }
  .shared-link-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shared-link-actions .button { width: 100%; }
}

/* Compact Review Queue chrome leaves more room for the actual project list. */
.library-panel {
  container: review-library / inline-size;
}

.library-panel .section-head {
  gap: 8px;
}

.library-panel .section-head h1 {
  font-size: 23px;
  line-height: 1.08;
}

.library-panel .section-head small {
  font-size: 11px;
  letter-spacing: .1em;
}

.library-panel .library-head-actions {
  gap: 6px;
}

.library-panel .library-head-actions .button.compact,
.library-panel .library-head-actions .icon-button {
  min-height: 38px;
  height: 38px;
}

.library-panel .library-head-actions .button.compact {
  padding: 6px 10px;
  font-size: 14px;
}

.library-panel .library-head-actions #refreshButton {
  flex-basis: 38px;
  width: 38px;
  font-size: 19px;
}

.library-panel > .search {
  min-height: 42px;
  margin-block: 10px 8px;
  padding: 7px 10px;
}

.library-panel > .search input {
  min-width: 0;
  font-size: 16px;
}

.library-panel > .library-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 6px;
  margin-bottom: 8px;
}

.library-panel > .library-controls .project-sort {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  font-size: 11px;
  line-height: 1;
}

.library-panel > .library-controls .project-sort > span {
  padding-left: 3px;
}

.library-panel > .library-controls .project-sort select,
.library-panel > .library-controls .media-type-buttons {
  width: 100%;
  max-width: none;
  min-height: 38px;
}

.library-panel > .library-controls .project-sort select {
  padding: 6px 26px 6px 9px;
  border-radius: 10px;
  font-size: 14px;
}

.library-panel > .library-controls #kifStatusFilterField:not(.hidden) {
  grid-column: 1 / -1;
}

@container review-library (min-width: 420px) {
  .library-panel > .library-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .library-panel > .library-controls #kifStatusFilterField:not(.hidden) {
    grid-column: auto;
  }
}

/* Notes stay visible and one tap away: the active tab controls both the list and composer. */
.comments-panel > .note-workspace-head {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 7px;
}

.note-workspace-title {
  min-width: 0;
}

.comments-mode-switcher {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
  margin-top: 5px;
}

.comments-mode-switcher .note-mode-tab {
  position: relative;
  min-width: 0;
  min-height: 42px;
  padding: 7px 8px;
  border: 1px solid var(--line-bright);
  border-radius: 10px;
  background: #0c1a26;
  color: var(--cyan);
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.1;
}

.comments-mode-switcher .note-mode-tab.active {
  border-color: var(--cyan);
  background: linear-gradient(145deg, #12344d, #0d2538);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(85, 201, 255, .24);
}

.comments-mode-switcher .note-mode-tab.empty:not(.active) {
  opacity: .78;
}

.comments-mode-switcher .revision-notes-tab {
  border-color: var(--line-bright);
  background: #0b141d;
  color: var(--muted);
}

.comments-mode-switcher .revision-notes-tab.active {
  border-color: var(--cyan);
  background: linear-gradient(145deg, #12344d, #0d2538);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(85, 201, 255, .24);
}

.comments-mode-switcher .internal-notes-tab {
  border-color: var(--line-bright);
  background: #0b141d;
  color: var(--muted);
}

.comments-mode-switcher .internal-notes-tab.active {
  border-color: var(--cyan);
  background: linear-gradient(145deg, #12344d, #0d2538);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(85, 201, 255, .24);
}

.comments-mode-switcher .count {
  position: absolute;
  z-index: 2;
  top: -10px;
  right: 7px;
  min-width: 24px;
  height: 24px;
  padding-inline: 6px;
  font-size: 11px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .34);
}

.comments-mode-switcher .count.hidden {
  display: none !important;
}

.comments-panel .composer-submit-label {
  display: block;
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.comments-panel .composer-submit-actions .button {
  border-color: #743645;
}

.revision-submit-panel { flex: 0 0 auto; padding: 8px; }
.revision-submit-panel .composer-submit-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }

.comments-panel .composer {
  margin-top: 7px;
  padding: 8px;
}

.comments-panel .composer-meta {
  margin-bottom: 5px;
}

.comments-panel #pinnedIndicator {
  font-size: 12px;
}

.comments-panel .composer textarea {
  min-height: 68px;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.35;
}

.comments-panel .composer-actions {
  margin-top: 5px;
  gap: 5px;
  font-size: 11px;
}

.comments-panel .composer-action-buttons,
.comments-panel .composer-action-row {
  gap: 5px;
}

.comments-panel .composer-submit-label {
  margin-top: 0;
  font-size: 9px;
  line-height: 1;
}

.comments-panel .composer-action-row .button {
  min-height: 34px;
  padding: 5px 7px;
  font-size: 12px;
}

.comment.internal-note.kif-human-review-note {
  border-color: #8b5cf6;
  border-left: 4px solid #a87cff;
  background: linear-gradient(110deg, rgba(88, 49, 155, .34), #0a121a 58%);
  box-shadow: inset 0 0 0 1px rgba(168, 124, 255, .13);
}

.comment.internal-note.kif-human-review-note .comment-tag {
  color: #f2eaff;
  background: #6540aa;
}

.comment.internal-note.kif-passed-note {
  border-color: #359d70;
  border-left-color: #55d795;
  background: linear-gradient(110deg, rgba(21, 90, 62, .31), #0a121a 58%);
}

.kif-note-copy {
  padding-top: 5px;
}

.kif-note-result {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(28, 120, 82, .32);
  color: #8ff0bd;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
}

.kif-human-review-note .kif-note-result {
  background: rgba(139, 92, 246, .23);
  color: #ccb4ff;
}

.kif-note-points {
  display: grid;
  gap: 5px;
  margin: 7px 0 0 18px;
  padding: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
}

#kifStatusFilterField[data-kif-state="queued"] select {
  border-color: #c59125;
  background: rgba(154, 108, 16, .22);
  color: #ffd36f;
}

#kifStatusFilterField[data-kif-state="successor_pending"] select {
  border-color: #d34d5f;
  background: rgba(151, 38, 55, .25);
  color: #ff8fa1;
}

#kifStatusFilterField[data-kif-state="needs_human_review"] select {
  border-color: #8b5cf6;
  background: rgba(92, 55, 170, .24);
  color: #c4a7ff;
}

#kifStatusFilterField[data-kif-state="client_ready"] select {
  border-color: #2f9c68;
  background: rgba(24, 119, 73, .22);
  color: #8eebb9;
}

/* Native select popups inherit the closed control's selected-state tint on
   Windows. Keep every popup row high-contrast instead of washing the whole
   menu yellow, red, purple, or green. */
#kifStatusFilterField select option {
  background: #08131f;
  color: #f5f8fc;
}

body.client-mode .comments-mode-switcher,
body.coordinator-mode .comments-mode-switcher {
  grid-template-columns: 1fr;
}

.approved-items-drawer {
  margin: 8px 8px 4px;
  border: 1px solid rgba(70, 201, 139, .38);
  border-radius: 10px;
  background: rgba(20, 74, 54, .14);
}

.approved-items-drawer > summary {
  padding: 9px 11px;
  color: #72dfa7;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  list-style-position: inside;
}

.approved-items-list {
  border-top: 1px solid rgba(70, 201, 139, .22);
}

.approved-items-list .media-row {
  opacity: .82;
}

@media (max-width: 850px) {
  .comments-panel .mobile-comment-tabs { display: none !important; }
  .comments-mode-switcher { gap: 5px; }
  .comments-mode-switcher .note-mode-tab { min-height: 44px; padding-inline: 5px; font-size: 12px; }
}
#revisionRoundStatus { margin: 6px 0 10px; color: var(--muted, #a9b6c8); font-size: 0.88rem; line-height: 1.35; }
#revisionRoundStatus.blocked { color: #ffb6bf; border-left: 3px solid #f07183; padding-left: 9px; }
#teamInviteLinkBox { margin: 12px 0; padding: 12px; border: 1px solid var(--line, #294158); border-radius: 12px; }
#teamInviteLinkBox input { width: 100%; margin-bottom: 8px; }