:root {
  --ink: #19171c;
  --muted: #77717b;
  --soft: #f3ecef;
  --lined-page-background: #f3ecef;
  --line: rgba(90, 23, 24, 0.1);
  --brand: #5a1718;
  --brand-2: #8f2f2d;
  --brand-soft: rgba(143, 47, 45, 0.16);
  --brand-hover: rgba(143, 47, 45, 0.18);
  --brand-hover-strong: rgba(143, 47, 45, 0.42);
  --accent: #38b8a5;
  --card: #fbf6f8;
  --card-glass: rgba(250, 245, 247, 0.84);
  --panel-glass: rgba(248, 239, 243, 0.78);
  --premium-border: rgba(90, 23, 24, 0.14);
  --premium-border-strong: rgba(90, 23, 24, 0.22);
  --shadow: 0 18px 42px rgba(32, 20, 36, 0.12);
  --shadow-soft: 0 10px 30px rgba(32, 20, 36, 0.075);
  --deep: #09050d;
  --chrome-bg: radial-gradient(circle at 50% 0%, rgba(143, 47, 45, 0.24), transparent 42%), linear-gradient(180deg, #2a0b0e 0%, #5a1718 100%);
  --login-bg: radial-gradient(circle at 50% 0%, rgba(90, 23, 24, 0.28), transparent 34%), linear-gradient(180deg, #09050d 0%, #050308 100%);
  --glass-dark: rgba(19, 8, 13, 0.34);
  --surface: rgba(250, 245, 247, 0.9);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --keyboard-height: 0px;
  --stable-viewport-height: 100dvh;
  --conversation-viewport-height: var(--stable-viewport-height);
  --topbar-base-height: 74px;
  --fixed-topbar-height: calc(var(--topbar-base-height) + var(--safe-top)); --conversation-header-height: var(--fixed-topbar-height);
  --chat-input-clearance: calc(96px + var(--safe-bottom));
  --chat-composer-clearance: var(--chat-input-clearance);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }/* Long canonical reader names stay inside the mobile Heard by dialog. */.stream-pilot-message-read-info ul,.stream-pilot-message-read-info li,.stream-pilot-message-read-info li strong,.stream-pilot-message-read-info li span{min-width:0}.stream-pilot-message-read-info li strong,.stream-pilot-message-read-info li span{overflow-wrap:anywhere}

/*
 * The app is touch-first: a drag across copy should scroll or activate a
 * control, never leave iOS text-selection handles behind. Form fields stay
 * explicitly selectable so typing, caret movement and editing still work.
 */
body,
body * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

body input,
body textarea,
body select,
body [contenteditable="true"],
body [contenteditable="plaintext-only"] {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

html {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
  background: var(--lined-page-background);
  background-color: #f3ecef;
}

html.login-mode {
  background: var(--login-bg);
  background-color: #09050d;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  background: var(--lined-page-background);
  touch-action: manipulation;
  overscroll-behavior-y: none;
}

body:has(.login-view) {
  background: var(--login-bg);
  background-color: #09050d;
}

body.login-mode {
  min-height: 100lvh;
  background: var(--login-bg);
  background-color: #09050d;
  overflow: hidden;
}

html.keyboard-open,
body.keyboard-open,
html.keyboard-settling,
body.keyboard-settling {
  overscroll-behavior: none;
}

html.keyboard-open,
html.keyboard-settling {
  background: #140608;
  background-color: #140608;
}

body.login-mode.keyboard-open {
  position: fixed;
  inset: 0;
  width: 100%;
  min-height: 100lvh;
}

body.login-mode::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: max(56px, calc(var(--safe-bottom) + 28px));
  pointer-events: none;
  background: var(--login-bg);
  background-color: #09050d;
  z-index: 0;
}

button, input { font: inherit; }

button {
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 120ms ease, border-color 140ms ease;
}

button:active {
  transform: scale(0.98);
}

@media (hover: hover) and (pointer: fine) {
  button:hover,
  button:active {
    background-color: var(--brand-hover);
  }
}

a,
[role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

input,
textarea,
select {
  touch-action: auto;
}

.nav-item.active:hover,
.nav-item.active:active,
.pill.active:hover,
.pill.active:active,
.send-button:hover,
.send-button:active,
.fab:hover,
.fab:active {
  color: #fff;
  background-color: rgba(143, 47, 45, 0.86);
}

.app-shell {
  width: min(100%, 480px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--lined-page-background);
  position: relative;
  overflow-x: hidden;
  box-shadow: 0 0 70px rgba(0, 0, 0, 0.32);
}

body.login-mode .app-shell {
  min-height: 100lvh;
  background: var(--login-bg);
  background-color: #09050d;
  box-shadow: none;
  position: relative;
  z-index: 1;
}

body.login-mode .app-view {
  background: var(--login-bg);
  background-color: #09050d;
}

body.login-mode.keyboard-open .app-view {
  height: 100lvh;
  overflow: hidden;
}

.app-view {
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--fixed-topbar-height) 0 122px;
  background: var(--lined-page-background);
}

.app-view.conversation-view {
  height: var(--conversation-viewport-height);
  min-height: 0;
  padding: var(--conversation-header-height) 0 0;
  overflow: hidden;
  background: var(--lined-page-background);
}

html.conversation-mode,
body.conversation-mode {
  height: var(--conversation-viewport-height);
  min-height: 0;
  overflow: hidden;
  background: var(--lined-page-background);
  background-color: #f3ecef;
}

body.conversation-mode {
  height: var(--conversation-viewport-height);
  width: 100%;
}

body.conversation-mode .app-shell {
  height: var(--conversation-viewport-height);
  min-height: 0;
  overflow: hidden;
  background: var(--lined-page-background);
}

.app-header {
  background: var(--chrome-bg);
  color: #fff;
  padding: calc(12px + var(--safe-top)) 16px 12px;
  margin: 0 0 2px;
  min-height: calc(72px + var(--safe-top));
  border: 0;
  border-radius: 0 0 24px 24px;
  box-shadow: none;
  position: fixed;
  left: 50%;
  top: 0;
  width: min(100%, 480px);
  transform: translate3d(-50%, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  isolation: isolate;
  transition: none !important;
  animation: none !important;
  z-index: 120;
  backdrop-filter: blur(18px);
}

.topbar, .conversation-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.main-menu-popover {
  position: absolute;
  left: 14px;
  top: calc(100% + 8px);
  z-index: 140;
  width: 190px;
  display: grid;
  gap: 4px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(20, 6, 8, 0.96);
  box-shadow: 0 20px 42px rgba(20, 6, 8, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.main-menu-popover button {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  color: #fff;
  background: transparent;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 780;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.main-menu-popover button:hover,
.main-menu-popover button:active {
  background: rgba(255, 255, 255, 0.14);
}

.main-menu-popover button b {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #fff;
  color: var(--brand);
  font-size: 0.68rem;
  line-height: 1;
  font-weight: 900;
}

.app-title {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.05;
  font-weight: 850;
  letter-spacing: 0;
  flex: 1;
}

.brand-logo {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
}

.brand-logo svg {
  width: 25px;
  height: 25px;
  stroke: currentColor;
  stroke-width: 5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-logo.animated .logo-frame:not(:nth-child(2)) svg {
  width: 29px;
  height: 29px;
}

.brand-logo.animated .logo-frame:nth-child(1) svg,
.brand-logo.animated .logo-frame:nth-child(3) svg {
  width: 31px;
  height: 31px;
}

.brand-logo.animated .logo-frame {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: translateX(130%);
  opacity: 0;
  animation: logo-slide 8s ease-in-out infinite;
}

.brand-logo.animated .logo-frame:nth-child(1) { animation-delay: calc(var(--logo-phase, 0s) - 0.45s); }
.brand-logo.animated .logo-frame:nth-child(2) { animation-delay: calc(var(--logo-phase, 0s) + 1.55s); }
.brand-logo.animated .logo-frame:nth-child(3) { animation-delay: calc(var(--logo-phase, 0s) + 3.55s); }
.brand-logo.animated .logo-frame:nth-child(4) { animation-delay: calc(var(--logo-phase, 0s) + 5.55s); }

@keyframes logo-slide {
  0% {
    transform: translateX(130%);
    opacity: 0;
  }
  8%, 20% {
    transform: translateX(0);
    opacity: 1;
  }
  28%, 100% {
    transform: translateX(-130%);
    opacity: 0;
  }
}

.avatar-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: auto;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 10px 24px rgba(0, 0, 0, 0.14);
}

.icon-button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: currentColor;
  background: transparent;
}

.app-header .icon-button,
.conversation-topbar .icon-button {
  color: #fff; width: 44px; height: 44px; flex: 0 0 44px;
}

.icon-button svg, .nav-icon svg, .fab svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2.35;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-team-panel {
  margin: 14px 20px 0;
  padding: 8px 0 6px;
  border: 1px solid rgba(90, 23, 24, 0.16);
  border-bottom-width: 1.5px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.82), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(248, 234, 238, 0.6));
  box-shadow: 0 12px 28px rgba(32, 20, 36, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  overflow: hidden;
  backdrop-filter: blur(16px);
}

.search-wrap {
  margin: 0 9px;
  position: relative;
}

.search-wrap svg {
  position: absolute;
  left: 14px;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: #6f6873;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.search-wrap input {
  width: 100%;
  height: 40px;
  border: 1px solid rgba(90, 23, 24, 0.16);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(250, 245, 247, 0.7));
  padding: 0 14px 0 40px;
  color: var(--ink);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
  /* Avoid WebKit washing out the overlaid search icon during Home's spring. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.search-wrap input:focus {
  border-color: rgba(143, 47, 45, 0.32);
  box-shadow: 0 0 0 4px rgba(143, 47, 45, 0.08), 0 14px 34px rgba(28, 18, 31, 0.08);
}

.team-strip {
  overflow-x: auto;
  padding: 7px 0 0;
  scrollbar-width: none;
}

.team-strip-rail {
  width: max-content;
  min-width: 100%;
  display: grid;
  gap: 6px;
  padding: 0 0 2px;
  border-radius: 0;
  box-shadow: none;
  border: 0;
  background: transparent;
  overflow: visible;
}

.team-strip-people {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 68px;
  gap: 8px;
  padding: 0 9px;
}

.team-scroll-cue {
  padding: 0 9px;
}

.team-scroll-cue span {
  display: block;
  width: 100%;
  height: 4px;
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(90, 23, 24, 0.12);
}

.team-scroll-cue span::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 var(--team-cue-x, 0%);
  width: var(--team-cue-width, 34%);
  border-radius: inherit;
  background: linear-gradient(90deg, #5a1718, #9a302f);
  box-shadow: 0 3px 9px rgba(90, 23, 24, 0.24);
}

.team-strip::-webkit-scrollbar,
.filter-row::-webkit-scrollbar,
.categories::-webkit-scrollbar { display: none; }

.team-person {
  min-width: 0;
  padding: 0;
  color: var(--ink);
  text-align: center;
  background: transparent;
  display: grid;
  grid-template-rows: 44px auto;
  justify-items: center;
  align-items: start;
}

.team-person:hover,
.team-person:active {
  background: transparent;
}

.avatar {
  width: 52px;
  height: 52px;
  display: block;
  flex: 0 0 auto;
  position: relative;
  isolation: isolate;
  margin: 0;
  border-radius: 18px;
  background: #eee8f0;
  overflow: visible;
  /*
   * Presence belongs to the avatar, but deliberately overhangs its lower
   * edge. Paint containment clips every descendant to this box even when
   * overflow is visible, which turns the status dot into a half-circle on
   * iOS. Keep layout containment for the media-loading optimisation while
   * letting the badge paint outside the rounded image.
   */
  contain: layout;
}

.team-person .avatar {
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border: 2px solid rgba(143, 47, 45, 0.84);
  border-radius: 13px;
  box-shadow: 0 3px 10px rgba(90, 23, 24, 0.14);
  transition: transform 160ms ease;
  transform-origin: center;
}

@media (hover: hover) and (pointer: fine) {
  .team-person:hover .avatar,
  .team-person:active .avatar {
    transform: scale(1.06);
  }
}

.team-more {
  justify-items: center;
  text-align: center;
}

.team-more-box,
.team-invite-box {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  border: 1px solid rgba(90, 23, 24, 0.16);
  font-size: 1rem;
  font-weight: 880;
  transition: transform 160ms ease, background 160ms ease;
}

.team-more:hover .team-more-box,
.team-more:active .team-more-box,
.team-invite-shortcut:hover .team-invite-box,
.team-invite-shortcut:active .team-invite-box {
  transform: scale(1.06);
  background: var(--brand-hover);
}

.team-invite-box {
  color: #fff;
  background: var(--brand);
  border-color: rgba(90, 23, 24, 0.34);
  font-size: 1.18rem;
  line-height: 1;
  align-items: center;
  justify-content: center;
  padding-bottom: 2px;
}

.team-person .status-dot {
  width: 13px;
  height: 13px;
}

.avatar img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  clip-path: none;
  opacity: 0;
  transition: opacity 160ms ease;
}

/* Conversation artwork does not participate in private profile hydration. */
.avatar.conversation-avatar > img { opacity: 1; }

.avatar-image-loading-indicator {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.18) 20%, rgba(255, 255, 255, 0.6) 38%, rgba(255, 255, 255, 0.18) 58%);
  background-size: 220% 100%;
  animation: private-media-skeleton 1.15s ease-in-out infinite;
}

.avatar.avatar-with-image > svg {
  position: absolute;
  inset: 22%;
}

.avatar.avatar-with-image > img {
  z-index: 1;
}

.avatar.avatar-image-ready > img {
  opacity: 1;
}

.avatar.avatar-image-ready > .avatar-image-loading-indicator,
.avatar.avatar-image-failed > .avatar-image-loading-indicator {
  display: none;
}

.avatar.avatar-with-image.avatar-image-failed > img {
  display: none;
}

.conversation-avatar.default {
  display: grid;
  place-items: center;
  color: var(--brand);
  background: #ece8ee;
}

.conversation-avatar.default svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  stroke-width: 2.1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.avatar.default-user {
  display: grid;
  place-items: center;
  color: var(--brand);
  background: #ece8ee;
}

.avatar.default-user svg {
  width: 56%;
  height: 56%;
  stroke: currentColor;
  stroke-width: 2.1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.avatar.small {
  width: 52px;
  height: 52px;
  border-radius: 16px;
}

.avatar.large {
  width: 116px;
  height: 116px;
  border-radius: 32px;
}

.avatar-button .avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

.avatar-button .avatar img {
  border-radius: inherit;
}

.status-dot {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 16px;
  height: 16px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #9e9aa2;
  z-index: 6;
  pointer-events: none;
}

.status-dot.online { background: var(--accent); }

.team-name {
  display: block;
  margin-top: 5px;
  color: #252229;
  font-size: 0.8rem;
  line-height: 1.12;
  font-weight: 650;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.team-status {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 0.6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.categories {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 20px 4px;
}

.category-card {
  min-width: max-content;
  height: 48px;
  border-radius: 16px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #55505a;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 239, 243, 0.86));
  border: 1px solid var(--premium-border);
  box-shadow: none;
  backdrop-filter: blur(14px);
}

.category-card.active {
  color: #fff; background: var(--brand); border: 0; padding: 0 19px;
  box-shadow: none; backdrop-filter: none; -webkit-appearance: none; appearance: none; transform: none;
}
.category-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.category-card span {
  font-size: 0.97rem;
  font-weight: 650;
  white-space: nowrap;
}

.category-card svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2.25;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.section-header {
  padding: 4px 20px 8px;
}

.section-header h2, .screen-title, .panel-title {
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 760;
  letter-spacing: 0;
}

.section-kicker, .screen-intro {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.app-header + .screen-intro {
  padding: 18px 20px 0;
}

.conversation-list {
  display: grid;
  gap: 0;
  padding: 8px 20px 0;
}

/* Bound Chat Home's rubber band to its content, not the document canvas. */
.chat-home-elastic-content {
  transform: translate3d(0, var(--chat-home-elastic-y, 0px), 0);
}

.conversation-list > .new-chat-button { margin-bottom: 8px; }

.new-chat-button {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 0;
  border-radius: 18px;
  color: var(--brand);
  background: linear-gradient(180deg, rgba(90, 23, 24, 0.12), rgba(90, 23, 24, 0.035));
  text-align: left;
  box-shadow: none;
  backdrop-filter: none;
}

.new-chat-button:hover,
.new-chat-button:active {
  background: linear-gradient(180deg, rgba(90, 23, 24, 0.12), rgba(90, 23, 24, 0.035));
}
.new-chat-button:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.new-chat-button span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, var(--brand-2), var(--brand));
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1;
  padding-bottom: 2px;
}

.new-chat-button strong {
  font-size: 0.9rem;
  font-weight: 880;
}

.conversation-item, .team-card, .roster-item, .venue-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px 0;
  color: var(--ink);
  text-align: left;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid #f0edf2;
}

.team-directory-row {
  cursor: pointer;
  width: calc(100% + 40px);
  margin: 0 -20px;
  padding: 14px 20px;
}

.team-directory-row:hover {
  background: var(--brand-hover);
}

.team-directory-row.locked {
  opacity: 0.72;
}

.team-directory-row.locked:hover {
  background: transparent;
}

.conversation-item {
  position: relative;
  min-height: 72px;
  margin: 0;
  padding: 14px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transition: background-color 150ms ease;
}

/* Inset to the text column: 44px avatar + 14px gap. */
.conversation-list > .conversation-item:not(:last-child)::after {
  content: "";
  position: absolute;
  inset: auto 0 0 58px;
  height: 1px;
  background: rgba(90, 23, 24, 0.14);
  pointer-events: none;
}

.conversation-list > .conversation-item:first-child::before,
.conversation-list > .new-chat-button + .conversation-item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 58px;
  height: 1px;
  background: rgba(90, 23, 24, 0.14);
  pointer-events: none;
}

.conversation-list > .conversation-item:has(> .avatar.default-user)::after,
.conversation-list > .conversation-item:has(> .avatar.default-user)::before {
  left: calc(var(--person-avatar-list-size) + 14px);
}

.conversation-item:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.conversation-item > .avatar {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border-radius: 14px;
}

.conversation-item > .avatar .status-dot {
  right: -2px;
  bottom: -2px;
  width: 13px;
  height: 13px;
  border-width: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .conversation-item:hover,
  .conversation-item:active {
    background: rgba(90, 23, 24, 0.045);
    transform: none;
  }
}

.team-card:last-child,
.roster-item:last-child,
.venue-card:last-child {
  border-bottom: 0;
}

.conversation-main, .team-main, .roster-main, .venue-main {
  min-width: 0;
  flex: 1;
}

.conversation-main strong, .team-main strong, .roster-main strong, .venue-main strong {
  display: block;
  color: #17151a;
  font-size: 1rem;
  font-weight: 780;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-main p, .team-main p, .roster-main p, .venue-main p {
  margin: 4px 0 0;
  color: #6f6873;
  font-size: 0.9rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-main p.conversation-empty-preview {
  color: rgba(111, 104, 115, 0.76);
  font-style: italic;
}

.conversation-main p.conversation-publication-preview {
  color: var(--brand);
  font-weight: 650;
}

.conversation-typing-preview {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.typing-preview-name {
  min-width: 0;
  color: var(--brand);
  font-size: 0.84rem;
  font-weight: 780;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.typing-preview-logos {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 3px;
}

.typing-preview-logos span {
  width: 10px;
  height: 10px;
  display: grid;
  place-items: center;
  color: var(--brand);
  opacity: 0.45;
  animation: typingLogoPulse 1.05s ease-in-out infinite;
  animation-delay: calc(var(--typing-index) * 120ms);
}

.typing-preview-logos svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  stroke-width: 5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.preview-sender {
  color: #3f3945;
  font-weight: 760;
}

.conversation-meta {
  display: grid;
  justify-items: end;
  align-self: start;
  gap: 6px;
  color: #99939d;
  font-size: 0.84rem;
  padding-top: 3px;
}

.conversation-status-stack {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-height: 22px;
}

.muted-indicator {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--brand);
  opacity: 0.82;
}

.muted-indicator svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  stroke-width: 2.1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.badge {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-2);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
}

.empty-state {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  padding: 20px;
  border: 1px dashed rgba(90, 23, 24, 0.2);
  border-radius: 18px;
  color: var(--muted);
  background: rgba(250, 245, 247, 0.72);
  text-align: center;
  backdrop-filter: blur(10px);
}

.empty-state strong,
.empty-state small {
  display: block;
}

.empty-state strong {
  color: var(--ink);
  font-size: 0.96rem;
}

.empty-state small {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.filter-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 10px;
  overflow-x: auto;
  padding: 18px 20px 8px;
}

.pill {
  height: 42px;
  padding: 0 16px;
  border-radius: 15px;
  background: var(--card-glass);
  border: 1px solid rgba(90, 23, 24, 0.12);
  color: #55505a;
  font-weight: 650;
}

.pill.active {
  background: linear-gradient(145deg, var(--brand-2), var(--brand));
  color: #fff;
  border-color: transparent;
}

.conversation-header-portal {
  position: fixed;
  top: 0;
  left: 50%;
  width: min(100%, 480px);
  height: var(--conversation-header-height);
  transform: translateX(-50%);
  pointer-events: none;
  isolation: isolate;
  z-index: 120;
}

.conversation-header-portal[hidden] {
  display: none;
}

.conversation-header-portal > .conversation-topbar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  transform: none;
  will-change: auto;
  pointer-events: auto;
}

.conversation-topbar {
  background: var(--chrome-bg);
  color: #fff;
  padding: calc(12px + var(--safe-top)) 16px 12px;
  min-height: calc(72px + var(--safe-top));
  border: 0;
  border-radius: 0 0 24px 24px;
  box-shadow: none;
  position: fixed;
  left: 50%;
  top: 0;
  width: min(100%, 480px);
  transform: translateX(-50%);
  will-change: auto;
  backface-visibility: hidden;
  isolation: isolate;
  transition: none !important;
  animation: none !important;
  z-index: 120;
  backdrop-filter: blur(18px);
}

.conversation-topbar.chat-header {
  gap: 10px; border:0;
  padding: calc(12px + var(--safe-top)) 16px 12px;
  min-height: calc(72px + var(--safe-top));
  border-radius: 0 0 24px 24px;
}

.chat-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.chat-header-main {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border-radius: 18px;
  background: transparent;
  color: inherit;
  text-align: left; min-height: 44px;
}

.chat-header-main:hover,
.chat-header-main:focus-visible,
.chat-header-main:active {
  background: transparent;
}

.chat-header-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 16px;
  background: transparent;
}

.chat-header-avatar:hover,
.chat-header-avatar:active {
  background: transparent;
}

.chat-header-main:hover .chat-header-avatar .avatar,
.chat-header-main:active .chat-header-avatar .avatar {
  transform: scale(1.04);
}

.chat-header-avatar .avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  transition: transform 160ms ease;
}

.chat-header > .icon-button {
  flex: 0 0 auto;
}

.chat-header-logo {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: var(--brand);
}

.chat-header-logo svg {
  width: 25px;
  height: 25px;
  stroke: currentColor;
  stroke-width: 5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-settings-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: transparent;
}

.chat-settings-backdrop:hover,
.chat-settings-backdrop:active {
  background: transparent;
}

.chat-settings-panel {
  position: fixed;
  left: 50%;
  top: calc(var(--safe-top) + 92px);
  bottom: calc(112px + var(--safe-bottom));
  z-index: 21;
  width: min(94%, 420px);
  max-height: none;
  overflow-y: auto;
  transform: translateX(-50%);
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  border: 3px solid var(--brand);
  box-shadow: 0 24px 64px rgba(32, 20, 36, 0.2);
  backdrop-filter: blur(16px);
}

.forward-picker {
  position: fixed;
  left: 50%;
  top: calc(var(--safe-top) + 92px);
  bottom: calc(112px + var(--safe-bottom));
  z-index: 22;
  width: min(94%, 420px);
  overflow-y: auto;
  transform: translateX(-50%);
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid var(--brand);
  box-shadow: 0 24px 64px rgba(32, 20, 36, 0.2);
  backdrop-filter: blur(16px);
}

.forward-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.forward-picker-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 850;
}

.forward-picker-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.forward-picker-head button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 1.28rem;
  line-height: 1;
}

.forward-destination-list {
  display: grid;
  gap: 8px;
}

.forward-destination {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  color: var(--ink);
  background: rgba(90, 23, 24, 0.06);
  text-align: left;
}

.forward-destination strong,
.forward-destination small {
  display: block;
}

.forward-destination strong {
  font-size: 0.9rem;
  font-weight: 850;
}

.forward-destination small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 720;
}

.forward-destination:hover,
.forward-destination:active {
  color: #fff;
  background: var(--brand-hover-strong);
}

.forward-destination:hover small,
.forward-destination:active small {
  color: rgba(255, 255, 255, 0.8);
}

.chat-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.chat-settings-head h2,
.settings-section h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 850;
}

.chat-settings-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.settings-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 1.28rem;
  line-height: 1;
}

.settings-back {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
}

.settings-back svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

.settings-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  color: var(--ink);
  background: rgba(90, 23, 24, 0.06);
  text-align: left;
}

.settings-row strong,
.settings-person strong,
.settings-message strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 820;
}

.settings-row small,
.settings-person small,
.settings-message p,
.settings-empty {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.28;
}

.settings-toggle {
  width: 38px;
  height: 22px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(32, 20, 36, 0.16);
}

.settings-toggle::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(32, 20, 36, 0.18);
  transition: transform 150ms ease;
}

.settings-toggle.active {
  background: var(--brand);
}

.settings-toggle.active::before {
  transform: translateX(16px);
}

.settings-section {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(90, 23, 24, 0.1);
}

.settings-section h3 {
  margin-bottom: 8px;
  font-size: 0.82rem;
  color: var(--brand);
}

.settings-message {
  padding: 10px 0;
  border-bottom: 1px solid rgba(32, 20, 36, 0.07);
}

.settings-message:last-child {
  border-bottom: 0;
}

.settings-media-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.settings-media-item,
.settings-media-more {
  min-width: 0;
  border-radius: 13px;
  overflow: hidden;
  background: rgba(90, 23, 24, 0.07);
  color: var(--ink);
}

.settings-media-item {
  display: grid;
  gap: 4px;
  padding: 4px;
  text-align: left;
}

.settings-media-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.settings-media-item span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 760;
}

.settings-media-more {
  display: grid;
  place-items: center;
  min-height: 58px;
  border: 2px solid rgba(90, 23, 24, 0.26);
  color: var(--brand);
  font-size: 1.55rem;
  font-weight: 850;
}

.settings-media-list,
.settings-marked-list {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.settings-media-list h4 {
  margin: 0;
  color: var(--brand);
  font-size: 0.76rem;
  font-weight: 850;
}

.settings-media-list .settings-media-item {
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  padding: 6px;
}

.settings-media-list .settings-media-item img {
  width: 48px;
}

.chat-media-panel .chat-settings-head {
  align-items: center;
}

.chat-marked-panel .chat-settings-head {
  align-items: center;
}

.chat-media-panel .chat-settings-head > div {
  flex: 1;
  min-width: 0;
}

.chat-marked-panel .chat-settings-head > div {
  flex: 1;
  min-width: 0;
}

.settings-media-full-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  align-content: start;
}

.settings-media-full-grid .settings-media-item {
  padding: 5px;
}

.settings-media-full-grid .settings-media-item img {
  border-radius: 11px;
}

.settings-marked-trigger {
  margin-top: 0;
}

.settings-marked-hat {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--brand);
}

.settings-marked-hat svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

.settings-marked-item {
  border-radius: 14px;
  background: rgba(90, 23, 24, 0.06);
  overflow: hidden;
}

.settings-marked-full-list {
  margin-top: 4px;
  align-content: start;
}

.settings-marked-item > button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.settings-marked-item strong,
.settings-marked-item em,
.settings-marked-item small {
  display: block;
}

.settings-marked-item strong {
  font-size: 0.86rem;
  font-weight: 850;
}

.settings-marked-item em {
  min-width: 0;
  margin-top: 3px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 760;
}

.settings-marked-item small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 720;
}

.settings-marked-confirm {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px 10px;
  border-top: 1px solid rgba(90, 23, 24, 0.1);
}

.settings-marked-confirm span {
  flex: 1;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 760;
}

.settings-marked-confirm button {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(90, 23, 24, 0.1);
  color: var(--brand);
  font-size: 0.74rem;
  font-weight: 850;
}

.settings-media-item:hover,
.settings-media-item:active,
.settings-media-more:hover,
.settings-media-more:active,
.settings-marked-item > button:hover,
.settings-marked-item > button:active,
.settings-marked-confirm button:hover,
.settings-marked-confirm button:active {
  background: var(--brand-hover-strong);
  color: #fff;
}

.settings-marked-item > button:hover .settings-marked-hat,
.settings-marked-item > button:active .settings-marked-hat {
  color: #fff;
}

.settings-person {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.settings-person:hover,
.settings-person:active {
  background: rgba(90, 23, 24, 0.08);
}

.conversation-screen {
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--lined-page-background);
  overflow: hidden;
}

/* Conversation backgrounds match the rest of the app; bubbles remain separate. */
.conversation-screen:has(.stream-pilot-screen),
.conversation-screen:has(.stream-pilot-screen) .stream-pilot-screen {
  background: var(--lined-page-background);
}

.chat-title {
  min-width: 0;
  flex: 1;
}

.chat-title h1 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-title p {
  margin: 3px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.82rem;
}

.messages {
  margin: 0 20px var(--chat-composer-clearance);
  padding: 14px 0 10px;
  flex: 1;
  min-height: 0;
  position: relative;
  overflow-y: scroll;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: none;
}

.messages::-webkit-scrollbar { display: none; }

.conversation-new-messages {
  position: absolute;
  right: 22px;
  bottom: calc(82px + var(--safe-bottom));
  z-index: 11;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #257f75, #155f59);
  box-shadow: 0 14px 34px rgba(17, 80, 75, 0.3);
  touch-action: manipulation;
}

.conversation-new-messages[hidden] {
  display: none;
}

.conversation-new-messages svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.conversation-new-messages [data-new-message-count] {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: #c34543;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
}

body.keyboard-open .conversation-new-messages {
  bottom: calc(var(--keyboard-height) + 77px);
}

body.keyboard-open.native-keyboard .conversation-new-messages {
  bottom: calc(var(--keyboard-height) + 82px);
}

.conversation-screen:has(.composer-reply) .conversation-new-messages,
.conversation-screen:has(.composer-media-draft) .conversation-new-messages {
  bottom: calc(142px + var(--safe-bottom));
}

body.keyboard-open .conversation-screen:has(.composer-reply) .conversation-new-messages,
body.keyboard-open .conversation-screen:has(.composer-media-draft) .conversation-new-messages {
  bottom: calc(var(--keyboard-height) + 139px);
}

.conversation-activity {
  position: absolute;
  left: 22px;
  bottom: calc(82px + var(--safe-bottom));
  z-index: 11;
  max-width: calc(100% - 104px);
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 6px;
  border: 1px solid rgba(22, 101, 94, 0.32);
  border-radius: 16px;
  color: #153d39;
  background: rgba(221, 246, 242, 0.98);
  box-shadow: 0 10px 28px rgba(17, 80, 75, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
}

.conversation-activity[hidden] { display: none; }

.conversation-activity .avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 10px;
}

.conversation-activity .avatar .status-dot { display: none; }

.conversation-activity-copy {
  min-width: 0;
  display: grid;
  line-height: 1.05;
}

.conversation-activity-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
}

.conversation-activity-copy small {
  margin-top: 3px;
  color: #4d706d;
  font-size: 0.62rem;
  white-space: nowrap;
}

.conversation-activity-dots {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
}

.conversation-activity-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #168d82;
  animation: conversationActivityDot 1.1s ease-in-out infinite;
}

.conversation-activity-dots i:nth-child(2) { animation-delay: 120ms; }
.conversation-activity-dots i:nth-child(3) { animation-delay: 240ms; }

