/* =============================================================================
   Island — workspace design system
   -----------------------------------------------------------------------------
   One organised stylesheet, loaded last in every workspace. It replaces the
   earlier pile of appended patches, where rules from different attempts fought
   each other — which is what hid the sidebar labels and pushed the account
   footer above the navigation.

   Order of the sidebar is stated explicitly: navigation, then workspace tools,
   then the account row at the foot. Nothing relies on source order.

   Sections
     1. Tokens            2. Base and surfaces     3. Sidebar
     4. Collapsed state   5. Icon rail            6. Panels and menus
     7. Chat transcript   8. Composer             9. Conversation header
    10. Title bar
   ============================================================================= */

/* --- 1. Tokens --------------------------------------------------------------
   Light is the default; dark is opted into with data-island-theme="dark".
   The tokens the existing layouts already read are remapped here, so most of
   the application follows without further rules. */
:root,
html[data-island-theme="light"] {
  --cg-bg: #ffffff;
  --cg-panel: #f9f9f9;
  --cg-hover: #ececec;
  --cg-active: #e3e3e3;
  --cg-ink: #0d0d0d;
  --cg-muted: #5d5d5d;
  --cg-line: #e5e5e5;
  --cg-field: #ffffff;
  --cg-field-line: #d9d9d9;
  --cg-primary: #0d0d0d;
  --cg-on-primary: #ffffff;
}
html[data-island-theme="dark"] {
  --cg-bg: #212121;
  --cg-panel: #171717;
  --cg-hover: #212121;
  --cg-active: #2f2f2f;
  --cg-ink: #ececec;
  --cg-muted: #9b9b9b;
  --cg-line: #2f2f2f;
  --cg-field: #303030;
  --cg-field-line: #424242;
  --cg-primary: #ffffff;
  --cg-on-primary: #0d0d0d;
}
:root,
html[data-island-theme] {
  --bg: var(--cg-bg);
  --panel: var(--cg-panel);
  --card: var(--cg-bg);
  --line: var(--cg-line);
  --border: var(--cg-line);
  --ink: var(--cg-ink);
  --text: var(--cg-ink);
  --muted: var(--cg-muted);
  --meta: var(--cg-muted);
  --meta-2: var(--cg-muted);
  --accent: var(--cg-primary);
  --island-surface: var(--cg-bg);
  --island-text: var(--cg-ink);
  --island-border: var(--cg-line);
}

