/* Shared company workspace. Load after the portal, design and help styles. */
body[data-surface] {
  --workspace-gap: clamp(.75rem, 2vw, 1.5rem);
  --workspace-safe-top: env(safe-area-inset-top, 0px);
  --workspace-safe-right: env(safe-area-inset-right, 0px);
  --workspace-safe-bottom: env(safe-area-inset-bottom, 0px);
  --workspace-safe-left: env(safe-area-inset-left, 0px);
  min-inline-size: 0;
  inline-size: 100%;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  overflow-wrap: anywhere;
}

/* Shrink the containing layout, while keeping wide records inside their table. */
body[data-surface] :where(main, section, article, header, form, fieldset, legend,
  .app-main, .wrap, .panel, .card, .stack, .grid, .cards, .form-grid,
  .dashboard-grid, .quick-grid, .integration-grid, .workspace-hero,
  .topbar-left, .topbar-actions, .conversation-panel, .conversation-main) {
  min-inline-size: 0;
  max-inline-size: 100%;
}
body[data-surface] :where(.grid, .cards, .form-grid, .dashboard-grid,
  .quick-grid, .integration-grid, .workspace-hero, .topbar-left) > * {
  min-inline-size: 0;
}
body[data-surface] :where(img, video, canvas, iframe) { max-inline-size: 100%; }
body[data-surface] :where(p, li, code, pre, small, legend, label, .metric, .metric-card strong) {
  overflow-wrap: anywhere;
}
body[data-surface] :is(label, .field-help, .table-meta, .sm, .metric-label) { font-size: .875rem; }
body[data-surface="admin"] .topbar #sub { font-size: .875rem; }
body[data-surface="admin"] .user-mini strong { font-size: .875rem; }
body[data-surface="admin"] .user-mini span { font-size: .75rem; }
body[data-surface] :where(input, select, textarea) {
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
  font-size: 1rem;
  scroll-margin-block: 1.5rem;
}
body[data-surface] textarea { resize: vertical; }
body[data-surface] :where(button, [role="button"], summary, .route-navigation) {
  min-block-size: 44px;
  max-inline-size: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  touch-action: manipulation;
}
body[data-surface] .company-office summary { padding-block: .25rem; }
body[data-surface] :where(input[type="checkbox"], input[type="radio"]) {
  inline-size: 22px;
  min-inline-size: 22px;
  block-size: 22px;
  min-block-size: 22px;
  flex-shrink: 0;
}
body[data-surface] label.check { min-block-size: 44px; color: var(--text); }
body[data-surface] :where(.toolbar, .actions, .row-actions, .table-meta,
  .section-head, .modal-head, .chat-toolbar, .route-toolbar, #routeControls) {
  flex-wrap: wrap;
  min-inline-size: 0;
  max-inline-size: 100%;
}
body[data-surface] :where(.toolbar, .actions, .section-head, .table-meta,
  .chat-toolbar, .route-toolbar, #routeControls) > * {
  min-inline-size: 0;
  max-inline-size: 100%;
}
body[data-surface] .search-box { min-inline-size: 0; }
body[data-surface] .icon-btn {
  min-inline-size: 44px;
  inline-size: 44px;
  min-block-size: 44px;
  flex-shrink: 0;
}
body[data-surface] .password-wrap .icon-btn {
  inset-block-start: 2px;
  inset-inline-end: 2px;
  block-size: 44px;
  min-block-size: 44px;
}
body[data-surface] .password-wrap input { padding-inline-end: 52px; }

/* Records remain a real table; only their labelled container scrolls. */
body[data-surface] .table-wrap {
  position: relative;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  max-block-size: min(65vh, 42rem);
  max-block-size: min(65dvh, 42rem);
  overflow: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  scroll-padding: .5rem;
}
body[data-surface] .table-wrap:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
body[data-surface] .table-wrap table {
  inline-size: 100%;
  min-inline-size: 42rem;
  border-collapse: collapse;
}
body[data-surface] .table-wrap :is(th, td) {
  min-inline-size: 6rem;
  max-inline-size: 28rem;
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
  font-size: .875rem;
}
body[data-surface] .table-wrap th {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  background: var(--surface-raised);
}
body[data-surface] .row-actions { min-inline-size: 12rem; gap: .5rem; }
body[data-surface] .table-wrap :where(input, select) { min-inline-size: 8rem; }
body[data-surface] .table-wrap :where(input[type="checkbox"], input[type="radio"]) {
  min-inline-size: 22px;
}