.conversation-activity-wave {
  height: 22px;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.conversation-activity-wave i {
  width: 3px;
  height: 8px;
  border-radius: 999px;
  background: #168d82;
  animation: conversationActivityWave 0.85s ease-in-out infinite;
  animation-delay: calc(var(--activity-index) * 0.09s);
}

@keyframes conversationActivityDot {
  0%, 65%, 100% { opacity: 0.35; transform: translateY(0); }
  32% { opacity: 1; transform: translateY(-3px); }
}

@keyframes conversationActivityWave {
  0%, 100% { height: 7px; opacity: 0.45; }
  50% { height: 20px; opacity: 1; }
}

body.keyboard-open .conversation-activity {
  bottom: calc(var(--keyboard-height) + 77px);
}

body.keyboard-open.native-keyboard .conversation-activity {
  bottom: calc(var(--keyboard-height) + 82px);
}

.conversation-screen:has(.composer-reply) .conversation-activity,
.conversation-screen:has(.composer-media-draft) .conversation-activity {
  bottom: calc(142px + var(--safe-bottom));
}

body.keyboard-open .conversation-screen:has(.composer-reply) .conversation-activity,
body.keyboard-open .conversation-screen:has(.composer-media-draft) .conversation-activity {
  bottom: calc(var(--keyboard-height) + 139px);
}

.messages-inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.date-separator {
  align-self: center;
  margin: 8px 0 2px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(90, 23, 24, 0.08);
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.message {
  display: flex;
  gap: 9px;
  align-items: flex-end;
  width: calc(100% - 2px);
  max-width: 100%;
  min-width: 0;
  position: relative;
}

.message:has(.message-menu) {
  z-index: 13;
}

.message.mine {
  flex-direction: row-reverse;
}

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  max-width: 100%;
  padding: 2px 0 0;
}

.typing-indicator .avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
}

.typing-logos {
  min-width: 96px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: rgba(250, 245, 247, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), 0 8px 22px rgba(32, 20, 36, 0.065);
}

.typing-logos span {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: var(--brand);
  transform: translateY(0);
  animation: typingLogoPulse 1.05s ease-in-out infinite;
  animation-delay: calc(var(--typing-index) * 120ms);
}

.typing-logos svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes typingLogoPulse {
  0%, 72%, 100% {
    opacity: 0.36;
    transform: translateY(0) scale(0.86);
  }
  36% {
    opacity: 1;
    transform: translateY(-4px) scale(1);
  }
}

.roster-update-message {
  width: 100%;
  display: block;
}

.roster-update-card {
  width: min(100%, 390px);
  margin: 4px auto;
  padding: 14px;
  border: 3px solid var(--brand-2);
  border-radius: 18px;
  background: rgba(250, 245, 247, 0.94);
  box-shadow: 0 14px 34px rgba(90, 23, 24, 0.14);
}

.is-roster-edit .roster-update-card {
  border-color: #b55a39;
  background: linear-gradient(180deg, rgba(181, 90, 57, 0.12), rgba(250, 245, 247, 0.96));
  box-shadow: 0 16px 38px rgba(181, 90, 57, 0.18);
}

.is-roster-request .roster-update-card {
  border-color: rgba(90, 23, 24, 0.42);
  background: linear-gradient(180deg, rgba(90, 23, 24, 0.1), rgba(250, 245, 247, 0.96));
}

.roster-update-kicker {
  display: inline-grid;
  place-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 0.68rem;
  font-weight: 850;
}

.is-roster-edit .roster-update-kicker {
  color: #8f2f2d;
  background: rgba(181, 90, 57, 0.14);
}

.is-roster-request .roster-update-kicker {
  color: #fff;
  background: var(--brand);
}

.roster-update-card h2 {
  margin: 9px 0 2px;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 850;
}

.roster-update-card > p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.82rem;
}

.roster-preview-week-nav {
  min-height: 38px;
  margin: 10px 0 8px;
  padding: 4px;
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  gap: 6px;
  border-radius: 13px;
  background: rgba(90, 23, 24, 0.07);
}

.roster-preview-week-nav button {
  width: 34px;
  height: 30px;
  border-radius: 10px;
  color: var(--brand);
  background: rgba(250, 245, 247, 0.96);
  font-size: 1.05rem;
  font-weight: 900;
}

.roster-preview-week-nav button:disabled {
  opacity: 0.36;
}

.roster-preview-week-nav strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 850;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-update-days {
  display: grid;
  gap: 10px;
}

.roster-update-days section {
  padding-top: 9px;
  border-top: 1px solid #f0edf2;
}

.roster-update-days h3 {
  margin: 0 0 7px;
  color: var(--brand);
  font-size: 0.76rem;
  font-weight: 850;
}

.roster-update-person {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
}

.roster-update-person.is-away {
  opacity: 0.72;
  filter: grayscale(1);
}

.roster-update-person span {
  min-width: 0;
}

.roster-update-person strong,
.roster-update-person small {
  display: block;
}

.roster-update-person strong {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 820;
}

.roster-update-person small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.76rem;
}

.roster-update-person.is-away small {
  color: #858189;
}

.roster-change-line {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.roster-change-line::after {
  content: "updated";
  padding: 3px 7px;
  border-radius: 999px;
  color: #8f2f2d;
  background: rgba(181, 90, 57, 0.12);
  font-size: 0.66rem;
  font-weight: 880;
  text-transform: uppercase;
}

.roster-change-before,
.roster-change-after {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 820;
}

.roster-change-before {
  position: relative;
  color: rgba(45, 39, 48, 0.52);
  background: rgba(90, 23, 24, 0.07);
}

.roster-change-before::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 50%;
  height: 2px;
  border-radius: 999px;
  background: var(--brand-2);
  transform: translateY(-50%);
}

.roster-change-after {
  color: var(--brand);
  background: rgba(143, 47, 45, 0.14);
  box-shadow: inset 0 0 0 1px rgba(143, 47, 45, 0.12);
}

.roster-update-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px 9px;
  margin-top: 8px;
}

.roster-card-delivery {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(120, 116, 126, 0.1);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.15;
}

.roster-card-delivery.is-pending,
.roster-card-delivery.is-queued {
  color: var(--brand);
  background: rgba(90, 23, 24, 0.09);
}

.roster-card-delivery.is-retrying {
  color: #8a3f25;
  background: rgba(181, 90, 57, 0.14);
}

.roster-card-delivery.is-sent {
  color: #2a764d;
  background: rgba(42, 118, 77, 0.1);
}

.roster-update-meta time {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: right;
}

.prep-update-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 10px;
}

.prep-update-items span {
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(90, 23, 24, 0.07);
  font-size: 0.76rem;
  font-weight: 800;
}

.prep-update-open {
  margin-top: 2px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: 0.78rem;
  font-weight: 860;
}

.prep-update-open:hover,
.prep-update-open:active {
  background: var(--brand-2);
}

.prep-update-open:disabled {
  cursor: default;
  color: rgba(45, 39, 48, 0.72);
  background: rgba(120, 118, 122, 0.16);
}

.prep-update-open:focus-visible {
  outline: 3px solid rgba(143, 47, 45, 0.34);
  outline-offset: 3px;
}

.prep-update-open-status {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.3;
}

.prep-update-open-status.is-unavailable {
  color: var(--brand);
}

.prep-update-open-status.is-expired {
  color: #5f5962;
}

.message-avatar-button {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border-radius: 8px;
  align-self: flex-start;
  margin-top: 2px;
}

.message-avatar-button .avatar {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 8px;
}

.message-avatar-button .status-dot {
  width: 8px;
  height: 8px;
  right: -1px;
  bottom: -1px;
  border-width: 1.5px;
}

.messages .status-dot {
  right: 0;
  bottom: 0;
}

.bubble {
  max-width: min(76%, 336px);
  min-width: 0;
  padding: 9px 12px;
  border-radius: 18px;
  background: rgba(250, 245, 247, 0.92);
  border: 1px solid rgba(90, 23, 24, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 6px 18px rgba(32, 20, 36, 0.055);
  position: relative;
  -webkit-touch-callout: none;
}

.bubble p,
.bubble strong,
.bubble .reply-quote {
  -webkit-user-select: none;
  user-select: none;
}

.message.mine .bubble {
  margin-left: auto;
  color: #fff;
  background: linear-gradient(145deg, var(--brand-2), var(--brand));
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(90, 23, 24, 0.22);
}

.message.highlighted .bubble,
.roster-update-message.highlighted [data-message-bubble] {
  animation: messageTargetPulse 1.4s ease both;
}

@keyframes messageTargetPulse {
  0%,
  100% {
    transform: scale(1);
  }
  22% {
    transform: scale(1.025);
    box-shadow: 0 0 0 4px rgba(143, 47, 45, 0.16), 0 14px 28px rgba(90, 23, 24, 0.16);
  }
}

.message.deleted .bubble {
  opacity: 0.72;
}

.message.deleted .bubble p {
  font-style: italic;
}

.reply-quote {
  width: 100%;
  min-height: 44px;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin: 0 0 6px;
  padding: 7px 9px;
  border: 0;
  border-left: 3px solid var(--brand);
  border-radius: 10px;
  color: var(--ink);
  background: rgba(90, 23, 24, 0.08);
  text-align: left;
}

.reply-quote:focus-visible {
  outline: 3px solid rgba(143, 47, 45, 0.42);
  outline-offset: 2px;
}

.message.mine .reply-quote:focus-visible {
  outline-color: rgba(255, 255, 255, 0.9);
}

.reply-quote[data-reply-resolving="true"] {
  opacity: 0.72;
  cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
  .avatar img,
  .secure-media-image {
    transition: none;
  }

  .avatar-image-loading-indicator {
    animation: none;
  }

  .message.highlighted .bubble,
  .roster-update-message.highlighted [data-message-bubble] {
    animation: none;
    box-shadow: 0 0 0 4px rgba(143, 47, 45, 0.22);
  }
}

.reply-quote.has-media {
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
}

.reply-quote img {
  grid-row: span 2;
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 9px;
}

.message.mine .reply-quote {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-left-color: rgba(255, 255, 255, 0.82);
}

.reply-quote strong,
.reply-quote span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reply-quote strong {
  margin: 0;
  color: var(--brand);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.05;
}

.message.mine .reply-quote strong {
  color: #fff;
}

.reply-quote span {
  opacity: 0.74;
  font-size: 0.76rem;
  font-weight: 760;
}

.bubble strong {
  display: block;
  margin-bottom: 3px;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.05;
}

.bubble p {
  margin: 0;
  display: flex;
  align-items: flex-end;
  gap: 9px;
  font-size: 0.94rem;
  line-height: 1.22;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bubble p > span:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.message-meta {
  flex: 0 0 auto;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  margin: 0 0 1px;
  font-size: 0.72rem;
  opacity: 0.72;
  line-height: 1;
  white-space: nowrap;
}

.message-meta time {
  display: block;
}

.message-delivery-state {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
}

.message-delivery-state.sent {
  opacity: 0.76;
}

.message-delivery-state.sending, .message-delivery-state.uploading, .message-delivery-state.ambiguous {
  opacity: 0.68;
}

.message-delivery-state.queued { color:#fff; opacity:.86; }
.message-delivery-state.failed { color:#fff; opacity:1; }
button.message-delivery-state.queued,button.message-delivery-state.failed { min-width:44px; min-height:44px; justify-content:center; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
/* Local intents keep one normal message footprint without letting the fixed
   delivery action squeeze the message into a one-character column. */
.stream-pilot-send-intent-bubble > p { flex-wrap:wrap; row-gap:2px; }
.message-meta.stream-pilot-send-intent-meta { width:100%; flex:1 0 100%; display:grid; grid-template-columns:minmax(0,1fr); justify-items:end; gap:3px; margin:0 0 1px; opacity:1; white-space:normal; }
.stream-pilot-send-intent-meta time { opacity:.72; }
.stream-pilot-send-intent-actions { max-width:100%; display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:3px; white-space:nowrap; }
.stream-pilot-status-grace, .stream-pilot-send-intent-actions.is-status-grace .stream-pilot-send-intent-separator { visibility:hidden; }
.stream-pilot-send-intent-actions button { position:relative; min-width:44px; min-height:44px; margin-block:-16px; padding-inline:6px; border-radius:0; background:transparent; text-decoration:underline; text-underline-offset:2px; touch-action:manipulation; }
.stream-pilot-send-intent-actions button:focus-visible { outline:3px solid #fff; outline-offset:-3px; }

.forwarded-label {
  display: block;
  margin-bottom: 3px;
  color: var(--brand);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0;
}

.marked-message {
  width: 13px;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.marked-message svg {
  width: 13px;
  height: 13px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.read-receipt {
  color: var(--brand);
  background: transparent;
  border-radius: 999px;
  padding: 2px 4px;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  line-height: 1;
}

.message.mine .read-receipt {
  color: #fff;
}

.read-receipt:hover,
.read-receipt:focus-visible,
.read-receipt:active {
  color: #2b090a;
  background: rgba(255, 255, 255, 0.22);
}

.heard-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 18;
  background: transparent;
}

.heard-modal-backdrop:hover,
.heard-modal-backdrop:active {
  background: transparent;
}

.heard-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 19;
  width: min(82%, 320px);
  transform: translate(-50%, -50%);
  padding: 14px;
  border-radius: 18px;
  background: rgba(250, 245, 247, 0.78);
  border: 1px solid rgba(90, 23, 24, 0.14);
  box-shadow: 0 22px 54px rgba(32, 20, 36, 0.18);
  backdrop-filter: blur(18px);
}

.heard-modal h2 {
  margin: 0 0 10px;
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

.heard-list {
  display: grid;
  gap: 10px;
}

.heard-person {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

.heard-person span {
  min-width: 0;
}

.heard-person strong,
.heard-person small {
  display: block;
}

.heard-person strong {
  font-size: 0.92rem;
  font-weight: 820;
}

.heard-person small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.76rem;
}

.message-info-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 19;
  width: min(84%, 340px);
  transform: translate(-50%, -50%);
  padding: 15px;
  border-radius: 20px;
  background: rgba(250, 245, 247, 0.8);
  border: 1px solid rgba(90, 23, 24, 0.16);
  box-shadow: 0 24px 58px rgba(32, 20, 36, 0.18);
  backdrop-filter: blur(18px);
}

.message-info-modal h2 {
  margin: 0 0 12px;
  color: var(--brand);
  font-size: 0.88rem;
  font-weight: 900;
}

.message-info-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.message-info-row span,
.message-info-meta {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.message-info-row strong,
.message-info-meta strong {
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 850;
}

.message-info-row small,
.message-info-meta span,
.message-info-heard small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 760;
}

.message-info-meta {
  padding-top: 10px;
  border-top: 1px solid rgba(90, 23, 24, 0.08);
}

.message-info-heard {
  display: grid;
  gap: 4px;
}

.delete-message {
  display: block;
  margin-top: 8px;
  padding: 0;
  color: currentColor;
  background: transparent;
  font-size: 0.72rem;
  font-weight: 800;
  opacity: 0.82;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.message-menu {
  position: absolute;
  left: 0;
  right: auto;
  top: auto;
  bottom: calc(100% + 6px);
  width: max-content;
  max-width: min(92vw, 320px);
  min-width: 0;
  padding: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 16px;
  background: rgba(248, 239, 243, 0.72);
  border: 2px solid rgba(90, 23, 24, 0.55);
  box-shadow: 0 18px 42px rgba(32, 20, 36, 0.12);
  backdrop-filter: blur(18px);
  z-index: 14;
  transform: none;
}

.message-menu.below {
  top: calc(100% + 6px);
  bottom: auto;
}

.message.mine .message-menu {
  left: auto;
  right: 0;
}

.message-menu button {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: transparent;
  color: #211d25;
}

.message-menu button svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.message-menu button[data-message-action="star"] svg {
  width: 20px;
  height: 20px;
  stroke-width: 4.2;
}

.delete-menu {
  gap: 5px;
}

.message-menu button:hover,
.message-menu button:focus-visible,
.message-menu button.is-hovered,
.message-menu button.is-pressed {
  background: var(--brand-hover-strong) !important;
  color: #fff;
}

.message-menu button:active {
  background: rgba(143, 47, 45, 0.58) !important;
  color: #fff;
}

.message-menu button[data-message-action^="delete"] {
  color: #9c2d44;
}

.message-menu button[data-message-action^="delete"]:hover,
.message-menu button[data-message-action^="delete"]:focus-visible,
.message-menu button[data-message-action^="delete"].is-hovered,
.message-menu button[data-message-action^="delete"].is-pressed,
.message-menu button[data-message-action^="delete"]:active {
  background: var(--brand-hover-strong) !important;
  color: #fff;
}

.composer {
  position: absolute;
  left: 50%;
  bottom: max(8px, calc(6px + var(--safe-bottom)));
  width: min(calc(100% - 40px), 440px);
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 8px;
  background: rgba(250, 245, 247, 0.52);
  border: 0;
  border-radius: 24px;
  box-shadow: none;
  backdrop-filter: blur(18px);
  z-index: 8;
}

.composer:focus-within {
  border-color: rgba(143, 47, 45, 0.34);
  box-shadow: 0 0 0 3px rgba(143, 47, 45, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 18px 42px rgba(32, 20, 36, 0.1);
}

.composer-reply {
  position: absolute;
  left: 50%;
  bottom: calc(80px + var(--safe-bottom));
  width: min(calc(100% - 40px), 440px);
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
  padding: 8px 10px 8px 12px;
  border-left: 3px solid var(--brand);
  border-radius: 15px;
  background: rgba(250, 245, 247, 0.96);
  box-shadow: 0 14px 34px rgba(32, 20, 36, 0.14);
  z-index: 10;
}

.composer-reply.has-media {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 44px;
}

.composer-reply > img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 11px;
}

body.keyboard-open .composer-reply {
  bottom: calc(var(--keyboard-height) + 74px);
}

.composer-media-draft {
  position: absolute;
  left: 50%;
  bottom: calc(80px + var(--safe-bottom));
  width: min(calc(100% - 40px), 440px);
  transform: translateX(-50%);
  z-index: 10;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border-radius: 18px;
  background: rgba(250, 245, 247, 0.94);
  border: 1px solid rgba(90, 23, 24, 0.14);
  box-shadow: 0 14px 34px rgba(32, 20, 36, 0.14);
}

body.keyboard-open .composer-media-draft {
  bottom: calc(var(--keyboard-height) + 74px);
}

.composer-media-draft img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 14px;
}

.composer-media-draft span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.composer-media-draft strong,
.composer-media-draft small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-media-draft strong {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 900;
}

.composer-media-draft small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 760;
}

.composer-media-draft button {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 1.05rem;
  font-weight: 900;
}

.composer-media-draft button:hover,
.composer-media-draft button:active {
  background: var(--brand-hover);
}

.composer-reply span {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}

.composer-reply strong,
.composer-reply small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-reply strong {
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 900;
}

.composer-reply small {
  color: #625a64;
  font-size: 0.78rem;
  font-weight: 760;
}

.composer-reply button {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.1);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.composer-reply button:hover,
.composer-reply button:active {
  background: var(--brand-hover);
}

body.keyboard-open .composer {
  bottom: calc(var(--keyboard-height) + 3px);
  background: rgba(250, 245, 247, 0.92);
  backdrop-filter: none;
}

body.keyboard-open.native-keyboard .composer {
  bottom: calc(var(--keyboard-height) + 8px);
  background: rgba(250, 245, 247, 0.92);
  backdrop-filter: none;
}

.attachment-menu {
  position: absolute;
  left: 50%;
  bottom: calc(80px + var(--safe-bottom));
  width: min(calc(100% - 40px), 440px);
  transform: translateX(-50%);
  z-index: 11;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(90, 23, 24, 0.16);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 24px 60px rgba(90, 23, 24, 0.16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.keyboard-open .attachment-menu {
  bottom: calc(var(--keyboard-height) + 74px);
}

.attachment-menu > button,
.attachment-recipes button {
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  color: var(--ink);
  background: rgba(90, 23, 24, 0.06);
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  font-weight: 850;
}

.attachment-menu > button {
  padding: 0 12px;
}

.attachment-menu > button svg {
  width: 22px;
  height: 22px;
  stroke: var(--brand);
}

.attachment-menu > button:hover,
.attachment-menu > button:active,
.attachment-recipes button:hover,
.attachment-recipes button:active {
  background: var(--brand-hover);
}

.attachment-menu input[type="file"] {
  display: none;
}

.attachment-recipes {
  display: grid;
  gap: 7px;
}

.attachment-recipes > strong {
  padding: 0 2px;
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.attachment-recipes button {
  padding: 8px 10px;
  display: grid;
  gap: 2px;
}

.attachment-recipes button span,
.attachment-recipes button small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-recipes button small,
.attachment-recipes p {
  color: var(--muted);
  font-size: 0.74rem;
}

.attachment-recipes p {
  margin: 0;
  padding: 8px 2px 2px;
}

.composer .icon-button {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  color: #39343d;
  background: rgba(255, 255, 255, 0.32);
  border-radius: 16px;
}

.composer input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 4px;
  color: var(--ink);
}

.send-button {
  width: 44px;
  height: 44px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, rgba(181, 90, 57, 0.78), rgba(90, 23, 24, 0.9));
  box-shadow: 0 10px 24px rgba(90, 23, 24, 0.22);
  backdrop-filter: blur(10px);
}

.send-button svg {
  width: 22px;
  height: 22px;
}

.send-button svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.send-button svg .bell-fill {
  fill: currentColor;
  stroke: none;
}

.composer-action-button {
  position: relative;
}

.composer button:focus-visible,
.composer-reply button:focus-visible,
.composer-media-draft button:focus-visible {
  outline: 3px solid rgba(143, 47, 45, 0.34);
  outline-offset: 2px;
}

.composer-action-icon {
  grid-area: 1 / 1;
  display: flex;
  place-items: center;
  align-items: center;
  justify-content: center;
  transition: opacity 0.16s ease, transform 0.18s ease;
}

.composer-action-icon svg {
  flex: 0 0 auto;
}

.composer-action-icon-voice {
  gap: 2px;
  opacity: 1;
  transform: scale(1) translateY(0);
}

.composer-action-icon-voice svg:first-child,
.composer-action-icon-voice-active svg:first-child {
  width: 19px;
  height: 19px;
}

.composer-action-icon-voice svg:last-child,
.composer-action-icon-voice-active svg:last-child {
  width: 12px;
  height: 19px;
  margin-left: -2px;
}

.composer-action-icon-voice-active,
.composer-action-icon-send,
.composer-action-icon-send-active {
  opacity: 0;
  transform: scale(0.86);
}

.composer.has-send-content .composer-action-icon-voice,
.composer.has-send-content .composer-action-icon-voice-active {
  opacity: 0;
  transform: scale(0.86);
}

.composer.has-send-content .composer-action-icon-send {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.composer.has-send-content .composer-action-icon-send svg,
.composer.has-send-content .composer-action-icon-send-active svg {
  width: 23px;
  height: 23px;
}

.composer.is-recording-voice .composer-action-icon-voice,
.composer.is-recording-voice .composer-action-icon-send,
.composer.is-recording-voice .composer-action-icon-send-active {
  opacity: 0;
  transform: scale(0.86);
}

.composer.is-recording-voice .composer-action-icon-voice-active {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.composer:not(.has-send-content) .composer-action-button.is-pressed .composer-action-icon-voice,
.composer:not(.has-send-content) .composer-action-button:active .composer-action-icon-voice,
.composer.has-send-content .composer-action-button.is-pressed .composer-action-icon-send,
.composer.has-send-content .composer-action-button:active .composer-action-icon-send {
  opacity: 0;
  transform: scale(0.86);
}

.composer:not(.has-send-content) .composer-action-button.is-pressed .composer-action-icon-voice-active,
.composer:not(.has-send-content) .composer-action-button:active .composer-action-icon-voice-active,
.composer.has-send-content .composer-action-button.is-pressed .composer-action-icon-send-active,
.composer.has-send-content .composer-action-button:active .composer-action-icon-send-active {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.composer-undo-button {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
}

.composer-undo-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.composer-undo-button:hover,
.composer-undo-button:active {
  background: var(--brand-hover);
}

.composer.is-recording-voice input {
  color: var(--brand);
  font-weight: 900;
}

.composer-voice-error {
  position: absolute;
  left: 50%;
  bottom: calc(80px + var(--safe-bottom));
  width: min(calc(100% - 40px), 440px);
  transform: translateX(-50%);
  z-index: 10;
  padding: 10px 14px;
  border-radius: 16px;
  color: var(--brand);
  background: rgba(250, 245, 247, 0.94);
  border: 1px solid rgba(90, 23, 24, 0.16);
  box-shadow: 0 14px 34px rgba(32, 20, 36, 0.14);
  font-size: 0.78rem;
  font-weight: 850;
}

body.keyboard-open .composer-voice-error {
  bottom: calc(var(--keyboard-height) + 74px);
}

.profile-hero {
  margin: 20px;
  padding: 24px;
  text-align: center;
  color: #fff;
  background: var(--chrome-bg);
  border-radius: 28px;
  box-shadow: none;
}

.profile-hero .avatar {
  margin: 0 auto;
}

.profile-hero h1 {
  margin: 14px 0 5px;
  font-size: 1.45rem;
  font-weight: 830;
}

.profile-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.profile-photo-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.profile-photo-button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.profile-photo-button:hover,
.profile-photo-button:active {
  background: rgba(255, 255, 255, 0.82);
}

.profile-photo-button.ghost {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.profile-photo-button.ghost:hover,
.profile-photo-button.ghost:active {
  background: rgba(255, 255, 255, 0.2);
}

.profile-photo-button input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.profile-document-actions {
  margin-top: 12px;
}

.profile-upload-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.74rem;
  font-weight: 900;
  cursor: pointer;
}

.profile-upload-button span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}

.profile-upload-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-upload-button:hover,
.profile-upload-button:active {
  background: rgba(255, 255, 255, 0.22);
}

.profile-upload-button input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.profile-grid, .stack {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 20px;
}

.roster-controls {
  display: grid;
  gap: 10px;
  padding: 16px 20px 12px;
  margin: 0 0 2px;
  overflow: visible;
}

.roster-tabs {
  display: grid;
  grid-template-columns: minmax(68px, max-content) minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.roster-tabs::-webkit-scrollbar { display: none; }
@media (max-width:359px) { .roster-tabs { grid-template-columns:minmax(0,1fr); } .roster-tabs .pill { width:100%; } }
.roster-tabs .pill {
  min-width: 0; min-height: 44px; height: 44px;
  background: rgba(255, 255, 255, 0.68);
  border-color: rgba(90, 23, 24, 0.1);
  box-shadow: 0 8px 22px rgba(32, 20, 36, 0.04);
  backdrop-filter: blur(10px);
}

.roster-tabs .pill.active:not(.roster-week-pill) {
  color: #fff;
  background: linear-gradient(145deg, var(--brand-2), var(--brand));
  border-color: transparent;
  box-shadow: 0 12px 28px rgba(90, 23, 24, 0.22);
}

.roster-tabs .pill:nth-child(2) {
  justify-content: center;
}

.roster-week-pill {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 0;
  padding: 4px;
}

.roster-week-pill.active {
  background: linear-gradient(145deg, var(--brand-2), var(--brand)) !important;
  box-shadow: 0 12px 28px rgba(90, 23, 24, 0.22) !important;
}

.roster-week-pill > button {
  min-width: 0;
  min-height: 44px; height: 44px;
  padding: 0 6px;
  border-radius: 999px;
  color: var(--brand);
  background: transparent;
  font-size: clamp(0.7rem, 3vw, 0.82rem);
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-week-pill > button:first-child,
.roster-week-pill > button:last-child {
  font-size: 1.05rem;
  font-weight: 900;
  background: rgba(90, 23, 24, 0.08);
}

.roster-week-pill.active > button {
  color: #fff;
}

.roster-week-pill.active > button:first-child,
.roster-week-pill.active > button:last-child {
  background: rgba(255, 255, 255, 0.14);
}

.roster-week-pill > button:disabled {
  opacity: 0.35;
}

.roster-view-actions {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  overflow: visible;
}

.roster-action-buttons {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 8px;
}

.roster-view-actions .roster-create-pill,
.roster-view-actions .roster-edit-pill,
.roster-view-actions .roster-request-pill {
  height: 44px;
  min-width: 82px;
  justify-content: center;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 22px rgba(32, 20, 36, 0.04);
}

.roster-edit-pill {
  color: var(--brand);
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(90, 23, 24, 0.16);
  box-shadow: 0 8px 22px rgba(32, 20, 36, 0.04);
  backdrop-filter: blur(10px);
}

.roster-request-pill {
  color: var(--brand);
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(90, 23, 24, 0.16);
  box-shadow: 0 8px 22px rgba(32, 20, 36, 0.04);
  backdrop-filter: blur(10px);
}

.roster-request-days {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
}

.roster-request-days legend {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 820;
}

.roster-request-calendar-head {
  min-height: 40px;
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(90, 23, 24, 0.07);
}

.roster-request-calendar-head button {
  width: 38px;
  height: 32px;
  padding: 0;
  justify-content: center;
  color: var(--brand);
  background: #fff;
  font-size: 1.1rem;
  font-weight: 900;
}

.roster-request-calendar-head strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 880;
  text-align: center;
}

.roster-request-weekdays,
.roster-request-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.roster-request-weekdays span {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 860;
  text-align: center;
}

.roster-request-calendar-grid label,
.roster-request-calendar-grid .blank {
  min-width: 0;
}

.roster-request-calendar-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.roster-request-calendar-grid label > span,
.roster-request-calendar-grid .blank {
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(90, 23, 24, 0.14);
  border-radius: 12px;
  color: var(--brand);
  background: rgba(255, 255, 255, 0.78);
}

.roster-request-calendar-grid .blank {
  border-color: transparent;
  background: transparent;
}

.roster-request-calendar-grid b {
  font-style: normal;
  line-height: 1;
}

.roster-request-calendar-grid strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 900;
}

.roster-request-calendar-grid b {
  padding: 2px 3px;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: 0.46rem;
  font-weight: 900;
}

.roster-request-calendar-grid label.active > span,
.roster-request-calendar-grid input:checked + span {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, var(--brand-2), var(--brand));
  box-shadow: 0 10px 22px rgba(90, 23, 24, 0.2);
}

.roster-request-calendar-grid label.active strong,
.roster-request-calendar-grid input:checked + span strong {
  color: #fff;
}

.roster-request-calendar-grid label.active b,
.roster-request-calendar-grid input:checked + span b {
  color: var(--brand);
  background: #fff;
}

.roster-request-selected {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 780;
  text-align: center;
}

.roster-request-extra {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.roster-request-modal textarea {
  width: 100%;
  resize: vertical;
  min-height: 84px;
  padding: 12px;
  border: 1px solid rgba(90, 23, 24, 0.14);
  border-radius: 13px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
  font: inherit;
  outline: none;
}

.roster-request-modal textarea:focus {
  border-color: rgba(90, 23, 24, 0.34);
  background: #fff;
}

.roster-request-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 8px;
}

.system-modal .roster-request-actions button {
  justify-content: center;
  text-align: center;
}

.system-modal .roster-request-actions button:disabled {
  cursor: default;
  color: #928b95;
  background: rgba(232, 229, 234, 0.88);
  box-shadow: none;
  opacity: 0.78;
  transform: none;
}

.roster-edit-pill.active {
  color: #fff;
  background: linear-gradient(145deg, var(--brand-2), var(--brand));
  border-color: transparent;
}

.roster-edit-pill:disabled {
  cursor: default;
  color: #8d8790;
  background: rgba(232, 229, 234, 0.86);
  border-color: rgba(120, 116, 126, 0.14);
  box-shadow: none;
  opacity: 0.72;
}

.roster-empty-state {
  justify-items: center;
  margin: 14px 20px 116px;
  padding: 24px 18px;
}

.roster-empty-state > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, var(--brand-2), var(--brand));
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  padding-bottom: 2px;
}

.roster-venue-filter {
  position: relative;
  width: 100%;
}

.venue-pill {
  max-width: 100%;
  width: 100%;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.venue-menu {
  position: absolute;
  left: 0;
  right: auto;
  top: calc(100% + 8px);
  z-index: 8;
  width: min(280px, calc(100vw - 40px));
  max-width: calc(100vw - 40px);
  max-height: min(320px, calc(100dvh - 260px));
  padding: 7px;
  display: grid;
  gap: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(90, 23, 24, 0.1);
  box-shadow: 0 18px 42px rgba(32, 20, 36, 0.16);
  backdrop-filter: blur(12px);
}

.venue-menu button {
  width: 100%;
  padding: 10px 11px;
  border-radius: 11px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  font-size: 0.86rem;
  font-weight: 720;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.venue-menu button:hover,
.venue-menu button:active,
.venue-menu button.active {
  color: var(--brand);
  background: var(--brand-hover);
}

.roster-manager-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.roster-manager-bar:has(.active) {
  padding-top: 18px;
}

.roster-authority-state {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 20px 0;
  padding: 8px 11px;
  border: 1px solid rgba(42, 118, 77, 0.16);
  border-radius: 12px;
  color: #2a764d;
  background: rgba(42, 118, 77, 0.07);
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.3;
}

.roster-authority-state.requires-attention {
  color: var(--brand);
  border-color: rgba(90, 23, 24, 0.22);
  background: rgba(90, 23, 24, 0.08);
}

.roster-authority-state span {
  min-width: 0;
}

.roster-authority-state button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 11px;
  color: #fff;
  background: var(--brand);
  font: inherit;
  font-weight: 860;
}

.roster-tabs button:focus-visible, .roster-view-actions button:focus-visible, .roster-authority-state button:focus-visible,
.manager-request-filters button:focus-visible,
.manager-request-actions button:focus-visible,
.roster-editor-head-actions .pill:focus-visible {
  outline: 3px solid rgba(90, 23, 24, 0.38);
  outline-offset: 2px;
}

.manager-requests-section > .roster-authority-state {
  margin: 10px 0 12px;
}

.roster-editor {
  margin: 6px 20px 14px;
  padding: 15px;
  border: 1px solid rgba(90, 23, 24, 0.22);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.72)),
    radial-gradient(circle at 50% 0%, rgba(90, 23, 24, 0.12), transparent 42%);
  box-shadow: 0 16px 42px rgba(32, 20, 36, 0.1);
  backdrop-filter: blur(14px);
}

.roster-editor-head,
.roster-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.roster-editor-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.04rem;
  font-weight: 900;
}

.roster-editor-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.roster-editor-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
}

.roster-editor-head-actions .pill {
  min-height: 44px;
}

.roster-create-pill {
  color: var(--brand);
  background: #fff;
  border-color: rgba(90, 23, 24, 0.16);
}

.roster-save-draft-pill {
  color: var(--brand);
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(90, 23, 24, 0.18);
}

.roster-save-draft-pill.saved {
  color: #2a764d;
  background: rgba(42, 118, 77, 0.1);
  border-color: rgba(42, 118, 77, 0.2);
}

.roster-saved-drafts {
  display: grid;
  gap: 10px;
  margin: 0 20px 14px;
}

.roster-saved-draft {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1.5px solid rgba(90, 23, 24, 0.22);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.74)),
    radial-gradient(circle at 0% 0%, rgba(90, 23, 24, 0.12), transparent 38%);
  box-shadow: 0 16px 34px rgba(32, 20, 36, 0.08);
  backdrop-filter: blur(12px);
}