/* --- 2. Base and surfaces --------------------------------------------------- */
html[data-island-theme] body {
  background: var(--cg-bg);
  color: var(--cg-ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html[data-island-theme] body :is(.app, #app, main, #main, .main, #adminApp, #hrApp, #bdApp, #financeApp) {
  background: var(--cg-bg) !important;
}
html[data-island-theme] :is(.glass, .card, .panel, article.card) {
  background: var(--cg-bg) !important;
  border: 1px solid var(--cg-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html[data-island-theme] :is(.glass, .card)::before,
html[data-island-theme] :is(.glass, .card)::after {display: none !important}
/* The transcript sits on the page: cards never wrap the chat. */
html[data-island-theme] body :is(.chat, .chat-shell, .chat-body, .chat-wrap, [id$="ChatWindow"], #messages, #chat) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html[data-island-theme] body :is(.btn, button.btn) {
  border: 1px solid var(--cg-field-line) !important;
  border-radius: 10px !important;
  background: var(--cg-bg) !important;
  color: var(--cg-ink) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}
html[data-island-theme] body :is(.btn, button.btn):hover {background: var(--cg-hover) !important}
html[data-island-theme] body :is(.btn.red, .btn.primary, button.btn.red) {
  background: var(--cg-primary) !important;
  border-color: var(--cg-primary) !important;
  color: var(--cg-on-primary) !important;
}
html[data-island-theme] body :is(.btn.ghost) {background: transparent !important}
html[data-island-theme] body :is(input, textarea, select) {
  border: 1px solid var(--cg-field-line) !important;
  border-radius: 10px !important;
  background: var(--cg-field) !important;
  color: var(--cg-ink) !important;
  box-shadow: none !important;
}
html[data-island-theme] body :is(.pill, .chip, .tag) {
  border: 1px solid var(--cg-line) !important;
  border-radius: 999px !important;
  background: var(--cg-panel) !important;
  color: var(--cg-muted) !important;
  font-weight: 500 !important;
}

/* --- 3. Sidebar -------------------------------------------------------------
   Labels are always visible at full width. Only the explicit collapsed state
   narrows the column. Every child has a stated order, so the account row can
   never sort above the navigation. */
html[data-island-theme] body :is(#sidebar, .sidebar, .side, aside.side) {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 248px !important;
  width: 248px !important;
  min-width: 248px !important;
  max-width: 248px !important;
  padding: 0 !important;
  background: var(--cg-panel) !important;
  border-inline-end: 1px solid var(--cg-line) !important;
  font-size: 13px !important;
}
html[data-island-theme] body :is(#sidebar, .sidebar, .side, aside.side) > nav {
  order: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  border: 0 !important;
}
html[data-island-theme] body :is(#sidebar, .sidebar, .side, aside.side) > :is(.island-utility-drawer, .side-links, #island-utility-drawer) {
  order: 2;
  padding-block: 8px 4px;
  border-top: 1px solid var(--cg-line);
  border-bottom: 0 !important;
}
html[data-island-theme] body :is(#sidebar, .sidebar, .side, aside.side) > :is(.nav-footer, footer, .side-foot) {
  order: 3;
  margin-block-start: auto;
  padding-block: 10px 12px;
  border-top: 1px solid var(--cg-line);
}
html[data-island-theme] body :is(#sidebar, .sidebar, .side, aside.side) :is(.nav, .nav-btn, nav button, nav a) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  min-height: 32px !important;
  padding: 6px 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--cg-ink) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html[data-island-theme] body :is(#sidebar, .sidebar, .side, aside.side) :is(.nav, .nav-btn, nav button, nav a):hover {
  background: var(--cg-hover) !important;
}
html[data-island-theme] body :is(#sidebar, .sidebar, .side, aside.side) :is(.nav.active, .nav-btn.active, nav .active) {
  background: var(--cg-active) !important;
  color: var(--cg-ink) !important;
  font-weight: 600 !important;
}
html[data-island-theme] body :is(#sidebar, .sidebar, .side, aside.side) :is(.nav-title, .nav-group > summary) {
  padding: 12px 10px 4px !important;
  border: 0 !important;
  color: var(--cg-muted) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}
html[data-island-theme] body :is(#sidebar, .sidebar, .side, aside.side) :is(.icon3d, .nav-icon, .icon) {
  flex: none;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
html[data-island-theme] body :is(#sidebar, .sidebar, .side, aside.side) .island-utility-drawer :is(button, a, summary) {
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--cg-ink) !important;
  font-size: 13px !important;
}
html[data-island-theme] body :is(#sidebar, .sidebar, .side, aside.side) .island-utility-drawer :is(button, a):hover,
html[data-island-theme] body :is(#sidebar, .sidebar, .side, aside.side) > .nav-footer :is(button, a):hover {
  background: var(--cg-hover) !important;
}
/* The secure console was a white pill in a dark sidebar. */
html[data-island-theme] #consoleDrawerBtn {
  border: 1px solid var(--cg-line) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--cg-ink) !important;
  box-shadow: none !important;
}
html[data-island-theme] #consoleDrawerBtn > span[aria-hidden] {
  border-radius: 6px !important;
  background: var(--cg-active) !important;
  color: var(--cg-ink) !important;
}
html[data-island-theme] #consoleDrawerBtn :is(b, small, span) {color: inherit !important}

/* --- 4. Collapsed state ----------------------------------------------------- */
html[data-island-theme] body.island-side-collapsed :is(#sidebar, .sidebar, .side, aside.side, [class*="sidebar"]) {
  flex: 0 0 56px !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  overflow-x: hidden !important;
  font-size: 0 !important;
}
html[data-island-theme] body.island-side-collapsed :is(#sidebar, .sidebar, .side, aside.side) :is(span, small, b, .nav-title, summary) {display: none !important}
html[data-island-theme] body.island-side-collapsed :is(#sidebar, .sidebar, .side, aside.side) :is(svg, .icon3d) {font-size: 16px !important}
html[data-island-theme] body.island-side-collapsed :is(#sidebar, .sidebar, .side, aside.side) :is(.nav, .nav-btn, nav button, nav a) {
  justify-content: center !important;
  padding: 8px 0 !important;
}
body.island-side-collapsed .island-side-head {justify-content: center !important; padding: 10px 0 !important}
body.island-side-collapsed .island-side-agent {display: none !important}

/* --- 5. Icon rail ----------------------------------------------------------- */
.island-rail {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 450;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 52px;
  padding: 10px 0 12px;
  background: var(--cg-panel);
  border-inline-end: 1px solid var(--cg-line);
}
body.island-rail-active {padding-inline-start: 52px !important}
body.island-rail-active #islandWorkspaceBar {inset-inline-start: 52px !important}
.island-rail-spacer {flex: 1 1 auto}
.island-rail-brand {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
}
.island-rail-brand img {display: none !important}
.island-rail-brand::after {
  content: 'PCG';
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: linear-gradient(135deg, #ee3626, #c42a1d);
  color: #fff;
  font-size: 8.5px;
  font-weight: 800;
}
.island-rail-brand i {
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--cg-panel);
  border-radius: 50%;
  background: #f59e0b;
}
.island-rail-btn,
.island-rail-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--cg-muted);
  cursor: pointer;
}
.island-rail-btn svg {width: 19px; height: 19px}
.island-rail-btn:hover, .island-rail-avatar:hover {background: var(--cg-hover); color: var(--cg-ink)}
.island-rail-avatar span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cg-active);
  color: var(--cg-ink);
  font-size: 10.5px;
  font-weight: 700;
}
.island-rail-btn:focus-visible, .island-rail-avatar:focus-visible,
.island-panel-close:focus-visible, .island-menu-value:focus-visible,
.island-side-collapse:focus-visible {outline: 2px solid var(--cg-primary); outline-offset: 2px}
/* Sidebar header: agent identity plus the collapse control. */
.island-side-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 10px 12px;
  border-bottom: 1px solid var(--cg-line);
}
.island-side-agent {display: flex; align-items: center; gap: 8px; min-width: 0; margin-inline-end: auto}
.island-side-agent i {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--cg-active);
  color: var(--cg-ink);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}
