/* The app shell: sidebar (full, rail, drawer), top bar and banner. */

.view-app {
  display: grid;
  /* The left safe-area inset (a landscape notch) belongs to the sidebar column. */
  grid-template-columns: calc(var(--sidebar-w) + env(safe-area-inset-left, 0px)) minmax(0, 1fr);
}
.view-app.is-rail { grid-template-columns: calc(var(--rail-w) + env(safe-area-inset-left, 0px)) minmax(0, 1fr); }

/* Collapsing or expanding swaps the layout at once and cross-fades the contents,
   instead of animating the column (labels vanishing in a wide empty panel, and a
   main-area re-layout on every frame). Two names, so it restarts on each toggle. */
.view-app.is-rail .sidebar > * { animation: sb-fade-a var(--dur) var(--ease); }
.view-app:not(.is-rail) .sidebar > * { animation: sb-fade-b var(--dur) var(--ease); }
@keyframes sb-fade-a { from { opacity: 0; } }
@keyframes sb-fade-b { from { opacity: 0; } }
.view-app.is-dimmed .main { opacity: .45; filter: saturate(.8); }

/* ------------------------------------------------------------------ Sidebar */

.sidebar {
  position: relative;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  padding: 12px 12px 12px calc(12px + env(safe-area-inset-left, 0px));
  border-right: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(255, 255, 255, .028) 0%, rgba(255, 255, 255, .012) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  backdrop-filter: blur(24px) saturate(130%);
}
.sidebar::after {
  /* A faint light seam along the inner edge. */
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .06));
  pointer-events: none;
}

.sb-head {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 2px 0 8px;
  margin-bottom: 10px;
}
.sb-brand {
  flex: 1;
  min-width: 0;
  height: 36px;
  border-radius: var(--r-nav);
}
.sb-close { display: none; }

.btn-new {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0 10px 0 12px;
  border: 0;
  border-radius: var(--r-nav);
  color: var(--text-inverse);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  letter-spacing: -.005em;
  background: var(--accent-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(40, 30, 110, .2), var(--accent-glow);
  cursor: pointer;
  transition: filter var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform 120ms var(--ease);
}
.btn-new:hover { filter: brightness(1.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), var(--accent-glow-hover); }
.btn-new:active { transform: translateY(1px); }
.btn-new .sb-label:not(.kbd) { flex: 1; text-align: left; }
.btn-new .kbd {
  color: rgba(12, 11, 25, .72);
  background: rgba(255, 255, 255, .28);
  border-color: rgba(255, 255, 255, .35);
  box-shadow: none;
}

.search-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 38px;
  margin-top: 8px;
  padding: 0 8px 0 12px;
  border-radius: var(--r-nav);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, .03);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
  color: var(--text-3);
  font-size: 13px;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.search-trigger:hover { background: rgba(255, 255, 255, .055); border-color: var(--hairline-2); color: var(--text-2); }
.search-trigger-text { flex: 1; text-align: left; }

.sb-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 14px 0 6px;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 36px;
  padding: 0 10px 0 12px;
  border-radius: var(--r-nav);
  color: var(--text-2);
  font-size: 14px;
  font-weight: var(--fw-regular);
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.nav-item:hover { background: rgba(255, 255, 255, .045); color: var(--text-1); }
.nav-item[aria-current="page"] {
  color: var(--text-1);
  background: linear-gradient(90deg, rgba(156, 140, 255, .1), rgba(255, 255, 255, .045) 60%);
  box-shadow: var(--top-light);
}
.nav-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent-grad-v);
  box-shadow: 0 0 12px rgba(156, 140, 255, .9);
}
.nav-item[aria-current="page"] .ico { color: #cdc4ff; }

.sb-scroll {
  flex: 1;
  min-height: 0;
  margin: 4px -12px 0;
  padding: 6px 12px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  /* Keeps a focused row clear of the faded top and bottom edges. */
  scroll-padding-block: 16px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 20px), transparent 100%);
}

.sb-section + .sb-section { margin-top: 18px; }
.sb-section > .section-label { padding: 8px 12px 6px; }

.conv-group + .conv-group { margin-top: 12px; }
.group-label {
  padding: 8px 12px 4px;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--text-3);
}

.conv-list { list-style: none; }