/* The groups reflect business functions; selected pages retain their own label. */
body[data-surface="admin"] #content { inline-size: 100%; }
body[data-surface="admin"] #sidebar {
  padding-block-start: max(1.25rem, var(--workspace-safe-top));
  padding-block-end: max(1.25rem, var(--workspace-safe-bottom));
  padding-inline-start: max(1rem, var(--workspace-safe-left));
  overscroll-behavior-block: contain;
}
body[data-surface="admin"] #sidebar > .brand { flex-shrink: 0; }
body[data-surface="admin"] .brand-text { flex: 1; }
body[data-surface="admin"] .brand-text strong { overflow-wrap: anywhere; }
body[data-surface="admin"] #nav { margin-block-start: 1.5rem; gap: .5rem; }
body[data-surface="admin"] .nav-group { display: grid; gap: .25rem; margin-block-end: .75rem; }
body[data-surface="admin"] .nav-group-title {
  margin: .75rem .65rem .35rem;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
body[data-surface="admin"] .nav-icon { flex: 0 0 23px; }
body[data-surface="admin"] .nav-label { overflow: visible; white-space: normal; }
body[data-surface] .workspace-subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .5rem;
  margin: 0 0 1.25rem;
  padding: .65rem;
  min-inline-size: 0;
  max-inline-size: 100%;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
}
body[data-surface] .workspace-subnav :is(button, a) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex: 0 1 auto;
  min-inline-size: 0;
  min-block-size: 48px;
  padding: .6rem .85rem;
  border-radius: .75rem;
  overflow-wrap: anywhere;
  text-decoration: none;
}
body[data-surface] .workspace-subnav [aria-current="page"] {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--line);
  box-shadow: inset 0 -3px 0 var(--accent);
}
body[data-surface="admin"] .workspace-frame {
  display: block;
  inline-size: 100%;
  block-size: calc(100dvh - 14rem);
  min-block-size: min(28rem, 75dvh);
  border: 0;
  border-radius: 1rem;
  background: var(--bg);
}
body[data-surface="team"][data-workspace-embedded="true"] > header,
body[data-surface="team"][data-workspace-embedded="true"] > nav,
body[data-surface="team"][data-workspace-embedded="true"] .avenqo-help-fab {
  display: none;
}
body[data-surface="team"][data-workspace-embedded="true"] > main {
  padding: .75rem .75rem max(1rem, var(--workspace-safe-bottom));
}