.roster-saved-draft span,
.roster-saved-draft strong,
.roster-saved-draft em {
  min-width: 0;
  display: block;
}

.roster-saved-draft small {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

.roster-saved-draft strong {
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 900;
}

.roster-saved-draft em {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 720;
}

.roster-saved-draft div {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.roster-saved-draft .pill {
  min-height: 44px;
  padding: 0 10px;
  font-size: 0.72rem;
}

.roster-draft-delete {
  color: var(--muted);
  background: rgba(120, 116, 126, 0.1);
  border-color: rgba(120, 116, 126, 0.14);
}

.manager-draft-list {
  margin: 0;
}

.manager-draft-card {
  box-shadow: none;
}

.roster-editor-person {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.roster-editor-person span {
  min-width: 0;
}

.roster-editor-head button:disabled {
  cursor: default;
  opacity: 0.42;
  color: var(--muted);
  background: rgba(120, 116, 126, 0.12);
}

.roster-editor-topline {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.roster-editor-topline label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
}

.roster-editor-topline select {
  width: 100%;
  height: 44px;
  border: 1px solid rgba(90, 23, 24, 0.12);
  border-radius: 12px;
  padding: 0 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  outline: none;
}

.roster-editor-topline .roster-day-note {
  grid-column: 1 / -1;
}

.roster-employee-list {
  display: grid;
  gap: 0;
  margin-top: 12px;
  border-top: 1px solid rgba(90, 23, 24, 0.08);
}

.roster-employee-card {
  border-bottom: 1px solid rgba(90, 23, 24, 0.08);
}

.roster-employee-card:last-child {
  border-bottom: 0;
}

.roster-employee-card.expanded {
  padding-bottom: 12px;
  border-radius: 16px;
  background: rgba(90, 23, 24, 0.045);
}

.roster-employee-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
}

.roster-employee-row span {
  min-width: 0;
}

.roster-employee-row strong,
.roster-employee-row small {
  display: block;
}

.roster-employee-row strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 830;
}

.roster-employee-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.76rem;
}

.roster-employee-row button {
  min-width: max-content;
  padding: 8px 10px;
  border-radius: 11px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.075);
  font-size: 0.74rem;
  font-weight: 830;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roster-employee-card.expanded .roster-employee-row button {
  color: #fff;
  background: linear-gradient(145deg, var(--brand-2), var(--brand));
}

.roster-inline-editor {
  margin: 0 0 4px 62px;
  padding: 12px;
  border: 1px solid rgba(90, 23, 24, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.roster-inline-editor .roster-day-switcher {
  margin-top: 0;
}

.roster-day-switcher {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.roster-day-switcher button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 1.35rem;
  font-weight: 850;
  line-height: 1;
}

.roster-day-switcher strong {
  min-width: 0;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, var(--brand-2), var(--brand));
  font-size: 1rem;
  font-weight: 850;
}

.roster-day-pick-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.roster-day-pick-list button {
  width: 100%;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(90, 23, 24, 0.09);
  border-radius: 16px;
  color: var(--ink);
  background: #fff;
  text-align: left;
}

.roster-day-pick-list button:hover,
.roster-day-pick-list button:active,
.roster-day-pick-list button.active {
  color: var(--brand);
  background: rgba(143, 47, 45, 0.09);
  border-color: rgba(143, 47, 45, 0.22);
}

.roster-day-pick-list button:disabled {
  cursor: default;
  opacity: 0.48;
  color: var(--muted);
  background: #f5f1f3;
  border-color: rgba(90, 23, 24, 0.06);
}

.roster-week-stepper {
  min-height: 46px;
  padding: 6px;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(90, 23, 24, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 24px rgba(32, 20, 36, 0.045);
  backdrop-filter: blur(10px);
}

.roster-week-stepper button {
  width: 42px;
  height: 34px;
  padding: 0;
  justify-content: center;
  border-radius: 12px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 1.2rem;
  font-weight: 900;
}

.roster-week-stepper button:disabled {
  opacity: 0.35;
}

.roster-week-stepper strong {
  text-align: center;
  color: var(--ink);
  font-size: 0.82rem;
}

.roster-create-context-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  margin-top: 12px;
}

.roster-create-editor {
  padding-bottom: 18px;
}

.roster-create-editor .roster-editor-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}

.roster-create-editor .roster-editor-head > div:first-child {
  min-width: 0;
}

.roster-create-editor .roster-editor-head h2,
.roster-create-editor .roster-editor-head p {
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
}

.roster-create-editor .roster-editor-head-actions {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 8px;
}

.roster-create-editor .roster-editor-head-actions .pill {
  width: 100%;
  min-width: 0;
  justify-content: center;
  padding-inline: 8px;
  white-space: nowrap;
}

.roster-editing-editor {
  border-color: rgba(90, 23, 24, 0.34);
  background: linear-gradient(180deg, rgba(90, 23, 24, 0.08), rgba(255, 255, 255, 0.72));
}

.roster-editing-editor .roster-editor-head h2 {
  color: var(--brand);
}

.roster-editing-editor .roster-create-table {
  border-color: rgba(90, 23, 24, 0.18);
}

.roster-create-week-nav {
  margin-top: 0;
}

.roster-create-venue-select {
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 3px;
  padding: 6px 10px;
  border: 1px solid rgba(90, 23, 24, 0.12);
  border-radius: 16px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 24px rgba(32, 20, 36, 0.045);
  backdrop-filter: blur(10px);
  font-size: 0.74rem;
  font-weight: 860;
}

.roster-create-venue-select select {
  min-width: 0;
  width: 100%;
  height: 28px;
  border: 0;
  border-radius: 10px;
  color: var(--ink);
  background: rgba(90, 23, 24, 0.08);
  font-size: 0.76rem;
  font-weight: 830;
  outline: none;
  text-overflow: ellipsis;
}

@media (max-width: 420px) {
  .roster-authority-state {
    margin-inline: 14px;
    align-items: flex-start;
  }

  .manager-requests-section > .roster-authority-state {
    margin-inline: 0;
  }

  .roster-saved-draft {
    grid-template-columns: 1fr;
  }

  .roster-saved-draft div {
    justify-content: stretch;
  }

  .roster-saved-draft .pill {
    flex: 1 1 0;
  }

  .roster-create-context-row {
    grid-template-columns: 1fr;
  }

  .roster-editor {
    margin-inline: 14px;
    padding: 14px;
  }

  .roster-editor-head {
    align-items: flex-start;
  }

  .roster-editor-head > div {
    min-width: 0;
  }

  .roster-editor-head-actions {
    flex: 0 0 auto;
  }

  .roster-employee-row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 9px 10px;
  }

  .roster-employee-row button {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    justify-content: center;
    text-align: center;
  }

  .roster-inline-editor {
    margin-left: 0;
  }

  .roster-status-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .roster-status-picker .pill {
    min-width: 0;
    padding-inline: 6px;
    font-size: 0.74rem;
  }
}

.roster-view-week-nav {
  margin-top: 0;
}

.roster-draft-weeks {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 10px 0 2px;
  scrollbar-width: none;
}

.roster-draft-weeks::-webkit-scrollbar {
  display: none;
}

.roster-draft-weeks button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 0.74rem;
  font-weight: 840;
}

.roster-draft-weeks button.active {
  color: #fff;
  background: var(--brand);
}

.roster-create-venues {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.roster-create-venue {
  display: grid;
  gap: 8px;
}

.roster-create-venue h3 {
  margin: 0;
  color: var(--brand);
  font-size: 0.86rem;
  font-weight: 880;
}

.roster-create-table {
  display: grid;
  gap: 0;
  border: 1px solid rgba(90, 23, 24, 0.09);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 28px rgba(32, 20, 36, 0.055);
}

.roster-create-person {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid #f0edf2;
}

.roster-create-person:last-child {
  border-bottom: 0;
}

.roster-create-person-head {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
}

.roster-create-person-head span,
.roster-create-person-head strong,
.roster-create-person-head small {
  min-width: 0;
  display: block;
}

.roster-create-person-head strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 850;
}

.roster-create-person-head small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 720;
}

.roster-create-days {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(214px, 214px);
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}

.roster-create-cell {
  min-width: 214px;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(90, 23, 24, 0.1);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.76);
  transform-origin: center top;
  transition:
    padding 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease,
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.roster-create-cell.status-working {
  padding: 10px;
  border-color: rgba(143, 47, 45, 0.24);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 30px rgba(90, 23, 24, 0.1);
  transform: scale(1.012);
}

.roster-create-cell.invalid {
  border-color: var(--brand);
  background: rgba(143, 47, 45, 0.08);
}

.roster-create-cell.status-off,
.roster-create-cell.status-holiday,
.roster-create-cell.status-sick {
  border-color: rgba(120, 116, 126, 0.18);
  background: rgba(235, 233, 237, 0.86);
  color: #77727d;
}

.roster-create-cell.published {
  border-color: rgba(120, 116, 126, 0.2);
  background: rgba(235, 233, 237, 0.9);
  color: #77727d;
  opacity: 0.86;
}

.roster-create-cell.published strong {
  color: #615d66;
  font-size: 0.82rem;
  font-weight: 860;
  white-space: nowrap;
}

.roster-create-cell.published small {
  color: #858189;
  font-size: 0.68rem;
  font-weight: 820;
}

.roster-create-cell.status-off select,
.roster-create-cell.status-holiday select,
.roster-create-cell.status-sick select {
  color: #6f6a75;
  background: #e6e3e7;
}

.roster-create-cell.invalid small {
  color: var(--brand);
  font-size: 0.68rem;
  font-weight: 820;
}

.roster-create-cell > span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 860;
  text-transform: uppercase;
  white-space: nowrap;
}

.roster-create-cell select,
.roster-create-cell input {
  width: 100%;
  min-width: 0;
  height: 38px;
  box-sizing: border-box;
  border: 1px solid rgba(90, 23, 24, 0.11);
  border-radius: 10px;
  padding: 0 9px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  font-size: 0.86rem;
  font-weight: 760;
  outline: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
}

.roster-create-cell select:focus,
.roster-create-cell input:focus,
.roster-form input:focus,
.roster-form select:focus {
  border-color: rgba(143, 47, 45, 0.34);
  box-shadow: 0 0 0 3px rgba(143, 47, 45, 0.08);
}

.roster-create-times {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  max-height: 132px;
  opacity: 1;
  transform: translateY(0) scale(1);
  overflow: hidden;
  transition:
    max-height 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 180ms ease,
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.roster-create-times.hidden {
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  visibility: hidden;
}

.roster-split-toggle {
  transition:
    max-height 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    min-height 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 160ms ease,
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.roster-split-toggle.hidden {
  max-height: 0;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  transform: translateY(-5px) scale(0.98);
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .roster-create-cell,
  .roster-create-times,
  .roster-split-toggle {
    transition: none;
    transform: none;
  }
}

.roster-create-times label {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.roster-create-times label span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 820;
  white-space: nowrap;
}

.roster-create-times input {
  font-size: 16px;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
}

.roster-create-times input:focus {
  box-shadow: inset 0 0 0 1px rgba(143, 47, 45, 0.28);
}

.roster-split-toggle {
  width: 100%;
  min-height: 30px;
  border-radius: 10px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 0.72rem;
  font-weight: 850;
  white-space: nowrap;
}

.roster-day-pick-list .roster-publish-from-days {
  margin-top: 4px;
  justify-content: center;
  color: #fff;
  background: var(--brand);
  border-color: transparent;
}

.roster-day-pick-list .roster-publish-from-days:disabled {
  color: var(--muted);
  background: #eee8ec;
}

.roster-day-pick-list strong,
.roster-day-pick-list span {
  display: block;
}

.roster-day-pick-list strong {
  font-size: 0.92rem;
  font-weight: 880;
}

.roster-day-pick-list span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 760;
}

.roster-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.roster-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
}

.roster-form > label:not(.time-field),
.roster-add-button {
  grid-column: 1 / -1;
}

.roster-status-picker {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.roster-status-picker .pill {
  width: 100%;
  height: 38px;
  padding: 0 8px;
  font-size: 0.76rem;
  white-space: nowrap;
}

.roster-day-note {
  grid-column: 1 / -1;
}

.roster-form input,
.roster-form select {
  width: 100%;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 10px;
  color: var(--ink);
  background: #faf8fb;
  outline: none;
}

.locked-field {
  display: grid;
  gap: 4px;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #faf8fb;
}

.locked-field span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 780;
}

.locked-field strong {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 820;
}

.roster-add-button {
  width: 100%;
  height: 44px;
  margin-top: 2px;
}

.roster-editor-actions {
  margin-top: 12px;
}

.roster-editor-list {
  display: grid;
  gap: 0;
  margin-top: 12px;
  border-top: 1px solid #f0edf2;
}

.roster-editor-shift {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f0edf2;
}

.roster-editor-shift:last-child {
  border-bottom: 0;
}

.roster-editor-shift span {
  min-width: 0;
}

.roster-editor-shift strong,
.roster-editor-shift small {
  display: block;
}

.roster-editor-shift strong {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 820;
}

.roster-editor-shift small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-editor-shift button {
  padding: 7px 9px;
  border-radius: 10px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 0.74rem;
  font-weight: 820;
}

.roster-group {
  margin: 8px 20px 14px;
  padding: 13px 0 4px;
  border: 1px solid rgba(90, 23, 24, 0.11);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 14px 36px rgba(32, 20, 36, 0.075);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

.roster-group.current-day {
  border-color: var(--brand-2);
  box-shadow: 0 16px 40px rgba(143, 47, 45, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.72)),
    radial-gradient(circle at 0% 0%, rgba(143, 47, 45, 0.14), transparent 42%);
}

.roster-group.past-day {
  position: relative;
}

.roster-group.past-day::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: rgba(112, 108, 116, 0.14);
}

.roster-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px 12px;
  border-bottom: 1px solid rgba(90, 23, 24, 0.08);
}

.roster-group-head span {
  min-width: 0;
}

.roster-group h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.03rem;
  font-weight: 900;
}

.roster-group p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.roster-group-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.roster-group-actions button {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(90, 23, 24, 0.16);
  font-size: 0.72rem;
  font-weight: 850;
}

.roster-group-actions button:hover,
.roster-group-actions button:active {
  color: var(--brand);
  background: rgba(143, 47, 45, 0.09);
}

.roster-group-actions > strong,
.roster-group-head > strong {
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.09);
  font-size: 0.7rem;
  font-weight: 850;
  white-space: nowrap;
}

.roster-stack {
  padding: 7px 10px 8px;
}

.info-card, .mood-card, .recipe-card {
  padding: 14px;
  border: 1px solid rgba(90, 23, 24, 0.1);
  border-radius: 16px;
  background: var(--card-glass);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
}

.info-card span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.info-card strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
}

.roster-shift-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  margin-bottom: 7px;
  border: 1px solid rgba(90, 23, 24, 0.06);
  border-radius: 17px;
  background: var(--card-glass);
  border-color: rgba(90, 23, 24, 0.1);
  box-shadow: var(--shadow-soft);
  box-shadow: 0 8px 20px rgba(32, 20, 36, 0.035);
}

.roster-shift-card:last-child {
  margin-bottom: 0;
}

.roster-shift-person {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.roster-shift-meta {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-left: 54px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.roster-shift-meta small {
  max-width: 100%;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-time {
  grid-column: 2;
  grid-row: 1;
  min-width: 82px;
  padding: 8px 9px;
  border-radius: 12px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.075);
  text-align: center;
  font-size: 0.82rem;
  font-weight: 850;
  white-space: nowrap;
}

.status-off .roster-time,
.status-holiday .roster-time,
.status-sick .roster-time {
  color: var(--muted);
  background: #f2edf0;
}

.roster-shift-card.status-off,
.roster-shift-card.status-holiday,
.roster-shift-card.status-sick {
  opacity: 0.72;
  filter: grayscale(1);
}

.roster-badge {
  display: inline-grid;
  place-items: center;
  width: max-content;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 0.66rem;
  font-weight: 820;
  line-height: 1;
  white-space: nowrap;
}

.role-badge {
  display: inline-grid;
  place-items: center;
  max-width: 122px;
  padding: 6px 9px;
  border-radius: 999px;
  color: #272127;
  background: #eee9ed;
  font-size: 0.68rem;
  font-weight: 840;
  line-height: 1.05;
  text-align: center;
}

.role-owner {
  color: #4a1719;
  background: #f2d6d6;
}

.role-restaurant-manager {
  color: #174b3c;
  background: #d9eee7;
}

.role-head-chef {
  color: #4a2b0b;
  background: #f2dfc4;
}

.role-sous-chef {
  color: #2c3e17;
  background: #e2edcf;
}

.role-supervisor {
  color: #213d64;
  background: #dce8f6;
}

.role-bartender {
  color: #4a2450;
  background: #eadcf0;
}

.role-waiter,
.role-waitress {
  color: #4c3522;
  background: #eee1d5;
}

.team-manager-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 4px;
}

.team-manager-tools .pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.team-manager-tools svg {
  width: 16px;
  height: 16px;
}

.team-invite-form {
  display: grid;
  gap: 10px;
  padding: 14px 20px 8px;
  border-bottom: 1px solid #f0edf2;
}

.team-invite-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 760;
}

.team-invite-form input,
.team-invite-form select,
.team-edit-actions select {
  width: 100%;
  height: 42px;
  border: 1px solid #ebe5ec;
  border-radius: 13px;
  padding: 0 11px;
  color: var(--ink);
  background: #fbfafb;
  font: inherit;
  outline: none;
}

.team-invite-form input:focus,
.team-invite-form select:focus,
.team-edit-actions select:focus {
  border-color: rgba(143, 47, 45, 0.42);
  box-shadow: 0 0 0 4px rgba(143, 47, 45, 0.1);
}

.team-invite-form button {
  height: 44px;
  border-radius: 14px;
  color: #fff;
  background: var(--brand-2);
  font-weight: 840;
}

.pending-invites {
  padding: 14px 20px 4px;
  border-bottom: 1px solid #f0edf2;
}

.pending-invites h2 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 0.92rem;
}

.pending-invites article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
}

.pending-invites strong,
.pending-invites small {
  display: block;
}

.pending-invites strong {
  color: var(--ink);
}

.pending-invites small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.76rem;
}

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

.pending-invites em,
.invite-copy-button {
  color: var(--brand);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 820;
}

.invite-copy-button {
  display: grid;
  justify-items: end;
  max-width: min(44vw, 240px);
  padding: 7px 10px;
  border: 0;
  border-radius: 14px;
  background: rgba(90, 23, 24, 0.08);
  cursor: pointer;
}

.invite-copy-button strong {
  color: var(--brand);
  font-size: 0.72rem;
  line-height: 1;
}

.invite-copy-button small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(90, 23, 24, 0.62);
  font-size: 0.62rem;
}

.invite-copy-button:hover,
.invite-copy-button:active {
  background: rgba(143, 47, 45, 0.16);
}

.invite-cancel-button {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(90, 23, 24, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: var(--brand);
  font-size: 1.15rem;
  font-weight: 820;
  line-height: 1;
  cursor: pointer;
}

.invite-cancel-button:hover,
.invite-cancel-button:active {
  background: rgba(143, 47, 45, 0.16);
}

.invite-creation-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: max(24px, var(--safe-top)) 24px max(24px, var(--safe-bottom));
  background: rgba(18, 7, 10, 0.38);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.invite-creation-modal {
  width: min(100%, 350px);
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 30px 24px 24px;
  border: 2px solid var(--brand);
  border-radius: 24px;
  background: rgba(255, 253, 253, 0.96);
  box-shadow: 0 30px 80px rgba(46, 10, 14, 0.28);
  text-align: center;
}

.invite-creation-modal p,
.invite-creation-modal h2,
.invite-creation-modal small {
  margin: 0;
}

.invite-creation-modal p {
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 880;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.invite-creation-modal h2 {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 1.08rem;
  letter-spacing: 0;
}

.invite-creation-modal small {
  max-width: 270px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.invite-creation-loader {
  width: 42px;
  height: 42px;
  display: block;
  border: 3px solid rgba(90, 23, 24, 0.14);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: invite-loader-spin 0.8s linear infinite;
}

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

.invite-code-value {
  width: 100%;
  padding: 15px 14px;
  border-radius: 16px;
  color: #fff;
  background: var(--brand);
  font-size: 1.55rem;
  font-weight: 920;
  letter-spacing: 0.08em;
}

.invite-code-copy,
.invite-code-close {
  width: 100%;
  min-height: 46px;
  border-radius: 15px;
  font-weight: 860;
}

.invite-code-copy {
  color: #fff;
  background: var(--brand-2);
}

.invite-code-close {
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
}

.invite-code-login-card input[name="code"] {
  font-weight: 880;
  letter-spacing: 0.08em;
}

.invite-code-switch {
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}

.login-entry-options {
  display: grid;
  gap: 8px;
}

.login-entry-options .login-link {
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
}

.owner-account-switch {
  border: 1px solid rgba(112, 30, 31, 0.72);
  color: #fff;
  background: rgba(112, 30, 31, 0.18);
}

.owner-account-switch:hover,
.owner-account-switch:active {
  background: rgba(112, 30, 31, 0.34);
}

.team-edit-actions {
  display: grid;
  justify-items: end;
  gap: 7px;
  width: 156px;
}

.team-edit-actions select {
  height: 34px;
  font-size: 0.76rem;
}

.team-edit-actions button {
  color: #8f2f2d;
  background: rgba(143, 47, 45, 0.08);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 0.72rem;
  font-weight: 830;
}

.team-edit-actions button:hover,
.team-edit-actions button:active {
  background: rgba(143, 47, 45, 0.16);
}

.team-directory-row.is-removing {
  pointer-events: none;
  animation: team-member-removing 320ms ease both;
}

@keyframes team-member-removing {
  to {
    opacity: 0;
    transform: translateX(18px) scale(0.98);
  }
}

.team-joined-message {
  width: min(86%, 390px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 8px auto;
  padding: 10px 14px;
  border: 1px solid rgba(143, 47, 45, 0.2);
  border-radius: 14px;
  color: var(--brand);
  background: rgba(143, 47, 45, 0.07);
  text-align: center;
}

.team-joined-message > span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.team-joined-message svg {
  width: 19px;
  height: 19px;
}

.team-joined-message p {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
}

.team-locked-note {
  display: grid;
  justify-items: end;
  gap: 3px;
  color: var(--muted);
  text-align: right;
}

.team-locked-note strong {
  color: #7a747c;
  font-size: 0.78rem;
}

.team-locked-note small {
  font-size: 0.68rem;
  white-space: nowrap;
}

.mood-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.metric {
  border-radius: 18px;
  background: #f5f2f6;
  padding: 12px 8px;
  text-align: center;
}

.metric strong {
  display: block;
  color: var(--brand-2);
  font-size: 1.2rem;
}

.metric span {
  color: var(--muted);
  font-size: 0.72rem;
}

.placeholder-module {
  min-height: 58vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 24px 34px 120px;
  text-align: center;
}

.placeholder-module span {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  color: var(--brand);
  border-radius: 24px;
  background: rgba(90, 23, 24, 0.08);
}

.placeholder-module svg {
  width: 34px;
  height: 34px;
}

.placeholder-module h2 {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: 1.35rem;
}

.placeholder-module p {
  max-width: 320px;
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.38;
}

.prep-controls {
  display: grid;
  gap: 10px;
  padding: 16px 20px 8px;
}

.prep-control-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.prep-control-row::-webkit-scrollbar { display: none; }

.prep-control-row.compact .pill {
  height: 36px;
  padding: 0 18px;
}

.prep-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid #f0edf2;
  border-bottom: 1px solid #f0edf2;
}

.prep-day-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(78px, max-content);
  gap: 9px;
  overflow-x: auto;
  padding: 16px 20px 8px;
  scrollbar-width: none;
}

.prep-day-strip::-webkit-scrollbar { display: none; }

.prep-day-strip button {
  min-width: 78px;
  min-height: 50px;
  padding: 10px 11px;
  display: grid;
  gap: 3px;
  justify-items: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 20px rgba(32, 20, 36, 0.035);
}

.prep-day-strip button:focus-visible {
  outline: 3px solid rgba(143, 47, 45, 0.34);
  outline-offset: 2px;
}

.prep-day-strip button.current {
  border-color: rgba(90, 23, 24, 0.26);
}

.prep-day-strip button.past {
  color: rgba(45, 39, 48, 0.52);
  background: linear-gradient(rgba(120, 118, 122, 0.12), rgba(120, 118, 122, 0.12)), #fff;
  box-shadow: none;
}

.prep-day-strip button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, var(--brand-2), var(--brand));
  box-shadow: 0 12px 26px rgba(90, 23, 24, 0.22);
}

.prep-day-strip button strong,
.prep-day-strip button span {
  display: block;
  line-height: 1;
}

.prep-day-strip button strong {
  font-size: 0.82rem;
  font-weight: 850;
}

.prep-day-strip button span {
  font-size: 0.68rem;
  font-weight: 760;
  opacity: 0.74;
}

.prep-day-hero {
  margin: 8px 20px 6px;
  padding: 14px;
  display: grid;
  gap: 13px;
  border: 1px solid rgba(90, 23, 24, 0.1);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(143, 47, 45, 0.08), rgba(255, 255, 255, 0.82) 58%),
    rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 34px rgba(32, 20, 36, 0.065);
}

.prep-day-hero span,
.prep-day-hero h2 {
  margin: 0;
}

.prep-day-hero > div:first-child > span {
  display: block;
  color: var(--brand);
  font-size: 0.68rem;
  font-weight: 880;
  text-transform: uppercase;
}

.prep-day-hero h2 {
  margin-top: 5px;
  color: var(--ink);
  font-size: 1.22rem;
  font-weight: 880;
}

.prep-day-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.prep-day-stats span {
  min-width: 0;
  padding: 9px 8px;
  display: grid;
  justify-items: center;
  gap: 3px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(90, 23, 24, 0.07);
}

.prep-day-stats strong,
.prep-day-stats small {
  display: block;
  line-height: 1;
}

.prep-day-stats strong {
  color: var(--brand);
  font-size: 1rem;
  font-weight: 900;
}

.prep-day-stats small {
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 800;
}

.prep-summary span {
  color: var(--muted);
  font-size: 0.78rem;
}

.prep-summary strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 1.25rem;
}

.prep-sync-state {
  margin: 10px 20px 0;
  padding: 8px 11px;
  border: 1px solid rgba(42, 118, 77, 0.16);
  border-radius: 12px;
  color: #2a764d;
  background: rgba(42, 118, 77, 0.07);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.25;
}

.prep-sync-state.stale {
  color: var(--brand);
  border-color: rgba(90, 23, 24, 0.16);
  background: rgba(90, 23, 24, 0.07);
}

.prep-ring {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 860;
  background:
    radial-gradient(circle at center, #fff 58%, transparent 60%),
    conic-gradient(var(--brand-2) var(--prep-progress), rgba(90, 23, 24, 0.12) 0);
}

.prep-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 20px 8px;
}

.prep-actions .pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.prep-add-pill {
  min-width: 112px;
  min-height: 44px;
  justify-content: center;
  box-shadow: 0 12px 26px rgba(90, 23, 24, 0.16);
}

.prep-actions .pill:disabled {
  cursor: default;
  opacity: 0.45;
  color: var(--muted);
  background: #f2edf0;
}

.prep-actions > span {
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.prep-add-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin: 8px 20px 10px;
  padding: 14px;
  border: 1px solid rgba(90, 23, 24, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 36px rgba(32, 20, 36, 0.08);
}

.prep-form-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 880;
}

.prep-form-title span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: var(--brand);
}

.prep-form-title svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.prep-add-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 760;
}

.prep-add-form input,
.prep-add-form select {
  width: 100%;
  height: 44px;
  border: 1px solid #ebe5ec;
  border-radius: 15px;
  padding: 0 11px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  outline: none;
}

.prep-items-field {
  grid-column: 1 / -1;
}

.prep-item-inputs {
  display: grid;
  gap: 6px;
}

.prep-draft-items {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 100%;
  overflow: visible;
}

.prep-draft-item {
  width: max-content;
  max-width: 180px;
  min-width: 0;
  display: inline-grid;
  position: relative;
  grid-template-columns: minmax(0, auto) 44px;
  align-items: center;
  min-height: 44px;
  padding: 0;
  padding-left: 9px;
  border-radius: 8px;
  flex: 0 1 auto;
  color: var(--ink);
  background: rgba(90, 23, 24, 0.06);
  overflow: hidden;
  isolation: isolate;
}

.prep-draft-item::after {
  content: none;
}

