/* The top of the pal sidebar is the pal itself. It is Lanes, so a Lanes mark
   and name above it said the same thing twice; the pal's entry is the main
   thing on the rail, drawn as a raised button with its face, name and live
   status. The face keeps the owner's colour; the card, text and badges stay
   on the neutral sidebar palette. The traffic lights' row above stays the
   window's drag strip (.titlebar). */
.pal-experience .brand { display: none; }
.pal-experience .nav { padding-top: 6px; }
:root[data-os="windows"] .pal-experience .nav, :root[data-os="linux"] .pal-experience .nav,
:root[data-platform="web"] .pal-experience .nav { padding-top: 14px; }

.pal-experience .pal-chat-tab {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: 64px; margin: 0 0 18px; padding: 9px 12px 9px 9px;
  border: 1px solid var(--pal-line); border-radius: 14px;
  background: var(--pal-elevated); color: var(--pal-ink);
  box-shadow: 0 1px 2px #1616160d, 0 3px 12px #16161609;
  text-align: left; cursor: pointer;
}
.pal-experience .pal-chat-tab:hover {
  background: var(--pal-elevated);
  border-color: color-mix(in srgb, var(--pal-ink) 24%, var(--pal-line));
  box-shadow: 0 1px 2px #16161614, 0 5px 16px #16161612;
}
.pal-experience .pal-chat-tab:active { background: var(--pal-soft); box-shadow: none; transform: translateY(1px); }
/* Open: the same selected wash as every other tab, with a firmer edge. */
.pal-experience .pal-chat-tab.is-active { border-color: color-mix(in srgb, var(--pal-ink) 18%, var(--pal-line)); box-shadow: none; }
.pal-experience .pal-chat-tab:focus-visible { outline: 2px solid var(--pal-focus); outline-offset: 2px; }

.pal-chat-face { position: relative; display: block; flex: 0 0 44px; width: 44px; height: 42px; }
.pal-experience .pal-chat-tab .pal-character { display: block; width: 100%; height: 100%; margin: 0; }
.pal-chat-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pal-experience .pal-chat-tab .pal-chat-name { flex: none; font: 700 14.5px/1.25 var(--font-ui); letter-spacing: -.15px; color: var(--pal-ink); }
.pal-chat-status { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 550; line-height: 1.3; color: var(--pal-muted); }
.pal-chat-tab[data-state=waiting] .pal-chat-status { color: var(--pal-ink); font-weight: 700; }
.pal-experience .pal-chat-go { width: 17px; height: 17px; flex: 0 0 17px; color: var(--pal-muted); stroke-width: 1.7; }
.pal-experience .pal-chat-tab:hover .pal-chat-go, .pal-experience .pal-chat-tab.is-active .pal-chat-go { color: var(--pal-ink); }
.pal-chat-tab[data-needs] .pal-chat-go { display: none; }