.island-side-agent span {color: var(--cg-ink); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.island-side-collapse {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--cg-muted);
  cursor: pointer;
}
.island-side-collapse:hover {background: var(--cg-hover); color: var(--cg-ink)}
/* New chat sits directly under the header. */
.island-new-chat {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  width: calc(100% - 16px);
  margin: 8px;
  padding: 9px 12px;
  border: 1px solid var(--cg-field-line);
  border-radius: 11px;
  background: transparent;
  color: var(--cg-ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.island-new-chat svg {width: 16px; height: 16px; flex: none}
.island-new-chat:hover {background: var(--cg-hover)}

/* --- 6. Panels and menus ---------------------------------------------------- */
.island-rail-flyout,
.island-rail-panel {
  position: fixed;
  inset-inline-start: 60px;
  z-index: 500;
  width: 260px;
  border: 1px solid var(--cg-line);
  border-radius: 14px;
  background: var(--cg-panel);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .4);
}
.island-rail-flyout {bottom: 12px; padding: 6px}
.island-rail-panel {
  inset-block: 76px auto;
  display: flex;
  flex-direction: column;
  width: min(340px, calc(100vw - 80px));
  max-height: min(60vh, 520px);
  overflow: hidden;
}
.island-rail-flyout[hidden], .island-rail-panel[hidden] {display: none !important}
.island-flyout-head {display: flex; align-items: center; gap: 9px; padding: 8px 8px 10px; border-bottom: 1px solid var(--cg-line)}
.island-flyout-body {display: flex; flex-direction: column; padding: 4px 2px 2px}
.island-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cg-active);
  color: var(--cg-ink);
  font-size: 10.5px;
  font-weight: 700;
}
.island-side-who {display: flex; flex-direction: column; min-width: 0; line-height: 1.25}
.island-side-who b {color: var(--cg-ink); font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.island-side-who small {color: var(--cg-muted); font-size: 11px}
.island-menu-title {
  padding: 8px 10px 4px;
  color: var(--cg-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.island-menu-row {display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 3px 10px}
.island-menu-label {flex: 1 1 auto; color: var(--cg-ink); font-size: 13px; text-align: start}
.island-menu-value {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--cg-muted);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  text-align: end;
}
.island-menu-value:hover {border-color: var(--cg-field-line); background: var(--cg-hover); color: var(--cg-ink)}
.island-menu-select {
  flex: 0 0 auto;
  width: auto !important;
  max-width: 130px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 2px 22px 2px 8px !important;
  font-size: 12.5px !important;
}
.island-menu-sub > summary {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 3px 10px;
  border-radius: 8px;
  color: var(--cg-ink);
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}
.island-menu-sub > summary::-webkit-details-marker {display: none}
.island-menu-sub > summary::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-inline-start: auto;
  border-inline-end: 1.6px solid var(--cg-muted);
  border-block-end: 1.6px solid var(--cg-muted);
  transform: rotate(-45deg);
}
.island-menu-sub[open] > summary::after {transform: rotate(45deg)}
.island-menu-sub > summary:hover {background: var(--cg-hover)}
.island-menu-sub .island-menu-row {padding-inline-start: 22px}
.island-panel-head {display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--cg-line)}
.island-panel-head b {flex: 1 1 auto; color: var(--cg-ink); font-size: 13px; font-weight: 600}
.island-panel-close {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--cg-muted);
  cursor: pointer;
}
.island-panel-close:hover {background: var(--cg-hover); color: var(--cg-ink)}
.island-panel-close svg {width: 14px; height: 14px}
.island-panel-body {display: flex; flex-direction: column; gap: 3px; padding: 8px; overflow-y: auto}
.island-panel-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--cg-ink);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.island-panel-item:hover {background: var(--cg-hover)}
.island-panel-item b {font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.island-panel-item small {color: var(--cg-muted); font-size: 11px}
.island-panel-empty {margin: 6px 8px; color: var(--cg-muted); font-size: 12.5px}

/* --- 7. Chat transcript ----------------------------------------------------- */
html[data-island-theme] body :is(.messages, #messages, #chat, .chat-log) {
  flex-direction: column;
  gap: 20px !important;
  padding: 24px clamp(16px, 6vw, 32px) 8px !important;
}
html[data-island-theme] body :is(.message, .msg, .bubble) {font-size: 15.5px !important; line-height: 1.72 !important}
html[data-island-theme] body :is(.message.assistant, .message.ai, .msg.assistant, .msg.ai, .bubble.assistant, .bubble.ai) {
  max-width: 768px !important;
  margin-inline: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--cg-ink) !important;
}
html[data-island-theme] body :is(.message.user, .msg.user, .bubble.user, .bubble.me) {
  max-width: min(70%, 620px) !important;
  margin-inline-start: auto !important;
  align-self: flex-end !important;
  padding: 12px 18px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: var(--cg-field) !important;
  color: var(--cg-ink) !important;
}
html[data-island-theme] body :is(pre, code) {border-radius: 8px !important; background: var(--cg-panel) !important}
html[data-island-theme] body .island-hero {display: block !important; width: 100% !important; max-width: none !important}
html[data-island-theme] body .island-hero-title {
  margin: 0 0 4px !important;
  color: var(--cg-ink) !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  letter-spacing: -.01em !important;
  line-height: 1.2 !important;
}
html[data-island-theme] body .island-starters {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: min(768px, calc(100% - 32px)) !important;
  margin: 22px auto 0 !important;
}
@media (max-width: 900px) {
  html[data-island-theme] body .island-starters {grid-template-columns: 1fr !important}
}
html[data-island-theme] body .island-starter {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 84px;
  padding: 12px 14px;
  border: 1px solid var(--cg-line);
  border-radius: 14px;
  background: var(--cg-panel);
  color: var(--cg-ink);
  font: inherit;
  font-size: 13px;
  text-align: start;
  cursor: pointer;
}
html[data-island-theme] body .island-starter:hover {background: var(--cg-hover)}
html[data-island-theme] body .island-starter b {color: var(--cg-ink) !important; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.35 !important}
html[data-island-theme] body .island-starter span {color: var(--cg-muted) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.45 !important}