.prep-draft-item strong {
  min-width: 0;
  max-width: 132px;
  min-height: 44px;
  padding-right: 7px;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
  display: grid;
  place-items: center start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prep-draft-item button {
  appearance: none;
  align-self: stretch;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  display: grid;
  place-items: center;
  border-radius: 0;
  color: #fff !important;
  background: var(--brand-2) !important;
  font-size: 0;
  font-weight: 900;
  line-height: 1;
  padding: 0;
  text-align: center;
  transform: none !important;
  overflow: hidden;
}

.prep-draft-item button svg {
  width: 10px;
  height: 10px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.prep-draft-item button:hover,
.prep-draft-item button:active {
  color: #fff !important;
  background: var(--brand) !important;
  transform: none !important;
}

.prep-draft-item button:focus-visible {
  outline: 3px solid rgba(143, 47, 45, 0.34);
  outline-offset: -3px;
}

.prep-add-form input:focus,
.prep-add-form select:focus {
  border-color: rgba(143, 47, 45, 0.42);
  box-shadow: 0 0 0 4px rgba(143, 47, 45, 0.1);
}

.prep-add-form button {
  grid-column: 1 / -1;
  height: 44px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg, var(--brand-2), var(--brand));
  font-weight: 840;
}

.prep-add-form .prep-draft-item button {
  grid-column: auto;
  align-self: stretch;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  display: grid;
  place-items: center;
  border-radius: 0;
  padding: 0;
  color: #fff;
  background: var(--brand-2);
  transform: none;
}

.prep-add-form .prep-draft-item button:hover,
.prep-add-form .prep-draft-item button:active {
  color: #fff;
  background: var(--brand);
  transform: none;
}

.prep-past-note {
  margin: 0;
  padding: 6px 20px 12px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 720;
}

.prep-groups {
  display: grid;
  gap: 6px;
  padding-bottom: 116px;
}

.prep-lists {
  display: grid;
  gap: 12px;
  padding: 8px 20px 116px;
}

.prep-empty-state {
  justify-items: center;
  padding: 24px 18px;
}

.prep-empty-state > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
}

.prep-empty-state > span svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.prep-list-card {
  padding: 12px;
  border: 1px solid rgba(90, 23, 24, 0.09);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 30px rgba(32, 20, 36, 0.055);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.prep-list-card:hover {
  transform: translateY(-1px);
  border-color: rgba(143, 47, 45, 0.18);
  background: rgba(143, 47, 45, 0.075);
  box-shadow: 0 16px 38px rgba(32, 20, 36, 0.08);
}

.prep-list-card:active {
  transform: translateY(0);
  border-color: rgba(143, 47, 45, 0.22);
  background: rgba(143, 47, 45, 0.12);
}

.prep-list-card:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px rgba(143, 47, 45, 0.12), 0 16px 38px rgba(32, 20, 36, 0.08);
}

.prep-list-head {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  pointer-events: none;
}

.prep-task-list.detail {
  cursor: default;
}

.prep-list-head h2,
.prep-list-head p {
  margin: 0;
}

.prep-list-title {
  min-width: 0;
}

.prep-list-head h2 {
  color: var(--ink);
  font-size: 1.08rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prep-list-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prep-list-score {
  min-width: 50px;
  padding: 8px 9px;
  display: grid;
  justify-items: center;
  gap: 2px;
  border-radius: 15px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.07);
}

.prep-list-score strong,
.prep-list-score small {
  display: block;
  line-height: 1;
}

.prep-list-score strong {
  font-size: 1rem;
  font-weight: 900;
}

.prep-list-score small {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 830;
}

.prep-list-progress {
  height: 5px;
  margin: 12px 0 0 62px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(90, 23, 24, 0.08);
}

.prep-list-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-2);
}

.prep-list-progress.detail {
  margin: 12px 0 0;
}

.prep-list-preview {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding-left: 62px;
}

.prep-list-preview span {
  display: grid;
  gap: 3px;
  padding: 9px 11px;
  border-radius: 15px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.055);
}

.prep-list-preview strong,
.prep-list-preview small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prep-list-preview strong {
  color: var(--brand);
  font-size: 0.86rem;
}

.prep-list-preview small {
  color: var(--muted);
  font-size: 0.72rem;
}

.prep-group h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 16px 20px 6px;
  color: var(--brand);
  font-size: 0.86rem;
}

.prep-group h2 span {
  color: var(--muted);
  font-size: 0.76rem;
}

.prep-task-list {
  display: grid;
  padding: 0 20px;
}

.prep-task-list.detail {
  gap: 0;
  margin-top: 12px;
  padding: 0;
  border-top: 1px solid rgba(90, 23, 24, 0.08);
}

.prep-detail-shell {
  display: grid;
  gap: 12px;
  padding: 14px 20px 116px;
}

.prep-detail-back {
  justify-self: start;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 0.78rem;
  font-weight: 850;
}

.prep-detail-back:hover,
.prep-detail-back:active {
  color: #fff;
  background: var(--brand);
}

.prep-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(90, 23, 24, 0.16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 0%, rgba(143, 47, 45, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 34px rgba(32, 20, 36, 0.07);
}

.prep-detail-head span,
.prep-detail-head h2,
.prep-detail-head p {
  display: block;
  margin: 0;
  min-width: 0;
}

.prep-detail-head span {
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 880;
  text-transform: uppercase;
}

.prep-detail-head h2 {
  margin-top: 5px;
  color: var(--ink);
  font-size: 1.34rem;
  line-height: 1.05;
}

.prep-detail-head p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.25;
}

.prep-detail-score {
  min-width: 58px;
  padding: 9px 10px;
  display: grid;
  justify-items: center;
  gap: 2px;
  border-radius: 16px;
  color: #fff;
  background: var(--brand);
}

.prep-detail-score strong,
.prep-detail-score small {
  display: block;
  line-height: 1;
}

.prep-detail-score strong {
  font-size: 1.08rem;
  font-weight: 920;
}

.prep-detail-score small {
  font-size: 0.66rem;
  font-weight: 850;
  opacity: 0.82;
}

.prep-detail-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.prep-detail-actions button {
  min-height: 44px;
  border-radius: 13px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 0.8rem;
  font-weight: 860;
}

.prep-detail-actions button.danger {
  color: #fff;
  background: var(--brand);
}

.prep-detail-actions button:hover,
.prep-detail-actions button:active {
  color: #fff;
  background: var(--brand-2);
}

.prep-detail-section {
  display: grid;
  gap: 7px;
}

.prep-detail-section h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  color: var(--brand);
  font-size: 0.84rem;
}

.prep-detail-section h3 span {
  color: var(--muted);
  font-size: 0.76rem;
}

.prep-detail-items {
  display: grid;
  gap: 0;
  padding: 0 12px;
  border: 1px solid rgba(90, 23, 24, 0.11);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 30px rgba(32, 20, 36, 0.055);
}

.prep-detail-items.completed {
  background: rgba(245, 244, 246, 0.9);
}

.prep-task {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 13px 0;
  border-bottom: 1px solid rgba(90, 23, 24, 0.07);
}

.prep-task.done {
  opacity: 0.68;
}

.prep-check {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(90, 23, 24, 0.1);
  border: 1px solid rgba(90, 23, 24, 0.2);
  font-size: 0.86rem;
  font-weight: 900;
}

.prep-detail-back:focus-visible,
.prep-detail-actions button:focus-visible,
.prep-check:focus-visible {
  outline: 3px solid rgba(143, 47, 45, 0.34);
  outline-offset: 2px;
}

.prep-check.checked {
  background: var(--brand-2);
  border-color: transparent;
}

.prep-task-main {
  min-width: 0;
  flex: 1;
}

.prep-task-main strong,
.prep-task-main small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prep-task-main strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.prep-task-main small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.76rem;
}

.prep-assignee {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  max-width: 118px;
}

.avatar.tiny {
  width: 24px;
  height: 24px;
  border-radius: 8px;
}

.avatar.tiny .status-dot {
  display: none;
}

.prep-assignee small {
  color: var(--muted);
  font-size: 0.68rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prep-empty {
  margin: 0;
  padding: 12px 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.personal-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px 12px;
  position: relative;
  z-index: 12;
}

.personal-hero > .avatar {
  border: 2px solid var(--brand);
  box-shadow: 0 12px 26px rgba(90, 23, 24, 0.18);
}

.personal-hero p,
.personal-hero h2,
.personal-hero span {
  margin: 0;
}

.personal-hero p {
  color: var(--brand);
  font-size: 0.74rem;
  font-weight: 850;
  text-transform: uppercase;
}

.personal-hero h2 {
  margin-top: 3px;
  color: var(--ink);
  font-size: 1.38rem;
  line-height: 1.08;
}

.personal-hero span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.88rem;
}

.personal-payslips-menu {
  margin-left: auto;
  align-self: flex-start;
  position: relative;
  z-index: 18;
  transform: translateY(14px);
}

.personal-notifications-button {
  width: 38px;
  height: 38px;
  align-self: flex-start;
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid rgba(90, 23, 24, 0.18);
  border-radius: 14px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.075);
  transform: translateY(12px);
}

.personal-notifications-button span,
.personal-notifications-button svg {
  width: 18px;
  height: 18px;
}

.personal-notifications-button strong {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: 0.62rem;
}

.personal-notifications-button.active,
.personal-notifications-button:hover,
.personal-notifications-button:active {
  color: #fff;
  background: var(--brand);
}

.personal-payslips-menu summary {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(90, 23, 24, 0.18);
  border-radius: 12px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.075);
  font-size: 0.76rem;
  font-weight: 880;
  list-style: none;
  cursor: pointer;
}

.personal-payslips-menu summary::-webkit-details-marker {
  display: none;
}

.personal-payslips-menu[open] summary,
.personal-payslips-menu summary:hover,
.personal-payslips-menu summary:active {
  color: #fff;
  background: var(--brand);
}

.personal-payslips-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  width: 238px;
  display: grid;
  gap: 0;
  padding: 8px 10px;
  border: 1px solid rgba(90, 23, 24, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 36px rgba(32, 20, 36, 0.16);
}

.personal-payslips-popover article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #f0edf2;
}

.personal-payslips-popover article:last-child {
  border-bottom: 0;
}

.personal-payslips-popover strong,
.personal-payslips-popover small {
  display: block;
}

.personal-payslips-popover strong {
  color: var(--ink);
  font-size: 0.82rem;
}

.personal-payslips-popover small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.7rem;
}

.personal-payslips-popover button {
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 0.7rem;
  font-weight: 850;
}

.personal-request-updates {
  display: grid;
  gap: 8px;
  padding: 0 20px 10px;
}

.personal-notification-center {
  display: grid;
  gap: 8px;
  margin: 0 20px 10px;
  padding: 12px;
  border: 1px solid rgba(90, 23, 24, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 32px rgba(32, 20, 36, 0.08);
}

.personal-notification-center article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(90, 23, 24, 0.06);
}

.personal-notification-center > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.personal-notification-center article > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--brand);
  background: rgba(255, 255, 255, 0.72);
}

.personal-notification-center button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-weight: 850;
}

.personal-notification-center button:hover,
.personal-notification-center button:active {
  color: #fff;
  background: var(--brand);
}

.personal-request-updates article {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(90, 23, 24, 0.22);
  border-radius: 18px;
  background: rgba(90, 23, 24, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.personal-request-updates article.approved {
  background: rgba(90, 23, 24, 0.09);
}

.personal-request-updates article.declined {
  background: rgba(120, 120, 120, 0.1);
  border-color: rgba(120, 120, 120, 0.22);
}

.personal-request-updates span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--brand);
  background: rgba(255, 255, 255, 0.72);
}

.personal-request-updates svg {
  width: 18px;
  height: 18px;
}

.personal-request-updates button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 1rem;
  line-height: 1;
  font-weight: 850;
}

.personal-request-updates button:hover,
.personal-request-updates button:active {
  color: #fff;
  background: var(--brand);
}

.personal-request-updates strong,
.personal-request-updates small {
  display: block;
  min-width: 0;
}

.personal-request-updates strong {
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.1;
}

.personal-request-updates small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.personal-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  padding: 8px 20px 16px;
}

.personal-summary article,
.personal-summary-card {
  min-width: 0;
  min-height: 104px;
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: space-between;
  padding: 12px;
  border: 1px solid rgba(90, 23, 24, 0.22);
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 6%, rgba(255, 255, 255, 0.16), transparent 30%),
    linear-gradient(145deg, #2b090a 0%, #5a1718 100%);
  box-shadow: 0 18px 34px rgba(90, 23, 24, 0.24);
  text-align: left;
}

.personal-summary-card:hover,
.personal-summary-card:active,
.personal-summary-card.active {
  border-color: rgba(255, 255, 255, 0.34);
  background:
    radial-gradient(circle at 88% 6%, rgba(255, 255, 255, 0.2), transparent 30%),
    linear-gradient(145deg, #3b0e10 0%, #7a2223 100%);
}

.summary-card-action {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 9px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.13);
  font-size: 1rem;
  font-weight: 880;
  line-height: 1;
}

.hours-grid article {
  min-width: 0;
  padding: 12px 10px;
  border: 1px solid #f0edf2;
  border-radius: 16px;
  background: #fbfafb;
}

.personal-summary span {
  display: inline-flex;
  width: fit-content;
  height: auto;
  margin-bottom: 8px;
  color: #fff;
  border-radius: 0;
  background: transparent;
}

.personal-summary svg,
.personal-panel-head svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.personal-summary strong,
.hours-grid strong {
  display: block;
  color: #fff;
  font-size: 1rem;
  line-height: 1.05;
  white-space: nowrap;
}

.personal-summary strong {
  margin-top: 5px;
  font-size: 1.28rem;
  letter-spacing: 0;
}

.personal-summary small,
.hours-grid small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.15;
}

.personal-summary small {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.64rem;
  font-weight: 850;
}

.personal-inline-roster {
  margin: -4px 20px 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(90, 23, 24, 0.12);
  border-bottom: 1px solid rgba(90, 23, 24, 0.08);
}

.personal-inline-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}

.personal-inline-head span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 11px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
}

.personal-inline-head svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.personal-inline-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
}

.hours-grid strong {
  color: var(--ink);
}

.personal-stack {
  display: grid;
  gap: 14px;
  padding: 0 20px 112px;
}

.personal-panel {
  padding: 16px 0;
  border-top: 1px solid #f0edf2;
}

.personal-panel-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}

.personal-panel-head span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--brand);
  border-radius: 50%;
  background: rgba(90, 23, 24, 0.08);
}

.personal-panel-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
}

.personal-panel-note {
  margin: -4px 0 10px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.personal-panel textarea {
  width: 100%;
  min-height: 132px;
  resize: vertical;
  padding: 13px 14px;
  border: 1px solid #ebe5ec;
  border-radius: 16px;
  color: var(--ink);
  background: #fbfafb;
  font: inherit;
  line-height: 1.35;
  outline: none;
}

.personal-panel textarea:focus {
  border-color: rgba(143, 47, 45, 0.42);
  box-shadow: 0 0 0 4px rgba(143, 47, 45, 0.1);
}

.personal-panel-action {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border: 1px solid rgba(90, 23, 24, 0.14);
  border-radius: 15px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.055);
}

.personal-panel-action:hover,
.personal-panel-action:active {
  background: var(--brand-soft);
}

.personal-panel-action strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.personal-panel-action span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--brand);
  font-size: 1.1rem;
}

.personal-panel-mini {
  margin-left: auto;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 0.72rem;
  font-weight: 900;
}

.personal-panel-mini:hover,
.personal-panel-mini:active {
  color: #fff;
  background: var(--brand);
}

.personal-panel-arrow {
  width: 30px;
  height: 30px;
  margin-left: auto;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 1rem;
  font-weight: 900;
  transition: transform 0.18s ease, background 0.18s ease;
}

.personal-panel-arrow.open {
  transform: rotate(180deg);
}

.personal-panel-arrow:hover,
.personal-panel-arrow:active {
  color: #fff;
  background: var(--brand);
}

.personal-panel-arrow + .personal-panel-mini {
  margin-left: 0;
}

.personal-folder-preview {
  min-height: 46px;
  padding: 0 12px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  background: rgba(90, 23, 24, 0.06);
  text-align: left;
}

.personal-folder-preview span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 760;
}

.personal-folder-preview strong {
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 900;
}

.personal-recipe-form {
  display: grid;
  gap: 8px;
}

.personal-recipe-form input,
.personal-recipe-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(90, 23, 24, 0.14);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  font: inherit;
}

.personal-recipe-form input {
  min-height: 40px;
  padding: 0 12px;
}

.personal-recipe-form textarea {
  min-height: 78px;
  resize: vertical;
  padding: 11px 12px;
}

.personal-recipe-form button,
.personal-recipe-actions button {
  min-height: 38px;
  border-radius: 14px;
  color: #fff;
  background: var(--brand);
  font-weight: 900;
}

.personal-recipe-list {
  display: grid;
  gap: 10px;
}

.personal-recipe-list article {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(90, 23, 24, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.68);
}

.personal-recipe-delete {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
}

.personal-recipe-delete svg {
  width: 17px;
  height: 17px;
}

.personal-recipe-delete:hover,
.personal-recipe-delete:active {
  color: #fff;
  background: var(--brand);
}

.personal-recipe-main strong,
.personal-recipe-main small {
  display: block;
}

.personal-recipe-main strong {
  padding-right: 38px;
  color: var(--ink);
  font-size: 0.92rem;
}

.personal-recipe-main small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.74rem;
}

.personal-recipe-main p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: pre-wrap;
}

.personal-recipe-main b {
  display: block;
  margin-bottom: 2px;
  color: var(--brand);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.personal-recipe-actions {
  display: grid;
  gap: 8px;
  align-items: stretch;
}

.personal-recipe-share {
  display: grid;
  gap: 8px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(90, 23, 24, 0.06);
}

.personal-recipe-share-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.personal-recipe-share-types button {
  min-height: 34px;
  padding: 0 8px;
  color: var(--brand);
  background: rgba(255, 255, 255, 0.74);
  font-size: 0.72rem;
}

.personal-recipe-share-types button.active {
  color: #fff;
  background: var(--brand);
}

.personal-recipe-share-list {
  display: grid;
  gap: 6px;
}

.personal-recipe-share-list button {
  min-height: 42px;
  padding: 8px 10px;
  display: grid;
  gap: 2px;
  text-align: left;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
}

.personal-recipe-share-list button span,
.personal-recipe-share-list button small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personal-recipe-share-list button small,
.personal-recipe-share-list p {
  color: var(--muted);
  font-size: 0.72rem;
}

.personal-recipe-share-list p {
  margin: 0;
  padding: 8px 4px 2px;
}

.recipe-share-card {
  width: min(100%, 390px);
  margin: 4px auto;
  padding: 14px;
  border: 3px solid rgba(90, 23, 24, 0.5);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 245, 247, 0.92));
  box-shadow: 0 16px 38px rgba(90, 23, 24, 0.14);
}

.recipe-share-kicker {
  display: inline-grid;
  place-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: 0.68rem;
  font-weight: 850;
}

.recipe-share-card h2 {
  margin: 9px 0 10px;
  color: var(--ink);
  font-size: 1.04rem;
  font-weight: 880;
}

.recipe-share-author {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px;
  border-radius: 16px;
  background: rgba(90, 23, 24, 0.07);
}

.recipe-share-author span {
  min-width: 0;
}

.recipe-share-author strong,
.recipe-share-author small {
  display: block;
}

.recipe-share-author strong {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 860;
}

.recipe-share-author small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.74rem;
}

.recipe-share-sections {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.recipe-share-sections section {
  padding: 10px 0;
  border-top: 1px solid rgba(90, 23, 24, 0.1);
}

.recipe-share-sections strong {
  display: block;
  color: var(--brand);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.recipe-share-sections p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
  white-space: pre-wrap;
}

.recipe-share-card time {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: right;
}

.media-bubble {
  padding: 8px;
}

.media-bubble img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-height: none;
  object-fit: cover;
  border-radius: 14px;
}

.media-open-button {
  position: relative;
  width: 100%;
  min-width: 180px;
  aspect-ratio: 4 / 3;
  display: block;
  padding: 0;
  border-radius: 14px;
  background: rgba(90, 23, 24, 0.06);
  overflow: hidden;
  contain: layout paint;
}

.media-open-button.is-loading {
  cursor: default;
}

.secure-media-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 160ms ease;
}

.media-open-button.is-ready .secure-media-image {
  opacity: 1;
}

.media-open-button.is-ready .secure-media-loading {
  display: none;
}

.media-open-button.media-load-failed .secure-media-loading {
  color: #6f6870;
  background: rgba(95, 89, 98, 0.1);
}

.media-open-button.media-state-retryable {
  cursor: pointer;
  outline-offset: 3px;
}

.media-open-button.media-state-failed .secure-media-loading,
.media-open-button.media-state-unavailable .secure-media-loading {
  color: #6f6870;
  background: rgba(95, 89, 98, 0.1);
}

.media-open-button.media-state-processing .secure-media-loading {
  color: var(--brand);
}

.secure-media-loading {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.06);
}

.secure-media-loading svg {
  width: 26px;
  height: 26px;
}

.secure-media-loading small {
  font-size: 0.72rem;
  font-weight: 800;
}

@keyframes private-media-skeleton {
  from { background-position: 100% 0; }
  to { background-position: -120% 0; }
}

.settings-media-item.is-loading {
  cursor: default;
}

.settings-media-item.is-loading .secure-media-loading {
  aspect-ratio: 1;
}

.media-caption {
  margin: 7px 2px 0;
  color: inherit;
  font-size: 0.94rem;
  line-height: 1.22;
}

.media-meta {
  display: flex;
  justify-content: flex-end;
}

.voice-bubble {
  width: min(220px, calc(100vw - 92px));
  max-width: min(76%, 336px);
  min-height: 0;
  display: block;
  padding: 9px 12px;
  border-radius: 18px;
}

.voice-bubble.has-reply {
  width: min(248px, calc(100vw - 92px));
  padding: 9px 12px;
  border-radius: 18px;
}

.voice-bubble.has-reply .reply-quote {
  margin: 0;
  padding: 6px 8px;
  border-left-width: 2px;
  border-radius: 11px;
  background: rgba(90, 23, 24, 0.07);
}

.message.mine .voice-bubble.has-reply .reply-quote {
  background: rgba(255, 255, 255, 0.13);
}

.voice-bubble.has-reply .reply-quote strong {
  font-size: 0.66rem;
}

.voice-bubble.has-reply .reply-quote span {
  font-size: 0.72rem;
}

.voice-bubble.has-reply .voice-message-row {
  margin-top: 7px;
}

.voice-message-row {
  width: 100%;
  display: grid;
  grid-template-columns: 44px minmax(64px, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: 8px;
  min-height: 44px;
}

.voice-play-button {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--brand-2), var(--brand));
  box-shadow: 0 8px 18px rgba(90, 23, 24, 0.2);
}

.message.mine .voice-play-button {
  color: var(--brand);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 18px rgba(20, 6, 8, 0.18);
}

.voice-play-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.voice-play-button.is-loading {
  opacity: 0.52;
  cursor: default;
}

.voice-play-button svg .play-fill {
  fill: currentColor;
  stroke: none;
}

.voice-play-icon,
.voice-pause-icon {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.voice-play-icon {
  transform: translateX(1.5px);
}

.voice-pause-icon {
  opacity: 0;
  transform: scale(0.82);
}

.voice-play-button.is-playing .voice-play-icon {
  opacity: 0;
  transform: scale(0.82);
}

.voice-play-button.is-playing .voice-pause-icon {
  opacity: 1;
  transform: scale(1);
}

.voice-play-button.is-playing {
  background: #fff;
  color: var(--brand);
}

.message.mine .voice-play-button.is-playing {
  background: rgba(255, 255, 255, 0.78);
  color: var(--brand);
}

.voice-track {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(90, 23, 24, 0.18);
  box-shadow: 0 0 0 1px rgba(90, 23, 24, 0.06);
}

.message.mine .voice-track {
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.voice-track-progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background: var(--brand-2);
  opacity: 1;
  transition: width 0.08s linear;
}

.message.mine .voice-track-progress {
  background: var(--brand-2);
}

.voice-message-row audio {
  display: none;
}

.voice-duration {
  color: currentColor;
  opacity: 0.7;
  font-size: 0.74rem;
  font-weight: 850;
  text-align: right;
  white-space: nowrap;
}

.voice-duration .voice-media-status {
  display: block;
  max-width: 78px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice-message-row.media-state-retryable .voice-play-button {
  cursor: pointer;
  outline-offset: 3px;
}

.voice-message-row.media-state-retryable .voice-track {
  opacity: 0.46;
}

.voice-meta {
  position: static;
  width: auto;
  margin: 4px 0 0;
  padding: 0;
  justify-content: flex-end;
  transform: none;
  font-size: 0.64rem;
  opacity: 0.52;
}

.media-viewer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(20, 6, 8, 0.78);
}

.media-viewer {
  position: fixed;
  inset: calc(var(--safe-top) + 12px) 14px calc(var(--safe-bottom) + 14px);
  z-index: 1301;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px;
  border: 3px solid var(--brand);
  border-radius: 26px;
  background: rgba(20, 6, 8, 0.92);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.36);
}

.media-viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
}

.media-viewer-head span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.media-viewer-head strong,
.media-viewer-head small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-viewer-head strong {
  font-size: 0.95rem;
  font-weight: 900;
}

.media-viewer-head small,
.media-viewer > p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 760;
}

.media-viewer-head button {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  font-size: 1.35rem;
  font-weight: 850;
}

.media-viewer-body {
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  cursor: zoom-in;
}

.media-viewer-body.zoomed {
  place-items: start center;
  cursor: zoom-out;
}

.media-viewer-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 16px;
  transition: transform 180ms ease, max-width 180ms ease, max-height 180ms ease;
}

.media-viewer-body.zoomed img {
  max-width: none;
  max-height: none;
  width: 180%;
}

.media-viewer > p {
  margin: 0;
  line-height: 1.3;
}

.send-feedback-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 6, 8, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: all;
}

.send-feedback-card {
  width: min(78vw, 260px);
  min-height: 190px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  display: grid;
  place-items: center;
  gap: 12px;
  text-align: center;
  color: #fff;
  background: rgba(20, 6, 8, 0.86);
  box-shadow: 0 30px 80px rgba(20, 6, 8, 0.42);
}

.send-feedback-logo {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: rgba(143, 47, 45, 0.58);
  color: #fff;
}

.send-feedback-logo svg {
  width: 42px;
  height: 42px;
}

.send-feedback-card strong {
  font-size: 1rem;
  font-weight: 900;
}

.send-feedback-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  line-height: 1.35;
}

.clock-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(90, 23, 24, 0.14);
  border-radius: 18px;
  background: rgba(90, 23, 24, 0.055);
}

.clock-next-shift {
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
  padding: 12px 13px;
  border: 1px solid rgba(90, 23, 24, 0.12);
  border-radius: 16px;
  background: #fbfafb;
}

.clock-next-shift span {
  color: var(--brand);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.clock-next-shift strong {
  color: var(--ink);
  font-size: 0.96rem;
}

.clock-next-shift small {
  color: var(--muted);
  font-size: 0.78rem;
}

.clock-card.active {
  border-color: rgba(90, 23, 24, 0.32);
  background: rgba(143, 47, 45, 0.12);
}

.clock-card strong {
  display: block;
  color: var(--ink);
  font-size: 0.96rem;
}

.clock-card small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.clock-card button {
  flex: 0 0 auto;
  min-width: 88px;
  padding: 9px 12px;
  border-radius: 12px;
  color: #fff;
  background: var(--brand);
  font-size: 0.8rem;
  font-weight: 850;
}

.clock-list {
  display: grid;
  gap: 0;
  margin-top: 8px;
}

.clock-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #f0edf2;
}

.clock-list article:last-child {
  border-bottom: 0;
}

.clock-list strong,
.clock-list small {
  display: block;
}

.clock-list strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.clock-list small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.76rem;
}

.clock-list span {
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 850;
}

.personal-roster-list,
.personal-list {
  display: grid;
  gap: 0;
}

.personal-roster-list article,
.personal-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #f0edf2;
}

.personal-roster-list article:last-child,
.personal-list article:last-child {
  border-bottom: 0;
}

.personal-roster-list strong,
.personal-list strong {
  display: block;
  color: var(--ink);
  font-size: 0.98rem;
}

.personal-roster-list small,
.personal-list small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
}

.personal-roster-list span,
.personal-list span {
  color: var(--brand-2);
  font-size: 0.9rem;
  font-weight: 820;
  text-align: right;
  white-space: nowrap;
}

.personal-roster-list article.personal-empty-row {
  justify-content: flex-start;
}

.personal-roster-list article.personal-empty-row strong {
  color: var(--brand);
}

.personal-roster-list article.personal-empty-row small {
  white-space: normal;
  line-height: 1.3;
}

.payslip-list button {
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 0.78rem;
  font-weight: 820;
}

.payslip-list button:hover,
.payslip-list button:active {
  background: var(--brand-hover);
}

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

.fab {
  position: fixed;
  right: max(20px, calc((100vw - 480px) / 2 + 20px));
  bottom: calc(120px + var(--safe-bottom));
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--brand-2);
  box-shadow: 0 14px 34px rgba(90, 23, 24, 0.34);
  z-index: 8;
  transition: transform 180ms ease, opacity 160ms ease;
}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: max(6px, calc(var(--safe-bottom) - 6px));
  width: min(calc(100% - 32px), 420px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(var(--nav-count, 5), minmax(0, 1fr));
  gap: 4px;
  padding: 8px;
  border-radius: 34px;
  background: rgba(13, 5, 8, 0.72);
  border: 1px solid rgba(143, 47, 45, 0.24);
  box-shadow: 0 20px 52px rgba(20, 6, 8, 0.28);
  backdrop-filter: blur(18px);
  z-index: 9;
  transition: transform 180ms ease, opacity 160ms ease;
}

body.keyboard-open .bottom-nav {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: none;
  transform: translate(-50%, 16px);
}

body.composer-focused .bottom-nav,
body:has(.composer input:focus) .bottom-nav {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: none;
  transform: translate(-50%, 16px);
}

body.keyboard-open.native-keyboard .bottom-nav {
  transform: translate(-50%, 16px);
}

body.keyboard-settling .bottom-nav {
  transition: none;
}

body.keyboard-open .fab {
  display: none;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: none;
  transform: translateY(calc(100% + 80px + var(--safe-bottom)));
}

body.conversation-mode .bottom-nav {
  display: none;
}

.nav-item {
  position: relative;
  min-width: 0;
  height: 58px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
}

.nav-badge {
  position: absolute;
  top: 7px;
  right: 13px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: none;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: var(--brand-2);
  border: 1px solid rgba(143, 47, 45, 0.34);
  box-shadow: 0 8px 18px rgba(90, 23, 24, 0.22);
  font-size: 0.64rem;
  line-height: 1;
  font-weight: 900;
}

.nav-badge.visible {
  display: grid;
}

.nav-item.active {
  color: #fff;
  background: linear-gradient(145deg, rgba(143, 47, 45, 0.92), rgba(90, 23, 24, 0.94));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.nav-item span {
  font-size: 0.68rem;
  line-height: 1;
  font-weight: 700;
}

.bottom-nav.locked {
  pointer-events: none;
}

.weekly-mood-gate {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: safe center;
  padding: 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(255, 255, 255, 0.58);
}

.weekly-mood-card {
  width: min(100%, 380px);
  padding: 18px;
  border: 1.5px solid rgba(90, 23, 24, 0.82);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.64);
  box-shadow: 0 24px 58px rgba(32, 20, 36, 0.2);
  backdrop-filter: blur(18px);
}

.weekly-mood-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.weekly-mood-logo .brand-logo {
  width: 42px;
  height: 42px;
  color: #fff;
  background: linear-gradient(145deg, var(--brand-2), var(--brand));
}

.weekly-mood-logo .brand-logo svg {
  width: 29px;
  height: 29px;
}