/* Live status on the face, like a contact's presence. */
.pal-chat-dot {
  position: absolute; right: -1px; bottom: 3px; width: 11px; height: 11px; border-radius: 50%;
  background: #3f9d72; box-shadow: 0 0 0 2px var(--pal-elevated);
}
.pal-experience .pal-chat-tab.is-active .pal-chat-dot { box-shadow: 0 0 0 2px var(--pal-hover); }
:root:is([data-os=windows],[data-os=linux],[data-platform=web]) .pal-experience .pal-chat-tab.is-active .pal-chat-dot { box-shadow: 0 0 0 2px var(--pal-elevated); }
.pal-chat-tab[data-state=working] .pal-chat-dot { animation: pal-chat-pulse 2.4s ease-in-out infinite; }
.pal-chat-tab[data-state=waiting] .pal-chat-dot { background: #d4952b; }
.pal-chat-tab[data-state=paused] .pal-chat-dot { background: var(--pal-muted); }
.pal-chat-tab[data-state=disconnected] .pal-chat-dot { background: var(--pal-elevated); border: 2px solid var(--pal-muted); }
@keyframes pal-chat-pulse { 50% { opacity: .4; } }
.pal-hidden .pal-chat-dot { animation-play-state: paused !important; }

/* Open questions: a count the owner cannot miss, in ink rather than a colour. */
.pal-chat-badge {
  flex: none; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px;
  background: var(--pal-ink); color: var(--pal-paper);
  font: 750 11px/21px var(--font-ui); text-align: center; font-variant-numeric: tabular-nums;
}
.pal-chat-badge[hidden] { display: none; }

@media (max-width: 1000px) {
  .pal-experience .pal-chat-tab { gap: 9px; padding-right: 10px; }
  .pal-chat-face { flex-basis: 40px; width: 40px; height: 38px; }
  /* The narrower rail has no room for the bubble and the status beside it:
     with it, "Here with you" read "Here with ...". The whole card is the button. */
  .pal-experience .pal-chat-go { display: none; }
}
/* The rail collapses to icons: the face alone, still the first and largest. */
@media (max-width: 760px) {
  .pal-experience .pal-chat-tab { width: 46px; height: 46px; min-height: 46px; margin: 0 0 14px; padding: 0; gap: 0; justify-content: center; border-radius: 13px; }
  .pal-experience .pal-chat-copy, .pal-experience .pal-chat-go { display: none; }
  .pal-chat-face { flex-basis: 38px; width: 38px; height: 36px; }
  .pal-chat-dot { right: -3px; bottom: 1px; width: 10px; height: 10px; }
  .pal-chat-badge { position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; font-size: 10px; line-height: 19px; box-shadow: 0 0 0 2px var(--pal-sidebar); }
}
@media (prefers-reduced-motion: reduce) {
  .pal-chat-dot { animation: none !important; }
  .pal-experience .pal-chat-tab:active { transform: none; }
}

/* Work out of sight, under Pause all and Sending safety: the same one-line
   row, an eye on the left that shuts while the agents' windows are hidden,
   and the switch on the right. While a flip runs, its status ("Hiding
   them…") takes the title's place instead of adding a second line. */
.pal-experience .rail-switch.pal-sight {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; margin: 0; padding: 5px 10px 5px 9px;
  border: 1px solid var(--pal-line); border-radius: 9px; background: transparent; color: var(--pal-ink);
  font: 600 12px/1.2 var(--font-ui); text-align: left; cursor: pointer;
}
.pal-experience .rail-switch.pal-sight:hover:not(:disabled) { background: var(--pal-hover); }
.pal-experience .rail-switch.pal-sight:focus-visible { outline: 2px solid var(--pal-focus); outline-offset: 2px; }
.pal-experience .rail-switch.pal-sight:disabled { opacity: 1; cursor: progress; }
.pal-sight-icon { display: grid; place-items: center; flex: 0 0 16px; width: 16px; height: 16px; color: var(--pal-muted); }
.pal-sight-glyph { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pal-sight .pal-sight-glyph.is-shut, .pal-sight[aria-checked=true] .pal-sight-glyph.is-open { display: none; }
.pal-sight[aria-checked=true] .pal-sight-glyph.is-shut { display: block; }
.pal-sight[aria-checked=true] .pal-sight-icon { color: var(--pal-ink); }
.pal-experience .pal-sight .rail-switch-text { flex: 1 1 auto; min-width: 0; display: block; }
.pal-experience .pal-sight :is(.rail-switch-title, .rail-switch-sub) {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: inherit; color: inherit; max-height: none; margin: 0; opacity: 1; transition: none;
}
.pal-experience .pal-sight .rail-switch-sub, .pal-experience .pal-sight.has-status .rail-switch-title { display: none; }
.pal-experience .pal-sight.has-status .rail-switch-sub { display: block; color: var(--pal-muted); }
/* The switch in the sidebar's own ink, not the legacy violet. */
.pal-experience .pal-sight .rail-switch-track { width: 26px; height: 15px; background: var(--pal-line); box-shadow: none; }
.pal-experience .pal-sight[aria-checked=true] .rail-switch-track { background: var(--pal-ink); }
.pal-experience .pal-sight .rail-switch-knob { top: 2px; left: 2px; width: 11px; height: 11px; background: var(--pal-paper); box-shadow: 0 1px 2px #0003; }
.pal-experience .pal-sight[aria-checked=true] .rail-switch-knob { transform: translateX(11px); }
.pal-experience .pal-sight.is-busy .rail-switch-track { opacity: .5; }

/* The narrower sidebar keeps the whole name: a little less air around it. */
@media (max-width: 1000px) {
  .pal-experience .rail-switch.pal-sight { gap: 5px; padding: 5px 7px 5px 8px; }
  .pal-experience .pal-sight .rail-switch-track { width: 24px; }
  .pal-experience .pal-sight[aria-checked=true] .rail-switch-knob { transform: translateX(9px); }
}
/* The collapsed rail: the eye alone, like the brake and the shield beside it.
   On reads as the eye shut on a filled square, so the state survives without
   the switch. */
@media (max-width: 760px) {
  .pal-experience .rail-switch.pal-sight { position: relative; width: 44px; height: 34px; min-height: 34px; padding: 0; gap: 0; justify-content: center; }
  .pal-experience .pal-sight .rail-switch-text, .pal-experience .pal-sight .rail-switch-track { display: none; }
  .pal-sight-icon, .pal-sight-glyph { width: 18px; height: 18px; }
  .pal-experience .rail-switch.pal-sight[aria-checked=true] { background: var(--pal-ink); border-color: var(--pal-ink); }
  .pal-sight[aria-checked=true] .pal-sight-icon { color: var(--pal-paper); }
  .pal-experience .pal-sight.is-busy .pal-sight-icon { opacity: .5; }
}