/* Expanded runtime CSS entrypoint. Keep this file import-free for WebView route transitions. */

/* responsive/01-responsive.css */
/* Shared responsive layer for v2 pages. Uses the Android mock as the mobile interaction reference. */

/* The body alone: a clip on the root element stops the body's scroll lock from reaching the
   viewport, and every dialog then dragged the sticky phone header up by the page's scroll.
   See app/styles/02-base.css. */
body.sb {
  max-width: 100%;
  overflow-x: clip;
}

body.sb {
  text-size-adjust: 100%;
}

body.sb * {
  min-width: 0;
}

body.sb [data-slot="marketplace-message-threads"] {
  --stroyban-chat-surface: var(--muted);
  --stroyban-chat-pattern: radial-gradient(circle at 24px 24px, color-mix(in oklch, var(--foreground) 5%, transparent) 1.5px, transparent 0), radial-gradient(circle at 0 0, color-mix(in oklch, var(--primary) 14%, transparent) 1px, transparent 0);
  --stroyban-chat-pattern-size: 56px 56px, 28px 28px;
  --stroyban-chat-list-surface: color-mix(in oklch, var(--muted) 72%, var(--card));
  --stroyban-chat-pane-border: var(--border);
  --stroyban-chat-incoming: var(--card);
  --stroyban-chat-incoming-border: var(--border);
  --stroyban-chat-incoming-text: var(--foreground);
  --stroyban-chat-outgoing: var(--primary);
  --stroyban-chat-outgoing-border: var(--primary-hover);
  --stroyban-chat-outgoing-text: var(--primary-foreground);
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--stroyban-chat-pane-border);
  border-radius: 16px;
  background-color: var(--stroyban-chat-surface);
  background-image: var(--stroyban-chat-pattern);
  background-size: var(--stroyban-chat-pattern-size);
  box-shadow: var(--shadow-xs);
}

body.sb [data-slot="marketplace-message-threads"] .rchat-list {
  display: flex;
  min-height: 0;
  flex-direction: column;
  border-right: 6px solid transparent;
  background: var(--stroyban-chat-list-surface);
  box-shadow: inset -1px 0 0 var(--stroyban-chat-pane-border);
}

body.sb [data-slot="marketplace-message-threads"] .rchat-list-h {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  padding: 14px 16px;
  border-bottom: 1px solid var(--stroyban-chat-pane-border);
  background: var(--card);
  color: var(--foreground);
  font-size: 13px;
  font-weight: 700;
}

body.sb [data-slot="marketplace-message-threads"] .rchat-list-h > span {
  color: var(--foreground);
  font-size: 18px;
  font-weight: 800;
}

body.sb [data-slot="marketplace-message-threads"] .rchat-search {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--background);
  color: var(--foreground);
}

body.sb [data-slot="marketplace-message-threads"] .rchat-search svg {
  width: 17px;
  height: 17px;
}

/*
 * The field's frame is the label's: its border, and its ring while the input inside has focus.
 * The input is the kit's, and brings a frame of its own -- a shadow, and a 3px ring on
 * `:focus-visible`. The border was taken off it here, the shadow and the ring were not, so a
 * focused search drew two outlines, the kit's ring inside the label's. `box-shadow` carries both,
 * and the focused state is named so the rule outweighs the kit's focus utility on its own terms
 * rather than by the layer it happens to sit in.
 */
body.sb [data-slot="marketplace-message-threads"] .rchat-search input,
body.sb [data-slot="marketplace-message-threads"] .rchat-search input:focus-visible {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--foreground);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
}

body.sb [data-slot="marketplace-message-threads"] .rchat-search input::placeholder {
  color: var(--muted-foreground);
}

body.sb [data-slot="marketplace-message-threads"] .rchat-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--primary) 30%, transparent);
}

body.sb [data-slot="marketplace-message-threads"] .rchat-mobile-back {
  display: none;
}

body.sb [data-slot="marketplace-message-threads"] .rchat-threads {
  flex: 1;
  overflow-y: auto;
}

body.sb [data-slot="marketplace-message-threads"] .rchat-no-results {
  padding: 18px 16px;
  color: var(--foreground);
  font-size: 13px;
  text-align: center;
}

body.sb [data-slot="marketplace-message-threads"] .rchat-thread {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid rgba(203, 213, 225, 0.78);
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

body.sb [data-slot="marketplace-message-threads"] .rchat-thread:hover,
body.sb [data-slot="marketplace-message-threads"] .rchat-thread.on {
  background: var(--card);
}

body.sb [data-slot="marketplace-message-threads"] .rchat-thread.on {
  box-shadow:
    inset 3px 0 0 var(--primary),
    inset 0 0 0 1px var(--border);
}

body.sb [data-slot="marketplace-message-threads"] .rchat-tav,
body.sb [data-slot="marketplace-message-threads"] .oav {
  display: grid;
  flex: none;
  place-items: center;
  font-weight: 700;
}

body.sb [data-slot="marketplace-message-threads"] .rchat-tav {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 14px;
}

body.sb [data-slot="marketplace-message-threads"] .rchat-tmain {
  min-width: 0;
  flex: 1;
}

body.sb [data-slot="marketplace-message-threads"] .rchat-tname,
body.sb [data-slot="marketplace-message-threads"] .rchat-tsub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.sb [data-slot="marketplace-message-threads"] .rchat-tname {
  font-size: 14.5px;
  font-weight: 700;
}

body.sb [data-slot="marketplace-message-threads"] .rchat-tsub {
  margin-top: 2px;
  color: var(--foreground);
  font-size: 13px;
}

body.sb [data-slot="marketplace-message-threads"] .rchat-conv {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  background-color: var(--stroyban-chat-surface);
  background-image: var(--stroyban-chat-pattern);
  background-size: var(--stroyban-chat-pattern-size);
}

body.sb [data-slot="marketplace-message-threads"] .rchat-offer {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--stroyban-chat-pane-border);
  background: var(--card);
}

body.sb [data-slot="marketplace-message-threads"] .oav {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: #111;
  color: #fff;
  font-size: 14px;
}

body.sb [data-slot="marketplace-message-threads"] .rchat-offer.is-support .oav {
  background: #111;
}