.weekly-mood-kicker {
  display: inline-grid;
  place-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 0.68rem;
  font-weight: 880;
}

.weekly-mood-card h2 {
  margin: 12px 0 4px;
  color: var(--ink);
  font-size: 1.18rem;
  line-height: 1.12;
  font-weight: 880;
}

.weekly-mood-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.3;
}

.weekly-mood-anonymous {
  display: block;
  margin-top: 8px;
  padding: 9px 10px;
  border-radius: 13px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.07);
  font-size: 0.76rem;
  line-height: 1.25;
  font-weight: 760;
}

.weekly-mood-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.weekly-mood-options button {
  min-width: 0;
  min-height: 46px;
  padding: 8px;
  border: 1px solid rgba(90, 23, 24, 0.14);
  border-radius: 15px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  font-weight: 820;
}

.weekly-mood-options button.active {
  color: #fff;
  border-color: transparent;
  background: var(--brand-2);
}

.weekly-mood-card label {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 840;
}

.weekly-mood-card label span {
  display: inline-flex;
  width: fit-content;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  color: rgba(90, 23, 24, 0.68);
  background: rgba(90, 23, 24, 0.055);
  font-size: 0.64rem;
  font-weight: 820;
  line-height: 1.35;
}

.weekly-mood-card textarea {
  width: 100%;
  resize: none;
  border: 1px solid rgba(90, 23, 24, 0.16);
  border-radius: 15px;
  padding: 11px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.74);
  font: inherit;
  outline: none;
}

.weekly-mood-card textarea:focus {
  border-color: rgba(143, 47, 45, 0.48);
  box-shadow: 0 0 0 4px rgba(143, 47, 45, 0.1);
}

.weekly-mood-submit {
  width: 100%;
  height: 46px;
  margin-top: 14px;
  border-radius: 15px;
  color: #fff;
  background: var(--brand-2);
  font-weight: 850;
}

.weekly-mood-submit:disabled {
  cursor: default;
  opacity: 0.48;
  color: var(--muted);
  background: rgba(90, 23, 24, 0.08);
}

.weekly-mood-results {
  margin: 12px 20px 4px;
  padding: 14px;
  border: 1px solid rgba(90, 23, 24, 0.1);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(32, 20, 36, 0.055);
}

.system-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(20, 6, 8, 0.18);
  backdrop-filter: blur(5px);
}

.system-modal-backdrop:has(.roster-request-modal) {
  place-items: start center;
  overflow-y: auto;
  padding-top: calc(var(--fixed-topbar-height) + 16px);
  padding-bottom: calc(22px + var(--safe-bottom));
}

.system-modal {
  width: min(100%, 360px);
  max-height: calc(100vh - 44px);
  overflow: auto;
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(90, 23, 24, 0.28);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 24px 58px rgba(20, 6, 8, 0.22);
  backdrop-filter: blur(18px);
}

.roster-request-modal {
  max-height: calc(100dvh - var(--fixed-topbar-height) - 38px);
}

.system-modal h2 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 1.16rem;
}

.system-modal p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.86rem;
}

.system-modal label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 820;
}

.system-modal label span {
  display: inline-flex;
  width: fit-content;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  color: rgba(90, 23, 24, 0.68);
  background: rgba(90, 23, 24, 0.055);
  font-size: 0.64rem;
  font-weight: 820;
  line-height: 1.35;
}

.system-modal input,
.system-modal textarea {
  width: 100%;
  border: 1px solid rgba(90, 23, 24, 0.14);
  border-radius: 13px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
  font: inherit;
  outline: none;
}

.system-modal input {
  min-height: 44px;
  padding: 0 12px;
}

.system-modal textarea {
  padding: 12px;
}

.system-modal input:focus,
.system-modal textarea:focus {
  border-color: rgba(90, 23, 24, 0.34);
  background: #fff;
}

.system-modal button {
  width: 100%; min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  color: var(--ink);
  background: rgba(90, 23, 24, 0.06);
  text-align: left;
}

.system-modal button span,
.system-modal button strong {
  font-size: 0.86rem;
}

.system-modal button strong {
  color: var(--brand);
}

.system-modal button.danger {
  color: #fff;
  background: var(--brand-2);
}

.system-modal button.danger strong {
  color: #fff;
}

.onboarding-tour {
  position: fixed;
  inset: 0;
  z-index: 82;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.3s ease, background-color 0.6s ease;
}

.onboarding-tour.is-positioning {
  background: rgba(20, 6, 8, 0.62);
}

.onboarding-tour.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.onboarding-spotlight {
  position: fixed;
  left: var(--tour-x, 20px);
  top: var(--tour-y, 120px);
  width: var(--tour-w, calc(100vw - 40px));
  height: var(--tour-h, 120px);
  border: 3px solid rgba(255, 255, 255, 0.92);
  border-radius: 24px;
  outline: 2px solid rgba(90, 23, 24, 0.98);
  box-shadow:
    0 0 0 9999px rgba(20, 6, 8, 0.68),
    0 22px 58px rgba(20, 6, 8, 0.38);
  pointer-events: none;
  opacity: 1;
  transition:
    left 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.6s ease;
}

.onboarding-card {
  position: fixed;
  left: var(--tour-card-left, 18px);
  top: var(--tour-card-top, calc(52vh));
  z-index: 2;
  width: var(--tour-card-width, min(100% - 36px, 382px));
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 2px solid rgba(90, 23, 24, 0.72);
  border-radius: 26px;
  background:
    radial-gradient(circle at 18% 0%, rgba(143, 47, 45, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 245, 247, 0.94));
  box-shadow: 0 28px 70px rgba(20, 6, 8, 0.28);
  opacity: 1;
  transform: translateY(0);
  transition:
    left 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.6s ease,
    transform 0.6s ease;
}

.onboarding-tour.is-positioning .onboarding-spotlight,
.onboarding-tour.is-positioning .onboarding-card {
  opacity: 0;
}

.onboarding-tour.is-positioning .onboarding-card {
  transform: translateY(8px);
}

.onboarding-tour.no-target {
  display: grid;
  place-items: center;
  padding: calc(22px + var(--safe-top)) 22px calc(22px + var(--safe-bottom));
  background: rgba(20, 6, 8, 0.54);
}

.onboarding-tour.no-target .onboarding-spotlight {
  display: none;
}

.onboarding-tour.no-target .onboarding-card {
  position: static;
  width: min(100%, 382px);
}

.onboarding-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.onboarding-logo {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  flex: 0 0 50px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, var(--brand-2), var(--brand));
  box-shadow: 0 14px 28px rgba(90, 23, 24, 0.18);
}

.onboarding-logo svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.onboarding-logo svg .play-fill,
.onboarding-logo svg .bell-fill {
  fill: currentColor;
  stroke: none;
}

.onboarding-progress {
  height: 7px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 5px;
  flex: 1;
}

.onboarding-progress span {
  border-radius: 999px;
  background: rgba(90, 23, 24, 0.14);
}

.onboarding-progress span.active {
  background: var(--brand);
}

.onboarding-card small {
  color: var(--brand);
  font-size: 0.68rem;
  font-weight: 940;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.onboarding-card h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.34rem;
  line-height: 1.05;
}

.onboarding-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 650;
  line-height: 1.42;
}

.onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 4px;
}

.onboarding-actions > div {
  display: flex;
  gap: 8px;
}

.onboarding-actions button {
  min-width: 82px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 15px;
  color: #fff;
  background: var(--brand);
  font-weight: 900;
}

.onboarding-actions button.ghost {
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
}

.onboarding-actions button:hover,
.onboarding-actions button:active {
  background: var(--brand-2);
}

.onboarding-actions button.ghost:hover,
.onboarding-actions button.ghost:active {
  background: var(--brand-hover);
}

.push-settings {
  display: grid;
  gap: 0;
  margin: 2px 0 4px;
  padding: 4px 0;
  border-top: 2px solid rgba(90, 23, 24, 0.22);
  border-bottom: 2px solid rgba(90, 23, 24, 0.22);
}

.push-settings-head {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
}

.push-settings-head > span,
.push-setting-row > span:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.push-settings-head strong,
.push-setting-row strong {
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.2;
}

.push-settings-head small,
.push-setting-row small {
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 650;
  line-height: 1.25;
}

.push-settings-head b {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 8px;
  color: var(--muted);
  background: rgba(90, 23, 24, 0.06);
  font-size: 0.67rem;
}

.push-settings-head b.is-on {
  color: #166255;
  background: rgba(56, 184, 165, 0.13);
}

.system-modal .push-device-action {
  min-height: 42px;
  margin: 0 8px 7px;
  width: calc(100% - 16px);
  padding: 9px 10px;
  border: 1px solid rgba(90, 23, 24, 0.18);
  color: #fff;
  background: var(--brand);
}

.system-modal .push-device-action strong {
  color: rgba(255, 255, 255, 0.82);
}

.system-modal .push-device-action.is-enabled {
  color: var(--ink);
  background: rgba(90, 23, 24, 0.055);
}

.system-modal .push-device-action.is-enabled strong {
  color: var(--brand);
}

.push-preference-list {
  display: grid;
}

.push-preference-list.is-disabled {
  opacity: 0.62;
}

.system-modal .push-setting-row {
  min-height: 52px;
  padding: 9px 12px;
  border-top: 1px solid rgba(90, 23, 24, 0.1);
  border-radius: 0;
  background: transparent;
}

.system-modal .push-setting-row:hover,
.system-modal .push-setting-row:active {
  background: var(--brand-hover);
}

.push-settings-note,
.push-settings-feedback {
  display: block;
  margin: 0;
  padding: 4px 12px 11px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.35;
}

.push-settings-feedback {
  padding-top: 9px;
  border-top: 1px solid rgba(90, 23, 24, 0.1);
  color: var(--brand);
}

.settings-supabase-form {
  display: grid; min-width: 0;
  gap: 10px;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid rgba(90, 23, 24, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(248, 239, 243, 0.86)),
    rgba(248, 239, 243, 0.72);
}
.settings-supabase-form > * { min-width: 0; }
.settings-supabase-form h3 {
  margin: 0;
  color: var(--brand);
  font-size: 0.86rem;
  font-weight: 880;
}

.settings-supabase-form p {
  margin: -4px 0 2px;
  font-size: 0.78rem;
  line-height: 1.3;
}

.settings-supabase-actions {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.settings-supabase-actions button { min-width: 0; flex-wrap: wrap; gap: 2px 8px;
  min-height: 44px;
  padding: 9px 10px;
}
.settings-supabase-actions button > span, .settings-supabase-actions button > strong { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.settings-supabase-actions button:first-child {
  grid-column: 1 / -1;
  color: #fff;
  background: var(--brand);
}

.settings-supabase-actions button:first-child strong {
  color: rgba(255, 255, 255, 0.82);
}

.settings-supabase-actions button.ghost {
  color: var(--muted);
  background: rgba(90, 23, 24, 0.045);
}

.settings-supabase-form > small {
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.48);
  font-size: 0.74rem;
  line-height: 1.28;
}

.settings-supabase-form > [data-runtime-diagnostics] { max-width: 100%; overflow-wrap: anywhere; }
.settings-supabase-form > small.success {
  color: #165f52;
  background: rgba(56, 184, 165, 0.12);
}

.settings-supabase-form > small.danger {
  color: #8f2f2d;
  background: rgba(143, 47, 45, 0.12);
}

.settings-section {
  display: grid;
  gap: 10px;
  margin-top: 6px;
  padding: 12px;
  border: 1px solid rgba(90, 23, 24, 0.22);
  border-radius: 16px;
  background: rgba(90, 23, 24, 0.055);
}

.settings-section h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
}

.settings-section-note {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.3;
}

.settings-section label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 820;
}

.settings-section select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(90, 23, 24, 0.18);
  border-radius: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: 0.86rem;
  outline: none;
}

.settings-section select:focus {
  border-color: rgba(90, 23, 24, 0.5);
  box-shadow: 0 0 0 3px rgba(159, 42, 43, 0.14);
}

.demo-data-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.demo-data-metrics span {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 9px 8px;
  border: 1px solid rgba(90, 23, 24, 0.1);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.72);
}

.demo-data-metrics strong {
  color: var(--brand);
  font-size: 1rem;
  line-height: 1;
}

.demo-data-metrics small {
  min-width: 0;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 820;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.demo-data-actions {
  display: grid;
  gap: 8px;
}

.demo-data-settings .settings-simulate-button {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border-radius: 14px;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 10px 24px rgba(90, 23, 24, 0.16);
}

.demo-data-settings .settings-simulate-button.secondary {
  color: var(--brand);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(90, 23, 24, 0.14);
  box-shadow: none;
}

.demo-data-settings .settings-simulate-button strong {
  flex: 0 0 auto;
  font-size: 0.7rem;
  opacity: 0.82;
}

.notifications-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 18px 12px;
  padding: 14px;
  border: 1px solid rgba(90, 23, 24, 0.18);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 34px rgba(32, 20, 36, 0.08);
}

.notifications-hero > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 15px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
}

.notifications-hero svg,
.notification-list svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notifications-hero p,
.notifications-hero h1,
.notifications-hero small {
  margin: 0;
}

.notifications-hero p {
  color: var(--brand);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.notifications-hero h1 {
  color: var(--ink);
  font-size: 1.28rem;
}

.notifications-hero small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.notifications-stack {
  display: grid;
  gap: 12px;
  padding: 0 18px 28px;
}

.notification-section {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(90, 23, 24, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
}

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

.notification-section-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
}

.notification-section-head b {
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: 0.75rem;
}

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

.notification-list article,
.notification-list button {
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(90, 23, 24, 0.1);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.76);
  text-align: left;
}

.notification-list button:hover,
.notification-list button:active {
  border-color: rgba(90, 23, 24, 0.22);
  background: var(--brand-soft);
}

.notification-list article > span,
.notification-list button > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.075);
}

.notification-list .urgent > span {
  color: #fff;
  background: var(--brand);
}

.notification-list strong,
.notification-list small {
  min-width: 0;
  display: block;
  overflow-wrap: anywhere;
}

.notification-list strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.notification-list small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.notification-list em {
  color: var(--brand);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 900;
}

.notification-list article.empty {
  grid-template-columns: minmax(0, 1fr);
  color: var(--muted);
  background: rgba(90, 23, 24, 0.045);
}

.notification-list article > button {
  width: 28px;
  height: 28px;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 10px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
}

.settings-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 11px;
  border-radius: 13px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 820;
}

.settings-summary strong {
  color: var(--brand);
  font-size: 0.84rem;
}

.manager-section-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.manager-section-head h3 {
  min-width: 0;
}

.manager-section-head b {
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: 0.74rem;
  font-weight: 900;
}

.clock-exception-list {
  display: grid;
  gap: 8px;
}

.clock-exception-list article {
  min-width: 0;
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(90, 23, 24, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
}

.clock-exception-list article:not(.clear) {
  border-color: rgba(143, 47, 45, 0.28);
  border-left: 5px solid var(--brand);
  background: rgba(143, 47, 45, 0.08);
}

.clock-exception-list article.urgent {
  background: rgba(90, 23, 24, 0.1);
}

.clock-exception-list strong {
  color: var(--ink);
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.clock-exception-list small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.3;
}

.clock-exception-actions {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.clock-exception-actions button {
  min-width: 0;
  min-height: 32px;
  padding: 0 8px;
  border-radius: 10px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.05;
}

.clock-exception-actions button:hover,
.clock-exception-actions button:active {
  color: #fff;
  background: var(--brand);
}

.manager-request-list {
  display: grid;
  gap: 9px;
}

.manager-request-filters {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.manager-request-filters::-webkit-scrollbar {
  display: none;
}

.manager-request-filters button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(90, 23, 24, 0.12);
  border-radius: 999px;
  color: var(--brand);
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.76rem;
  font-weight: 860;
}

.manager-request-filters button.active {
  color: #fff;
  background: var(--brand);
  border-color: transparent;
}

.manager-request-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}

.manager-request-subhead strong {
  color: var(--ink);
  font-size: 0.82rem;
}

.manager-request-subhead small {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: 0.68rem;
  font-weight: 900;
}

.manager-request-list article {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(90, 23, 24, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.74);
}

.manager-request-list article.pending {
  border-color: rgba(143, 47, 45, 0.28);
  background: rgba(143, 47, 45, 0.075);
}

.manager-request-list article.approved {
  border-color: rgba(56, 184, 165, 0.22);
  background: rgba(56, 184, 165, 0.075);
}

.manager-request-list article.declined {
  border-color: rgba(120, 116, 126, 0.16);
  background: rgba(232, 229, 234, 0.56);
}

.manager-request-list article.empty {
  grid-template-columns: 1fr;
}

.manager-request-list.history article.empty {
  grid-template-columns: minmax(0, 1fr);
  min-height: 54px;
}

.manager-request-list article.empty span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.manager-request-list .avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

.manager-request-list strong,
.manager-request-list small,
.manager-request-list em {
  display: block;
}

.manager-request-list strong {
  color: var(--ink);
  font-size: 0.86rem;
}

.manager-request-list small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.25;
}

.manager-request-list em {
  margin-top: 5px;
  color: var(--ink);
  font-size: 0.74rem;
  font-style: normal;
}

.manager-request-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.manager-request-actions button {
  min-height: 44px;
  border-radius: 12px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 0.78rem;
  font-weight: 850;
}

.manager-request-actions button:first-child {
  color: #fff;
  background: var(--brand);
}

.manager-request-list.history article {
  grid-template-columns: 44px minmax(0, 1fr) auto;
}

.manager-request-list.history b {
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 0.68rem;
}

.manager-request-history-actions {
  align-self: start;
  display: grid;
  justify-items: end;
  gap: 6px;
}

.manager-request-history-actions button {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 9px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
}

.manager-request-history-actions button:hover,
.manager-request-history-actions button:active {
  color: #fff;
  background: var(--brand);
}

.manager-request-history-confirm {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  padding-top: 8px;
  border-top: 1px solid rgba(90, 23, 24, 0.1);
}

.manager-request-history-confirm strong {
  color: var(--brand);
  font-size: 0.78rem;
}

.manager-request-history-confirm button {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 0.72rem;
  font-weight: 860;
}

.manager-request-history-confirm button.danger {
  color: #fff;
  background: var(--brand);
}

.manager-request-list.history article.approved b {
  color: #237c70;
  background: rgba(56, 184, 165, 0.14);
}

.manager-request-list.history article.declined b {
  color: #706a73;
  background: rgba(120, 116, 126, 0.12);
}

.manager-request-actions b {
  color: var(--brand);
  font-size: 0.78rem;
}

.manager-home-view {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(96px + var(--safe-bottom));
}

.manager-home {
  min-height: 0;
  min-height: calc(100dvh - var(--fixed-topbar-height) - 96px - var(--safe-bottom));
  display: grid;
  grid-template-rows: auto;
  align-content: start;
  padding-top: 14px;
  gap: 10px;
  overflow: visible;
}

.manager-stack {
  display: grid;
  grid-template-rows: auto auto;
  gap: 10px;
  min-height: 0;
  padding: 0 20px;
  overflow: visible;
}

.manager-stack .settings-section,
.manager-stack .weekly-mood-results {
  margin: 0;
}

.manager-overview {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 2px solid rgba(90, 23, 24, 0.58);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(32, 20, 36, 0.07);
}

.manager-overview-head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.manager-overview-head > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--brand);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(90, 23, 24, 0.12);
}

.manager-overview-head svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.manager-overview-head h2,
.manager-overview-head p {
  margin: 0;
}

.manager-overview-head h2 {
  color: var(--ink);
  font-size: 1rem;
}

.manager-overview-head p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.25;
}

.manager-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.manager-overview-card {
  position: relative;
  min-width: 0;
  min-height: 76px;
  display: grid;
  align-content: space-between;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(90, 23, 24, 0.1);
  border-radius: 19px;
  color: var(--ink);
  background: #fff;
  text-align: left;
  box-shadow: 0 10px 22px rgba(32, 20, 36, 0.045);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .manager-overview-card:not(:disabled):hover,
  .manager-overview-card:not(:disabled):active {
    transform: translateY(-1px);
    border-color: rgba(90, 23, 24, 0.24);
    background: #fff;
  }
}

.manager-overview-card:disabled {
  cursor: default;
}

.manager-overview-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.manager-overview-card.has-badge > span {
  padding-right: 28px;
}

.manager-overview-card strong {
  color: var(--ink);
  font-size: 1.28rem;
  line-height: 1;
}

.manager-overview-card small {
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.22;
}

.manager-overview-card .manager-overview-badge {
  position: absolute;
  top: 9px;
  right: 9px;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: 0.74rem;
  font-weight: 900;
}

.manager-page {
  padding-bottom: 122px;
}

.manager-page > .settings-section,
.manager-page > .weekly-mood-results {
  margin: 0;
}

.manager-page .manager-requests-section,
.manager-page .weekly-mood-results,
.manager-page .clock-exceptions-settings {
  border-radius: 22px;
}

.manager-page-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(90, 23, 24, 0.14);
  border-radius: 24px;
  background:
    radial-gradient(circle at 96% 0%, rgba(255, 255, 255, 0.72), transparent 34%),
    linear-gradient(145deg, rgba(90, 23, 24, 0.1), rgba(255, 255, 255, 0.78));
  box-shadow: 0 16px 36px rgba(32, 20, 36, 0.07);
}

.manager-page-card > span {
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
}

.manager-page-card svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.manager-page-card strong,
.manager-page-card small {
  min-width: 0;
  display: block;
}

.manager-page-card strong {
  color: var(--ink);
  font-size: 1rem;
}

.manager-page-card small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.manager-page-card button {
  grid-column: 2;
  justify-self: start;
  min-height: 36px;
  margin-top: 8px;
  padding: 0 14px;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: 0.74rem;
  font-weight: 900;
}

.manager-page-card button:disabled {
  color: var(--muted);
  background: rgba(32, 20, 36, 0.08);
}

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

.manager-action-list {
  display: grid;
  gap: 8px;
  min-height: 0;
  max-height: none;
  overflow: visible;
  padding-right: 2px;
}

.manager-action-section {
  min-height: 0;
  display: grid;
  gap: 0;
  padding: 14px;
  border: 2px solid rgba(90, 23, 24, 0.58);
  border-radius: 24px;
  background: #fff;
  overflow: visible;
}

.manager-team-today {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.manager-team-today h3,
.manager-team-today p {
  margin: 0;
}

.manager-team-today h3 {
  color: var(--ink);
  font-size: 0.96rem;
}

.manager-team-today p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.74rem;
}

.manager-team-today > strong {
  min-width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(90, 23, 24, 0.38);
  border-radius: 15px;
  color: var(--brand);
  background: #fff;
  font-size: 1.25rem;
}

.manager-attention-block {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(90, 23, 24, 0.24);
}

.manager-attention-block:only-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

@media (max-height: 760px) {
  .manager-home-view {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .manager-home {
    height: auto;
    min-height: calc(100dvh - var(--fixed-topbar-height) - 96px - var(--safe-bottom));
    overflow: visible;
  }

  .manager-stack {
    overflow: visible;
    padding-bottom: 8px;
  }

  .manager-action-list {
    max-height: none;
  }
}

.manager-action-list button,
.manager-action-list article,
.manager-activity-list button,
.manager-activity-list article {
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 5px 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(90, 23, 24, 0.1);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.74);
  text-align: left;
}

.manager-action-list button {
  border-color: rgba(90, 23, 24, 0.2);
  background: rgba(90, 23, 24, 0.085);
}

@media (hover: hover) and (pointer: fine) {
  .manager-action-list button:hover,
  .manager-action-list button:active,
  .manager-activity-list button:hover,
  .manager-activity-list button:active {
    background: var(--brand-soft);
    border-color: rgba(90, 23, 24, 0.24);
  }
}

.manager-action-list button > span,
.manager-activity-list button > span {
  width: 8px;
  height: 8px;
  grid-row: 1 / span 2;
  border-radius: 999px;
  background: rgba(90, 23, 24, 0.22);
}

.manager-action-list button.alert > span,
.manager-activity-list button.alert > span {
  background: #5a1718;
  box-shadow: 0 0 0 4px rgba(90, 23, 24, 0.1);
}

.manager-action-list button.watch > span,
.manager-activity-list button.watch > span {
  background: var(--brand-light);
}

.manager-action-list button.good > span,
.manager-activity-list button.good > span {
  background: var(--brand);
}

.manager-action-list strong,
.manager-action-list small,
.manager-activity-list strong,
.manager-activity-list small {
  min-width: 0;
  display: block;
  overflow-wrap: anywhere;
}

.manager-action-list strong,
.manager-activity-list strong {
  color: var(--ink);
  font-size: 0.82rem;
}

.manager-action-list small,
.manager-activity-list small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.22;
}

.manager-action-list article,
.manager-activity-list article {
  grid-template-columns: 1fr;
}

.manager-action-list article {
  background: rgba(255, 255, 255, 0.66);
}

.manager-shortcut-list,
.control-overview {
  display: grid;
  gap: 8px;
}

.manager-shortcut-list button,
.control-overview article {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid rgba(90, 23, 24, 0.1);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.68);
  text-align: left;
}

@media (hover: hover) and (pointer: fine) {
  .manager-shortcut-list button:hover,
  .manager-shortcut-list button:active {
    border-color: rgba(90, 23, 24, 0.22);
    background: var(--brand-soft);
  }
}

@media (hover: none), (pointer: coarse), (any-pointer: coarse) {
  html.touch-input .manager-overview-card:not(:disabled, .active):hover,
  html.touch-input .manager-overview-card:not(:disabled, .active):active {
    transform: none;
    border-color: rgba(90, 23, 24, 0.1);
    background: #fff;
  }

  html.touch-input .manager-action-list button:hover,
  html.touch-input .manager-action-list button:active {
    border-color: rgba(90, 23, 24, 0.2);
    background: rgba(90, 23, 24, 0.085);
  }

  html.touch-input .manager-activity-list button:hover,
  html.touch-input .manager-activity-list button:active {
    border-color: rgba(90, 23, 24, 0.1);
    background: rgba(255, 255, 255, 0.74);
  }

  html.touch-input .manager-shortcut-list button:hover,
  html.touch-input .manager-shortcut-list button:active {
    border-color: rgba(90, 23, 24, 0.1);
    background: rgba(255, 255, 255, 0.68);
  }
}

.manager-shortcut-list span,
.control-overview span {
  grid-row: span 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.075);
}

.manager-shortcut-list svg,
.control-overview svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.manager-shortcut-list strong,
.manager-shortcut-list small,
.control-overview strong,
.control-overview small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.manager-shortcut-list strong,
.control-overview strong {
  color: var(--ink);
  font-size: 0.82rem;
}

.manager-shortcut-list small,
.control-overview small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.24;
}

.control-overview {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.control-overview article {
  grid-template-columns: 1fr;
  justify-items: start;
  gap: 7px;
}

.control-intro {
  background:
    radial-gradient(circle at 94% 0%, rgba(143, 47, 45, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.72);
}

.holiday-calendar-shell {
  display: grid;
  gap: 14px;
  padding: 0 20px 118px;
}

.inline-back-button {
  justify-self: start;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(90, 23, 24, 0.12);
  border-radius: 999px;
  color: var(--brand);
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  font-weight: 850;
}

.holiday-calendar-hero {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(90, 23, 24, 0.1);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(90, 23, 24, 0.08), rgba(255, 255, 255, 0.82));
}

.holiday-calendar-hero > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
}

.holiday-calendar-hero svg,
.holiday-detail-panel svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.holiday-calendar-hero p,
.holiday-calendar-hero h1,
.holiday-calendar-hero small {
  margin: 0;
}

.holiday-calendar-hero p {
  color: var(--brand);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.holiday-calendar-hero h1 {
  color: var(--ink);
  font-size: 1.35rem;
}

.holiday-calendar-hero small {
  color: var(--muted);
  font-size: 0.82rem;
}

.holiday-calendar-panel,
.holiday-overlap-panel,
.holiday-detail-panel {
  padding: 13px;
  border: 1px solid rgba(90, 23, 24, 0.1);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.74);
}

.holiday-calendar-head {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 4px;
  border-radius: 15px;
  background: rgba(90, 23, 24, 0.06);
}

.holiday-calendar-head button {
  width: 40px;
  height: 34px;
  padding: 0;
  justify-content: center;
  color: var(--brand);
  background: #fff;
  font-size: 1.2rem;
  font-weight: 900;
}

.holiday-calendar-head strong {
  min-width: 0;
  color: var(--ink);
  text-align: center;
  font-size: 0.94rem;
}

.holiday-calendar-weekdays,
.holiday-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.holiday-calendar-weekdays {
  margin-bottom: 6px;
}

.holiday-calendar-weekdays span {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 880;
  text-align: center;
}

.holiday-calendar-grid button,
.holiday-calendar-grid .blank {
  min-width: 0;
  min-height: 58px;
  border: 1px solid rgba(90, 23, 24, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
}

.holiday-calendar-grid .blank {
  border-color: transparent;
  background: transparent;
}

.holiday-calendar-grid button {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 3px;
  padding: 7px 4px 5px;
  color: var(--ink);
}

.holiday-calendar-grid button.today {
  border-color: rgba(90, 23, 24, 0.28);
}

.holiday-calendar-grid button.has-holiday {
  border-color: rgba(90, 23, 24, 0.22);
  background: rgba(90, 23, 24, 0.045);
}

.holiday-calendar-grid button.crowded {
  border-color: rgba(90, 23, 24, 0.42);
  background: linear-gradient(145deg, rgba(90, 23, 24, 0.07), rgba(143, 47, 45, 0.045));
  box-shadow: inset 0 0 0 1px rgba(90, 23, 24, 0.12);
}

.holiday-calendar-grid button.active {
  color: var(--brand);
  border-color: rgba(90, 23, 24, 0.5);
  background: rgba(90, 23, 24, 0.055);
  box-shadow: inset 0 0 0 2px rgba(90, 23, 24, 0.22);
}

.holiday-calendar-grid strong {
  color: currentColor;
  font-size: 0.86rem;
  font-weight: 900;
}

.holiday-calendar-grid b {
  color: currentColor;
  font-size: 0.48rem;
  font-weight: 900;
  line-height: 1;
}

.holiday-avatar-stack {
  display: flex;
  justify-content: center;
  min-height: 18px;
}

.holiday-avatar-stack .avatar {
  width: 18px;
  height: 18px;
  margin-left: -5px;
  border: 2px solid rgba(255, 255, 255, 0.88);
}

.holiday-avatar-stack .avatar:first-child {
  margin-left: 0;
}

.holiday-overlap-panel,
.holiday-detail-panel {
  display: grid;
  gap: 8px;
}

.holiday-overlap-panel h2,
.holiday-detail-panel h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
}

.holiday-overlap-panel button,
.holiday-detail-panel article {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(90, 23, 24, 0.1);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
  text-align: left;
}

.holiday-overlap-panel button.active,
.holiday-overlap-panel button:hover,
.holiday-overlap-panel button:active {
  background: var(--brand-soft);
}

.holiday-overlap-panel small,
.holiday-detail-panel small,
.holiday-detail-panel p {
  color: var(--muted);
  font-size: 0.78rem;
}

.holiday-overlap-panel b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--brand);
}

.holiday-detail-panel article {
  display: flex;
  align-items: center;
  gap: 10px;
  grid-template-columns: none;
}

.holiday-detail-panel article .avatar {
  flex: 0 0 auto;
}

.holiday-detail-panel article span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.holiday-detail-panel article strong,
.holiday-detail-panel article small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manager-notification-list {
  display: grid;
  gap: 8px;
}

.manager-notification-list article {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  border: 1px solid rgba(90, 23, 24, 0.1);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.66);
}

.manager-notification-list strong,
.manager-notification-list small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.manager-notification-list strong {
  color: var(--ink);
  font-size: 0.8rem;
}

.manager-notification-list small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.24;
}

.manager-team-section > .stack {
  padding: 0;
}

.manager-team-section .team-card {
  margin: 0;
  background: rgba(255, 255, 255, 0.74);
}