/* --- 8. Composer ------------------------------------------------------------ */
html[data-island-theme] body :is(.composer, .chat-composer, .composer-shell) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: 768px !important;
  margin: 0 auto 14px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--cg-field-line) !important;
  border-radius: 26px !important;
  background: var(--cg-field) !important;
  box-shadow: none !important;
}
html[data-island-theme] body :is(.composer, .chat-composer, .composer-shell) :is(input, textarea) {
  flex: 1 1 auto !important;
  min-height: 24px !important;
  max-height: 160px !important;
  padding: 6px 8px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 15.5px !important;
  resize: none !important;
}
html[data-island-theme] body :is(.composer, .chat-composer) select {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 190px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 4px 24px 4px 9px !important;
  border: 1px solid var(--cg-field-line) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--cg-ink) !important;
  font-size: 12.5px !important;
}
.island-agent-picker {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 190px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 4px 24px 4px 9px !important;
  border: 1px solid var(--cg-field-line) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--cg-ink) !important;
  font-size: 12.5px !important;
}
body.island-agent-picker-added :is(#chatAgent, .chat-head > select) {display: none !important}
html[data-island-theme] body :is(.composer, .chat-composer) :is(.icon-btn, label.icon-btn) {
  border: 0 !important;
  background: transparent !important;
  color: var(--cg-muted) !important;
}
html[data-island-theme] body :is(#chatSend, #sendBtn, .composer .send, button[data-send]) {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--cg-primary) !important;
  color: var(--cg-on-primary) !important;
}
/* Apps live on the rail: their composer trigger and picker are hidden in every workspace. */
:is(body.island-hr, body.island-bd, body.island-finance, body.island-admin) :is(
  #financeApps, #bdApps, #hrApps, #adminApps, [data-open-apps], button[id$="Apps"]
) {display: none !important}
:is(body.island-hr, body.island-bd, body.island-finance, body.island-admin) :is(
  #financeAppPicker, #bdAppPicker, #hrAppPicker, [class*="app-picker"], [id*="AppPicker"]
) {display: none !important}

/* --- 9. Conversation header ------------------------------------------------- */
.island-agent-head {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 768px;
  margin: 0 auto 6px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--cg-line);
}
.island-agent-monogram {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--cg-active);
  color: var(--cg-ink);
  font-size: 11px;
  font-weight: 700;
}
.island-agent-titles {display: flex; flex-direction: column; margin-inline-end: auto; line-height: 1.25}
.island-agent-titles b {color: var(--cg-ink); font-size: 13.5px; font-weight: 600}
.island-agent-titles small {color: var(--cg-muted); font-size: 11.5px}
.island-agent-state, .island-agent-governed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--cg-line);
  border-radius: 999px;
  background: var(--cg-panel);
  color: var(--cg-muted);
  font-size: 11.5px;
}
.island-agent-state i {width: 6px; height: 6px; border-radius: 50%; background: #22c55e}
.island-agent-governed {border-style: dashed}

/* --- 10. Title bar ---------------------------------------------------------- */
#islandWorkspaceBar {
  background: var(--cg-bg) !important;
  border-bottom: 1px solid var(--cg-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
/* Settings belong to the account menu on the rail; this control is removed everywhere. */
#islandWorkspaceBar .island-workspace-settings {display: none !important}
#islandWorkspaceBar :is(.island-title-button, .island-window-controls button) {
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--cg-ink) !important;
}
#islandWorkspaceBar :is(.island-title-button, .island-window-controls button):hover {background: var(--cg-hover) !important}
/* Window controls exist only inside the installed app. */
body.island-browser .island-window-controls {display: none !important}
#islandWorkspaceBar.is-minimized .island-workspace-name::after {content: ' · minimized'; opacity: .62}
.island-workspace-ready:is([data-workspace-window="minimized"], [data-workspace-window="closed"]) > :not(#islandWorkspaceBar):not(#islandWorkspaceInactive) {
  display: none !important;
}