body.sb [data-slot="marketplace-message-threads"] .rchat-offer.is-support .oav i,
body.sb [data-slot="marketplace-message-threads"] .rchat-offer.is-support .oav svg {
  width: 18px;
  height: 18px;
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-title {
  min-width: 0;
  flex: 1;
}

body.sb [data-slot="marketplace-message-threads"] .oname {
  overflow: hidden;
  font-size: 15px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.sb [data-slot="marketplace-message-threads"] .osub {
  margin-top: 1px;
  overflow: hidden;
  color: var(--foreground);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* responsive/02-responsive.css */
body.sb [data-slot="marketplace-message-threads"] .oprice {
  flex: none;
  max-width: 190px;
  text-align: right;
}

body.sb [data-slot="marketplace-message-threads"] .oprice b {
  display: block;
  overflow: hidden;
  font-size: 16px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.sb [data-slot="marketplace-message-threads"] .oprice span {
  color: var(--foreground);
  font-size: 11.5px;
}

body.sb [data-slot="marketplace-message-threads"] .rchat-scroll {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  padding: 20px;
  background-color: var(--stroyban-chat-surface);
  background-image: var(--stroyban-chat-pattern);
  background-size: var(--stroyban-chat-pattern-size);
}

body.sb [data-slot="marketplace-message-threads"] .rchat-input {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 78px;
  margin: 12px 16px;
  padding: 10px 12px 10px 18px;
  border: 1px solid var(--stroyban-chat-pane-border);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow-xs);
}

body.sb [data-slot="marketplace-message-threads"] .rchat-input input:not([type="file"]) {
  order: 1;
  flex: 1;
  height: 56px;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: var(--foreground);
  padding: 0 16px;
  font-family: inherit;
  font-size: 18px;
}

body.sb [data-slot="marketplace-message-threads"] .rchat-input input:focus {
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--primary) 35%, transparent);
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-reply-preview {
  display: flex;
  order: 0;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid var(--stroyban-chat-pane-border);
  border-radius: 18px;
  background: var(--muted);
  color: var(--foreground);
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-reply-preview span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-reply-preview b {
  color: var(--primary);
  font-size: 14px;
  line-height: 1.1;
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-reply-preview small {
  overflow: hidden;
  color: var(--foreground);
  font-size: 14px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-reply-cancel {
  flex: none;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--foreground);
  font-size: 14px;
  font-weight: 700;
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-reply-cancel:hover {
  background: color-mix(in oklch, var(--primary) 12%, transparent);
  color: var(--foreground);
}

body.sb [data-slot="marketplace-message-threads"] .rchat-send {
  display: grid;
  order: 3;
  width: 56px;
  height: 56px;
  flex: none;
  place-items: center;
  border: 0;
  border-radius: 18px;
  background: var(--primary);
  color: var(--primary-foreground);
  cursor: pointer;
}

body.sb [data-slot="marketplace-message-threads"] .rchat-send:hover {
  background: var(--primary-hover);
}

body.sb [data-slot="marketplace-message-threads"] .rchat-send:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

body.sb [data-slot="marketplace-message-threads"] .rchat-attach {
  display: grid;
  order: 2;
  width: 48px;
  height: 48px;
  flex: none;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  color: var(--foreground);
}

body.sb [data-slot="marketplace-message-threads"] .rchat-attach:hover {
  border-color: color-mix(in srgb, var(--foreground) 28%, var(--border));
  color: var(--foreground);
}

body.sb [data-slot="marketplace-message-threads"] .rchat-send i,
body.sb [data-slot="marketplace-message-threads"] .rchat-send svg,
body.sb [data-slot="marketplace-message-threads"] .rchat-attach svg {
  width: 19px;
  height: 19px;
}

body.sb [data-slot="marketplace-message-threads"] .support-chat-message {
  display: flex;
  position: relative;
  width: 100%;
}

body.sb [data-slot="marketplace-message-threads"] .support-chat-message.is-user {
  justify-content: flex-end;
}

body.sb [data-slot="marketplace-message-threads"] .support-chat-message.is-support {
  justify-content: flex-start;
}

body.sb [data-slot="marketplace-message-threads"] .support-chat-message.is-system {
  justify-content: center;
}

body.sb [data-slot="marketplace-message-threads"] .support-chat-separator {
  align-self: center;
  margin: 2px 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--muted) 72%, var(--card));
  color: var(--foreground);
  font-size: 11.5px;
  font-weight: 700;
}

body.sb [data-slot="marketplace-message-threads"] .support-chat-bubble {
  display: flex;
  position: relative;
  min-width: 120px;
  max-width: min(62%, 560px);
  flex-direction: column;
  gap: 5px;
  padding: 7px 12px;
  border: 1px solid var(--stroyban-chat-incoming-border);
  border-radius: 16px;
  background: var(--stroyban-chat-incoming);
  color: var(--stroyban-chat-incoming-text);
  box-shadow: var(--shadow-xs);
  font-size: 14px;
  line-height: 1.38;
}

body.sb [data-slot="marketplace-message-threads"] .support-chat-message.is-user .support-chat-bubble {
  border-color: var(--stroyban-chat-outgoing-border);
  border-bottom-right-radius: 5px;
  background: var(--stroyban-chat-outgoing);
  color: var(--stroyban-chat-outgoing-text);
}

body.sb [data-slot="marketplace-message-threads"] .support-chat-message.is-support .support-chat-bubble {
  border-bottom-left-radius: 5px;
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-attachments {
  display: grid;
  gap: 8px;
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-attachment {
  color: inherit;
  text-decoration: none;
}

/* A photograph or a video is a button that opens it over the chat; the kit's button brings a
   fixed height, a centred row and a hover fill that a picture must not have. */
body.sb [data-slot="marketplace-message-threads"] [data-slot="chat-media-open"] {
  display: block;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  font: inherit;
  text-align: left;
  white-space: normal;
  cursor: zoom-in;
}

body.sb [data-slot="marketplace-message-threads"] [data-slot="chat-media-open"].is-video {
  display: flex;
  cursor: pointer;
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-attachment.is-image img {
  display: block;
  width: min(260px, 100%);
  max-height: 220px;
  border-radius: 12px;
  object-fit: cover;
  background: color-mix(in oklch, var(--foreground) 6%, transparent);
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-attachment.is-document,
body.sb [data-slot="marketplace-message-threads"] .order-chat-attachment.is-video {
  display: flex;
  min-width: min(250px, 100%);
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 12px;
  background: color-mix(in oklch, var(--foreground) 6%, transparent);
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-attachment svg {
  width: 20px;
  height: 20px;
  flex: none;
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-attachment span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-attachment small {
  color: var(--foreground);
  font-size: 11px;
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-drafts {
  display: flex;
  order: 0;
  width: 100%;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 2px;
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-draft {
  display: inline-flex;
  max-width: min(260px, 100%);
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 999px;
  background: var(--card);
  color: var(--foreground);
  font-size: 12px;
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-draft img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  background: color-mix(in oklch, var(--foreground) 6%, transparent);
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-draft svg {
  width: 16px;
  height: 16px;
  flex: none;
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-draft > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-draft-remove {
  width: 20px;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--foreground);
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-reactions {
  position: absolute;
  right: 8px;
  bottom: calc(100% + 8px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--card);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
  visibility: hidden;
  white-space: nowrap;
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-reaction-row {
  display: flex;
  gap: 8px;
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-menu-action {
  justify-content: flex-start;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 12px;
  color: var(--foreground);
  font-size: 14px;
  font-weight: 700;
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-menu-action:hover {
  background: var(--muted);
}

body.sb [data-slot="marketplace-message-threads"] .support-chat-message.is-support .order-chat-reactions,
body.sb [data-slot="marketplace-message-threads"] .support-chat-message.is-system .order-chat-reactions {
  right: auto;
  left: 8px;
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-reactions.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-reaction {
  display: inline-flex;
  min-width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--background);
  color: var(--foreground);
  font-size: 16px;
  line-height: 1;
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-reaction:hover,
body.sb [data-slot="marketplace-message-threads"] .order-chat-reaction.is-active {
  border-color: var(--primary);
  background: color-mix(in oklch, var(--primary) 18%, var(--card));
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-applied-reactions {
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  border: 0;
  margin-top: 6px;
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-applied-reaction {
  display: inline-flex;
  min-width: 28px;
  height: 24px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in oklch, var(--card) 82%, transparent);
  color: var(--foreground);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-applied-reaction:disabled {
  cursor: progress;
  opacity: 0.7;
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-applied-reaction.is-active {
  border-color: var(--primary);
  background: color-mix(in oklch, var(--primary) 18%, var(--card));
}

body.sb [data-slot="marketplace-message-threads"] .order-chat-applied-reaction b {
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}


/* responsive/03-responsive.css */
body.sb [data-slot="marketplace-message-threads"] .support-chat-message.is-system .support-chat-bubble {
  max-width: min(78%, 520px);
  border-color: rgba(203, 213, 225, 0.72);
  border-radius: 12px;
  background: color-mix(in oklch, var(--muted) 78%, transparent);
  box-shadow: none;
  color: var(--foreground);
}

body.sb [data-slot="marketplace-message-threads"] .support-chat-author {
  color: var(--foreground);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.1;
}

body.sb [data-slot="marketplace-message-threads"] .support-chat-bubble time {
  align-self: flex-end;
  color: var(--foreground);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

body.sb [data-slot="marketplace-message-threads"] .support-chat-message.is-user .support-chat-bubble time {
  color: var(--primary-foreground);
}

/* The outgoing bubble is the accent in both themes, so every line in it takes the bubble's fixed
   ink. The author's name took `--foreground` from the rule above and went white on yellow in the
   dark theme, 1.44:1. */
body.sb [data-slot="marketplace-message-threads"] .support-chat-message.is-user .support-chat-author {
  color: var(--stroyban-chat-outgoing-text);
}

body.sb [data-slot="marketplace-message-threads"] .support-chat-empty {
  display: grid;
  max-width: 320px;
  gap: 6px;
  margin: auto;
  color: var(--foreground);
  text-align: center;
}

body.sb [data-slot="marketplace-message-threads"] .support-chat-empty b {
  color: var(--foreground);
  font-size: 16px;
}

body.sb [data-slot="marketplace-message-threads"] .support-chat-empty span {
  font-size: 14px;
  line-height: 1.45;
}

body.sb [data-slot="marketplace-message-threads"] .support-chat-state {
  align-self: center;
  margin-top: 4px;
  color: var(--foreground);
  font-size: 13px;
}

/* The two desktop chat columns share one header row. Keeping this contract here
   prevents independently sized list and conversation headers from drifting. */
@media (min-width: 769px) {
  /* This stylesheet is loaded after the cabinet styles. The generic chat
     minimum must not outgrow the messages grid row and clip the composer. */
  .brigade-cabinet-page-shell main[data-cab="messages"] [data-slot="marketplace-message-threads"],
  .customer-cabinet-page-shell main[data-cab="messages"] [data-slot="marketplace-message-threads"] {
    height: 100%;
    min-height: 0;
  }

  body.sb [data-slot="marketplace-message-threads"] {
    --stroyban-chat-header-height: 104px;
  }

  body.sb [data-slot="marketplace-message-threads"] .rchat-list-h,
  body.sb [data-slot="marketplace-message-threads"] .rchat-offer {
    box-sizing: border-box;
    height: var(--stroyban-chat-header-height);
    min-height: var(--stroyban-chat-header-height);
  }

  body.sb [data-slot="marketplace-message-threads"] .rchat-list-h {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 40px;
    align-content: center;
    align-items: stretch;
    gap: 10px;
    padding: 12px 16px;
  }

  body.sb [data-slot="marketplace-message-threads"] .rchat-offer {
    padding: 0 18px;
  }

  body.sb [data-slot="marketplace-message-threads"] .rchat-conv,
  body.sb [data-slot="marketplace-message-threads"] .rchat-scroll {
    min-height: 0;
  }

  .brigade-cabinet-page-shell [data-slot="marketplace-message-threads"] .rchat-conv,
  .customer-cabinet-page-shell [data-slot="marketplace-message-threads"] .rchat-conv {
    height: 100%;
    overflow: hidden;
  }

  body.sb [data-slot="marketplace-message-threads"] .rchat-input {
    flex: none;
  }

  body.sb .customer-cabinet-page-shell main[data-cab="messages"] .rchat-input,
  body.sb .brigade-cabinet-page-shell main[data-cab="messages"] .rchat-input {
    margin: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    background: var(--card);
    box-shadow: none;
    backdrop-filter: none;
  }

  body.sb .customer-cabinet-page-shell main[data-cab="messages"] .rchat-input input:not([type="file"]),
  body.sb .brigade-cabinet-page-shell main[data-cab="messages"] .rchat-input input:not([type="file"]) {
    background: var(--card);
    box-shadow: none;
  }

  body.sb [data-slot="marketplace-message-threads"] .support-chat-message,
  body.sb [data-slot="marketplace-message-threads"] .support-chat-message * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  body.sb [data-slot="marketplace-message-threads"] .rchat-input,
  body.sb [data-slot="marketplace-message-threads"] .rchat-input * {
    -webkit-user-select: auto;
    user-select: auto;
    -webkit-touch-callout: default;
  }
}

@media (min-width: 769px) and (max-width: 1180px) {
  body.sb [data-slot="page-container"] {
    max-width: none;
    padding-right: 24px;
    padding-left: 24px;
  }

  body.sb .sb-chrome-inner {
    gap: 18px;
    max-width: none;
  }

  body.sb .sb-nav {
    gap: 4px;
  }

  body.sb .sb-nav-link {
    padding-right: 8px;
    padding-left: 8px;
    font-size: 14px;
  }

  body.sb .sb-mega {
    display: none !important;
  }

  body.sb .sb-chrome-right {
    gap: 8px;
  }

  body.sb .home-page-shell .grid,
  body.sb .home-page-shell .exp-row,
  body.sb .home-page-shell .vc-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* .cat-layout is excluded: the work catalog owns its own responsive contract on the kit's
     breakpoints (1024/768), and this legacy rule collapsed it at 1180px. */
  body.sb .detail-grid,
  body.sb .dgrid,
  body.sb .layout {
    grid-template-columns: 1fr;
  }

  body.sb .rowfeed,
  body.sb .ord-table-wrap,
  body.sb .rate-table-wrap,
  body.sb .catalog-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 768px) {
  body.sb [data-slot="marketplace-message-threads"] {
    grid-template-columns: 1fr;
    min-height: calc(100dvh - 220px);
  }

  body.sb [data-slot="marketplace-message-threads"] .rchat-list {
    max-height: 260px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  body.sb [data-slot="marketplace-message-threads"] .rchat-offer {
    align-items: flex-start;
  }

  body.sb [data-slot="marketplace-message-threads"] .oprice {
    display: none;
  }
}


/* responsive/04-responsive.css */
@media (max-width: 767px) {
  :root {
    --sb-mobile-header: 64px;
    --sb-mobile-nav: 74px;
  }

  body.sb {
    background: var(--page-backdrop) !important;
    padding-bottom: calc(var(--sb-mobile-nav) + env(safe-area-inset-bottom, 0px));
  }

  body.sb [data-slot="page-container"] {
    width: 100%;
    max-width: none;
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  body.sb .sb-chrome-header {
    height: var(--sb-mobile-header) !important;
    padding: 0 !important;
  }

  /*
   * The notch is added to the header's own top padding, not put in its place.
   *
   * `padding-top: env(...)` replaced the 0.625rem the public mobile header sets for itself, and on
   * every device without a notch -- Android, a desktop browser, the emulator -- that inset is 0px,
   * so the rule silently zeroed the gap and sat "Войти" against the top edge of the screen. The
   * two rules meet because the element carries both classes, and this one wins on weight and on
   * load order alike, so it has to account for what it overrides rather than ignore it.
   */
  body.sb .sb-chrome-mobile-header {
    min-height: calc(var(--sb-mobile-header) + env(safe-area-inset-top, 0px));
    padding-top: calc(0.625rem + env(safe-area-inset-top, 0px));
    box-sizing: border-box;
  }

  body.sb .sb-chrome-inner {
    height: var(--sb-mobile-header);
    max-width: none;
    padding: 0 14px;
    gap: 12px;
  }

  body.sb .sb-logo {
    flex: 1;
    min-width: 0;
    font-size: 21px;
  }

  body.sb .sb-logo-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 18px;
  }

  body.sb .sb-nav,
  body.sb .sb-chrome-right > .hdr-dd--city,
  body.sb .sb-chrome-right > .hdr-dd:not(:has(.hdr-user)),
  body.sb .sb-chrome-right > .sb-btn,
  body.sb .sb-chrome-right > a.sb-btn {
    display: none !important;
  }

  /*
   * `gap: 0` only. `margin-left: 0` used to sit here too, and it is what left the header packed
   * against the left edge with a third of the bar empty on the right: the rule cancels the
   * `margin-left: auto` that pushes this group to the far side.
   *
   * The rest of this block strips the header to a logo and an avatar, and for the header it was
   * written for that made sense -- `.sb-logo` takes `flex: 1` and fills the row. But that header
   * is gone: the public chrome now uses `.sb-chrome-logo` and `.sb-chrome-nav`, which nothing
   * here targets, so the only surviving effect was removing the push-right from a full desktop
   * header. Measured at 800px: the contents ended at x=547 inside an 800px bar.
   */
  body.sb .sb-chrome-right {
    gap: 0;
  }

  body.sb .hdr-user {
    width: 44px;
    height: 44px;
    padding: 4px !important;
    border-color: var(--border);
  }

  body.sb .hdr-user .av {
    width: 34px;
    height: 34px;
  }

  body.sb .hdr-user .nm,
  body.sb .hdr-user > svg,
  body.sb .hdr-user > [data-slot="icon-anchor"] > svg {
    display: none;
  }

  body.sb .hdr-user-menu {
    right: 0;
    min-width: 210px;
  }

  .sb-mobile-bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 55;
    display: grid !important;
    grid-template-columns: repeat(var(--sb-mobile-tab-count, 5), minmax(0, 1fr));
    gap: 0;
    min-height: calc(var(--sb-mobile-nav) + env(safe-area-inset-bottom, 0px));
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    /* Solid: card text scrolling under the labels read through them at 97%. */
    background: var(--background);
    box-shadow: 0 -12px 28px oklch(0.145 0 0 / 0.08);
  }

  .sb-mobile-tabbar__item {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 62px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    border-radius: 17px;
    background: transparent;
    color: var(--foreground);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
  }

  .sb-mobile-tabbar__icon {
    position: relative;
    display: inline-grid;
    min-width: 44px;
    height: 34px;
    place-items: center;
    border-radius: 999px;
    transition:
      background-color 0.16s ease,
      color 0.16s ease,
      min-width 0.16s ease;
  }

  .sb-mobile-tabbar__item svg,
  .sb-mobile-tabbar__item i {
    width: 26px;
    height: 26px;
    flex: none;
  }

  .sb-mobile-tabbar__label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sb-mobile-tabbar__item[aria-current="page"],
  .sb-mobile-tabbar__item.is-active {
    color: var(--foreground);
  }
}


/* responsive/05-responsive.css */
@media (max-width: 767px) {

  .sb-mobile-tabbar__item[aria-current="page"] .sb-mobile-tabbar__icon,
  .sb-mobile-tabbar__item.is-active .sb-mobile-tabbar__icon {
    min-width: 64px;
    background: var(--primary);
    color: var(--primary-foreground);
  }

  .sb-mobile-tabbar__icon b {
    position: absolute;
    top: -8px;
    right: -6px;
    display: grid;
    min-width: 21px;
    height: 21px;
    place-items: center;
    padding: 0 5px;
    border-radius: 999px;
    /* White on #f00 read 4.0:1. The red of the «Срочно» badge, fixed in both themes: 4.77:1. */
    background: oklch(0.577 0.245 27.325);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
  }

  body.sb .sb-chrome-footer {
    display: none;
  }

  body.sb .crumb {
    display: none;
  }

  body.sb .hero,
  body.sb .dir-hero {
    padding: 24px 0 20px;
  }

  body.sb .hero h1,
  body.sb .dir-hero h1,
  body.sb .pagehead h1,
  body.sb .ds-h1 {
    max-width: 100%;
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: 0;
  }

  body.sb .lead,
  body.sb .dir-hero .lead,
  body.sb .pagehead .sub {
    font-size: 16px;
    line-height: 1.45;
  }

  body.sb .searchbar,
  body.sb .searchrow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
  }

  body.sb .searchbar {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  body.sb .searchbar .field,
  body.sb .searchrow .sb-input-group {
    height: 52px;
    border: 1px solid var(--input);
    border-radius: 16px;
    background: var(--card);
  }

  body.sb .searchbar .sep,
  body.sb .searchbar .reg-wrap {
    display: none;
  }

  body.sb .searchbar .home-search-button,
  body.sb .searchrow .search-go,
  body.sb .searchrow .sb-btn {
    width: 100%;
    height: 52px;
    border-radius: 16px;
  }

  body.sb .hero-divider {
    margin-top: 8px;
  }

  body.sb .sec {
    padding: 26px 0;
  }

  body.sb .sec-bar,
  body.sb .pagehead,
  body.sb .toolbar,
  body.sb .toolbar-right,
  body.sb .dir-sec-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  body.sb .sec-title h2,
  body.sb .cat-title,
  body.sb .dir-sec-head h2 {
    font-size: 26px;
    line-height: 1.12;
  }

  body.sb .home-page-shell .exp-row,
  body.sb .home-page-shell .vc-row,
  body.sb .home-page-shell .grid,
  body.sb .city-grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  body.sb .oc-photo,
  body.sb .vc-img {
    height: 150px;
  }

  body.sb .orders-banner {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
    margin: 16px 0 22px;
    padding: 18px;
    border-radius: 18px;
  }

  body.sb .ob-main {
    align-items: flex-start;
    gap: 12px;
  }

}


/* responsive/06-responsive.css */
@media (max-width: 767px) {
  body.sb .ob-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  body.sb .ob-title {
    font-size: 22px;
  }

  /* `stretch`, not the inherited `center`: at this width "новых сегодня" wraps to two lines while
     its neighbours keep one, and centred tiles leave the middle one standing taller than the row.
     Stretching makes every tile as tall as the tallest, so a label that wraps -- in any of the
     fourteen locales -- widens the row evenly instead of breaking its alignment. */
  body.sb .ob-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
  }

  /* The tile centres its own contents now that the tile itself is stretched. */
  body.sb .ob-stat {
    min-width: 0;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  body.sb .filterbar,
  body.sb .filters,
  body.sb .all-bar {
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
  }

  body.sb .fb-row,
  body.sb .filters,
  body.sb .all-tools,
  body.sb .fb-end {
    display: grid;
    grid-template-columns: 1fr;
    /* Зазор задаётся здесь, вместе с самой раскладкой. Десктопные листы объявляют его у
       `.orders-page-shell .fb-row`, а нижняя шторка рендерится порталом снаружи shell — там то
       правило не действует, и поля шли встык: подпись каждого прилипала к полю сверху.
       Замерено на проде: строки на 324, 393, 462 — каждая начинается ровно там, где кончилась
       предыдущая. */
    gap: 14px;
    width: 100%;
  }

  body.sb .fb-field,
  body.sb .fb-field--wide,
  body.sb .fb-field--btn,
  body.sb .obj-dd,
  body.sb .budget-ctl,
  body.sb .cat-trigger,
  body.sb .fake-select,
  body.sb .sb-select-trigger,
  body.sb .more-filters,
  body.sb .reset-link,
  body.sb .sort-dd,
  body.sb .sort-dd .sb-select-trigger,
  body.sb .sort-dd select,
  body.sb .view-toggle,
  body.sb .budget-inputs,
  body.sb .rate-inputs {
    width: 100%;
    min-width: 0;
  }

  /* Содержимое поля выбора прижато влево, как у соседнего селекта. Выравнивание объявлено у
     `.orders-page-shell .cat-trigger` (`text-align: left`) и у его `.ct-label` (`flex: 1`), а
     шторка рендерится порталом снаружи shell — там оба правила мертвы, и текст вставал по
     центру. Замерено на проде: соседнее поле начинает текст на x=44, это — на x=140.
     `.ct-label` в обоих листах объявлен дословно одинаково, поэтому выносится сюда целиком. */
  body.sb .cat-trigger {
    justify-content: flex-start;
    text-align: left;
  }

  body.sb .cat-trigger .ct-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
  }

  /* The three filters of the home page are one row of one kind of control, and on a phone they
     were drawn three ways: property at 14px, work type at 16px with its text pushed left, budget
     at 16px and only as wide as its words (the wrapper was stretched, the button inside was
     not). One size, one type size, text left and chevron right for all three. */
  body.sb .home-page-shell .filters .sb-select-trigger,
  body.sb .home-page-shell .filters .cat-trigger,
  body.sb .home-page-shell .filters .budget-btn {
    width: 100%;
    min-width: 0;
    height: 2.75rem;
    padding: 0 14px;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
  }

  body.sb .home-page-shell .filters .cat-trigger .ct-label {
    font-size: inherit;
  }

  body.sb .budget-inputs .sb-input,
  body.sb .rate-inputs .sb-input {
    flex: 1;
    width: 100%;
  }

  body.sb .toolbar-right {
    width: 100%;
  }

  body.sb .view-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  body.sb .view-toggle button {
    width: 100%;
  }

  body.sb .all-bar .all-tools {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
  }

  body.sb .all-bar .sort-dd {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }

  body.sb .all-bar .sort-dd label {
    display: block;
    width: 100%;
    white-space: normal;
  }

  body.sb .all-bar .home-sort-select {
    display: none;
  }

  body.sb .all-bar .home-sort-trigger {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    /* The size of the three filters above it: this one was 52px and 17px beside their 44 and 16,
       a fourth way to draw the same control on one screen. */
    height: 2.75rem;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
  }

  body.sb .all-bar .home-sort-trigger span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.sb .home-object-menu,
  body.sb .budget-pop {
    display: none !important;
  }

  body.sb .home-mobile-sheet-options {
    display: grid;
    gap: 8px;
    padding: 0 12px 16px;
  }

  body.sb .home-mobile-option {
    display: flex;
    min-height: 54px;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--foreground);
    font-family: inherit;
    font-size: 16px;
    font-weight: 650;
    text-align: left;
  }
}


/* responsive/07-responsive.css */
@media (max-width: 767px) {

  body.sb .home-mobile-option[data-active="true"] {
    background: var(--secondary);
  }

  body.sb .home-mobile-option i,
  body.sb .home-mobile-option svg {
    width: 18px;
    height: 18px;
    color: var(--primary-hover);
    flex: none;
  }

  body.sb .home-mobile-budget {
    display: grid;
    gap: 14px;
    padding: 0 18px 16px;
  }

  body.sb .home-mobile-budget .bp-inputs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px;
  }

  body.sb .home-mobile-budget .bp-inputs .sb-input {
    width: 100%;
    height: 52px;
    font-size: 16px;
  }

  body.sb .home-mobile-budget .bp-presets {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.sb .home-mobile-budget .bp-presets button {
    height: 48px;
    border-radius: 12px;
    font-size: 15px;
  }

  body.sb .home-mobile-budget-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  body.sb .home-mobile-budget-foot .home-mobile-budget-apply {
    min-width: 150px;
  }

  body.sb .rowhead,
  body.sb .ord-table-wrap {
    display: none;
  }

  /* The home page's table gives way to cards here, so its table/cards switch has nothing left to
     switch. */
  body.sb .home-page-shell .grid.home-orders-phone-cards {
    display: grid;
  }

  body.sb .home-page-shell .view-toggle {
    display: none;
  }

  body.sb .rowfeed {
    display: flex;
    gap: 12px;
    border: none;
    background: transparent;
  }

  body.sb .orow {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    min-height: 0;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card);
  }

  body.sb .orow .c-title {
    grid-column: 1 / -1;
  }

  body.sb .orow .c-title .tt {
    white-space: normal;
  }

  body.sb .orow .c-loc,
  body.sb .orow .c-price,
  body.sb .orow .c-act {
    display: flex;
  }

  body.sb .orow .c-house,
  body.sb .orow .c-area,
  body.sb .orow .c-resp,
  body.sb .orow .c-cust {
    display: none;
  }

  body.sb .orow .c-price {
    justify-content: flex-end;
    text-align: right;
  }

  body.sb .orow .c-act {
    grid-column: 1 / -1;
  }

  body.sb .orow .c-act [data-slot="button"] {
    width: 100%;
    height: 42px;
  }

  body.sb .feed {
    gap: 12px;
  }

  body.sb .ocard-top,
  body.sb .ocard-foot,
  body.sb .wcard-top,
  body.sb .wcard-foot {
    flex-direction: column;
  }

  body.sb .ocard-thumb {
    width: 100%;
    min-height: 150px;
  }

  body.sb .ocard-price {
    align-items: flex-start;
    padding-left: 0;
    text-align: left;
  }

  body.sb .foot-right,
  body.sb .wcard-actions,
  body.sb .bcard-foot,
  body.sb .cdlg-foot,
  body.sb .cat-dialog-foot,
  body.sb .more-foot {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

}


/* responsive/08-responsive.css */
@media (max-width: 767px) {
  body.sb .foot-right .sb-btn,
  body.sb .wcard-actions [data-slot="button"],
  body.sb .bcard-foot .sb-btn,
  body.sb .bhero-act [data-slot="button"] {
    width: 100%;
  }

  .brigades-teams-page-shell .bhero {
    border-radius: 16px;
  }

  .brigades-teams-page-shell .bhero-cover {
    height: 112px;
  }

  .brigades-teams-page-shell .bhero-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    padding: 0 16px 16px;
    text-align: center;
  }

  .brigades-teams-page-shell .bhero-logo {
    position: relative;
    z-index: 1;
    align-self: center;
    width: 88px;
    height: 88px;
    margin: -44px 0 0;
    border-radius: 18px;
    border-width: 3px;
    font-size: 34px;
  }

  .brigades-teams-page-shell .bhero-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }

  .brigades-teams-page-shell .bhero-name {
    justify-content: center;
    min-width: 0;
    padding-top: 0;
  }

  .brigades-teams-page-shell .bhero-name h1 {
    font-size: 28px;
    line-height: 1.12;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .brigades-teams-page-shell .bhero-badges {
    justify-content: center;
    gap: 6px;
    margin-top: 0;
  }

  .brigades-teams-page-shell .ver-badge {
    font-size: 12px;
    padding: 5px 9px;
  }

  .brigades-teams-page-shell .ver-badge svg {
    width: 13px;
    height: 13px;
  }

  .brigades-teams-page-shell .bhero-spec {
    margin-top: 0;
    font-size: 15px;
    line-height: 1.35;
  }

  .brigades-teams-page-shell .bhero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 0;
  }

  .brigades-teams-page-shell .bhero-stat {
    display: grid;
    justify-items: center;
    gap: 2px;
    min-width: 0;
    font-size: 15px;
    line-height: 1.2;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--muted);
  }

  .brigades-teams-page-shell .bhero-stat b {
    font-size: 18px;
  }

  .brigades-teams-page-shell .bhero-act {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    margin-top: 0;
  }

  .brigades-teams-page-shell .bhero-act--desktop {
    display: none;
  }

  .brigades-teams-page-shell .bhero-act--mobile {
    display: grid;
    gap: 8px;
  }

  .brigades-teams-page-shell .members {
    gap: 14px;
  }

  .brigades-teams-page-shell .member {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 8px 14px;
    align-items: center;
    padding: 0;
  }

  .brigades-teams-page-shell .m-av {
    grid-row: span 2;
    width: 56px;
    height: 56px;
  }
}


/* responsive/09-responsive.css */
@media (max-width: 767px) {

  .brigades-teams-page-shell .m-main {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .brigades-teams-page-shell .m-name {
    align-items: flex-start;
    font-size: 17px;
    line-height: 1.18;
  }

  .brigades-teams-page-shell .m-role {
    font-size: 15px;
    line-height: 1.35;
  }

  .brigades-teams-page-shell .m-badge {
    grid-column: 2;
    justify-self: start;
    white-space: nowrap;
  }

  .brigades-teams-page-shell .m-star {
    grid-column: 2;
    justify-self: start;
    min-width: auto;
    white-space: nowrap;
  }

  /* .cat-layout is excluded: the work catalog owns its own responsive contract on the kit's
     breakpoints (1024/768), and this legacy rule collapsed it at 1180px. */
  body.sb .detail-grid,
  body.sb .dgrid,
  body.sb .layout {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  body.sb .cat-rail,
  body.sb .cat-stages,
  body.sb .tabs,
  body.sb .obj-chips,
  body.sb .seg {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body.sb .cat-rail::-webkit-scrollbar,
  body.sb .cat-stages::-webkit-scrollbar,
  body.sb .tabs::-webkit-scrollbar,
  body.sb .obj-chips::-webkit-scrollbar,
  body.sb .seg::-webkit-scrollbar {
    display: none;
  }

  body.sb .rail-item,
  body.sb .stage-item,
  body.sb .tabs [data-slot="button"],
  body.sb .obj-chip,
  body.sb .seg button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  body.sb .cat-stages,
  body.sb .cat-types {
    border: 1px solid var(--border);
    border-radius: 18px;
  }

  body.sb .ct-list {
    columns: 1;
    column-rule: none;
  }

  body.sb .how,
  body.sb .params,
  body.sb .cust-stats,
  body.sb .stats-grid,
  body.sb .profile-grid,
  body.sb .object-grid,
  body.sb .settings-row,
  body.sb .work-grid {
    grid-template-columns: 1fr !important;
  }

  body.sb .sb-overlay {
    align-items: end;
    justify-items: stretch;
    place-items: end stretch;
    padding: 0;
    background: oklch(0.145 0 0 / 0.45);
  }

  body.sb .cat-dialog,
  body.sb .more-dialog,
  body.sb .cdlg,
  body.sb .svc-dialog,
  body.sb .eo-modal {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 72px);
    margin: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 28px 28px 0 0;
    overflow: hidden auto;
    box-shadow: 0 -18px 48px oklch(0.145 0 0 / 0.24);
  }

  body.sb .home-category-dialog-content,
  body.sb .orders-category-dialog-content,
  body.sb .orders-more-dialog-content {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    transform: none;
  }

  body.sb .sb-mobile-sheet.create-team-mobile-sheet {
    height: min(90dvh, calc(100dvh - max(12px, env(safe-area-inset-top, 0px))));
    max-height: min(90dvh, calc(100dvh - max(12px, env(safe-area-inset-top, 0px))));
  }

  body.sb .cat-dialog::before,
  body.sb .more-dialog::before,
  body.sb .cdlg::before,
  body.sb .svc-dialog::before,
  body.sb .eo-modal::before {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin: 10px auto 2px;
    border-radius: 999px;
    background: var(--border);
    flex: none;
  }

  body.sb .cat-dialog-head,
  body.sb .more-head,
  body.sb .cdlg-h,
  body.sb .svc-dialog-head,
  body.sb .eo-head {
    position: sticky;
    top: 0;
    z-index: 2;
    flex: none;
    min-height: 72px;
    height: auto;
    margin: 0;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--card);
  }
}


/* responsive/10-responsive.css */
@media (max-width: 767px) {

  body.sb .cat-dialog-head > div {
    min-width: 0;
  }

  body.sb .cat-dialog-head .cd-title {
    line-height: 1.1;
    letter-spacing: 0;
  }

  body.sb .cat-dialog-head .cd-desc {
    max-width: 100%;
    margin-top: 6px;
    line-height: 1.32;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.sb .cd-close,
  body.sb .cdlg-close,
  body.sb .svc-dialog-close,
  body.sb .eo-x,
  body.sb .drawer-close {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 999px;
    background: var(--muted);
    color: var(--foreground);
    flex: none;
  }

  body.sb .cat-dialog-foot,
  body.sb .more-foot,
  body.sb .svc-dialog-foot,
  body.sb .eo-foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    background: var(--card);
  }

  body.sb .eo-overlay {
    align-items: end;
    justify-items: stretch;
    place-items: end stretch;
    padding: 0;
    overflow: hidden;
  }

  body.sb .bd-overlay.show {
    display: flex;
    align-items: flex-end;
  }

  body.sb .bd-panel {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-height: calc(100dvh - 72px);
    border-radius: 28px 28px 0 0;
    transform: translateY(100%);
    overflow: hidden;
    box-shadow: 0 -18px 48px oklch(0.145 0 0 / 0.24);
  }

  body.sb .bd-overlay.show .bd-panel {
    transform: none;
  }

  body.sb .cat-dialog-body {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: 1fr;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  body.sb .cat-side {
    display: block;
    flex: none;
    overflow: hidden;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 8px 10px;
    scrollbar-width: none;
  }

  body.sb .cat-side > div:not(.cat-side-title) {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  body.sb .cat-side::-webkit-scrollbar,
  body.sb .cat-side > div:not(.cat-side-title)::-webkit-scrollbar {
    display: none;
  }

  body.sb .cat-side-title {
    display: none;
  }

  body.sb .house-opt {
    flex: 0 0 auto;
    width: auto;
    min-height: 44px;
    margin-bottom: 0;
    padding: 0 10px;
    white-space: nowrap;
  }

  body.sb .cat-main {
    min-height: 0;
  }

  body.sb .cat-tree {
    flex: 1 1 auto;
    max-height: none;
    min-height: 220px;
  }

  body.sb .tree-kids {
    padding-left: 12px;
  }

  body.sb .tree-kid .tk-text {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  body.sb .tree-kid .tk-t {
    flex: 1;
  }
}


/* responsive/11-responsive.css */
@media (max-width: 767px) {

  /*
    The tab strip clears BOTH bars above it: the site header and the cabinet's own appbar.

    It used to clear one `--sb-mobile-header`, which was right while the appbar overlapped the
    header at top:0. Now that the appbar sticks below the header, the strip has two to clear or it
    slides under the appbar.
  */
  /* Позиционирование выпадающего списка нужно ему везде, включая нижнюю шторку, которая
   рендерится порталом снаружи page-shell. Общая часть объявлена без скоупа; размеры триггера у
   каждого экрана свои и остаются заскоупленными ниже. */
.obj-dd { position: relative; }

body.sb .cab-nav {
    position: sticky !important;
    /*
     * The appbar's height is `--cab-mobile-header`, the same value the cabinet sets for itself.
     * `--cab-appbar-height` was never declared anywhere, so this always fell back to a written-out
     * 60px while the bar above it measured 107 at rest -- the strip stuck 47px too high, and the
     * profile heading slid underneath it. Reading the declared variable keeps the two in step the
     * way the header and the appbar already are.
     */
    top: calc(var(--cab-site-header-now, var(--sb-mobile-header)) + var(--cab-mobile-header, 60px)) !important;
    z-index: 30;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: calc(100% + 32px) !important;
    margin: 0 -16px 18px !important;
    padding: 8px 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-radius: 0 !important;
    gap: 8px !important;
    /* Solid, with the appbar above it: at 94% the screen scrolled visibly behind the tabs. */
    background: var(--background) !important;
    box-shadow: none !important;
    scrollbar-width: none;
  }

  body.sb .cab-nav::-webkit-scrollbar {
    display: none;
  }

  body.sb .cab-nav a,
  body.sb .cab-nav button,
  body.sb .cab-nav .nav-item {
    flex: 0 0 auto;
    min-height: 44px !important;
    max-width: 220px;
    padding: 0 13px !important;
    gap: 9px !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    background: var(--card) !important;
    color: var(--foreground) !important;
    font-size: 14px !important;
    box-shadow: var(--shadow-xs);
    white-space: nowrap;
  }

  body.sb .cab-nav .nav-item i,
  body.sb .cab-nav .nav-item svg {
    width: 18px !important;
    height: 18px !important;
  }

  body.sb .cab-nav .nav-item.is-active {
    border-color: var(--primary) !important;
    background: var(--primary) !important;
    color: #111 !important;
  }

  body.sb .cab-nav .nav-item.is-soon:not(.is-active) {
    color: var(--foreground) !important;
  }

  body.sb .cab-nav .nav-item .count {
    min-width: 21px !important;
    height: 21px !important;
    padding: 0 6px !important;
    font-size: 12px !important;
  }

  body.sb .cab-nav .nav-item .soon {
    background: var(--muted) !important;
    color: var(--foreground) !important;
    flex: none !important;
    max-width: max-content !important;
    white-space: nowrap !important;
  }

  body.sb .cab-nav .nav-sep {
    display: none;
  }

  body.sb .customer-cabinet-page-shell .customer-desktop-nav,
  body.sb .customer-cabinet-page-shell .cab-nav {
    display: none !important;
  }

  body.sb .side-card,
  body.sb .seo-text {
    padding: 18px;
    border-radius: 18px;
  }

  body.sb .pager {
    gap: 6px;
    margin-top: 22px;
  }

  body.sb .pager button,
  body.sb .pager a,
  body.sb .pager .edge {
    min-width: 40px;
    height: 40px;
  }
}

/* Shared responsive owner: public chrome, generic public screens and price-directory shell. */
.sb-mobile-appbar,
.sb-mobile-tabbar,
.customer-mobile-appbar,
.customer-mobile-tabbar,
.customer-mobile-fab,
.brigade-mobile-appbar,
.brigade-cabinet-page-shell .brigade-mobile-tabbar,
.brigade-cabinet-page-shell .brigade-mobile-fab {
  display: none;
}


/* responsive/12-responsive.css */
@media (max-width: 1280px) {
  body.sb .tabs[role="tablist"] {
    display: flex;
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body.sb .tabs[role="tablist"]::-webkit-scrollbar {
    display: none;
  }

  body.sb .tabs[role="tablist"] button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

}

/*
 * The orders toolbar, on phones.
 *
 * These are phone proportions — a 52px select, 56px buttons, 28px icons, one control per
 * row — and they used to start at 1180px, together with the scrolling tab strip above. That
 * covers most laptop windows: at 960px the sort control and the view toggle stretched the
 * full width of the page and looked broken on a desktop screen. 820px is the breakpoint the
 * rest of this stylesheet treats as "phone"; the tab strip keeps 1180px because a row of tabs
 * genuinely needs to scroll earlier than a two-control toolbar needs to stack.
 */
@media (max-width: 767px) {
  /*
   * The filters move into a sheet, and the button that opens it appears.
   *
   * Inline the bar stood 468px tall; with the banner and the search above it the first order
   * began at y=1274 on a 390px screen -- a screen and a half of controls before the thing the
   * reader came for. The markup keeps both: the trigger is hidden above this width because the
   * bar is already on the page there, and hiding rather than unmounting keeps the server's HTML
   * and the first browser frame identical at every width.
   */
  body.sb .orders-feed-screen .orders-filterbar-inline {
    display: none;
  }

  body.sb .orders-feed-screen .orders-filter-mobile-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
  }

  body.sb .orders-feed-screen .orders-filter-trigger {
    display: inline-flex;
    align-self: flex-start;
  }

  body.sb .orders-feed-screen .toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    margin: 22px 0 14px;
  }

  body.sb .orders-feed-screen .toolbar .count {
    font-size: 16px;
    line-height: 1.35;
  }

  body.sb .orders-feed-screen .toolbar-right {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  body.sb .orders-feed-screen .sort-dd {
    display: grid;
    gap: 8px;
    width: 100%;
  }

  body.sb .orders-feed-screen .sort-dd label {
    display: block;
    font-size: 16px;
    line-height: 1.35;
    white-space: normal;
  }

  body.sb .orders-feed-screen .sort-dd .obj-dd,
  body.sb .orders-feed-screen .sort-dd .sb-select-trigger {
    width: 100%;
    min-width: 0;
  }

  /* The kit's own control height and corner, as on the workers board. This block used to make the
     sort select 52px tall with 17px type and the view switch 56px with 28px icons -- a third
     larger than the same two controls one tab away. 16px type keeps iOS from zooming on focus. */
  body.sb .orders-feed-screen .sort-dd .sb-select-trigger {
    height: 2.5rem;
    justify-content: space-between;
    font-size: 1rem;
  }

  body.sb .orders-feed-screen .sort-dd .sb-menu {
    width: 100%;
  }

  /* One track per button, however many there are. The board has three densities -- cards, table
     and compact list -- and a fixed two-column grid wrapped the third onto its own row, half the
     width of the others. Implicit column tracks keep the row honest when a fourth view is added,
     which is exactly how this broke: the third view arrived after the rule was written. */
  body.sb .orders-feed-screen .view-toggle {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    width: 100%;
    height: 2.5rem;
  }

  body.sb .orders-feed-screen .view-toggle button {
    width: 100%;
    min-width: 0;
    height: 100%;
  }

  body.sb .orders-feed-screen .view-toggle i,
  body.sb .orders-feed-screen .view-toggle svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 380px) {
  .sb-mobile-tabbar__item {
    font-size: 10px;
  }

  body.sb .hero h1,
  body.sb .dir-hero h1,
  body.sb .pagehead h1,
  body.sb .ds-h1 {
    font-size: 30px;
  }
}

@media (max-width: 767px) {
  body.sb .sb-mobile-bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 70;
    display: grid !important;
    grid-template-columns: repeat(var(--sb-mobile-tab-count, 5), minmax(0, 1fr));
    min-height: calc(var(--sb-mobile-nav, 81px) + env(safe-area-inset-bottom, 0px));
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    /* Solid: card text scrolling under the labels read through them at 97%. */
    background: var(--background);
    box-shadow: 0 -12px 28px oklch(0.145 0 0 / 0.08);
  }

  /* The bar's own height -- 9px of padding either side of a 62px item, under a 1px border -- so
     the page ends where the bar begins. It said 92px, and since the bar is at least as tall as
     this figure, the price pages alone drew a bar 11px taller than every other page's. */
  body.sb:has(.price-directory-mobile) {
    --sb-mobile-nav: 81px;
    padding-bottom: calc(var(--sb-mobile-nav) + env(safe-area-inset-bottom, 0px));
  }
}