.manager-team-section .team-directory-row {
  width: 100%;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(90, 23, 24, 0.08);
  border-radius: 15px;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}

.manager-team-section .team-main {
  min-width: 0;
  flex: 1 1 150px;
}

.manager-team-section .team-main strong,
.manager-team-section .team-main p {
  white-space: normal;
  overflow-wrap: anywhere;
}

.manager-team-section .role-badge {
  max-width: 100%;
  white-space: normal;
}

.manager-team-section .team-edit-actions {
  width: 100%;
  grid-template-columns: 1fr;
  justify-items: stretch;
}

.manager-team-section .team-edit-actions button,
.manager-team-section .team-edit-actions select {
  min-width: 0;
}

.manager-team-section .team-locked-note {
  width: 100%;
  justify-items: start;
  text-align: left;
}

.manager-team-section .team-locked-note small {
  white-space: normal;
}

.manager-team-tools {
  margin: 0;
  padding: 0;
}

.manager-access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.manager-access-grid span {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(90, 23, 24, 0.12);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.62);
}

.manager-access-grid span.allowed {
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  border-color: rgba(90, 23, 24, 0.2);
}

.manager-access-grid strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.72rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.manager-access-grid small {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 900;
}

.system-modal .settings-simulate-button {
  margin-top: 2px;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 10px 24px rgba(90, 23, 24, 0.2);
}

.system-modal .settings-simulate-button strong {
  color: rgba(255, 255, 255, 0.86);
}

.app-toast {
  position: fixed;
  left: 50%;
  top: 18px;
  z-index: 90;
  width: min(420px, calc(100% - 28px));
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(90, 23, 24, 0.28);
  border-radius: 18px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 44px rgba(32, 20, 36, 0.22);
  transform: translateX(-50%);
}

.app-toast .toast-logo {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: var(--brand);
}

.app-toast .toast-logo svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-toast strong {
  display: block;
  font-size: 0.86rem;
}

.app-toast p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.app-toast .toast-action {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  margin-top: 7px;
  padding: 6px 9px;
  border-radius: 10px;
  color: #fff;
  background: var(--brand);
  font-size: 0.74rem;
  font-weight: 850;
}

.app-toast .toast-action:hover,
.app-toast .toast-action:active {
  background: var(--brand-2);
}

.app-toast > button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 1.05rem;
  line-height: 1;
}

.roster-pdf-backdrop {
  z-index: 92;
}

.roster-pdf-modal {
  width: min(100%, 430px);
  max-height: calc(100vh - 44px);
  overflow: auto;
  gap: 12px;
}

.roster-pdf-sheet {
  min-height: 540px;
  padding: 26px 24px;
  border: 1px solid rgba(90, 23, 24, 0.14);
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.roster-pdf-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
  color: var(--brand);
}

.roster-pdf-brand span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: var(--brand);
}

.roster-pdf-brand svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.roster-pdf-brand small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.roster-pdf-sheet h2 {
  margin: 0 0 18px;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
}

.roster-pdf-sheet p {
  margin: 0 0 9px;
  color: #2d272d;
  font-size: 0.84rem;
  line-height: 1.4;
}

.roster-pdf-sheet hr {
  margin: 16px 0;
  border: 0;
  border-top: 1px solid rgba(90, 23, 24, 0.16);
}

.roster-pdf-summary {
  display: grid;
  gap: 14px;
}

.roster-pdf-summary h3 {
  margin: 0;
  color: var(--brand);
  font-size: 0.94rem;
}

.roster-pdf-summary article {
  display: grid;
  gap: 5px;
  padding: 10px 0 0;
  border-top: 1px solid rgba(90, 23, 24, 0.12);
}

.roster-pdf-summary article > strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 900;
}

.roster-pdf-summary article p,
.roster-pdf-totals p {
  display: grid;
  gap: 2px;
  margin: 0;
  padding-left: 8px;
  color: #4e464e;
}

.roster-pdf-summary article p span,
.roster-pdf-totals p span {
  color: var(--ink);
  font-weight: 820;
}

.roster-pdf-summary article p small,
.roster-pdf-totals p small {
  color: var(--muted);
  font-size: 0.78rem;
}

.roster-pdf-totals {
  display: grid;
  gap: 6px;
  margin-top: 2px;
  padding: 12px;
  border: 1px solid rgba(90, 23, 24, 0.16);
  border-radius: 14px;
  background: rgba(90, 23, 24, 0.045);
}

.roster-pdf-totals > strong {
  color: var(--brand);
  font-size: 0.88rem;
}

.roster-pdf-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.roster-pdf-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 14px;
  color: #fff;
  background: var(--brand);
  font-size: 0.86rem;
  font-weight: 850;
  text-decoration: none;
}

.roster-pdf-actions a:hover,
.roster-pdf-actions a:active {
  background: var(--brand-2);
}

.clock-qr-modal {
  width: min(100%, 360px);
}

.clock-qr-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.clock-qr-brand span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: var(--brand);
}

.clock-qr-brand svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.clock-qr-brand h2,
.clock-qr-brand p {
  margin: 0;
}

.clock-qr-brand h2 {
  font-size: 1.08rem;
}

.clock-qr-code {
  width: 184px;
  height: 184px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 12px auto;
  padding: 14px;
  border: 3px solid var(--brand);
  border-radius: 18px;
  background: #fff;
}

.clock-qr-code span {
  border-radius: 4px;
  background: rgba(90, 23, 24, 0.1);
}

.clock-qr-code span.filled {
  background: var(--brand);
}

.clock-qr-note {
  text-align: center;
}
.clock-punch-status{display:grid;gap:4px;margin:14px 0;padding:15px;border:2px solid rgba(90,23,24,.5);border-radius:16px;background:#fff}
.clock-punch-status strong{color:var(--brand)}
.clock-punch-status small{color:var(--muted)}
.clock-punch-error{margin:8px 0;color:#a62a33;font-weight:700}
.clock-qr-modal button:disabled{opacity:.55}

/* Chat-owned creation sheets: fixed chrome, only the content scrolls. */
html.chat-create-page-locked {
  /* Fixed body leaves the root without in-flow height. iOS may paint this
     canvas beyond a clipped fixed backdrop, including the home-indicator area.
     Match the bottom #f7f1f4 surface under rgba(20,6,8,.18), not the pale page. */
  min-height: 100%;
  min-height: 100lvh;
  background-color: #cec7ca;
}
.categories .chat-create-shortcut {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}
.chat-create-backdrop {
  height: 100dvh;
  /* iOS can report a shorter innerHeight than its full screen paint area. */
  min-height: calc(100lvh + var(--safe-bottom));
  padding: calc(var(--fixed-topbar-height) + 12px) 16px calc(96px + var(--safe-bottom));
  overflow: hidden;
}
.system-modal.chat-create-dialog {
  display: flex;
  flex-direction: column;
  width: min(100%, 400px);
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 14px;
  gap: 12px;
}
.chat-create-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; }
.chat-create-head h2 { margin: 0; color: var(--brand); }
.chat-create-head .chat-create-close {
  width: 44px; height: 44px; flex: 0 0 44px; padding: 0;
  justify-content: center; color: var(--brand);
}
.chat-create-head .chat-create-close span { font-size: 1.6rem; line-height: 1; }
.chat-create-body { display: grid; gap: 12px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.chat-create-footer { flex: 0 0 auto; }
.chat-create-status { flex: 0 0 auto; margin: 0; color: var(--brand); font-size: 13px; line-height: 1.4; }
.chat-create-status[hidden] { display: none; }
.chat-create-dialog[aria-busy="true"] button:disabled { opacity: .55; cursor: wait; }
.chat-create-dialog input { font-size: 16px; }
.chat-create-people { display: grid; gap: 8px; }
.chat-create-dialog .chat-create-person { justify-content: flex-start; }
.chat-create-dialog .chat-create-person[hidden] { display: none; }
.chat-create-person .avatar { flex: 0 0 40px; width: 40px; height: 40px; }
.chat-create-person .chat-create-person-copy { flex: 1; min-width: 0; display: grid; gap: 3px; }
.chat-create-person-copy strong { overflow-wrap: anywhere; }
.chat-create-person-copy small { color: var(--muted); font-size: .76rem; }
.chat-create-dialog .new-chat-picker label > span:not(.avatar) {
  display: grid; flex: 1; min-width: 0; width: auto; margin: 0; padding: 0;
  border-radius: 0; background: none;
}
.chat-create-dialog button:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.system-modal.chat-create-private { height: min(600px, 100%); }
.chat-create-private .chat-create-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.chat-create-private .chat-create-search { flex: 0 0 auto; }
.chat-create-private .chat-create-people { min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-content: start; }
.chat-create-photo { display: grid; gap: 8px; }
.chat-create-photo-label { display: flex; align-items: baseline; gap: 8px; color: var(--muted); font-size: .78rem; font-weight: 820; }
.chat-create-photo-label small { font-size: .72rem; font-weight: 600; }
.chat-create-dialog .chat-create-photo-button { justify-content: center; min-height: 48px; color: var(--brand); border: 1px solid var(--premium-border); }
.chat-create-photo-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
/* Override broad label-span and human-avatar rules only inside creation sheets. */
.chat-create-dialog .new-chat-picker .avatar.default-user,
.chat-create-dialog .chat-create-person .avatar.default-user {
  display: grid; place-items: center; width: 40px; height: 40px; min-width: 40px;
  flex: 0 0 40px; margin: 0; padding: 0; border-radius: 14px;
}
.chat-create-dialog .avatar.default-user > img,
.chat-create-dialog .avatar.default-user > .avatar-image-loading-indicator { border-radius: 12px; object-fit: cover; }
.chat-create-dialog .avatar.default-user > .avatar-image-loading-indicator { margin: 0; padding: 0; width: auto; }
.chat-create-dialog .new-chat-picker .avatar .status-dot,
.chat-create-dialog .chat-create-person .avatar .status-dot {
  display: block; width: 12px; height: 12px; min-width: 12px; min-height: 12px;
  margin: 0; padding: 0; border: 2px solid #fff; border-radius: 50%;
  background: #aaa; right: -4px; bottom: -4px; box-sizing: border-box;
}
.chat-create-dialog .new-chat-picker .avatar .status-dot.online,
.chat-create-dialog .chat-create-person .avatar .status-dot.online { background: var(--accent); }
.chat-create-dialog .new-chat-picker input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; box-sizing: border-box;
  width: 20px; height: 20px; min-width: 20px; min-height: 20px; padding: 0; margin: 0;
  border: 1.5px solid #92858a; border-radius: 6px; background: #fff;
  display: grid; place-items: center;
}
.chat-create-dialog .new-chat-picker input[type="checkbox"]:checked { background: var(--brand); border-color: var(--brand); }
.chat-create-dialog .new-chat-picker input[type="checkbox"]:checked::after {
  content: ''; width: 5px; height: 9px; border: solid white; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg);
}
.chat-create-dialog .new-chat-picker input[type="checkbox"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.new-chat-modal label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 820;
}

.new-chat-modal input,
.new-chat-modal select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(90, 23, 24, 0.14);
  border-radius: 13px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
  outline: none;
}

.new-chat-modal input:focus,
.new-chat-modal select:focus {
  border-color: rgba(90, 23, 24, 0.34);
  background: #fff;
}

.new-chat-modal label span {
  display: inline-flex;
  width: fit-content;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  color: rgba(90, 23, 24, 0.68);
  background: rgba(90, 23, 24, 0.055);
  font-size: 0.64rem;
  font-weight: 820;
  line-height: 1.35;
}

.new-chat-image-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(90, 23, 24, 0.1);
  border-radius: 14px;
  background: rgba(90, 23, 24, 0.045);
}

.new-chat-image-preview img {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  object-fit: cover;
}

.new-chat-image-preview small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 820;
}

.new-chat-picker {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.new-chat-picker legend {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 820;
}

.new-chat-picker label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(90, 23, 24, 0.1);
  border-radius: 14px;
  background: rgba(90, 23, 24, 0.045);
}

.new-chat-picker input {
  width: 18px;
  height: 18px;
  min-height: 0;
  flex: 0 0 auto;
}

.new-chat-picker .avatar {
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

.new-chat-picker span {
  display: grid;
  gap: 1px;
}

.new-chat-picker strong {
  color: var(--ink);
  font-size: 0.86rem;
}

.new-chat-picker small,
.new-chat-empty {
  color: var(--muted);
  font-size: 0.76rem;
}

.new-chat-empty {
  margin: 0;
  padding: 10px;
  border-radius: 13px;
  background: rgba(90, 23, 24, 0.055);
}

.weekly-mood-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.weekly-mood-results > h3 {
  margin: 0 0 8px;
  color: var(--brand);
}

.weekly-mood-results > p {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.45;
}

.weekly-mood-schedule,
.weekly-mood-report {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin-top: 12px;
  padding: 16px;
  border: 2px solid rgba(90, 23, 24, 0.38);
  border-radius: 20px;
  background: #fff;
}

.weekly-mood-schedule strong,
.weekly-mood-report strong { color: var(--brand); }

.weekly-mood-schedule label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-weight: 750;
}

.weekly-mood-schedule select,
.weekly-mood-schedule input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(90, 23, 24, 0.3);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}


.weekly-mood-schedule button {
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-weight: 800;
}

.weekly-mood-schedule button.is-saving { opacity: .72; }
.weekly-mood-schedule button.is-saved { animation: weekly-mood-saved .32s ease-out; }
.weekly-mood-schedule-feedback { margin: 0; color: var(--brand); font-weight: 750; line-height: 1.35; }
.weekly-mood-schedule-feedback.error { color: #a32929; }
@keyframes weekly-mood-saved { from { transform: scale(.96); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .weekly-mood-schedule button.is-saved { animation: none; } }

.weekly-mood-report p { margin: 0; color: var(--ink); }


.weekly-mood-results-head small,
.weekly-mood-results-head em {
  color: var(--muted);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 760;
}

.weekly-mood-results-head strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 880;
}

.weekly-mood-meter {
  height: 8px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(90, 23, 24, 0.08);
}

.weekly-mood-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-2);
}

.weekly-mood-breakdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.weekly-mood-breakdown button {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--ink);
  background: rgba(90, 23, 24, 0.06);
  text-align: center;
}

.weekly-mood-breakdown button:hover,
.weekly-mood-breakdown button:active,
.weekly-mood-breakdown button.active {
  border-color: rgba(90, 23, 24, 0.2);
  background: rgba(90, 23, 24, 0.12);
}

.weekly-mood-breakdown strong {
  color: var(--brand);
  font-size: 0.9rem;
}

.weekly-mood-breakdown small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 760;
}

.weekly-mood-notes {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0edf2;
}

.weekly-mood-notes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.weekly-mood-notes-head strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.weekly-mood-notes-head small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 780;
}

.weekly-mood-notes p {
  margin: 0;
  padding: 10px;
  border-radius: 13px;
  color: var(--ink);
  background: rgba(90, 23, 24, 0.055);
  font-size: 0.82rem;
  line-height: 1.3;
}

.bottom-nav.hidden {
  display: none;
}

.login-view {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  height: 100lvh;
  padding: 0;
  overflow: hidden;
  background: var(--login-bg);
  background-color: #09050d;
}

.login-screen {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  height: 100lvh;
  display: grid;
  place-items: center;
  padding: 28px;
  overflow: hidden;
  color: #fff;
  background: var(--login-bg);
  background-color: #09050d;
}

body.login-mode.keyboard-open .login-screen {
  place-items: start center;
  padding-top: max(18px, calc(var(--safe-top) + 10px));
  padding-bottom: calc(var(--keyboard-height) + 14px);
}

.login-card {
  width: min(100%, 390px);
  max-height: calc(100lvh - 56px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1.5px solid rgba(112, 30, 31, 0.8);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
}

.staff-onboarding-loading-card {
  overflow: hidden;
  gap: 22px;
  padding: 28px;
}

.staff-onboarding-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.staff-onboarding-progress span {
  height: 4px;
  overflow: hidden;
  position: relative;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.staff-onboarding-progress span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.9);
  transform: translateX(-110%);
  animation: staff-onboarding-progress 1.45s ease-in-out infinite;
}

.staff-onboarding-progress span:nth-child(2)::after {
  animation-delay: 160ms;
}

.staff-onboarding-progress span:nth-child(3)::after {
  animation-delay: 320ms;
}

@keyframes staff-onboarding-progress {
  0% { transform: translateX(-110%); }
  45%, 60% { transform: translateX(0); }
  100% { transform: translateX(110%); }
}

body.login-mode.keyboard-open .login-card {
  max-height: calc(100lvh - var(--keyboard-height) - max(18px, calc(var(--safe-top) + 10px)) - 14px);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.login-brand {
  --login-sequence-duration: 20s;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}

.login-brand .brand-logo {
  width: 54px;
  height: 54px;
  color: #fff;
  background: var(--brand);
  border-radius: 18px;
}

.login-logo-cinematic::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--brand) 0%, transparent 22%, transparent 78%, var(--brand) 100%);
}

.login-brand .login-logo-cinematic svg {
  width: 33px;
  height: 33px;
  stroke-width: 4.6;
}

.login-brand .login-logo-cinematic .login-logo-frame:not(:first-child):not(:last-child) svg {
  width: 36px;
  height: 36px;
}

.login-logo-track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  will-change: transform, opacity;
  animation: login-logo-line var(--login-sequence-duration) cubic-bezier(0.9, 0, 0.12, 1) infinite;
}

.login-logo-frame {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: grid;
  place-items: center;
}

@keyframes login-logo-line {
  0%, 8.5% { transform: translateX(0); }
  44.5%, 100% { transform: translateX(-810px); }
}

@media (prefers-reduced-motion: reduce) {
  .login-logo-track {
    animation: none;
  }

  .login-logo-track { transform: translateX(0); }
}

.login-word-window {
  height: 1.42rem;
  min-width: 132px;
  display: block;
  position: relative;
  overflow: hidden;
}

.login-word-track {
  display: grid;
  gap: 0;
  will-change: transform;
  animation: login-word-rise var(--login-sequence-duration) cubic-bezier(0.9, 0, 0.12, 1) infinite;
}

.login-word-track span {
  height: 1.42rem;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.login-brand .login-word-track span {
  font-size: 1.16rem;
  font-weight: 900;
  letter-spacing: 0;
}

@keyframes login-word-rise {
  0%, 8.5% { transform: translateY(0); }
  44.5%, 100% { transform: translateY(-21.3rem); }
}

@media (prefers-reduced-motion: reduce) {
  .login-word-track {
    animation: none;
  }
}

.login-copy {
  display: grid;
  gap: 6px;
}

.login-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.login-copy h1 {
  margin: 0;
  color: #fff;
  font-size: 2rem;
  letter-spacing: 0;
}

.login-copy span {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.9rem;
  line-height: 1.45;
}

.lined-boot-failure-screen {
  padding-top: max(28px, calc(var(--safe-top) + 28px));
  padding-bottom: max(28px, calc(var(--safe-bottom) + 28px));
}

.lined-boot-failure-card {
  gap: 22px;
}

.lined-boot-failure-help {
  color: rgba(255, 255, 255, 0.78);
}

.invite-summary {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
}

.invite-summary strong,
.invite-summary small {
  display: block;
}

.invite-summary strong {
  color: #fff;
  font-size: 0.95rem;
}

.invite-summary small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.78rem;
  font-weight: 780;
}

.login-card label {
  display: grid;
  gap: 7px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8rem;
  font-weight: 800;
}

.login-card input,
.login-card select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 15px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.login-card input[type="date"] {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  line-height: 48px;
}

.login-card input[type="date"]::-webkit-date-and-time-value {
  min-height: 48px;
  text-align: left;
}

.login-card input:focus,
.login-card select:focus {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.12);
}

.login-file-field {
  position: relative;
}

.login-file-field input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.login-file-picker {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 15px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.login-file-picker strong,
.login-file-picker small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-file-picker strong {
  font-size: 0.86rem;
  font-weight: 880;
}

.login-file-picker small {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.74rem;
  font-weight: 820;
}

.login-file-field:focus-within .login-file-picker,
.login-file-field:hover .login-file-picker {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.12);
}

.login-submit {
  min-height: 50px;
  border-radius: 16px;
  color: #fff;
  background: var(--brand);
  font-size: 0.94rem;
  font-weight: 900;
}

.login-submit:hover,
.login-submit:active {
  background: var(--brand-2);
}

.login-submit:disabled {
  cursor: wait;
  opacity: 0.74;
}

.login-submit:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.92);
  outline-offset: 3px;
}

.login-link { min-height: 44px;
  justify-self: center;
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
  font-weight: 800;
}

.login-link:hover,
.login-link:active {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.login-error {
  margin: -4px 0 0;
  padding: 10px 12px;
  border-radius: 13px;
  color: #fff;
  background: rgba(112, 30, 31, 0.46);
  font-size: 0.82rem;
  line-height: 1.35;
}

.owner-setup-card {
  gap: 15px;
}

.staff-setup-screen {
  place-items: start center;
  padding-top: max(50px, calc(var(--safe-top) + 34px));
}

body.login-mode.keyboard-open .staff-setup-screen {
  padding-top: max(18px, calc(var(--safe-top) + 10px));
}

.owner-setup-navigation {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.owner-setup-back,
.owner-setup-back-spacer {
  width: 44px;
  height: 44px;
}

.owner-setup-back {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.owner-setup-back svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.owner-setup-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.owner-setup-progress span {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.owner-setup-progress span.active {
  background: rgba(255, 255, 255, 0.88);
}

.owner-setup-note {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(112, 30, 31, 0.56);
  border-radius: 16px;
  background: rgba(112, 30, 31, 0.16);
}

.owner-setup-note strong,
.owner-setup-note small {
  display: block;
}

.owner-setup-note strong {
  color: #fff;
  font-size: 0.9rem;
}

.owner-setup-note small {
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.35;
}

.owner-setup-switch {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.84rem;
  font-weight: 820;
}

.owner-setup-switch:hover,
.owner-setup-switch:active {
  background: rgba(255, 255, 255, 0.16);
}

.owner-setup-card option {
  color: var(--ink);
}

.personal-premium {
  display: grid;
  gap: 14px;
  padding: 14px 18px 118px;
}

.personal-home-view {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding-bottom: calc(96px + var(--safe-bottom));
}

.personal-home-view .personal-premium {
  min-height: 0;
  height: calc(100dvh - var(--fixed-topbar-height) - 96px - var(--safe-bottom));
  grid-template-rows: auto minmax(0, auto) auto minmax(0, 1fr);
  gap: 10px;
  padding: 12px 18px 0;
  overflow: hidden;
}

.personal-hero.personal-hero-premium {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 86% 0%, rgba(255, 255, 255, 0.12), transparent 28%),
    linear-gradient(145deg, #140608 0%, #2a090b 52%, #5a1718 100%);
  box-shadow: 0 22px 46px rgba(20, 6, 8, 0.2);
}

.personal-home-view .personal-hero.personal-hero-premium {
  padding: 13px;
}

.personal-home-view .personal-hero.personal-hero-premium > .avatar {
  width: 56px;
  height: 56px;
  border-radius: 18px;
}

.personal-hero.personal-hero-premium > .avatar {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

.personal-hero.personal-hero-premium p {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
}

.personal-hero.personal-hero-premium h2 {
  color: #fff;
  font-size: 1.18rem;
  line-height: 1.05;
}

.personal-hero.personal-hero-premium span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.78rem;
}

.personal-hero-premium .personal-notifications-button {
  width: 42px;
  height: 42px;
  align-self: center;
  transform: none;
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.personal-hero-premium .personal-notifications-button.active,
.personal-hero-premium .personal-notifications-button:hover,
.personal-hero-premium .personal-notifications-button:active {
  background: rgba(255, 255, 255, 0.16);
}

.personal-premium-panel,
.personal-command-card,
.personal-hub-grid > button,
.personal-hub-details {
  border: 1px solid rgba(90, 23, 24, 0.12);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(250, 246, 248, 0.9));
  box-shadow: 0 18px 38px rgba(32, 20, 36, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
}

.personal-command-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 22px;
}

.personal-home-view .personal-command-card {
  gap: 9px;
  padding: 12px;
}

.personal-command-card .clock-next-shift {
  display: grid;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
}

.personal-command-card .clock-next-shift span {
  color: var(--brand);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.personal-command-card .clock-next-shift strong {
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.1;
}

.personal-command-card .clock-next-shift small,
.personal-command-card .clock-card small {
  color: var(--muted);
  font-size: 0.76rem;
}

.personal-command-card .clock-card {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(90, 23, 24, 0.06);
}

.personal-home-view .personal-command-card .clock-card {
  min-height: 52px;
  padding: 10px;
}

.personal-command-card .clock-card strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.personal-command-card .clock-card button {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 13px;
  color: #fff;
  background: var(--brand);
  font-weight: 900;
}

.personal-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.personal-kpi-row article,
.personal-kpi-row button {
  min-height: 72px;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 11px 10px;
  border-radius: 18px;
  color: #fff;
  text-align: left;
  background: linear-gradient(145deg, #23080a 0%, #5a1718 100%);
  box-shadow: 0 16px 28px rgba(90, 23, 24, 0.18);
}

.personal-home-view .personal-kpi-row article,
.personal-home-view .personal-kpi-row button {
  min-height: 62px;
  padding: 9px;
}

.personal-kpi-row small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.personal-kpi-row strong {
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  white-space: nowrap;
}

.personal-kpi-row button {
  position: relative;
}

.personal-kpi-row button span {
  position: absolute;
  right: 10px;
  bottom: 8px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
}

.personal-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
}

.personal-hub-grid > button,
.personal-hub-details {
  min-height: 112px;
  overflow: hidden;
  border-radius: 20px;
}

.personal-home-view .personal-hub-grid > button,
.personal-home-view .personal-hub-details {
  min-height: 0;
}

.personal-home-view .personal-hub-grid {
  grid-template-rows: repeat(2, minmax(0, 1fr));
  overflow: hidden;
}

.personal-home-view .personal-hub-grid > button,
.personal-home-view .personal-hub-details summary {
  align-content: center;
  padding: 12px;
}

@media (max-height: 760px) {
  .personal-home-view {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .personal-home-view .personal-premium {
    height: auto;
    min-height: calc(100dvh - var(--fixed-topbar-height) - 96px - var(--safe-bottom));
    overflow: visible;
    padding-bottom: 8px;
  }

  .personal-home-view .personal-hub-grid > button,
  .personal-home-view .personal-hub-details {
    min-height: 96px;
  }
}

.personal-hub-grid > button,
.personal-hub-details summary {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 14px;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.personal-hub-details summary {
  min-height: 112px;
  list-style: none;
  cursor: pointer;
}

.personal-hub-details summary::-webkit-details-marker {
  display: none;
}

.personal-hub-grid span,
.personal-hub-details summary > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
}

.personal-hub-grid svg,
.personal-hub-details svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.personal-hub-grid strong,
.personal-hub-details strong {
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.05;
}

.personal-hub-grid small,
.personal-hub-details small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.2;
}

.personal-hub-grid > button.active,
.personal-hub-details[open] summary {
  background: rgba(90, 23, 24, 0.08);
}

@media (hover: hover) and (pointer: fine) {
  .personal-hub-grid > button:hover,
  .personal-hub-grid > button:active,
  .personal-hub-details summary:hover,
  .personal-hub-details summary:active {
    background: rgba(90, 23, 24, 0.08);
  }
}

@media (hover: none), (pointer: coarse), (any-pointer: coarse) {
  html.touch-input .personal-hub-grid > button:not(.active):hover,
  html.touch-input .personal-hub-grid > button:not(.active):active,
  html.touch-input .personal-hub-details:not([open]) summary:hover,
  html.touch-input .personal-hub-details:not([open]) summary:active {
    background: transparent;
  }
}

.personal-hub-details textarea {
  width: calc(100% - 24px);
  min-height: 132px;
  margin: 0 12px 12px;
  padding: 12px;
  border: 1px solid rgba(90, 23, 24, 0.14);
  border-radius: 15px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.78);
  font: inherit;
  line-height: 1.35;
  resize: vertical;
}

.personal-document-list {
  display: grid;
  gap: 10px;
  padding: 4px;
}

.personal-document-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(90, 23, 24, 0.1);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.64);
}

.personal-document-list strong,
.personal-document-list small {
  display: block;
}

.personal-document-list strong {
  color: var(--ink);
  font-size: 0.82rem;
}

.personal-document-list small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.68rem;
}

.personal-document-list button {
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 0.68rem;
  font-weight: 900;
}

.personal-document-list a {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 0.68rem;
  font-weight: 900;
  text-decoration: none;
}

.personal-uploaded-document {
  border-color: rgba(90, 23, 24, 0.22);
  background: linear-gradient(145deg, rgba(90, 23, 24, 0.08), rgba(255, 255, 255, 0.72));
}

.personal-premium .personal-inline-roster,
.personal-premium .personal-recipes-panel,
.personal-premium .personal-notification-center,
.personal-premium .personal-request-updates {
  margin: 0;
  padding: 14px;
  border-radius: 20px;
}

.personal-premium .personal-inline-roster {
  border: 1px solid rgba(90, 23, 24, 0.12);
}

.personal-premium .personal-recipes-panel {
  border-top: 0;
}

.personal-premium .personal-panel-head {
  margin-bottom: 10px;
}

.personal-premium .personal-folder-preview {
  background: rgba(90, 23, 24, 0.06);
}

.personal-premium .personal-recipe-list article,
.personal-premium .personal-recipe-form input,
.personal-premium .personal-recipe-form textarea {
  background: rgba(255, 255, 255, 0.78);
}

.personal-notes-page {
  gap: 12px;
}

.personal-notes-toolbar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(90, 23, 24, 0.12);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(250, 246, 248, 0.9));
  box-shadow: 0 18px 38px rgba(32, 20, 36, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.personal-back-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
  font-size: 1.7rem;
  line-height: 1;
}

.personal-notes-toolbar h2,
.personal-notes-toolbar p {
  margin: 0;
}

.personal-notes-toolbar h2 {
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1.05;
}

.personal-notes-toolbar p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.76rem;
}

.chat-people-directory-toolbar > div {
  min-width: 0;
}

.chat-people-directory-toolbar h2,
.chat-people-directory-toolbar p {
  overflow-wrap: anywhere;
}

.chat-people-directory-toolbar > .pill {
  min-width: 0;
  max-width: 176px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-people-row {
  min-height: 72px;
}

.chat-people-row .team-main,
.chat-people-row .team-main strong,
.chat-people-row .team-main p {
  min-width: 0;
}

.chat-people-row .team-main strong,
.chat-people-row .team-main p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-people-row > .team-status {
  flex: 0 0 auto;
}

.team-person[data-chat-people-open]:focus-visible,
.chat-people-row:focus-visible,
.chat-people-directory-toolbar button:focus-visible {
  outline: 3px solid rgba(143, 47, 45, 0.34);
  outline-offset: 2px;
}

@media (max-width: 360px) {
  .chat-people-directory-toolbar {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .chat-people-directory-toolbar > .pill {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
  }
}

.personal-notes-add {
  min-height: 40px;
  padding: 0 13px;
  border-radius: 14px;
  color: #fff;
  background: var(--brand);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.personal-note-editor {
  padding: 14px;
  border: 1px solid rgba(90, 23, 24, 0.12);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(250, 246, 248, 0.9));
  box-shadow: 0 18px 38px rgba(32, 20, 36, 0.08);
}

.personal-notes-list {
  gap: 10px;
}

.personal-notes-list .personal-recipe-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.personal-notes-list .personal-recipe-actions > button {
  width: 100%;
}

.personal-notes-empty {
  min-height: 132px;
  display: grid !important;
  place-items: center;
  gap: 10px;
  padding: 22px !important;
  text-align: center;
  border: 1px dashed rgba(90, 23, 24, 0.22) !important;
  background: rgba(90, 23, 24, 0.045) !important;
}

.personal-notes-empty > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--brand);
  background: rgba(90, 23, 24, 0.08);
}