/* --- 11. Accessibility -------------------------------------------------------
   A visible focus ring for every control, and respect for the operating system's
   motion preference. These were the only rules worth keeping from the retired
   consistency layer. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--cg-primary);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  #nebula, #spotlight, .grain {display: none !important}
}
/* --- 12. Overflow guards ---------------------------------------------------- */
#nebula, #spotlight, .grain {overflow: hidden}
html, body {max-width: 100%}
/* --- 13. Tenant branding ----------------------------------------------------
   One accent token per brand; the hostname selects it (see island-brand.js).
   Palettes follow the group reference: Bluerays navy / windows / blue jay. */
:root {--cg-accent:#ee3626; --cg-accent-2:#c42a1d}
:root[data-brand="bluerays"] {--cg-accent:#476BA0; --cg-accent-2:#6787C0}
.island-rail-brand::after {background: linear-gradient(135deg, var(--cg-accent), var(--cg-accent-2)) !important}
html[data-island-theme] body :is(#chatSend, #sendBtn, .composer .send, button[data-send]) {
  background: var(--cg-accent) !important;
  color: #fff !important;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {outline-color: var(--cg-accent) !important}
.island-agent-state i {background: var(--cg-accent) !important}

/* --- 14. Composer send is icon-only everywhere ------------------------------
   BD and Admin render a labelled red button; it becomes the same circular icon
   as the other workspaces. */
html[data-island-theme] body :is(#chatSend, #sendBtn, .composer .send, button[data-send]) {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
html[data-island-theme] body :is(#chatSend, #sendBtn, .composer .send, button[data-send])::after {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 20l18-8L3 4l4 8-4 8z' fill='black'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 20l18-8L3 4l4 8-4 8z' fill='black'/></svg>") center / contain no-repeat;
}
html[data-island-theme] body :is(#chatSend, #sendBtn, .composer .send, button[data-send]) svg {display: none !important}

/* --- 15. Full-bleed content -------------------------------------------------
   No extra page padding or inset panels around the workspace body. */
html[data-island-theme] body :is(main, #main, .main) {padding: 0 !important}
html[data-island-theme] body :is(.container, .page, .content, .section-block) {padding-inline: 0 !important}
html[data-island-theme] body :is(.sec, .section) > .card:only-child {border: 0 !important; background: transparent !important}
/* --- 16. Settings extras ----------------------------------------------------
   Typography choice plus read-only branding and domain rows. */
:root[data-font="serif"] body,
:root[data-font="serif"] body :is(input, textarea, select, button) {
  font-family: Georgia, "Times New Roman", serif !important;
}
.island-menu-value.is-readonly {
  padding-inline: 0;
  color: var(--cg-muted);
  font-size: 12px;
  cursor: default;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.island-menu-value.is-readonly:hover {background: transparent; border-color: transparent}
/* --- 17. Right context rail -------------------------------------------------
   The third column: approvals, updates and department controls. The middle
   column is offset so nothing is hidden beneath it. */
.island-context {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 440;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 288px;
  padding: 14px 12px;
  overflow-y: auto;
  background: var(--cg-bg);
  border-inline-start: 1px solid var(--cg-line);
}
body.island-context-active {padding-inline-end: 288px !important}
@media (max-width: 1280px) {
  .island-context {display: none !important}
  body.island-context-active {padding-inline-end: 0 !important}
}
.island-context-card {
  padding: 12px;
  border: 1px solid var(--cg-line);
  border-radius: 14px;
  background: var(--cg-panel);
}
.island-context-card h2 {
  margin: 0 0 8px;
  color: var(--cg-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.island-context-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--cg-ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.island-context-row:hover {background: var(--cg-hover)}
.island-context-row b {font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.island-context-row small {color: var(--cg-muted); font-size: 11px}
.island-context-empty {margin: 2px 4px; color: var(--cg-muted); font-size: 12px}
/* --- 18. Account menu: segmented switches -------------------------------- */
.island-segment {
  display: inline-flex;
  flex: none;
  padding: 2px;
  border: 1px solid var(--cg-field-line);
  border-radius: 999px;
  background: var(--cg-bg);
}
.island-segment button {
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cg-muted);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.island-segment button.is-active {background: var(--cg-active); color: var(--cg-ink); font-weight: 600}
/* --- 19. Sign-in / boot screen ----------------------------------------------
   The landing card from the group reference: centred panel, brand mark, title,
   supporting line and a small footer row. Our gate is Cloudflare Access, so the
   card reports session state instead of offering providers we do not have. */
html[data-island-theme] body:has(.login) {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(238, 54, 38, .10), transparent 60%),
    radial-gradient(120% 80% at 100% 100%, rgba(71, 107, 160, .12), transparent 60%),
    var(--cg-bg);
}
html[data-island-theme] .login {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(460px, calc(100vw - 32px));
  padding: 36px 32px 24px;
  border: 1px solid var(--cg-line);
  border-radius: 20px;
  background: var(--cg-panel);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
  text-align: center;
}
html[data-island-theme] .login .mark {
  display: block;
  width: auto;
  height: 44px;
  margin: 0 auto 20px;
}
html[data-island-theme] .login > div:first-of-type {
  color: var(--cg-ink) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
}
html[data-island-theme] .login > div + div,
html[data-island-theme] .login .muted {
  color: var(--cg-muted) !important;
  font-size: 14px !important;
  line-height: 1.6;
}
html[data-island-theme] .login :is(button, .btn) {
  width: 100%;
  min-height: 46px;
  margin-top: 12px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
}
.island-login-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--cg-line);
  color: var(--cg-muted);
  font-size: 12.5px;
}
.island-login-foot b {color: var(--cg-ink); font-weight: 600}
/* --- 20. Three-column layout corrections ------------------------------------
   The middle column keeps the themed surface (it was still painting its own light
   background), and the title bar spans only the middle column so it stops
   overlapping the sidebar and the context rail. */
html[data-island-theme] body :is(main, #main, .main, .content, .workspace, .page, .app > main) {
  background: var(--cg-bg) !important;
  color: var(--cg-ink) !important;
}
html[data-island-theme] body.island-context-active :is(main, #main, .main) {margin-inline-end: 0 !important}
body.island-rail-active.island-context-active #islandWorkspaceBar {
  inset-inline-start: 52px !important;
  inset-inline-end: 288px !important;
}
body.island-rail-active:not(.island-context-active) #islandWorkspaceBar {inset-inline-end: 0 !important}
#islandWorkspaceBar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 52px;
  overflow: hidden;
}
#islandWorkspaceBar .island-title-actions {margin-inline-start: auto; flex: none; display: flex; align-items: center; gap: 8px}
#islandWorkspaceBar .island-workspace-brand {min-width: 0; overflow: hidden; white-space: nowrap}
/* The context column scrolls on its own; the middle column owns its scrollbar. */
.island-context {overscroll-behavior: contain}
/* --- 23. Collapsible context rail ------------------------------------------- */
.island-context-head {display: flex; justify-content: flex-end; flex: none; padding-bottom: 2px}
.island-context-toggle {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--cg-muted);
  cursor: pointer;
}
.island-context-toggle svg {width: 15px; height: 15px}
.island-context-toggle:hover {background: var(--cg-hover); color: var(--cg-ink)}
body.island-context-collapsed .island-context {width: 48px; padding: 14px 6px; align-items: center}
body.island-context-collapsed .island-context-card {display: none}
body.island-context-collapsed {padding-inline-end: 48px !important}
body.island-context-collapsed.island-rail-active #islandWorkspaceBar {inset-inline-end: 48px !important}


/* --- 25. Three-column layer parked ------------------------------------------
   These rules only apply while the right rail is active, which is switched off
   until the layout is verified: the title bar had been reduced to a floating box
   and the sidebar clipped. */
/* The rail is active: the middle column reserves its width, and the title bar (a child of body,
   normalised to width 100%) spans exactly that middle column. No inset tricks on a sticky bar. */
body.island-context-active {padding-inline-end: 288px !important}
body.island-context-active.island-context-collapsed {padding-inline-end: 48px !important}
body.island-rail-active #islandWorkspaceBar {inset-inline: 0 !important}

/* rail visibility is governed by the layout below */


/* --- 26. Measured consistency pass -------------------------------------------
   Two facts, taken from the live DOM rather than assumed:

   1. HR's body carries island-brow instead of island-workspace-ready, so rules
      keyed on the latter never applied there. Every rule below keys on the
      workspace classes that all four actually have.
   2. All four composers are CSS grids (island-unified-composer). As a wrapping
      flex row the text field takes its own line and the controls — agent picker,
      model picker, send and attach — share the line beneath, identically in
      every workspace.

   The title bar is forced to span its workspace everywhere. It is sticky in all
   four, so only the box is normalised, not the behaviour. */
body:is(.island-hr, .island-bd, .island-finance, .island-admin) #islandWorkspaceBar {
  position: sticky !important;
  top: 0 !important;
  inset-inline: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
body:is(.island-hr, .island-bd, .island-finance, .island-admin) #islandWorkspaceBar > * {
  min-width: 0;
}

html[data-island-theme] body :is(.composer, .chat-compose, .admin-chat-composer).island-unified-composer,
html[data-island-theme] body .island-unified-composer {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}
html[data-island-theme] body .island-unified-composer > :is(input:not([type="file"]), textarea) {
  order: 1;
  flex: 1 1 100% !important;
  min-width: 0 !important;
}
html[data-island-theme] body .island-unified-composer > :is(
  select, .island-agent-picker, .island-composer-provider,
  #chatSend, .island-send, button, label, details
) {
  order: 2;
  flex: 0 0 auto !important;
}
/* Inputs that carry files stay visually attached to the attach control. */
html[data-island-theme] body .island-unified-composer > input[type="file"] {display: none !important}


/* --- 27. Spacing rhythm, controls and tags -----------------------------------
   One scale, used everywhere, so the four workspaces share a rhythm instead of
   each inventing its own. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}
/* Sidebar: even rhythm between rows, groups separated by space rather than lines. */
html[data-island-theme] body :is(.sidebar, .side, #sidebar) > nav > * + * {margin-top: 2px}
html[data-island-theme] body :is(.sidebar, .side, #sidebar) :is(.nav-title, .nav-group > summary) {margin-top: var(--space-3)}
html[data-island-theme] body :is(.sidebar, .side, #sidebar) > .nav-footer > * + * {margin-top: var(--space-1)}
/* Composer: comfortable interior, single row of controls. */
html[data-island-theme] body .island-unified-composer {
  gap: var(--space-2) !important;
  padding: var(--space-3) var(--space-4) !important;
  border-radius: 24px !important;
}
html[data-island-theme] body .island-unified-composer > :is(input:not([type="file"]), textarea) {padding: var(--space-2) var(--space-2) !important}
/* Right rail: roomier cards, consistent heading rhythm. */
.island-context {gap: var(--space-3); padding: var(--space-4) var(--space-3)}
.island-context-card {padding: var(--space-4); border-radius: 14px}
.island-context-card h2 {margin: 0 0 var(--space-3)}
.island-context-card h2 + * {margin-top: 0}
.island-context-row + .island-context-row {margin-top: 2px}
.island-context-row {padding: var(--space-2) var(--space-2); border-radius: 9px}
/* Tags and counts read as small pills wherever a workspace renders one. */
html[data-island-theme] body :is(.count, .badge, .pill, .chip, .tag, [class*="count-badge"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--cg-line);
  border-radius: 999px;
  background: var(--cg-panel);
  color: var(--cg-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
/* Section headings keep a consistent distance from what they introduce. */
html[data-island-theme] body :is(main, #main, .main) :is(h1, h2) {margin-block: 0 var(--space-3)}
html[data-island-theme] body :is(main, #main, .main) :is(section, .sec, .section, .card) + :is(section, .sec, .section, .card) {margin-top: var(--space-5)}
/* Icon rail: even vertical rhythm. */
.island-rail {gap: var(--space-2)}