/* Dialogs use the resized viewport and can scroll to every field and action. */
body[data-surface] .modal {
  padding: max(.75rem, var(--workspace-safe-top)) max(.75rem, var(--workspace-safe-right))
    max(.75rem, var(--workspace-safe-bottom)) max(.75rem, var(--workspace-safe-left));
  overflow-y: auto;
  align-items: center;
}
body[data-surface] :is(.modal-panel, dialog) {
  min-inline-size: 0;
  max-inline-size: 100%;
  max-block-size: calc(100vh - 2rem);
  max-block-size: calc(100dvh - 2rem - var(--workspace-safe-top) - var(--workspace-safe-bottom));
  overflow: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 1rem;
}
body[data-surface] dialog { inline-size: min(38rem, calc(100% - 1.5rem)); }
body[data-surface] :is(.modal-panel, dialog) .actions {
  position: static;
  padding-block-start: 1rem;
}
body[data-surface] :is(.modal-panel, dialog) :is(form, fieldset, label) { min-inline-size: 0; }
body[data-surface] .modal-head [data-close] { flex-shrink: 0; }
body[data-surface]:has(.modal, dialog[open], #customerChat) .avenqo-help-fab,
body[data-surface]:has(#customerChat) #customerChatToggle { visibility: hidden; }
body[data-surface] .login-page {
  min-block-size: 100vh;
  min-block-size: 100dvh;
  padding: max(1rem, var(--workspace-safe-top)) max(1rem, var(--workspace-safe-right))
    max(1rem, var(--workspace-safe-bottom)) max(1rem, var(--workspace-safe-left));
}
body[data-surface] :is(#toast, #notice) { overflow-wrap: anywhere; }
body[data-surface="admin"] #toast { bottom: max(1rem, var(--workspace-safe-bottom)); }

body[data-surface="team"] > header,
body[data-surface="team"] > nav {
  padding-inline-start: max(var(--workspace-gap), var(--workspace-safe-left));
  padding-inline-end: max(var(--workspace-gap), var(--workspace-safe-right));
}
body[data-surface="team"] > header { padding-block-start: max(1rem, var(--workspace-safe-top)); }
body[data-surface="team"] > header > div { min-inline-size: 0; max-inline-size: 100%; }
body[data-surface="team"] > nav {
  inline-size: 100%;
  min-inline-size: 0;
  margin: 0;
  flex-wrap: wrap;
}
body[data-surface="team"] > nav button { flex: 0 1 auto; min-inline-size: 0; }
body[data-surface="team"] > main {
  inline-size: 100%;
  padding-inline-start: max(var(--workspace-gap), var(--workspace-safe-left));
  padding-inline-end: max(var(--workspace-gap), var(--workspace-safe-right));
  padding-block-end: calc(5rem + var(--workspace-safe-bottom));
}
body[data-surface="team"] .composer .actions small { flex: 1 1 12rem; max-inline-size: 100%; }
body[data-surface="team"] .conversations { min-inline-size: 0; max-inline-size: 100%; }
body[data-surface="team"] #notice { bottom: calc(4.75rem + var(--workspace-safe-bottom)); }
body[data-surface="customer"] .wrap {
  inline-size: 100%;
  padding-inline-start: max(var(--workspace-gap), var(--workspace-safe-left));
  padding-inline-end: max(var(--workspace-gap), var(--workspace-safe-right));
  padding-block-end: calc(5.5rem + var(--workspace-safe-bottom));
}
body[data-surface="customer"] .wrap > .panel > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
body[data-surface="customer"] .lang { margin: 0; }
body[data-surface="customer"] #customerChatToggle {
  bottom: calc(5rem + var(--workspace-safe-bottom)) !important;
  right: max(1rem, var(--workspace-safe-right)) !important;
  max-inline-size: calc(100% - 2rem);
}
body[data-surface="customer"] #customerChat {
  padding-block-start: var(--workspace-safe-top);
  padding-block-end: var(--workspace-safe-bottom);
  background: var(--bg) !important;
}

@media (max-width: 900px) {
  body[data-surface="admin"] #sidebar:not(.open) { visibility: hidden; }
  body[data-surface="admin"] #sidebar.open { visibility: visible; }
  body[data-surface="admin"] .app-main {
    padding-inline-start: max(.75rem, var(--workspace-safe-left));
    padding-inline-end: max(.75rem, var(--workspace-safe-right));
    padding-block-end: calc(5rem + var(--workspace-safe-bottom));
  }
  body[data-surface="admin"] .topbar { padding-block-start: max(1rem, var(--workspace-safe-top)); }
}
@media (max-width: 650px) {
  body[data-surface] :is(.form-grid, .integration-grid) { grid-template-columns: minmax(0, 1fr); }
  body[data-surface] .workspace-subnav :is(button, a) { flex: 1 1 8rem; }
  body[data-surface] .toolbar > :is(button, select, label, .search-box) { flex: 1 1 100%; inline-size: 100%; }
  body[data-surface] .actions > button { flex: 1 1 8rem; }
  body[data-surface] :is(.modal-panel, dialog) { padding: 1rem; }
  body[data-surface] .modal-head { flex-wrap: nowrap; }
  body[data-surface="team"] > nav button { flex: 1 1 8rem; }
  body[data-surface="team"] .conversations { overscroll-behavior-inline: contain; }
  body[data-surface="team"] .conversation { min-inline-size: min(11.25rem, 100%); }
  body[data-surface="team"] .route-toolbar label,
  body[data-surface="team"] #routeControls label { min-inline-size: 0; }
  body[data-surface="team"] .chat-toolbar > button { flex: 1 1 auto; }
  body[data-surface="customer"] .theme-toggle .theme-label { display: none; }
  body[data-surface="customer"] .theme-toggle { min-inline-size: 48px; }
}
@media (max-width: 380px) {
  body[data-surface] :is(.cards, .quick-grid, .route-totals) { grid-template-columns: minmax(0, 1fr); }
  body[data-surface] .topbar-actions select { max-inline-size: 100%; }
}
@media (max-height: 520px) {
  body[data-surface] .login-page { place-items: start center; }
  body[data-surface="team"] .login { margin-block: 1rem; }
  body[data-surface] .modal { align-items: start; }
  body[data-surface="team"] .conversation-main .chat-list { min-block-size: 8rem; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-surface] *, body[data-surface] *::before, body[data-surface] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media print {
  body[data-surface] .workspace-subnav,
  body[data-surface] #customerChatToggle { display: none !important; }
  body[data-surface] .table-wrap { max-block-size: none; overflow: visible; }
  body[data-surface] .table-wrap table { min-inline-size: 0; }
}