.personal-notes-empty svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.personal-notes-empty strong,
.personal-notes-empty small {
  display: block;
}

.personal-notes-empty strong {
  color: var(--ink);
  font-size: 0.96rem;
}

.personal-notes-empty small {
  max-width: 240px;
  margin: 5px auto 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

@media (hover: none), (pointer: coarse) {
  button,
  a,
  [role="button"],
  .conversation-item,
  .team-person,
  .team-directory-row {
    -webkit-tap-highlight-color: transparent;
  }

  button:active {
    transform: none;
  }

  .conversation-item:hover,
  .conversation-item:active,
  .conversation-item:focus,
  .conversation-item:focus-visible {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
  }

  .team-person:hover .avatar,
  .team-person:active .avatar,
  .team-person:focus .avatar,
  .team-person:focus-visible .avatar {
    transform: none;
  }

  .team-directory-row:hover,
  .team-directory-row:active,
  .team-directory-row:focus,
  .team-directory-row:focus-visible,
  .team-directory-row.locked:hover,
  .team-directory-row.locked:active {
    background: transparent;
  }

}

html.touch-input .conversation-item,
html.touch-input .conversation-item:hover,
html.touch-input .conversation-item:active,
html.touch-input .conversation-item:focus {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

html.touch-input .team-person .avatar,
html.touch-input .team-person:hover .avatar,
html.touch-input .team-person:active .avatar,
html.touch-input .team-person:focus .avatar {
  transform: none;
}

html.touch-input .team-directory-row:hover,
html.touch-input .team-directory-row:active {
  background: transparent;
}

@media (min-width: 720px) {
  body { padding: 28px 0; }
  body.conversation-mode .app-shell {
    height: calc(var(--conversation-viewport-height) - 56px);
  }
  body.conversation-mode .app-view.conversation-view {
    height: 100%;
  }
  .app-shell {
    min-height: calc(100vh - 56px);
    border-radius: 30px;
    overflow: hidden;
  }
  .app-view { min-height: calc(100vh - 56px); }
  .app-header,
  .conversation-topbar {
    top: calc(28px + var(--safe-top));
    border-radius: 30px 30px 24px 24px;
  }
  .conversation-header-portal {
    top: 28px;
  }
  .conversation-header-portal > .conversation-topbar {
    top: 0;
  }
}

.pwa-update-notice {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  left: max(14px, env(safe-area-inset-left));
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 560px;
  margin-inline: auto;
  padding: 12px 12px 12px 15px;
  color: #fff;
  background: #2a0b10;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(35, 5, 10, 0.28);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.pwa-update-notice.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.pwa-update-notice__copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.pwa-update-notice__copy strong,
.pwa-update-notice__copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pwa-update-notice__copy strong {
  font-size: 14px;
}

.pwa-update-notice__copy span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.pwa-update-notice__action {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 15px;
  color: #5f1118;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  background: #fff;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  touch-action: manipulation;
}

/* Stream is transport only: this surface deliberately shares the established
   Lined conversation geometry and visual language. */
.stream-pilot-screen { --stream-composer-clearance:calc(62px + max(8px,calc(6px + var(--safe-bottom)))); position:relative; box-sizing:border-box; height:100%; min-height:0; display:flex; flex-direction:column; overflow:hidden; background:transparent; color:var(--ink); }
.stream-pilot-status { align-self:center; margin:auto; color:var(--muted); font-size:.82rem; font-weight:720; }.stream-pilot-connectivity-status { flex:0 0 auto; margin:8px 20px 0; padding:10px 12px; border:1px solid rgba(143,47,45,.22); border-radius:14px; color:var(--brand); background:rgba(250,245,247,.9); font-size:.78rem; font-weight:800; }.stream-pilot-connectivity-status p { margin:0; }.stream-pilot-connectivity-status button { min-height:44px; margin-top:6px; padding:0 12px; border:0; border-radius:10px; color:var(--brand); background:rgba(90,23,24,.08); font:inherit; font-weight:850; }.stream-pilot-offline { color:var(--ink); border-color:rgba(90,23,24,.1); background:rgba(255,255,255,.78); }
.stream-pilot-messages { min-height:0; flex:1 1 auto; margin:0 20px; padding:14px 0 calc(14px + var(--stream-composer-clearance)); position:relative; overflow-y:scroll; overflow-x:hidden; clip-path:inset(0 0 var(--stream-composer-clearance) 0); -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; scrollbar-width:none; }.stream-pilot-messages::-webkit-scrollbar { display:none; }.stream-pilot-message-list { min-height:100%; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; position:relative; z-index:1; }.stream-pilot-date { margin-top:8px; }
.stream-pilot-message { flex:0 0 auto; }.stream-pilot-message .stream-pilot-avatar { flex:0 0 24px; width:24px; height:24px; display:grid; place-items:center; overflow:visible; margin-top:2px; border-radius:8px; color:var(--brand); background:#ece8ee; font-size:.64rem; font-weight:900; }.stream-pilot-message .stream-pilot-avatar > .avatar { width:24px; height:24px; min-width:24px; border-radius:8px; }.stream-pilot-message .stream-pilot-avatar > .avatar .status-dot { width:8px; height:8px; right:-1px; bottom:-1px; border-width:1.5px; }.stream-pilot-message .stream-pilot-avatar img { width:100%; height:100%; object-fit:cover; }.stream-pilot-message.mine .stream-pilot-avatar { background:rgba(255,255,255,.2); color:#fff; }.stream-pilot-message .bubble { width:auto; background:#fff; box-shadow:none; }.stream-pilot-message.mine .bubble { box-shadow:none; }.stream-pilot-message .bubble strong { color:var(--ink); }.stream-pilot-message.mine .bubble strong { color:#fff; }.stream-pilot-message p { margin:0; }.stream-pilot-message-mark { position:absolute; top:-8px; right:-8px; width:23px; height:23px; display:grid; place-items:center; border:2px solid #fff; border-radius:9px; color:#fff; background:var(--brand); box-shadow:0 4px 12px rgba(74,18,21,.22); }.stream-pilot-message-mark svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }.stream-pilot-message:not(.mine) .stream-pilot-message-mark { border-color:#fff; color:var(--brand); background:#f5ecec; }.stream-pilot-image-open { display:block; width:100%; padding:0; border:0; border-radius:14px; background:transparent; overflow:hidden; cursor:zoom-in; }.stream-pilot-image { display:block; width:100%; min-width:180px; height:220px; max-height:300px; border-radius:14px; object-fit:cover; content-visibility:auto; contain-intrinsic-size:220px; opacity:0; transition:opacity .12s ease; }.stream-pilot-image.is-loaded { opacity:1; }.stream-pilot-image.is-failed { opacity:.42; }.stream-pilot-media-bubble { min-width:180px; padding:8px; overflow:hidden; }.stream-pilot-media-bubble > strong { margin:2px 3px 6px; }.stream-pilot-audio-bubble { width:min(220px,calc(100vw - 92px)); max-width:min(76%,336px); }.stream-pilot-voice-row { margin-top:2px; }.stream-pilot-voice-row [data-stream-pilot-audio] { display:none; }.stream-pilot-file { display:block; margin-top:8px; color:inherit; font-size:.82rem; font-weight:800; }.stream-pilot-media-meta { display:flex; width:100%; margin:6px 2px 0; justify-content:flex-end; }
.stream-pilot-file { width:min(280px,100%); display:flex; align-items:center; gap:10px; margin-top:4px; padding:9px; border:1px solid rgba(90,23,24,.12); border-radius:14px; color:var(--ink); background:rgba(90,23,24,.045); text-decoration:none; }.stream-pilot-file-icon { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:10px; color:var(--brand); background:rgba(90,23,24,.09); }.stream-pilot-file-icon svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }.stream-pilot-file-copy { min-width:0; display:grid; gap:2px; flex:1 1 auto; }.stream-pilot-file-copy strong { overflow:hidden; color:var(--ink) !important; font-size:.78rem; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }.stream-pilot-file-copy small { overflow:hidden; color:var(--muted); font-size:.68rem; font-weight:760; text-overflow:ellipsis; white-space:nowrap; }.stream-pilot-file-open { flex:0 0 auto; color:var(--brand); font-size:.7rem; font-weight:900; }.stream-pilot-message.mine .stream-pilot-file { border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.13); }.stream-pilot-message.mine .stream-pilot-file-icon { color:#fff; background:rgba(255,255,255,.16); }.stream-pilot-message.mine .stream-pilot-file-copy strong,.stream-pilot-message.mine .stream-pilot-file-copy small,.stream-pilot-message.mine .stream-pilot-file-open { color:#fff !important; }.stream-pilot-video { display:block; width:100%; min-width:180px; height:220px; max-height:300px; border:0; border-radius:14px; object-fit:cover; background:#211718; }

/* The Stream transport uses the same long-press action language as the
   established venue conversation: actions are deliberate, reachable and do
   not turn a simple tap/scroll into an accidental command. */
.stream-pilot-reply-reference { display:grid; gap:2px; max-width:220px; margin:0 0 7px; padding:6px 8px; border:0; border-left:3px solid currentColor; border-radius:7px; color:rgba(37,28,35,.72); background:rgba(90,23,24,.06); font:inherit; font-size:.72rem; line-height:1.22; text-align:left; cursor:pointer; touch-action:manipulation; }.stream-pilot-reply-reference strong { color:inherit !important; font-size:.72rem; }.stream-pilot-message.mine .stream-pilot-reply-reference { color:rgba(255,255,255,.88); background:rgba(255,255,255,.13); }.stream-pilot-reply-reference span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.stream-pilot-reply-reference:focus-visible { outline:3px solid currentColor; outline-offset:2px; }.stream-pilot-message.is-reply-target > .bubble { animation:stream-pilot-reply-target 1.3s ease-out; }.stream-pilot-message.is-reply-target > .bubble::after { content:""; position:absolute; inset:-4px; pointer-events:none; border:2px solid var(--brand); border-radius:inherit; animation:stream-pilot-reply-ring 1.3s ease-out; }.stream-pilot-message.mine.is-reply-target > .bubble::after { border-color:rgba(255,255,255,.94); }@keyframes stream-pilot-reply-target { 0%,38% { filter:brightness(1.07); } 100% { filter:brightness(1); } }@keyframes stream-pilot-reply-ring { 0% { opacity:1; transform:scale(.98); } 100% { opacity:0; transform:scale(1.035); } }
.stream-pilot-message-actions-backdrop { position:fixed; z-index:89; inset:0; border:0; background:rgba(8,5,7,.12); }.stream-pilot-message-actions,.stream-pilot-forward-picker,.stream-pilot-message-info,.stream-pilot-delete-confirm { position:fixed; z-index:90; left:50%; bottom:max(82px,calc(70px + var(--safe-bottom))); width:min(calc(100% - 36px),430px); transform:translateX(-50%); border:1px solid rgba(90,23,24,.16); border-radius:22px; color:var(--ink); background:rgba(255,255,255,.98); box-shadow:0 20px 56px rgba(32,20,36,.24); }.stream-pilot-message-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:9px; }.stream-pilot-message-actions button { min-height:62px; display:grid; place-items:center; gap:4px; padding:7px 4px; border:0; border-radius:14px; color:var(--ink); background:rgba(90,23,24,.055); font:inherit; font-size:.7rem; font-weight:850; }.stream-pilot-message-actions button svg { width:22px; height:22px; fill:none; stroke:var(--brand); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }.stream-pilot-message-actions button.is-marked { color:#fff; background:var(--brand); }.stream-pilot-message-actions button.is-marked svg { stroke:#fff; }.stream-pilot-message-actions button.is-destructive { color:var(--brand); background:rgba(143,47,45,.12); }.stream-pilot-forward-picker,.stream-pilot-message-info,.stream-pilot-delete-confirm { padding:14px; }.stream-pilot-forward-picker header,.stream-pilot-message-info header,.stream-pilot-delete-confirm header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }.stream-pilot-forward-picker header div { display:grid; gap:2px; }.stream-pilot-forward-picker header strong,.stream-pilot-message-info header strong,.stream-pilot-delete-confirm header strong { font-size:1rem; }.stream-pilot-forward-picker header span { color:var(--muted); font-size:.78rem; }.stream-pilot-forward-picker header button,.stream-pilot-message-info header button,.stream-pilot-delete-confirm header button { width:36px; height:36px; border:0; border-radius:12px; color:var(--brand); background:rgba(90,23,24,.08); font:inherit; font-size:1.35rem; }.stream-pilot-forward-picker > div { display:grid; gap:7px; max-height:min(48vh,340px); overflow:auto; }.stream-pilot-forward-picker > div button { display:grid; gap:2px; width:100%; padding:11px 12px; border:0; border-radius:14px; color:var(--ink); background:rgba(90,23,24,.055); font:inherit; text-align:left; }.stream-pilot-forward-picker > div button span { color:var(--muted); font-size:.75rem; }.stream-pilot-forward-picker p,.stream-pilot-delete-confirm p { margin:4px 0 13px; color:var(--muted); font-size:.84rem; line-height:1.35; }.stream-pilot-delete-confirm > div { display:grid; gap:7px; }.stream-pilot-delete-confirm > div button { width:100%; min-height:44px; border:0; border-radius:14px; color:var(--ink); background:rgba(90,23,24,.07); font:inherit; font-weight:850; }.stream-pilot-delete-confirm > div button.is-destructive { color:#fff; background:var(--brand); }.stream-pilot-delete-confirm > div button.is-secondary { background:transparent; color:var(--muted); }.stream-pilot-message-info dl { display:grid; gap:8px; margin:0; }.stream-pilot-message-info dl div { display:flex; align-items:baseline; justify-content:space-between; gap:15px; padding:9px 0; border-top:1px solid rgba(90,23,24,.08); }.stream-pilot-message-info dt { color:var(--muted); font-size:.78rem; }.stream-pilot-message-info dd { margin:0; color:var(--ink); font-size:.84rem; font-weight:800; text-align:right; }.stream-pilot-reply-draft { position:absolute; z-index:10; left:50%; bottom:calc(80px + var(--safe-bottom)); width:min(calc(100% - 40px),440px); display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 11px; transform:translateX(-50%); border-left:3px solid var(--brand); border-radius:16px; color:var(--ink); background:#fff; box-shadow:0 12px 28px rgba(32,20,36,.13); }.stream-pilot-reply-draft div { display:grid; min-width:0; gap:2px; }.stream-pilot-reply-draft strong { font-size:.76rem; }.stream-pilot-reply-draft span { overflow:hidden; color:var(--muted); font-size:.74rem; text-overflow:ellipsis; white-space:nowrap; }.stream-pilot-reply-draft button { width:34px; height:34px; flex:0 0 34px; border:0; border-radius:11px; color:var(--brand); background:rgba(90,23,24,.08); font:inherit; font-size:1.25rem; }
.stream-pilot-settings-backdrop { position:fixed; z-index:94; inset:0; border:0; background:rgba(8,5,7,.24); }.stream-pilot-settings-panel { position:fixed; z-index:95; left:50%; top:50%; width:min(calc(100% - 36px),430px); max-height:min(72vh,640px); overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; transform:translate(-50%,-50%); border:1px solid rgba(90,23,24,.18); border-radius:24px; color:var(--ink); background:#fff; box-shadow:0 24px 70px rgba(32,20,36,.3); }.stream-pilot-settings-panel header { display:flex; align-items:center; gap:10px; padding:16px 16px 12px; border-bottom:1px solid rgba(90,23,24,.08); }.stream-pilot-settings-panel header div { display:grid; flex:1; gap:2px; }.stream-pilot-settings-panel header strong { font-size:1rem; }.stream-pilot-settings-panel header span { color:var(--muted); font-size:.78rem; }.stream-pilot-settings-panel header > button { width:36px; height:36px; border:0; border-radius:12px; color:var(--brand); background:rgba(90,23,24,.08); font:inherit; font-size:1.35rem; }.stream-pilot-settings-panel .stream-pilot-settings-back { font-size:1.8rem; line-height:1; }.stream-pilot-settings-row,.stream-pilot-marked-list > button { display:flex; align-items:center; justify-content:space-between; width:100%; gap:12px; padding:15px 16px; border:0; color:var(--ink); background:#fff; font:inherit; text-align:left; }.stream-pilot-settings-row span,.stream-pilot-marked-list > button span { display:grid; min-width:0; gap:3px; }.stream-pilot-settings-row small,.stream-pilot-marked-list small { color:var(--muted); font-size:.76rem; }.stream-pilot-settings-row svg,.stream-pilot-marked-list svg { width:22px; height:22px; flex:0 0 22px; fill:none; stroke:var(--brand); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }.stream-pilot-marked-list > button { border-bottom:1px solid rgba(90,23,24,.08); }.stream-pilot-marked-list strong,.stream-pilot-marked-list em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.stream-pilot-marked-list em { color:var(--ink); font-size:.84rem; font-style:normal; }.stream-pilot-marked-list p { margin:0; padding:20px 16px; color:var(--muted); font-size:.86rem; }

/* Stream Chat settings deliberately mirror the established Lined settings
   language while keeping all navigation inside the persistent transcript. */
.stream-pilot-settings-panel header > button { width:44px; height:44px; flex:0 0 44px; border-radius:14px; }
.stream-pilot-settings-section { border-top:1px solid rgba(90,23,24,.08); }
.stream-pilot-settings-private-profile { display:flex; align-items:center; gap:13px; padding:16px; border-bottom:1px solid rgba(90,23,24,.08); }.stream-pilot-settings-private-profile>div:last-child { display:grid; min-width:0; gap:3px; }.stream-pilot-settings-private-profile strong { overflow-wrap:anywhere; font-size:1rem; }.stream-pilot-settings-private-profile span { color:var(--muted); font-size:.78rem; }.stream-pilot-settings-private-profile i { font-style:normal; }
.stream-pilot-settings-members { border-bottom:1px solid rgba(90,23,24,.08); }.stream-pilot-settings-members h2 { margin:0; padding:13px 16px 7px; color:var(--muted); font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; }.stream-pilot-settings-members>div { display:grid; }
.stream-pilot-settings-member { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:11px; min-width:0; padding:10px 16px; }.stream-pilot-settings-member>div:nth-child(2) { display:grid; min-width:0; gap:2px; }.stream-pilot-settings-member strong,.stream-pilot-settings-member span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.stream-pilot-settings-member span,.stream-pilot-settings-member small { color:var(--muted); font-size:.76rem; }.stream-pilot-settings-member-avatar,.stream-pilot-settings-member-avatar>.avatar { width:44px; height:44px; min-width:44px; }.stream-pilot-settings-member-avatar>.avatar { border-radius:50%; }
.stream-pilot-settings-panel button,.stream-pilot-settings-panel a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; -webkit-user-select:none; user-select:none; }
.stream-pilot-settings-panel button:focus-visible,.stream-pilot-settings-panel a:focus-visible { outline:3px solid var(--brand); outline-offset:-3px; }.stream-group-controls{padding:12px 16px;border-top:1px solid rgba(90,23,24,.1)}.stream-group-controls>p{margin:8px 0 12px;color:var(--muted);font-size:.85rem;line-height:1.5}.stream-group-controls .stream-pilot-settings-row{min-height:44px;margin:6px 0;padding:12px;border-radius:14px;color:var(--brand);background:rgba(90,23,24,.06);cursor:pointer;flex-wrap:wrap}.stream-group-controls button:disabled{opacity:.45;cursor:default}.stream-group-admin{display:inline-block;margin-left:5px;padding:2px 6px;border-radius:7px;color:var(--brand);background:rgba(90,23,24,.08);font-size:10px;vertical-align:middle}.stream-group-member{padding:12px 0;border-bottom:1px solid rgba(90,23,24,.09)}.stream-group-search{display:grid;gap:8px;margin:12px 0;color:var(--muted);font-size:.8rem}.stream-group-search input,.stream-group-search select,.team-group-succession select{box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:10px;border:1px solid rgba(90,23,24,.2);border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:16px}.stream-group-candidates{display:grid;gap:8px}.stream-group-candidates label{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px;border-radius:12px;background:rgba(90,23,24,.05)}.stream-group-candidates [hidden]{display:none}.stream-group-candidates input{width:20px;height:20px;flex:0 0 20px;accent-color:var(--brand)}.stream-group-candidates span{display:grid;gap:3px;min-width:0;overflow-wrap:anywhere}.stream-group-candidates small{color:var(--muted)}.team-group-succession{padding:16px;margin:14px 0;border:1px solid rgba(90,23,24,.16);border-radius:20px;background:rgba(255,255,255,.85);overflow-wrap:anywhere}.team-group-succession header{display:flex;justify-content:space-between;align-items:center;gap:10px}.team-group-succession header h3{margin:0}.team-group-succession p{font-size:.86rem;line-height:1.45;color:var(--muted)}.team-group-succession label{display:grid;gap:8px;margin:14px 0}.team-group-succession button{min-height:44px;border:0;border-radius:12px;padding:10px 14px;background:var(--brand);color:#fff;font:inherit}.team-group-succession header button{width:44px;flex:0 0 44px;background:rgba(90,23,24,.08);color:var(--brand);font-size:24px}.team-group-succession button:disabled{opacity:.5}.team-group-succession button:focus-visible,.team-group-succession select:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.stream-pilot-settings-row { cursor:default; }
.stream-pilot-settings-row:hover { background:#fff; }
.stream-pilot-settings-mute { border-bottom:1px solid rgba(90,23,24,.08); }
.stream-pilot-settings-toggle { position:relative; width:42px; height:24px; flex:0 0 42px; border-radius:999px; background:#d8d1d1; transition:background .18s ease; }
.stream-pilot-settings-toggle::after { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.24); content:""; transition:transform .18s ease; }
.stream-pilot-settings-toggle.is-active { background:var(--brand); }
.stream-pilot-settings-toggle.is-active::after { transform:translateX(18px); }
.stream-pilot-settings-detail { max-height:min(76vh,700px); }
.stream-pilot-settings-empty { margin:0; padding:24px 16px; color:var(--muted); font-size:.87rem; }
.stream-pilot-settings-media-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; padding:10px; }
.stream-pilot-settings-media-grid > button { position:relative; aspect-ratio:1; overflow:hidden; border:0; border-radius:11px; background:#eee; padding:0; }
.stream-pilot-settings-media-grid img,.stream-pilot-settings-media-grid video { width:100%; height:100%; object-fit:cover; display:block; }
.stream-pilot-settings-media-grid .stream-pilot-video-play { position:absolute; left:50%; top:50%; display:grid; width:34px; height:34px; place-items:center; transform:translate(-50%,-50%); border-radius:50%; color:#fff; background:rgba(12,8,8,.65); font-size:.8rem; }
.stream-pilot-settings-list { padding:4px 0; }
.stream-pilot-settings-file,.stream-pilot-settings-note { display:flex; align-items:center; width:100%; gap:12px; padding:14px 16px; border:0; border-bottom:1px solid rgba(90,23,24,.08); color:var(--ink); background:#fff; font:inherit; text-align:left; text-decoration:none; }
.stream-pilot-settings-file > span:nth-child(2),.stream-pilot-settings-note > div { display:grid; min-width:0; flex:1; gap:3px; }
.stream-pilot-settings-file strong,.stream-pilot-settings-note strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9rem; }
.stream-pilot-settings-file small,.stream-pilot-settings-note small,.stream-pilot-settings-note p { color:var(--muted); font-size:.76rem; }
.stream-pilot-settings-file b { color:var(--brand); font-size:1.25rem; }
.stream-pilot-settings-file-icon,.stream-pilot-settings-note > span { display:grid; width:38px; height:38px; flex:0 0 38px; place-items:center; border-radius:12px; background:rgba(90,23,24,.08); }
.stream-pilot-settings-file-icon svg,.stream-pilot-settings-note svg { width:20px; height:20px; fill:none; stroke:var(--brand); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.stream-pilot-settings-note { align-items:flex-start; }
.stream-pilot-settings-note p { margin:2px 0 0; line-height:1.3; }
.stream-pilot-settings-note > b { color:var(--brand); font-size:1.25rem; line-height:1; }
.stream-pilot-settings-note-detail { max-width:430px; }
.stream-pilot-settings-note-preview { padding:14px; background:#fff; }
.stream-pilot-settings-note-preview .stream-pilot-shared-note { margin:0; }

.stream-pilot-jump-latest { position:absolute; z-index:8; right:28px; bottom:calc(var(--stream-composer-clearance) + 14px); width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%; color:#fff; background:var(--brand); box-shadow:0 8px 24px rgba(90,23,24,.28); font-size:1.55rem; line-height:1; }.stream-pilot-jump-latest[hidden] { display:none; }.stream-pilot-image-viewer { position:fixed; inset:0; z-index:100; display:grid; grid-template-rows:auto minmax(0,1fr); gap:0; padding:max(18px,var(--safe-top)) 0 max(12px,var(--safe-bottom)); overflow:hidden; background:#050505; color:#fff; animation:stream-pilot-viewer-in .14s ease-out; }.stream-pilot-image-viewer-bar { display:grid; grid-template-columns:72px minmax(0,1fr) 72px; align-items:center; min-height:88px; padding:0 18px 14px; color:#fff; }.stream-pilot-image-viewer-bar div { display:grid; justify-items:center; gap:3px; min-width:0; text-align:center; }.stream-pilot-image-viewer-bar strong { overflow:hidden; max-width:100%; color:#fff; font-size:1.22rem; font-weight:800; letter-spacing:-.02em; text-overflow:ellipsis; white-space:nowrap; }.stream-pilot-image-viewer-bar span { color:rgba(255,255,255,.9); font-size:.94rem; font-weight:650; }.stream-pilot-image-viewer-bar > button { position:relative; z-index:2; width:56px; height:56px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.18); border-radius:50%; color:#fff; background:#1b1b1b; box-shadow:inset 0 1px rgba(255,255,255,.1),0 4px 14px rgba(0,0,0,.24); pointer-events:auto; }.stream-pilot-image-viewer-bar > button svg { width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:2.7; stroke-linecap:round; stroke-linejoin:round; }.stream-pilot-image-viewer-bar > button:active { transform:scale(.94); background:#303030; }.stream-pilot-image-stage { min-width:0; min-height:0; display:grid; place-items:center; overflow:hidden; background:#050505; touch-action:none; user-select:none; }.stream-pilot-image-stage img { display:block; width:auto; max-width:100%; height:auto; max-height:100%; object-fit:contain; transform-origin:center; transition:transform .13s ease-out; will-change:transform; -webkit-user-drag:none; }.stream-pilot-image-stage img.is-zoomed { cursor:grab; transition:none; }@media (max-width:520px) { .stream-pilot-image-viewer-bar { grid-template-columns:62px minmax(0,1fr) 62px; min-height:76px; padding:0 14px 10px; }.stream-pilot-image-viewer-bar > button { width:52px; height:52px; }.stream-pilot-image-viewer-bar > button svg { width:32px; height:32px; }.stream-pilot-image-viewer-bar strong { font-size:1.15rem; }.stream-pilot-image-viewer-bar span { font-size:.88rem; } }@keyframes stream-pilot-viewer-in { from { opacity:0; } to { opacity:1; } }
.stream-pilot-pending-attachment { position:absolute; z-index:10; left:50%; bottom:calc(80px + var(--safe-bottom)); width:min(calc(100% - 40px),440px); display:grid; grid-template-columns:58px minmax(0,1fr) 44px; align-items:center; gap:10px; margin:0; padding:9px; transform:translateX(-50%); border:1px solid rgba(90,23,24,.14); border-radius:18px; background:rgba(250,245,247,.96); box-shadow:0 14px 34px rgba(32,20,36,.14); }.stream-pilot-pending-attachment img { width:58px; height:58px; border-radius:14px; object-fit:cover; }.stream-pilot-pending-attachment audio { width:58px; min-width:0; }.stream-pilot-pending-attachment div { display:grid; gap:2px; min-width:0; }.stream-pilot-pending-attachment strong { color:var(--ink); font-size:.84rem; font-weight:900; }.stream-pilot-pending-attachment span { overflow:hidden; color:var(--muted); font-size:.74rem; font-weight:760; text-overflow:ellipsis; white-space:nowrap; }.stream-pilot-pending-attachment button { width:44px; height:44px; border:0; border-radius:12px; color:var(--brand); background:rgba(90,23,24,.08); font:inherit; font-size:0; }.stream-pilot-pending-attachment button::after { content:"×"; font-size:1.08rem; font-weight:900; }
.stream-pilot-composer { position:absolute; z-index:11; left:50%; bottom:max(8px,calc(6px + var(--safe-bottom))); width:min(calc(100% - 40px),440px); display:flex; gap:8px; align-items:center; box-sizing:border-box; margin:0; padding:8px; transform:translateX(-50%); border:1px solid var(--brand); border-radius:24px; background:#fff; box-shadow:none; }.stream-pilot-composer:focus-within { box-shadow:0 0 0 3px rgba(143,47,45,.1); }.stream-pilot-composer input[type="text"] { min-width:0; flex:1; border:0; outline:0; background:transparent; padding:0 4px; color:var(--ink); font:inherit; }.stream-pilot-attach { width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; overflow:hidden; border-radius:16px; color:#39343d; background:rgba(255,255,255,.32); cursor:pointer; }.stream-pilot-attach input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }.stream-pilot-composer button { height:44px; min-width:44px; border:0; font:inherit; font-weight:850; }.stream-pilot-composer-icon { display:flex; align-items:center; justify-content:center; }.stream-pilot-composer-icon svg { flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }.stream-pilot-composer-icon-attach svg { width:22px; height:22px; }.stream-pilot-composer-action { position:relative; display:grid; place-items:center; flex:0 0 44px; border-radius:18px; color:#fff; background:linear-gradient(145deg,rgba(181,90,57,.78),rgba(90,23,24,.9)); box-shadow:0 10px 24px rgba(90,23,24,.22); }.stream-pilot-composer-action .stream-pilot-composer-icon { grid-area:1 / 1; transition:opacity .16s ease,transform .18s ease; }.stream-pilot-composer-icon-voice { gap:2px; opacity:1; transform:scale(1) translateY(0); }.stream-pilot-composer-icon-voice svg:first-child,.stream-pilot-composer-icon-voice-active svg:first-child { width:19px; height:19px; }.stream-pilot-composer-icon-voice svg:last-child,.stream-pilot-composer-icon-voice-active svg:last-child { width:12px; height:19px; margin-left:-2px; }.stream-pilot-composer-icon-voice-active,.stream-pilot-composer-icon-send,.stream-pilot-composer-icon-send-active { opacity:0; transform:scale(.86); }.stream-pilot-composer.has-send-content .stream-pilot-composer-icon-voice,.stream-pilot-composer.has-send-content .stream-pilot-composer-icon-voice-active { opacity:0; transform:scale(.86); }.stream-pilot-composer.has-send-content .stream-pilot-composer-icon-send { opacity:1; transform:scale(1) translateY(0); }.stream-pilot-composer-icon-send svg,.stream-pilot-composer-icon-send-active svg { width:23px; height:23px; }.stream-pilot-composer.is-recording-voice .stream-pilot-composer-icon-voice,.stream-pilot-composer.is-recording-voice .stream-pilot-composer-icon-send,.stream-pilot-composer.is-recording-voice .stream-pilot-composer-icon-send-active { opacity:0; transform:scale(.86); }.stream-pilot-composer.is-recording-voice .stream-pilot-composer-icon-voice-active { opacity:1; transform:scale(1) translateY(0); }.stream-pilot-composer:not(.has-send-content) .stream-pilot-record:active .stream-pilot-composer-icon-voice,.stream-pilot-composer.has-send-content .stream-pilot-send:active .stream-pilot-composer-icon-send { opacity:0; transform:scale(.86); }.stream-pilot-composer:not(.has-send-content) .stream-pilot-record:active .stream-pilot-composer-icon-voice-active,.stream-pilot-composer.has-send-content .stream-pilot-send:active .stream-pilot-send-active { opacity:1; transform:scale(1) translateY(0); }.stream-pilot-composer-icon svg .bell-fill { fill:currentColor; stroke:none; }.stream-pilot-cancel-recording { flex:0 0 44px; display:grid; place-items:center; border-radius:14px; color:var(--brand); background:rgba(90,23,24,.08); }.stream-pilot-cancel-recording[hidden] { display:none; }.stream-pilot-cancel-recording svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }.stream-pilot-composer.is-recording-voice input { color:var(--brand); font-weight:900; }.stream-pilot-send .stream-pilot-composer-icon { width:100%; height:100%; transform:translate(0,0); }
.stream-pilot-composer button:focus-visible { outline:3px solid var(--brand); outline-offset:2px; }
/* Keep the established pressed-send icon selector after the composer surface reset. */
.stream-pilot-composer.has-send-content .stream-pilot-send:active .stream-pilot-composer-icon-send-active { opacity:1; transform:scale(1) translateY(0); }
/* Keep the bordeaux card outline; remove only the pale panel/ambient surface. */
.stream-pilot-composer,body.keyboard-open .stream-pilot-composer,body.keyboard-open.native-keyboard .stream-pilot-composer{background:#fff;box-shadow:none}
body.keyboard-open .stream-pilot-screen { --stream-composer-clearance:calc(var(--stream-keyboard-offset, var(--keyboard-height)) + 62px); }
body.keyboard-open .stream-pilot-composer,
body.keyboard-open.native-keyboard .stream-pilot-composer { bottom:var(--stream-keyboard-offset, var(--keyboard-height)); background:#fff; backdrop-filter:none; }
body.keyboard-open .stream-pilot-composer,body.keyboard-open.native-keyboard .stream-pilot-composer{background:#fff;box-shadow:none}
body.keyboard-open .stream-pilot-messages { scroll-padding-bottom:var(--stream-composer-clearance); }
.stream-pilot-screen { --stream-composer-clip:calc(31px + max(8px,calc(6px + var(--safe-bottom)))); }
.stream-pilot-messages { clip-path:inset(0 0 var(--stream-composer-clip) 0); }
body.keyboard-open .stream-pilot-screen { --stream-composer-clip:calc(var(--stream-keyboard-offset, var(--keyboard-height)) + 31px); }
body.keyboard-open .stream-pilot-pending-attachment { bottom:calc(var(--stream-keyboard-offset, var(--keyboard-height)) + 74px); }
body.keyboard-open .stream-pilot-pending-note { bottom:calc(var(--stream-keyboard-offset, var(--keyboard-height)) + 74px); }
body.keyboard-open .stream-pilot-reply-draft { bottom:calc(var(--stream-keyboard-offset, var(--keyboard-height)) + 74px); }
/* Match the original composer semantics: a voice action for an empty draft,
   a send action once text or an attachment is ready. */
.stream-pilot-composer .stream-pilot-send { display:none; }
.stream-pilot-composer.has-send-content .stream-pilot-record { display:none; }
.stream-pilot-composer.has-send-content .stream-pilot-send { display:block; }

/* Optical centering for the bell glyph within the send control. */
.stream-pilot-send .stream-pilot-composer-icon-send svg,
.stream-pilot-send .stream-pilot-composer-icon-send-active svg { transform:translateY(1px); }
.stream-pilot-composer.has-send-content .stream-pilot-send .stream-pilot-composer-icon-send { transform:scale(1) translateY(0); }
.stream-pilot-composer.has-send-content .stream-pilot-send:active .stream-pilot-composer-icon-send { transform:scale(.86); }
.stream-pilot-composer.has-send-content .stream-pilot-send:active .stream-pilot-composer-icon-send-active { transform:scale(1) translateY(0); }

/* Stream attachment sheet: Media opens the native image library immediately;
   Camera and File retain their own native pickers. */
.stream-pilot-attachment-menu { position:absolute; z-index:12; left:50%; bottom:calc(80px + var(--safe-bottom)); width:min(calc(100% - 40px),440px); display:grid; gap:8px; padding:12px; transform:translateX(-50%); border:1px solid rgba(90,23,24,.16); border-radius:22px; background:rgba(255,255,255,.98); box-shadow:0 24px 60px rgba(90,23,24,.16); }.stream-pilot-attachment-menu > button { min-height:44px; display:flex; align-items:center; gap:10px; padding:0 12px; border:0; border-radius:14px; color:var(--ink); background:rgba(90,23,24,.06); font:inherit; font-weight:850; text-align:left; }.stream-pilot-attachment-menu > button:active { background:var(--brand-hover); }.stream-pilot-attachment-menu > button svg { width:22px; height:22px; flex:0 0 auto; fill:none; stroke:var(--brand); stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }.stream-pilot-attachment-menu input[type="file"] { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }.stream-pilot-note-draft { position:absolute; z-index:12; left:50%; bottom:calc(80px + var(--safe-bottom)); width:min(calc(100% - 40px),440px); display:grid; gap:9px; padding:12px; transform:translateX(-50%); border:1px solid rgba(90,23,24,.16); border-radius:22px; background:#fff; box-shadow:0 24px 60px rgba(90,23,24,.16); }.stream-pilot-note-draft textarea { min-height:96px; resize:vertical; padding:12px; border:1px solid rgba(90,23,24,.14); border-radius:14px; color:var(--ink); font:inherit; }.stream-pilot-note-draft div { display:flex; justify-content:flex-end; gap:8px; }.stream-pilot-note-draft button { min-height:40px; padding:0 13px; border:0; border-radius:12px; color:var(--brand); background:rgba(90,23,24,.08); font:inherit; font-weight:850; }.stream-pilot-note-draft [data-stream-pilot-send-note] { color:#fff; background:var(--brand); }.stream-pilot-file-preview { width:58px; height:58px; display:grid; place-items:center; border-radius:14px; color:var(--brand); background:rgba(90,23,24,.08); }.stream-pilot-file-preview svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
body.keyboard-open .stream-pilot-attachment-menu,body.keyboard-open .stream-pilot-note-draft,body.keyboard-open .stream-pilot-note-picker { bottom:calc(var(--stream-keyboard-offset, var(--keyboard-height)) + 74px); }

/* Notes belong to Personal. The chat attachment sheet only selects and shares
   an existing personal note; it never creates a second, chat-local note. */
.stream-pilot-note-picker { position:absolute; z-index:12; left:50%; bottom:calc(80px + var(--safe-bottom)); width:min(calc(100% - 40px),440px); max-height:min(56vh,440px); display:grid; grid-template-rows:auto minmax(0,1fr); gap:10px; padding:14px; transform:translateX(-50%); border:1px solid rgba(90,23,24,.16); border-radius:22px; background:#fff; box-shadow:0 24px 60px rgba(90,23,24,.16); }
.stream-pilot-note-picker header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.stream-pilot-note-picker header div { display:grid; gap:2px; }
.stream-pilot-note-picker header strong { color:var(--ink); font-size:16px; }
.stream-pilot-note-picker header span { color:var(--muted); font-size:12px; }
.stream-pilot-note-picker header button { width:36px; height:36px; border:0; border-radius:12px; color:var(--brand); background:rgba(90,23,24,.08); font:inherit; font-size:24px; line-height:1; }
.stream-pilot-note-picker-list { display:grid; gap:8px; overflow:auto; overscroll-behavior:contain; }
.stream-pilot-note-picker-list > button { display:grid; gap:3px; width:100%; padding:12px; border:0; border-radius:14px; color:var(--ink); background:rgba(90,23,24,.055); text-align:left; font:inherit; }
.stream-pilot-note-picker-list > button:active { background:rgba(90,23,24,.12); }
.stream-pilot-note-picker-list > button strong { font-size:14px; }
.stream-pilot-note-picker-list > button span { display:-webkit-box; overflow:hidden; color:var(--muted); font-size:12px; line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.stream-pilot-note-picker-list > p { margin:4px; color:var(--muted); font-size:13px; line-height:1.45; }
.stream-pilot-pending-note { position:absolute; z-index:10; left:50%; bottom:calc(80px + var(--safe-bottom)); width:min(calc(100% - 40px),440px); display:grid; grid-template-columns:42px minmax(0,1fr) 44px; align-items:center; gap:10px; padding:9px; transform:translateX(-50%); border:1px solid rgba(90,23,24,.14); border-radius:18px; background:rgba(250,245,247,.98); box-shadow:0 14px 34px rgba(32,20,36,.14); }
.stream-pilot-pending-note > span { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:var(--brand); background:rgba(90,23,24,.08); }
.stream-pilot-pending-note > span svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.stream-pilot-pending-note div { display:grid; gap:2px; min-width:0; }
.stream-pilot-pending-note strong { color:var(--brand); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.stream-pilot-pending-note b,.stream-pilot-pending-note small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stream-pilot-pending-note b { color:var(--ink); font-size:14px; }
.stream-pilot-pending-note small { color:var(--muted); font-size:12px; }
.stream-pilot-pending-note button { width:44px; height:44px; border:0; border-radius:12px; color:var(--brand); background:rgba(90,23,24,.08); font:inherit; font-size:0; }
.stream-pilot-pending-note button::after { content:"×"; font-size:1.08rem; font-weight:900; }
.stream-pilot-note-message { width:min(100%,390px) !important; padding:0 !important; overflow:visible !important; background:transparent !important; box-shadow:none !important; }
.stream-pilot-publication-message { width:min(100%,390px) !important; padding:0 !important; overflow:visible !important; background:transparent !important; box-shadow:none !important; }
.stream-pilot-message.mine .stream-pilot-publication-message { color:var(--ink); background:transparent !important; }
.stream-pilot-publication { display:grid; gap:6px; width:100%; box-sizing:border-box; padding:14px; border:2px solid var(--brand); border-radius:18px; color:var(--ink); background:#fff; box-shadow:0 10px 24px rgba(90,23,24,.12); text-align:left; }
.stream-pilot-publication > span { justify-self:start; padding:4px 8px; border-radius:999px; color:var(--brand); background:rgba(90,23,24,.09); font-size:9px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.stream-pilot-publication h2 { margin:0; color:var(--ink); font-size:18px; line-height:1.15; }
.stream-pilot-publication > p { color:var(--muted); font-size:12px; font-weight:700; }
.stream-pilot-prep-publication > div { display:flex; flex-wrap:wrap; gap:6px; margin-top:3px; }
.stream-pilot-prep-publication > div > b { padding:5px 8px; border-radius:999px; color:var(--ink); background:#f4eff0; font-size:11px; }
.stream-pilot-system-publication { justify-content:center; }
.stream-pilot-system-publication-shell { width:min(100%,390px); min-width:0; margin:4px auto; }.stream-pilot-system-publication-action,.stream-pilot-system-publication-static { display:grid; width:100%; min-width:0; margin:0; padding:14px; box-sizing:border-box; border:0; border-radius:18px; color:inherit; background:#fff; box-shadow:none; font:inherit; text-align:inherit; }.stream-pilot-system-publication-action { min-height:44px; cursor:pointer; touch-action:manipulation; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }.stream-pilot-system-publication-static { pointer-events:none; touch-action:pan-y; }.stream-pilot-system-publication-action > .stream-pilot-publication,.stream-pilot-system-publication-static > .stream-pilot-publication { padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }.stream-pilot-system-publication-action:focus-visible { outline:3px solid rgba(90,23,24,.34); outline-offset:3px; }.stream-pilot-system-publication-action[aria-disabled="true"] { cursor:default; opacity:.76; }.stream-pilot-system-publication-cta { min-height:44px; display:flex; align-items:center; justify-content:center; margin-top:12px; padding:0 14px; border-radius:14px; color:#fff; background:var(--brand); font-size:13px; font-weight:850; line-height:1.2; text-align:center; }.stream-pilot-system-publication-cta[hidden] { display:none; }.stream-pilot-system-publication-readiness { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-width:31px; }.stream-pilot-system-publication-readiness > span { width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.38; animation:stream-publication-readiness-dot 1s ease-in-out infinite; }.stream-pilot-system-publication-readiness > span:nth-child(2) { animation-delay:.14s; }.stream-pilot-system-publication-readiness > span:nth-child(3) { animation-delay:.28s; }@keyframes stream-publication-readiness-dot { 0%,60%,100% { transform:translateY(0); opacity:.38; }30% { transform:translateY(-3px); opacity:1; }}@media (prefers-reduced-motion:reduce) { .stream-pilot-system-publication-readiness > span { animation:none; opacity:1; }}.stream-pilot-system-publication-status { min-height:44px; display:flex; box-sizing:border-box; align-items:center; justify-content:center; margin:12px 0 0; padding:0 2px; border-top:1px solid rgba(90,23,24,.12); color:var(--muted); font-size:12px; font-weight:750; line-height:1.35; text-align:center; }.stream-pilot-system-publication-status[hidden] { display:none; }.stream-pilot-system-publication-status.is-updated { color:var(--brand); }
.stream-pilot-roster-publication { gap:0; width:100%; min-width:0; padding:14px; border:0; border-radius:18px; background:#fff; box-shadow:none; overflow-wrap:anywhere; pointer-events:none; touch-action:pan-y; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }.stream-pilot-system-publication-action,.stream-pilot-system-publication-static{border:2px solid var(--brand);background:transparent;box-shadow:none}.stream-pilot-publication,.stream-pilot-roster-publication{background:transparent;box-shadow:none}
.stream-pilot-roster-publication-header { display:grid; gap:4px; min-width:0; }
.stream-pilot-roster-publication-header > span { justify-self:start; padding:4px 8px; border-radius:999px; color:var(--brand); background:rgba(90,23,24,.08); font-size:10px; font-weight:900; line-height:1.1; letter-spacing:.055em; text-transform:uppercase; }
.stream-pilot-roster-publication-header h2 { margin:3px 0 0; color:var(--ink); font-size:17px; font-weight:850; line-height:1.18; }
.stream-pilot-roster-publication-header p { margin:0; color:var(--muted); font-size:12px; font-weight:700; line-height:1.35; }
.stream-pilot-roster-publication-days { display:grid; gap:10px; min-width:0; margin-top:11px; }
.stream-pilot-roster-publication-days section { display:grid; gap:7px; min-width:0; padding-top:9px; border-top:1px solid rgba(90,23,24,.1); }
.stream-pilot-roster-publication-days h3 { margin:0; color:var(--brand); font-size:11px; font-weight:900; line-height:1.25; }
.stream-pilot-roster-publication-shift { display:grid; gap:3px; min-width:0; padding:1px 0; }
.stream-pilot-roster-publication-shift > strong { min-width:0; color:var(--ink); font-size:13px; font-weight:850; line-height:1.25; }
.stream-pilot-roster-publication-shift > p { display:flex; flex-wrap:wrap; gap:2px 8px; min-width:0; color:var(--muted); font-size:11px; font-weight:700; line-height:1.3; }
.stream-pilot-roster-publication-shift > p > span { min-width:0; max-width:100%; }
.stream-pilot-roster-publication-shift > p > span + span::before { content:"·"; margin-right:8px; color:rgba(90,23,24,.42); }
.stream-pilot-roster-publication-shift.is-away { opacity:.72; }
.stream-pilot-roster-publication-empty { display:grid; gap:3px; margin:0; padding:13px 12px; border:1px solid rgba(90,23,24,.08); border-radius:13px; color:var(--muted); background:rgba(250,245,247,.72); text-align:center; }
.stream-pilot-roster-publication-empty strong { color:var(--ink); font-size:13px; font-weight:850; }
.stream-pilot-roster-publication-empty span { font-size:11px; font-weight:650; line-height:1.35; }
.stream-pilot-roster-publication-time { display:flex; justify-content:flex-end; margin-top:10px; padding-top:8px; border-top:1px solid rgba(90,23,24,.08); color:var(--muted); font-size:10px; font-weight:700; line-height:1; }
.stream-pilot-group-created-copy, .stream-pilot-system-publication-unavailable { max-width:min(100%,390px); margin:4px auto; padding:8px 12px; border:1px solid rgba(90,23,24,.1); border-radius:999px; color:var(--muted); background:rgba(250,245,247,.88); font-size:12px; font-weight:700; line-height:1.35; text-align:center; pointer-events:none; touch-action:pan-y; }
@media (max-width:359px) { .stream-pilot-roster-publication { padding:12px; border-radius:16px; }.stream-pilot-roster-publication-header h2 { font-size:16px; } }
.stream-pilot-message.mine .stream-pilot-note-message { color:var(--ink); background:transparent !important; }
.stream-pilot-shared-note { display:grid; gap:10px; width:100%; box-sizing:border-box; padding:13px; border:2px solid var(--brand); border-radius:18px; color:var(--ink); background:#fff; box-shadow:0 10px 24px rgba(90,23,24,.12); text-align:left; }
.stream-pilot-shared-note-kicker { justify-self:start; padding:4px 8px; border-radius:999px; color:var(--brand); background:rgba(90,23,24,.09); font-size:9px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.stream-pilot-shared-note-heading { display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; gap:10px; min-width:0; }
.stream-pilot-shared-note-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:var(--brand); background:rgba(90,23,24,.09); }
.stream-pilot-shared-note-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.stream-pilot-shared-note-heading > div { display:grid; gap:2px; min-width:0; }
.stream-pilot-shared-note strong { overflow:hidden; color:var(--ink); font-size:16px; font-weight:900; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; }
.stream-pilot-shared-note-heading > div > span { overflow:hidden; color:var(--muted); font-size:12px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.stream-pilot-shared-note-details { display:grid; gap:8px; margin:0; padding:0; }
.stream-pilot-shared-note-details > div { display:grid; gap:2px; padding-top:8px; border-top:1px solid rgba(90,23,24,.1); }
.stream-pilot-shared-note-details dt { color:var(--brand); font-size:9px; font-weight:900; letter-spacing:.055em; text-transform:uppercase; }
.stream-pilot-shared-note-details dd { margin:0; color:var(--ink); font-size:13px; font-weight:650; line-height:1.45; white-space:pre-wrap; }

/* This overlay must sit above the fixed conversation header (z-index 120),
   otherwise its visual back arrow receives the header's Back-to-chats tap. */
.stream-pilot-image-viewer { z-index:200; }

/* The bell's artwork has a lower visual centre than its SVG box. */
.stream-pilot-send .stream-pilot-composer-icon-send svg,.stream-pilot-send .stream-pilot-composer-icon-send-active svg { transform:translateY(-1px); }

/* A personal Mark is a small overlay on its own bubble; it must not alter
   message geometry or trigger a transcript repaint. */
.stream-pilot-message .bubble { position:relative; }

/* Mark is deliberately inline with the delivery line: it is the same compact chef-hat annotation used by the
   established venue chat: it sits in the delivery line and cannot enlarge the
   message, including compact voice bubbles. */
.stream-pilot-message-mark { position:static; display:inline-flex; width:13px; height:13px; margin:0 0 0 5px; align-items:center; justify-content:center; vertical-align:-2px; color:rgba(255,255,255,.72); background:transparent; border:0; border-radius:0; box-shadow:none; }
.stream-pilot-message-mark svg { width:13px; height:13px; display:block; fill:none; stroke:currentColor; stroke-width:3.3; stroke-linecap:round; stroke-linejoin:round; }
.stream-pilot-message:not(.mine) .stream-pilot-message-mark { color:rgba(89,37,42,.52); background:transparent; }
.stream-pilot-media-meta .stream-pilot-message-mark { flex:0 0 13px; margin-left:5px; vertical-align:middle; transform:none; }
.stream-pilot-notice { margin:0 20px 10px; color:var(--brand); font-size:.78rem; font-weight:800; }

/* An uploading video appears immediately in its final conversation footprint.
   The rotating ring communicates transport progress without blocking scroll. */
.stream-pilot-uploading-video { position:relative; overflow:hidden; border-radius:14px; background:#1b1415; }
.stream-pilot-uploading-video video { display:block; width:100%; min-width:180px; height:220px; max-height:300px; object-fit:cover; opacity:.72; }
.stream-pilot-uploading-video-progress { position:absolute; left:50%; top:50%; width:64px; height:64px; display:grid; place-items:center; transform:translate(-50%,-50%); border:4px solid rgba(255,255,255,.34); border-top-color:#fff; border-radius:50%; background:rgba(30,20,22,.4); animation:stream-pilot-upload-spin 1s linear infinite; }
.stream-pilot-uploading-video-logo { display:grid; width:25px; height:25px; place-items:center; color:#fff; }
.stream-pilot-uploading-video-logo svg { width:25px; height:25px; display:block; fill:none; stroke:currentColor; stroke-width:3.3; stroke-linecap:round; stroke-linejoin:round; }
@keyframes stream-pilot-upload-spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .stream-pilot-uploading-video-progress { animation:none; } }

/* Video keeps the same calm, compact Lined media language as photos: the
   transcript never exposes a browser-native control slab. Playback belongs in
   the deliberate full-screen viewer. */
.stream-pilot-video-open,.stream-pilot-pending-video { position:relative; display:block; width:100%; min-width:180px; padding:0; overflow:hidden; border:0; border-radius:14px; background:#1b1415; cursor:pointer; }.stream-pilot-video { display:block; width:100%; height:220px; max-height:300px; object-fit:cover; background:#1b1415; pointer-events:none; }.stream-pilot-video-open .stream-pilot-video { min-width:180px; }.stream-pilot-video-play { position:absolute; left:50%; top:50%; width:50px; height:50px; display:grid; place-items:center; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.18); border-radius:50%; color:#fff; background:rgba(21,15,16,.72); box-shadow:0 8px 22px rgba(0,0,0,.3); }.stream-pilot-video-play svg { width:25px; height:25px; margin-left:2px; fill:currentColor; stroke:none; }.stream-pilot-pending-video { width:58px; min-width:58px; height:58px; border-radius:14px; }.stream-pilot-pending-video video { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }.stream-pilot-pending-video .stream-pilot-video-play { width:30px; height:30px; }.stream-pilot-pending-video .stream-pilot-video-play svg { width:16px; height:16px; }.stream-pilot-image-stage.is-video { touch-action:manipulation; }.stream-pilot-image-stage video { display:block; width:auto; max-width:100%; height:auto; max-height:100%; object-fit:contain; background:#050505; }

/* A video caption is always a deliberate footer: never let its text or
   delivery metadata appear above the visual itself. */
.stream-pilot-video-caption { display:flex; align-items:baseline; gap:8px; width:100%; margin:8px 2px 0; color:inherit; }
.stream-pilot-video-caption > span:first-child { min-width:0; flex:1 1 auto; overflow-wrap:anywhere; }
.stream-pilot-video-caption .stream-pilot-media-meta { width:auto; margin:0 0 0 auto; white-space:nowrap; }

/* Human avatar design system -------------------------------------------------
   Person photos are circular by default; Chat Home has a scoped rounded tile
   exception below. Cover cropping and all size/spacing tokens stay unchanged.
   Conversation artwork (Venue, Announcements, Groups and custom chat images)
   deliberately keeps its existing tile geometry through .conversation-avatar.
   Interactive wrappers retain their 44px targets while only the photo becomes
   more compact. Presence may overhang the lower-right edge without clipping. */
:root {
  --person-avatar-list-size: 40px;
  --person-avatar-shortcut-size: 38px;
  --person-avatar-header-size: 38px;
  --person-avatar-message-size: 28px;
  --person-avatar-profile-size: 96px;
  --person-avatar-border: 2px solid rgba(143, 47, 45, 0.84);
  --person-avatar-shadow: 0 2px 8px rgba(90, 23, 24, 0.14);
}

.avatar.default-user {
  width: var(--person-avatar-list-size);
  height: var(--person-avatar-list-size);
  box-sizing: border-box;
  border: var(--person-avatar-border);
  border-radius: 50%;
  overflow: visible;
  box-shadow: var(--person-avatar-shadow);
}

.avatar.default-user.small {
  width: var(--person-avatar-list-size);
  height: var(--person-avatar-list-size);
  border-radius: 50%;
}

.avatar.default-user.large {
  width: var(--person-avatar-profile-size);
  height: var(--person-avatar-profile-size);
  border-radius: 50%;
}

.avatar.default-user.tiny,
.avatar.default-user img,
.avatar.default-user .avatar-image-loading-indicator {
  border-radius: 50%;
}

.avatar.default-user.tiny {
  width: var(--person-avatar-message-size);
  height: var(--person-avatar-message-size);
}

.avatar.default-user img {
  object-fit: cover;
}

.team-person .avatar.default-user {
  width: var(--person-avatar-shortcut-size);
  height: var(--person-avatar-shortcut-size);
  margin-top: 3px;
  border-radius: 50%;
}

.team-person {
  min-width: 44px;
  min-height: 44px;
}

.conversation-item > .avatar.default-user {
  width: var(--person-avatar-list-size);
  height: var(--person-avatar-list-size);
  flex-basis: var(--person-avatar-list-size);
  border-radius: 50%;
}

/* Home/profile controls: inner image radius follows the 2px border inset. */
.team-strip-people .team-person > .avatar, .conversation-list > .conversation-item > .avatar { border-radius: 14px; }
.conversation-list > .conversation-item > .avatar.conversation-avatar { box-sizing: border-box; border: 2px solid rgba(143, 47, 45, 0.84); }
.app-header .avatar-button > .avatar.default-user { border-radius: 14px; }
.team-strip-people .team-person > .avatar > img, .team-strip-people .team-person > .avatar > .avatar-image-loading-indicator, .app-header .avatar-button > .avatar.default-user > img, .app-header .avatar-button > .avatar.default-user > .avatar-image-loading-indicator, .conversation-list > .conversation-item > .avatar > img, .conversation-list > .conversation-item > .avatar > .avatar-image-loading-indicator { border-radius: 12px; object-fit: cover; }
.avatar-button,
.chat-header-avatar,
.message-avatar-button {
  overflow: visible;
}

.avatar-button .avatar.default-user,
.chat-header-avatar .avatar.default-user {
  width: var(--person-avatar-header-size);
  height: var(--person-avatar-header-size);
  border-radius: 50%;
}

.conversation-activity .avatar.default-user {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
}

.typing-indicator .avatar.default-user,
.new-chat-picker .avatar.default-user {
  width: var(--person-avatar-shortcut-size);
  height: var(--person-avatar-shortcut-size);
  border-radius: 50%;
}

.message-avatar-button .avatar.default-user,
.stream-pilot-message .stream-pilot-avatar,
.stream-pilot-message .stream-pilot-avatar > .avatar.default-user,
.stream-pilot-message .stream-pilot-avatar img {
  border-radius: 50%;
}

/* Keep the larger human photo inside Stream's compact message slot. The extra
   specificity is intentional: it must win over the shared list size. */
.stream-pilot-message .stream-pilot-avatar {
  width: var(--person-avatar-message-size);
  height: var(--person-avatar-message-size);
  flex-basis: var(--person-avatar-message-size);
}

.stream-pilot-message .stream-pilot-avatar > .avatar.default-user {
  width: var(--person-avatar-message-size);
  height: var(--person-avatar-message-size);
  min-width: var(--person-avatar-message-size);
  flex-basis: var(--person-avatar-message-size);
}

/* Provider fallbacks are people too, but the wrapper itself stays borderless
   so a resolved Lined avatar never receives a doubled red ring. */
.stream-pilot-message .stream-pilot-avatar > img,
.stream-pilot-message .stream-pilot-avatar > span:not(.avatar) {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: var(--person-avatar-border);
  border-radius: 50%;
  box-shadow: var(--person-avatar-shadow);
}

.stream-pilot-message .stream-pilot-avatar > span:not(.avatar) {
  display: grid;
  place-items: center;
}
.personal-home-view .personal-hero.personal-hero-premium > .avatar.default-user,
.personal-hero.personal-hero-premium > .avatar.default-user {
  width: 56px;
  height: 56px;
  justify-self: center;
  border: var(--person-avatar-border);
  border-radius: 50%;
  box-shadow: var(--person-avatar-shadow);
}

.avatar.default-user .status-dot {
  right: -4px;
  bottom: -4px;
  width: 12px;
  height: 12px;
  border-width: 2px;
}

.message-avatar-button .avatar.default-user .status-dot,
.stream-pilot-message .stream-pilot-avatar > .avatar.default-user .status-dot {
  right: -3px;
  bottom: -3px;
  width: 8px;
  height: 8px;
  border-width: 1.5px;
}
/* Phase D Chat view accessibility: scaled header, contained rows and 44px controls. */.stream-pilot-messages,.stream-pilot-message-list,.stream-pilot-message { min-width:0; }.stream-pilot-message-list { width:100%; }.stream-pilot-message { width:100%; max-width:100%; box-sizing:border-box; padding-inline:4px; }.stream-pilot-message .stream-pilot-avatar { width:var(--person-avatar-message-size); height:var(--person-avatar-message-size); min-width:0; flex:0 0 var(--person-avatar-message-size); border-radius:50%; }.stream-pilot-message .stream-pilot-avatar > *,.stream-pilot-message .stream-pilot-avatar .avatar.default-user { width:100%; min-width:0; height:100%; }.stream-pilot-load-earlier { min-height:44px; align-self:center; margin:0 auto 4px; padding:0 14px; border:0; border-radius:14px; color:var(--brand); background:rgba(90,23,24,.08); font:inherit; font-size:.78rem; font-weight:850; }.stream-pilot-error button,.stream-pilot-note-draft button { min-height:44px; }.stream-pilot-error button { padding-inline:12px; }.stream-pilot-reply-reference { min-height:44px; align-content:center; }.stream-pilot-composer input[type="text"] { min-height:44px; }.stream-pilot-reply-draft button,.stream-pilot-forward-picker header button,.stream-pilot-message-info header button,.stream-pilot-delete-confirm header button,.stream-pilot-note-picker header button { width:44px; height:44px; min-width:44px; min-height:44px; flex:0 0 44px; border-radius:14px; }.stream-pilot-message-actions button:focus-visible,.stream-pilot-forward-picker button:focus-visible,.stream-pilot-message-info button:focus-visible,.stream-pilot-delete-confirm button:focus-visible,.stream-pilot-load-earlier:focus-visible,.stream-pilot-reply-reference:focus-visible { outline:3px solid var(--brand); outline-offset:2px; }@media (max-width:479px) { .roster-shift-card { grid-template-columns:minmax(0,1fr); } .roster-shift-person { grid-column:1; grid-row:1; } .roster-time { grid-column:1; grid-row:2; min-width:0; justify-self:stretch; white-space:normal; overflow-wrap:anywhere; } .roster-shift-meta { grid-column:1; grid-row:3; margin-left:0; } }/* Canonical Stream read details keep a 44px control without growing the delivery line. */.stream-pilot-read-receipt[data-stream-pilot-read-info]{position:relative;z-index:1;min-width:44px;min-height:44px;margin:-16px -6px;border:0;color:inherit;background:transparent;font:inherit;font-size:.66rem;font-weight:850;letter-spacing:.02em;cursor:pointer}.stream-pilot-read-receipt[data-stream-pilot-read-info]:focus-visible{outline:3px solid currentColor;outline-offset:-7px}.stream-pilot-message-read-info{position:fixed;z-index:90;left:50%;bottom:max(82px,calc(70px + var(--safe-bottom)));width:min(calc(100% - 36px),430px);max-height:min(56vh,420px);overflow:auto;transform:translateX(-50%);padding:14px;border:1px solid rgba(90,23,24,.16);border-radius:22px;color:var(--ink);background:rgba(255,255,255,.98);box-shadow:0 20px 56px rgba(32,20,36,.24)}.stream-pilot-message-read-info header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.stream-pilot-message-read-info header>strong{font-size:1rem}.stream-pilot-message-read-info header button{width:44px;height:44px;min-width:44px;min-height:44px;border:0;border-radius:14px;color:var(--brand);background:rgba(90,23,24,.08);font:inherit;font-size:1.35rem}.stream-pilot-message-read-info ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}.stream-pilot-message-read-info li{display:grid;gap:3px;padding:10px 0;border-top:1px solid rgba(90,23,24,.08)}.stream-pilot-message-read-info li strong{font-size:.9rem}.stream-pilot-message-read-info li span{color:var(--muted);font-size:.78rem}.stream-pilot-message-read-info button:focus-visible{outline:3px solid var(--brand);outline-offset:2px}