.conv { position: relative; }
.conv-link {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 36px 0 12px;
  border-radius: var(--r-nav);
  color: var(--text-2);
  font-size: 13px;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.conv-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.conv-link:hover { background: rgba(255, 255, 255, .045); color: var(--text-1); }
.conv-link[aria-current="page"] {
  background: rgba(255, 255, 255, .07);
  color: var(--text-1);
  box-shadow: var(--top-light);
}

.conv-more {
  position: absolute;
  top: 50%;
  right: 3px;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  transform: translateY(-50%);
  opacity: 0;
}
.conv:hover .conv-more, .conv:focus-within .conv-more, .conv-more[aria-expanded="true"] { opacity: 1; }
.conv-more .ico, .conv-more svg { width: 16px; height: 16px; }

.sb-empty { padding: 8px 12px; font-size: 13px; color: var(--text-3); }

/* Placeholder rows on the same 34px pitch as the rows that replace them. */
.skel-list { display: flex; flex-direction: column; }
.skel-rowbox { display: flex; align-items: center; height: 34px; padding: 0 12px; }
.skel-row { height: 10px; }
.skel-w1 { width: 82%; }
.skel-w2 { width: 64%; }
.skel-w3 { width: 74%; }

.sb-foot {
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}

.profile-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 8px 8px 8px 8px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.profile-card:hover, .profile-card[aria-expanded="true"] {
  background: rgba(255, 255, 255, .045);
  border-color: var(--hairline);
}

.avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  color: #f4f2ff;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: .02em;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 45%),
    linear-gradient(140deg, #5d52b8 0%, #3a5b9c 55%, #2b7d8a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 4px 12px -4px rgba(0, 0, 0, .6);
}
.avatar-lg { width: 44px; height: 44px; font-size: 15px; }

.profile-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.profile-name, .profile-business {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.profile-name { font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-1); }
.profile-business { font-size: 12px; color: var(--text-3); }

/* ------------------------------------------------------------------- Rail */

.is-rail:not(.is-drawer-open) .sidebar { padding: 12px 12px 12px calc(12px + env(safe-area-inset-left, 0px)); align-items: center; }
.is-rail:not(.is-drawer-open) .sb-label,
.is-rail:not(.is-drawer-open) .sb-scroll,
.is-rail:not(.is-drawer-open) .profile-text,
.is-rail:not(.is-drawer-open) .chip-plan { display: none !important; }
.is-rail:not(.is-drawer-open) .sb-head { flex-direction: column; height: auto; padding: 0; gap: 10px; margin-bottom: 12px; }
.is-rail:not(.is-drawer-open) .sb-brand { flex: none; width: 40px; justify-content: center; }
.is-rail:not(.is-drawer-open) .btn-new,
.is-rail:not(.is-drawer-open) .search-trigger,
.is-rail:not(.is-drawer-open) .nav-item {
  width: 44px;
  height: 40px;
  padding: 0;
  justify-content: center;
}
.is-rail:not(.is-drawer-open) .nav-item[aria-current="page"]::before { left: -12px; }
.is-rail:not(.is-drawer-open) .sb-nav { align-items: center; }
.is-rail:not(.is-drawer-open) .sb-foot { width: 100%; display: flex; justify-content: center; margin-top: auto; }
.is-rail:not(.is-drawer-open) .profile-card { width: auto; padding: 6px; min-height: 0; }

/* Tooltips for the icon rail: CSS only, from data-tip. */
.is-rail:not(.is-drawer-open) [data-tip] { position: relative; }
.is-rail:not(.is-drawer-open) [data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  z-index: 50;
  padding: 6px 9px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline-2);
  background: var(--bg-menu);
  box-shadow: var(--shadow-1);
  color: var(--text-1);
  font-size: 12px;
  font-weight: var(--fw-regular);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-4px, -50%);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
  pointer-events: none;
}
.is-rail:not(.is-drawer-open) [data-tip]:hover::after,
.is-rail:not(.is-drawer-open) [data-tip]:focus-visible::after { opacity: 1; transform: translate(0, -50%); }

/* Tablet: the rail opens as an overlay. */
.is-rail.is-drawer-open .sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: calc(var(--sidebar-w) + env(safe-area-inset-left, 0px));
  background: rgba(13, 14, 20, .92);
  box-shadow: var(--shadow-3);
  animation: drawer-in var(--slow) var(--ease);
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: rgba(3, 4, 8, .55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: fade-in var(--dur) var(--ease);
}

@keyframes drawer-in {
  from { transform: translateX(-16px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ------------------------------------------------------------------- Main */

.main {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: var(--topbar-h) auto minmax(0, 1fr);
  /* Not the implicit auto column: that grows to the widest child's min-content
     and pushed the chat page past the edge of a narrow phone. */
  grid-template-columns: minmax(0, 1fr);
  transition: opacity var(--dur) var(--ease);
}

.topbar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 max(14px, env(safe-area-inset-right)) 0 14px;
}

.topbar-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.topbar-end { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.business-switch, .chat-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  height: 36px;
  padding: 0 10px 0 10px;
  border: 1px solid transparent;
  border-radius: var(--r-nav);
  background: none;
  color: var(--text-1);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  letter-spacing: -.01em;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.business-switch .ico:first-child { color: var(--text-3); }
.business-switch:hover, .business-switch[aria-expanded="true"],
.chat-title:hover { background: rgba(255, 255, 255, .05); border-color: var(--hairline); }
.business-label, .chat-title-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.chat-title-pen { color: var(--text-3); opacity: 0; transition: opacity var(--fast) var(--ease); }
.chat-title:hover .chat-title-pen, .chat-title:focus-visible .chat-title-pen { opacity: 1; }

.topbar-title {
  padding: 0 10px;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--text-1);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.topbar-title.is-brand { font-family: var(--font-display); color: var(--text-2); }

.only-mobile { display: none; }

/* ------------------------------------------------------------------ Banner */

.banner {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 760px;
  width: calc(100% - 32px);
  margin: 0 auto 8px;
  padding: 10px 8px 10px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline-2);
  background: rgba(20, 21, 30, .78);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--top-light), var(--shadow-1);
  font-size: 13px;
  line-height: 1.45;
  animation: rise var(--slow) var(--ease);
}
.banner-ico { color: var(--text-2); }
.banner[data-tone="error"] { border-color: var(--danger-line); }
.banner[data-tone="error"] .banner-ico { color: var(--danger); }
.banner[data-tone="success"] .banner-ico { color: var(--ok); }
.banner-text { flex: 1; min-width: 0; color: var(--text-1); overflow-wrap: anywhere; }
.banner-actions { display: flex; gap: 6px; }
.banner-action {
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline-2);
  background: rgba(255, 255, 255, .06);
  color: var(--text-1);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.banner-action:hover { background: rgba(255, 255, 255, .1); }

/* ----------------------------------------------------------------- Pages */

.page {
  grid-row: 3;
  min-height: 0;
  position: relative;
}

/* -------------------------------------------------------- Tablet & mobile */

@media (max-width: 1023.98px) {
  .sb-toggle { display: inline-grid; }
}

@media (max-width: 767.98px) {
  .view-app,
  .view-app.is-rail { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 320px);
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: rgba(12, 13, 19, .96);
    box-shadow: var(--shadow-3);
    transform: translateX(-104%);
    visibility: hidden;
    transition: transform var(--slow) var(--ease), visibility 0s linear var(--slow);
  }
  .view-app.is-drawer-open .sidebar {
    transform: none;
    visibility: visible;
    transition: transform var(--slow) var(--ease), visibility 0s;
    animation: none;
  }
  .sb-toggle { display: none; }
  .sb-close { display: inline-grid; width: 44px; height: 44px; }

  .btn-new, .search-trigger, .nav-item, .conv-link, .skel-rowbox { height: 44px; }
  .btn-new .kbd, .search-trigger .kbd { display: none; }
  .conv-more { width: 44px; height: 44px; opacity: 1; right: 0; }
  .banner-action { height: 44px; padding: 0 14px; }
  .conv-link { padding-right: 48px; font-size: 14px; }
  .profile-card { min-height: 56px; }

  .main { grid-column: 1; grid-template-rows: calc(var(--topbar-h) + env(safe-area-inset-top)) auto minmax(0, 1fr); }
  .topbar { padding: env(safe-area-inset-top) max(6px, env(safe-area-inset-right)) 0 max(6px, env(safe-area-inset-left)); }
  .topbar .icon-btn { width: 44px; height: 44px; }
  .only-mobile { display: inline-grid; }
  .topbar-mid { justify-content: center; }
  .business-switch, .chat-title { height: 44px; }
  .chat-title-pen { display: none; }
}

@media (hover: none) {
  .conv-more { opacity: 1; }
}

/* Short viewports (a phone on its side): the sidebar's fixed stack is taller than
   the screen, so the whole sidebar scrolls rather than squashing its controls and
   clipping the profile card (the only way to Settings and Sign out). */
@media (max-height: 520px) {
  .sidebar { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .sb-scroll { flex: none; min-height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .sb-head, .btn-new, .search-trigger, .sb-nav, .nav-item, .sb-foot { flex-shrink: 0; }
  /* A scrolling rail would clip its tooltips; the icons keep their accessible names. */
  .is-rail:not(.is-drawer-open) [data-tip]::after { display: none; }
}

/* The list pages carry their own large title; the bar repeats it only on phones. */
@media (min-width: 768px) {
  .view-app[data-page="chats"] .topbar-title,
  .view-app[data-page="playbooks"] .topbar-title { visibility: hidden; }
}
@media (min-width: 768px) {
  .view-app[data-page="home"] .topbar-title.is-brand { visibility: hidden; }
}