/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@16.1.1_@playwright+test@1.63.0_babel-plugin-macros@3.1.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/.pnpm/next@16.1.1_@playwright+test@1.63.0_babel-plugin-macros@3.1.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/fuzion/components/chat-workspace.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.chat-page {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  flex: 1;
}
.chat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}
.chat-toolbar > .MuiTabs-root {
  min-width: 0;
  flex: 1;
}
.chat-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.chat-toolbar .chat-layout-switch {
  align-self: center;
}
.chat-page > .MuiAlert-root {
  flex-shrink: 0;
}

/* Attendance owns the available height; only its lists and history scroll. */
.app-main:has(> .page-content > .chat-page) {
  height: 100dvh;
  min-height: 0;
}
.page-content:has(> .chat-page) {
  display: flex;
  min-height: 0;
  padding-block: 8px 12px;
}
.app-main:has(> .page-content > .chat-page) > .app-footer {
  display: none;
}
.page-content.workspace-frame:has(> .chat-page) {
  height: 100dvh;
  box-sizing: border-box;
}
.chat-workspace {
  display: flex;
  min-width: 0;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--mui-palette-divider);
  border-radius: 12px;
  background: var(--mui-palette-background-paper);
  overflow: hidden;
  box-shadow: 0 3px 16px #24243c07;
}
.chat-list-panel {
  width: var(--chat-list-width, 335px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--mui-palette-divider);
  min-height: 0;
}
.chat-list-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 18px 14px;
}
.chat-list-heading > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.chat-list-heading-tools {
  display: flex;
  flex: 0 0 100%;
  justify-content: flex-end;
  gap: 4px;
}
.chat-search {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 0 12px 14px;
}
.chat-search-icon {
  font-size: 19px;
  margin-right: 6px;
  color: var(--mui-palette-text-secondary);
}
.chat-list-tabs {
  min-height: 48px;
  border-block: 1px solid var(--mui-palette-divider);
}
.chat-list-tabs .MuiTab-root {
  min-width: 0;
  padding: 12px 10px;
  min-height: 48px;
  font-size: 12px;
}
.chat-tab-label {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.chat-tab-label > i {
  font-size: 16px;
}
.chat-tab-label > span {
  padding: 1px 5px;
  background: var(--mui-palette-action-hover);
  border-radius: 4px;
  font-size: 11px;
}
.chat-list-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.chat-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 30px;
}
.chat-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 16px 12px;
  border-bottom: 1px solid var(--mui-palette-divider);
}
.chat-filters .MuiFormControlLabel-label {
  font-size: 12px;
}
.chat-conversation-item {
  display: flex;
  width: 100%;
  gap: 10px;
  padding: 10px 12px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--mui-palette-divider);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  position: relative;
}
.chat-conversation-item:hover {
  background: var(--mui-palette-action-hover);
}
.chat-conversation-item.selected {
  background: var(--mui-palette-primary-lightOpacity);
  box-shadow: inset 3px 0 var(--mui-palette-primary-main);
}
.chat-conversation-item:focus-visible {
  outline: 2px solid var(--mui-palette-primary-main);
  outline-offset: -2px;
}
.chat-conversation-info {
  flex: 1;
  min-width: 0;
}
.chat-conversation-top {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
}
.chat-conversation-top strong {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-conversation-top time {
  font-size: 10px;
  color: var(--mui-palette-text-secondary);
  flex-shrink: 0;
}
.chat-conversation-info p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 20px;
  margin: 3px 0;
  color: var(--mui-palette-text-secondary);
}
.chat-channel-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  color: #fff;
  border: 2px solid var(--mui-palette-background-paper);
}
.chat-channel-dot i {
  font-size: 12px;
}
.chat-conversation-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--mui-palette-text-secondary);
}
.chat-dept {
  max-width: 135px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--mui-palette-action-hover);
  border-radius: 4px;
  padding: 2px 6px;
}
.chat-unread {
  margin-left: auto;
  min-width: 19px;
  height: 19px;
  border-radius: 10px;
  background: var(--mui-palette-primary-main);
  color: white;
  text-align: center;
  line-height: 19px;
}
.chat-list-empty {
  padding: 46px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.chat-list-empty > i {
  font-size: 40px;
  color: var(--mui-palette-text-disabled);
}
.chat-list-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--mui-palette-divider);
  padding: 8px 12px;
}
.chat-list-footer > span:first-child {
  flex: 1;
}
.chat-conversation {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--mui-palette-background-default);
  position: relative;
}
.chat-welcome {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding: 28px;
  max-width: 580px;
}
.chat-welcome-art {
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  border-radius: 36px;
  background: var(--mui-palette-primary-lightOpacity);
  color: var(--mui-palette-primary-main);
  margin-bottom: 12px;
  position: relative;
  transform: rotate(-6deg);
}
.chat-welcome-art > i {
  font-size: 60px;
  transform: rotate(6deg);
}
.chat-welcome-art > span {
  position: absolute;
  bottom: -8px;
  right: -8px;
  background: var(--mui-palette-background-paper);
  box-shadow: 0 4px 14px #0001;
  border-radius: 14px;
  padding: 10px;
  display: flex;
}
.chat-welcome-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
}
.chat-conversation-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 8px 16px;
  background: var(--mui-palette-background-paper);
  border-bottom: 1px solid var(--mui-palette-divider);
}
.chat-header-identity {
  flex: 1 1 120px;
  min-width: 0;
}
.chat-header-identity h6 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-header-identity > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-header-identity i {
  font-size: 12px;
  vertical-align: middle;
}
.chat-header-tools {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  max-width: 100%;
  margin-left: auto;
  gap: 8px;
}
.chat-action-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 16px;
  background: var(--mui-palette-background-paper);
  border-bottom: 1px solid var(--mui-palette-divider);
  min-height: 46px;
}
.chat-action-strip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-action-strip .MuiButton-root {
  font-size: 12px;
  white-space: nowrap;
}
.chat-history-search {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: var(--mui-palette-background-paper);
}
.chat-timeline {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 20px 26px;
  scrollbar-gutter: stable;
  background-image: radial-gradient(var(--mui-palette-divider) 0.7px, transparent 0.7px);
  background-size: 18px 18px;
  overscroll-behavior: contain;
}
.chat-date-divider {
  text-align: center;
  margin: 10px 0 22px;
}
.chat-date-divider span {
  display: inline-block;
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 6px;
  background: var(--mui-palette-background-paper);
  box-shadow: 0 1px 3px #0001;
  color: var(--mui-palette-text-secondary);
}
.chat-system-message {
  display: flex;
  justify-content: center;
  gap: 6px;
  align-items: center;
  margin: 14px auto;
  font-size: 11px;
  line-height: 1.6;
  max-width: 90%;
  text-align: center;
  color: var(--mui-palette-text-secondary);
  background: var(--mui-palette-background-paper);
  padding: 7px 12px;
  border-radius: 8px;
}
.chat-system-message i {
  flex-shrink: 0;
  font-size: 14px;
}
.chat-system-message time {
  white-space: nowrap;
  font-size: 10px;
}
.chat-bubble-row {
  display: flex;
  margin-bottom: 14px;
}
.chat-bubble-row.outgoing {
  justify-content: flex-end;
}
.chat-bubble-row.internal {
  justify-content: center;
}
.chat-bubble {
  max-width: 80%;
  min-width: 100px;
  border-radius: 0 10px 10px 10px;
  background: var(--mui-palette-background-paper);
  padding: 10px 13px 5px;
  box-shadow: 0 1px 4px #0000000b;
  overflow-wrap: anywhere;
}
.outgoing .chat-bubble {
  background: var(--mui-palette-primary-lightOpacity);
  border-radius: 10px 0 10px 10px;
}
.internal .chat-bubble {
  background: var(--mui-palette-warning-lightOpacity);
  border: 1px solid var(--mui-palette-warning-main);
  border-radius: 8px;
  width: 85%;
  max-width: 85%;
}
.chat-bubble-author {
  font-size: 11px;
  font-weight: 600;
  color: var(--ff-brand-icons, var(--mui-palette-primary-main));
  margin-bottom: 5px;
}
.chat-bubble-author-divider {
  border: 0;
  border-top: 1px solid var(--mui-palette-divider);
  margin: 4px 0 6px;
}
.chat-bubble p {
  white-space: pre-wrap;
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
}
.chat-bubble footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: var(--mui-palette-text-secondary);
  font-size: 10px;
  margin-top: 3px;
}
.chat-bubble footer i {
  font-size: 14px;
}
.chat-bubble blockquote {
  margin: 3px 0 8px;
  padding: 7px 10px;
  border-left: 3px solid var(--mui-palette-primary-main);
  background: var(--mui-palette-action-hover);
  font-size: 12px;
  max-height: 72px;
  overflow: hidden;
}
.chat-history-empty {
  text-align: center;
  margin-top: 25px;
}
.chat-load-older {
  display: flex !important;
  margin: 0 auto !important;
}
.chat-composer {
  flex-shrink: 0;
  padding: 10px 18px 14px;
  border-top: 1px solid var(--mui-palette-divider);
  background: var(--mui-palette-background-paper);
}
.chat-composer-mode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.chat-composer-mode > .MuiTypography-root {
  font-size: 10px;
}
.chat-composer .MuiOutlinedInput-root {
  background: var(--mui-palette-background-default);
  font-size: 13px;
}
.chat-composer-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  gap: 8px;
}
.chat-pending-tools {
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 5px;
  color: var(--mui-palette-text-disabled);
}
.chat-composer-toolbar .MuiButton-root {
  font-size: 12px;
}
.chat-reply-preview {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  background: var(--mui-palette-action-hover);
  border-left: 3px solid var(--mui-palette-primary-main);
  margin-bottom: 8px;
  font-size: 12px;
}
.chat-reply-preview > span {
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.chat-closed {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  justify-content: center;
  background: var(--mui-palette-background-paper);
  border-top: 1px solid var(--mui-palette-divider);
}
.chat-desktop-details {
  width: 280px;
  flex-shrink: 0;
  overflow: auto;
  border-left: 1px solid var(--mui-palette-divider);
}
.chat-contact-panel {
  background: var(--mui-palette-background-paper);
  min-height: 100%;
  width: 100%;
}
.chat-panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 16px;
}
.chat-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 10px 18px 24px;
  overflow-wrap: anywhere;
}
.chat-facts {
  padding: 8px 18px;
  margin: 0;
}
.chat-facts > div {
  padding: 9px 0;
}
.chat-facts dt {
  font-size: 11px;
  color: var(--mui-palette-text-secondary);
  margin-bottom: 3px;
}
.chat-facts dd {
  margin: 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.chat-panel-section {
  padding: 18px;
}
.chat-mobile-details,
.chat-mobile-back {
  display: none;
}
@media (max-width: 1450px) {
  .chat-list-panel {
    width: 305px;
  }
  .chat-desktop-details {
    display: none;
  }
  .chat-mobile-details {
    display: block;
  }
}
@media (max-width: 900px) {
  .chat-list-panel {
    width: 290px;
  }
  .chat-conversation-header {
    padding: 12px;
    gap: 8px;
  }
  .chat-header-tools {
    gap: 2px;
  }
  .chat-action-strip {
    padding: 7px 10px;
    flex-wrap: wrap;
  }
  .chat-action-strip > span {
    flex-basis: 100%;
  }
  .chat-action-strip > div {
    margin-left: auto;
  }
  .chat-timeline {
    padding: 16px;
  }
  .chat-composer {
    padding: 8px 12px;
  }
  .chat-composer-mode {
    flex-wrap: wrap;
    gap: 0;
  }
}
@media (max-width: 700px) {
  .chat-list-panel {
    width: 100%;
    border-right: 0;
  }
  .chat-conversation {
    display: none;
  }
  .chat-has-selection .chat-list-panel {
    display: none;
  }
  .chat-has-selection .chat-conversation {
    display: flex;
  }
  .chat-mobile-back {
    display: block;
  }
  .chat-conversation-header {
    padding: 10px 8px;
    min-height: 68px;
    gap: 7px;
  }
  .chat-conversation-header > .MuiChip-root {
    display: none;
  }
  .chat-header-identity h6 {
    font-size: 14px;
  }
  .chat-header-identity > span {
    font-size: 10px;
  }
  .chat-timeline {
    padding: 12px;
  }
  .chat-bubble {
    max-width: 90%;
  }
  .chat-system-message {
    max-width: 100%;
    flex-wrap: wrap;
  }
  .chat-composer {
    padding: 8px;
  }
  .chat-composer-toolbar .MuiButton-root {
    padding: 7px 11px;
  }
  .chat-workspace .chat-composer-mode > span {
    max-width: 150px;
    line-height: 1.3;
    text-align: right;
  }
  .chat-welcome {
    padding: 20px;
  }
  .chat-desktop-break {
    display: none;
  }
  .chat-action-strip > span {
    font-size: 10px;
  }
  .chat-page {
    gap: 6px;
  }
  .chat-list-tabs .MuiTab-root {
    padding: 12px;
  }
}

.chat-quote-button {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  font: inherit;
}
.chat-quote-button:focus-visible {
  outline: 2px solid var(--mui-palette-primary-main);
}
.chat-anchor-message {
  outline: 2px solid var(--mui-palette-primary-main);
  outline-offset: 4px;
  border-radius: 8px;
}

.chat-workspace[hidden] {
  display: none;
}

.chat-solid-labels .chat-dept {
  font-weight: 600;
}
.chat-filters {
  max-height: 310px;
  overflow-y: auto;
}

/* Both layouts keep the same mounted conversation and private draft. */
.chat-layout-switch {
  display: flex;
  align-items: center;
  align-self: flex-end;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--mui-palette-divider);
  border-radius: 9px;
  background: var(--mui-palette-background-paper);
}
.chat-workspace-board .chat-list-panel {
  display: none;
}
.chat-board[hidden],
.chat-conversation[hidden] {
  display: none !important;
}
.chat-board {
  container: attendance-board / inline-size;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--mui-palette-background-paper);
}
.chat-board-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--mui-palette-divider);
}
.chat-board-toolbar > .MuiTextField-root:first-child {
  flex: 1 1 210px;
}
.chat-board-toolbar > .MuiTextField-root:nth-child(2) {
  min-width: 150px;
}
.chat-board-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--mui-palette-divider);
  max-height: 240px;
  overflow: auto;
}
.chat-board-columns {
  --chat-board-visible-columns: 5;
  --chat-board-fit-columns: min(var(--chat-board-visible-columns), var(--chat-board-column-count, 5));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--chat-board-fit-columns) - 1) * 12px) / var(--chat-board-fit-columns));
  /* A bounded row keeps card overflow inside its own list, including empty columns. */
  grid-template-rows: minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  gap: 12px;
  padding: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 12px;
  align-items: stretch;
}
@container attendance-board (max-width: 972px) {
  .chat-board-columns { --chat-board-visible-columns: 4; }
}
@container attendance-board (max-width: 780px) {
  .chat-board-columns { --chat-board-visible-columns: 3; }
}
@container attendance-board (max-width: 588px) {
  .chat-board-columns { --chat-board-visible-columns: 2; }
}
@container attendance-board (max-width: 396px) {
  .chat-board-columns { --chat-board-visible-columns: 1; }
}
.chat-board-column {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--mui-palette-action-hover);
  border: 1px solid var(--mui-palette-divider);
  border-radius: 10px;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}
.chat-board-column-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 10px;
}
.chat-board-column-heading h3 {
  margin: 0;
  flex: 1;
  font-size: 12px;
  font-weight: 600;
}
.chat-board-count {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--mui-palette-action-selected);
}
.chat-board-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #a8aaae;
}
.chat-board-status-dot.active {
  background: #7367f0;
}
.chat-board-status-dot.waiting {
  background: #ff9f43;
}
.chat-board-status-dot.resolved {
  background: #28c76f;
}
.chat-board-status-dot.flow {
  background: #00bad1;
}
.chat-board-cards {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 8px 10px;
  overscroll-behavior: contain;
}
.chat-board-card {
  margin-bottom: 10px;
  background: var(--mui-palette-background-paper);
  border: 1px solid var(--mui-palette-divider);
  border-radius: 9px;
  box-shadow: 0 2px 4px #24243c05;
  overflow: hidden;
}
.chat-board-card.selected {
  background: var(--mui-palette-primary-lightOpacity, #7367f017);
  border-color: var(--mui-palette-primary-main);
}
.chat-board-card[draggable='true'] {
  cursor: grab;
}
.chat-board-card:focus-within {
  outline: 2px solid var(--mui-palette-primary-main);
  outline-offset: -2px;
}
.chat-board-open {
  display: block;
  width: 100%;
  padding: 12px 10px;
  text-align: left;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
}
.chat-board-open:disabled {
  cursor: default;
}
.chat-board-open:hover:not(:disabled) {
  background: var(--mui-palette-action-hover);
}
.chat-board-card-person {
  display: flex;
  align-items: center;
  gap: 7px;
}
.chat-board-card-identity {
  min-width: 0;
  flex: 1;
}
.chat-board-card-identity > strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.chat-board-card-identity > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  color: var(--mui-palette-text-secondary);
}
.chat-board-card-person .chat-unread {
  flex-shrink: 0;
  font-size: 10px;
}
.chat-board-open > .chat-list-preview {
  margin: 10px 0;
  min-height: 32px;
  align-items: flex-start;
  font-size: 11px;
  line-height: 1.5;
}
.chat-board-open .chat-list-preview-text {
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.chat-board-open .chat-list-ack,
.chat-board-open .chat-list-media-icon { line-height: 1.5; }
.chat-board-open .chat-conversation-routing { margin-top: 6px; }
.chat-board-card-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px;
  margin-top: 10px;
  color: var(--mui-palette-text-secondary);
  font-size: 10px;
}
.chat-board-card-foot > span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-board-card .chat-board-card-action {
  display: block;
  margin: 0 6px 6px auto;
  font-size: 10px;
}
.chat-board-access-note {
  display: block;
  padding: 0 10px 10px;
}
.chat-board-empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding: 36px 10px;
  text-align: center;
  font-size: 11px;
  color: var(--mui-palette-text-secondary);
}
.chat-board-empty i {
  font-size: 24px;
  opacity: 0.5;
}
.chat-board-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 5px;
  border-top: 1px solid var(--mui-palette-divider);
}
.chat-board-pagination .MuiButton-root {
  min-width: 28px;
}
.chat-board-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 8px;
  font-size: 10px;
  color: var(--mui-palette-text-secondary);
}
.chat-board-drop {
  border-color: var(--mui-palette-primary-main);
  background: var(--mui-palette-primary-lightOpacity, #7367f017);
}
.chat-board-hint > span { flex: 1; min-width: 0; }
.chat-board-column-navigation { display: flex; flex-shrink: 0; gap: 4px; }
.chat-board-with-conversation > .chat-conversation {
  display: flex;
  flex: 0 0 45%;
  min-width: 360px;
  border-left: 1px solid var(--mui-palette-divider);
}
.chat-board-conversation-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  font-size: 11px;
  color: var(--mui-palette-text-secondary);
  border-bottom: 1px solid var(--mui-palette-divider);
}
.chat-workspace-board .chat-desktop-details {
  display: none;
}
@media (max-width: 900px) {
  .chat-board-with-conversation > .chat-board {
    display: none;
  }
  .chat-board-with-conversation > .chat-conversation {
    flex: 1;
    min-width: 0;
    border-left: 0;
  }
  .chat-board-toolbar {
    gap: 8px;
    padding: 12px;
  }
  .chat-board-toolbar > .MuiTextField-root:first-child {
    flex-basis: 100%;
  }
  .chat-layout-switch {
    align-self: flex-start;
  }
}

@media (max-width: 1200px) {
  .chat-toolbar {
    flex-wrap: wrap;
  }
  .chat-toolbar > .MuiTabs-root {
    flex-basis: 100%;
  }
  .chat-toolbar-actions {
    width: 100%;
    justify-content: space-between;
  }
}
@media (max-width: 700px) {
  .chat-toolbar .chat-channel-status {
    display: none;
  }
  .chat-toolbar-actions {
    gap: 4px;
  }
  .chat-toolbar .MuiTab-root {
    padding: 8px 10px;
    min-height: 40px;
  }
  .chat-toolbar .chat-layout-switch {
    margin-left: auto;
  }
  .chat-toolbar .MuiButton-root {
    min-height: 32px;
  }
  .page-content:has(> .chat-page) {
    padding-block: 6px 8px;
  }
}

/* Contact information shares the workspace in list mode; Kanban keeps its drawer. */
.chat-workspace {
  container-type: inline-size;
}
.chat-inline-details {
  flex: 0 0 310px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  border-left: 1px solid var(--mui-palette-divider);
  background: var(--mui-palette-background-paper);
}
@media (min-width: 701px) {
  .chat-workspace:not(.chat-workspace-board) > .chat-list-panel {
    width: clamp(220px, var(--chat-list-width, 335px), calc(100% - 320px));
  }
  .chat-workspace:not(.chat-workspace-board).chat-with-details > .chat-list-panel {
    width: clamp(220px, var(--chat-list-width, 335px), calc(100% - 630px));
  }
}
@container (max-width: 850px) {
  .chat-workspace:not(.chat-workspace-board).chat-with-details > .chat-list-panel {
    display: none;
  }
  .chat-inline-details {
    flex-basis: 290px;
  }
}
@container (max-width: 600px) {
  .chat-workspace:not(.chat-workspace-board).chat-with-details > .chat-conversation {
    display: none;
  }
  .chat-inline-details {
    flex: 1;
    border-left: 0;
  }
}

/* Same conversation geometry for attendance, direct messages and groups. */
.chat-unified-frame {
  height: calc(100dvh - 244px) !important;
  min-height: 420px !important;
  overflow: hidden;
  border: 1px solid var(--mui-palette-divider);
  border-radius: 12px !important;
  background: var(--mui-palette-background-paper);
  box-shadow: 0 3px 16px #24243c07 !important;
}
.chat-unified-frame > .MuiCard-root { border: 0; border-radius: 0; box-shadow: none; }
.chat-unified-conversation { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.chat-unified-conversation .chat-conversation-header { min-height: 74px; flex-shrink: 0; padding: 14px 18px; }
.chat-unified-frame .chat-timeline { height: auto; max-height: none; flex: 1; min-height: 0; padding: 20px 26px; background-color: var(--mui-palette-action-hover); }
.chat-unified-frame .chat-unified-bubble,
.chat-whatsapp-conversation .chat-unified-bubble {
  max-width: 80%; min-width: 96px; border: 0; border-radius: 0 10px 10px 10px;
  background: var(--mui-palette-background-paper); padding: 8px 10px 4px;
  box-shadow: 0 1px 4px #0000000b; overflow-wrap: anywhere;
}
.chat-unified-frame .chat-unified-bubble.outgoing,
.chat-whatsapp-conversation .chat-unified-bubble.outgoing { background: var(--mui-palette-primary-lightOpacity); border-radius: 10px 0 10px 10px; }
.chat-unified-bubble > .MuiCardContent-root { padding: 0 !important; }
.chat-unified-composer { flex-shrink: 0; padding: 14px 18px; border-top: 1px solid var(--mui-palette-divider); background: var(--mui-palette-background-paper); }
.chat-internal-list .MuiListItemButton-root { padding: 16px 14px; min-height: 86px; border-bottom: 1px solid var(--mui-palette-divider); border-left: 3px solid transparent; }
.chat-internal-list .MuiListItemButton-root.Mui-selected,
.chat-unified-list-item.selected { border-left: 3px solid var(--mui-palette-primary-main); background: var(--mui-palette-primary-lightOpacity); }
.chat-unified-list-item { border-radius: 0 !important; box-shadow: none !important; border: 0; border-bottom: 1px solid var(--mui-palette-divider); }
.chat-internal-groups-list { height: 100%; overflow-y: auto; border-right: 1px solid var(--mui-palette-divider) !important; }
.chat-internal-groups-list > .MuiCardContent-root { padding: 12px; }
.chat-whatsapp-groups-list { border-right: 1px solid var(--mui-palette-divider); }
.chat-whatsapp-conversation { height: 100%; min-height: 0; }
.chat-whatsapp-conversation > :not(.chat-timeline) { flex-shrink: 0; }
.chat-whatsapp-conversation > .chat-timeline { min-height: 100px; }
.chat-whatsapp-frame .chat-unified-conversation { overflow-x: hidden; overflow-y: auto; }
@media (max-width: 899px) {
  .chat-unified-frame { height: calc(100dvh - 235px) !important; min-height: 390px !important; }
  .chat-unified-frame .chat-timeline { padding: 16px; }
  .chat-unified-composer { padding: 10px 12px; }
}

.chat-context-pane:not([hidden]), .chat-internal-workspace,
.chat-internal-workspace > div:not([hidden]):not(.MuiTabs-root), .chat-internal-group-workspace,
.chat-whatsapp-shell:not([hidden]) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-context-pane .chat-unified-frame { height: auto !important; flex: 1; min-height: 0 !important; }
.chat-internal-workspace > .MuiTabs-root, .chat-whatsapp-shell > .MuiStack-root { flex-shrink: 0; }

/* Same compact composer rhythm for contact, direct and group conversations. */
.chat-internal-composer .chat-internal-composer-actions { margin-top: 0; }
.chat-internal-composer .MuiFormHelperText-root { margin-top: 4px; font-size: 11px; }
.chat-internal-composer .MuiOutlinedInput-root { font-size: 13px; }
.chat-internal-composer-actions > span { display: inline-flex; }

/* Keep WhatsApp conversation actions together at every viewport size. */
.chat-whatsapp-conversation .chat-action-strip {
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.chat-whatsapp-conversation .chat-action-strip > .MuiChip-root {
  margin-inline-end: auto;
}

/* Configuration occupies the group frame without a hidden conversation flex item. */
.chat-whatsapp-frame > .chat-unified-conversation[hidden] { display: none !important; }
.chat-whatsapp-settings > .MuiStack-root { min-width: 0; }

/* Compact contact composer: tools above the text, voice/send inside the field. */
.chat-contact-composer { padding: 6px 16px 10px; }
.chat-composer-topline { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-bottom: 4px; }
.chat-composer-topline > .MuiButton-root:last-child { margin-inline-start: auto; font-size: 11px; }
.chat-compose-input { position: relative; }
.chat-contact-composer .chat-compose-input .MuiInputBase-root { padding-inline-end: 88px; }
.chat-compose-send-tools { position: absolute; inset-inline-end: 8px; bottom: 10px; display: flex; align-items: center; gap: 2px; }
.chat-contact-composer .chat-composer-topline .MuiButton-root { min-height: 30px; }
/* The root workspace tab must constrain the chat just like the iframe/direct route. */
.workspace-tab-content:not([hidden]):has(> .chat-page) { display: flex; min-height: 0; overflow: hidden !important; }

/* Attendance navigation shares the left column; the conversation starts at the top. */
.chat-list-heading { padding: 10px 12px 4px; gap: 6px; }
.chat-list-heading > .chat-search { flex: 1 1 180px; min-width: 0; padding: 0; }
.chat-list-heading > div:nth-child(2) { flex: 0 1 100px; }
.chat-list-heading > .chat-search .MuiFormLabel-root { font-size: 11px; }
.chat-list-heading-tools { gap: 2px; }
.chat-list-panel > .chat-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 4px 8px 8px; flex-shrink: 0; min-width: 0; }
.chat-list-panel > .chat-toolbar > .MuiTabs-root { flex: none; width: 100%; }
.chat-list-panel > .chat-toolbar .MuiTab-root { min-width: 0; min-height: 38px; padding: 6px 8px; font-size: 12px; }
.chat-list-panel > .chat-toolbar .chat-toolbar-actions { justify-content: flex-start; flex-wrap: wrap; gap: 2px; }
.chat-list-panel > .chat-toolbar .chat-layout-switch { margin-inline-start: auto; }
.chat-list-panel > .chat-toolbar .chat-channel-status { max-width: 100%; }

/* Compact contact messages and inline audio controls, using the existing Vuexy theme. */
.chat-bubble-row { margin-bottom: 10px; }
.chat-bubble { padding: 8px 10px 4px; min-width: 96px; }
.chat-bubble-author { margin-bottom: 3px; }
.chat-bubble p { line-height: 1.45; }
.chat-bubble footer { flex-wrap: wrap; }

/* Percentage-only players collapse inside content-sized message bubbles.
   Give native controls an intrinsic width, then fit the available conversation space. */
.chat-bubble audio,
.chat-unified-bubble audio,
.chat-bubble video,
.chat-unified-bubble video {
  display: block;
  width: 320px;
  max-width: 100%;
}

.chat-bubble-actions { display: flex; align-items: center; gap: 2px; margin-inline-end: auto; }
.chat-bubble-actions > div { min-width: 0; }
.chat-bubble-actions .MuiIconButton-root { width: 24px; height: 24px; padding: 3px; }
.chat-compose-recording > .MuiFormControl-root { display: none; }
.chat-compose-recording .chat-compose-send-tools { position: static; min-height: 64px; padding: 8px; align-items: center; }
.chat-compose-recording .chat-inline-recorder { width: 100%; }
.chat-compose-recording { min-height: 64px; }
@media (max-width: 700px) {

  .chat-conversation-header > .MuiStack-root { margin-inline-start: auto; }
}

.chat-compose-send-tools .chat-inline-recorder > .MuiAlert-root { position: absolute; bottom: 100%; inset-inline-end: 0; width: min(320px, 75vw); z-index: 1; }

/* Compact attendance navigation: stable controls and all queues visible. */
.chat-list-panel { container-type: inline-size; }
.chat-list-panel .chat-list-heading {
  display: grid; grid-template-columns: 36px fit-content(82px) minmax(0, 1fr) auto;
  gap: 8px; padding: 12px 10px 8px; flex-shrink: 0;
}
.chat-list-heading .chat-operator-identity { min-width: 0; }
.chat-list-heading .chat-operator-identity .MuiTypography-subtitle1 { font-size: 13px; line-height: 1.4; }
.chat-list-heading .chat-operator-identity .MuiTypography-caption { font-size: 11px; }
.chat-list-heading .chat-search { min-width: 0; padding: 0; gap: 2px; }
.chat-list-heading .chat-search .MuiInputBase-input { font-size: 12px; }
.chat-list-heading .MuiIconButton-root { width: 28px; height: 32px; padding: 4px; }
.chat-toolbar > .module-tabs-frame { flex: 1; min-width: 0; }
.chat-list-panel > .chat-toolbar { padding: 4px 8px 8px; gap: 8px; }
.chat-list-panel > .chat-toolbar > .module-tabs-frame { flex: none; width: 100%; }
.chat-list-panel > .chat-toolbar .MuiTab-root { padding: 6px; font-size: 11px; min-height: 34px; }
.chat-list-panel > .chat-toolbar .MuiTab-root .MuiTab-iconWrapper { font-size: 17px; margin-inline-end: 4px; }
.chat-list-panel > .chat-toolbar .chat-toolbar-actions { flex-wrap: nowrap; gap: 2px; }
.chat-list-panel .chat-toolbar-actions .MuiIconButton-root { width: 30px; height: 32px; padding: 5px; }
.chat-list-panel > .module-tabs-frame { padding: 6px 8px 8px; flex-shrink: 0; border-top: 1px solid var(--mui-palette-divider); }
.chat-list-panel .chat-list-tabs { border: 0; min-height: 48px; }
.chat-list-panel .chat-list-tabs .MuiTab-root { min-width: 0; padding: 5px 2px; min-height: 48px; }
.chat-queue-label { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; min-width: 0; }
.chat-queue-summary { display: flex; align-items: center; gap: 4px; line-height: 16px; }
.chat-queue-summary > i { font-size: 16px; }
.chat-queue-summary > span { border-radius: 4px; padding: 0 4px; background: var(--mui-palette-action-hover); font-size: 10px; }
.chat-queue-name { font-size: 10px; line-height: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (max-width: 360px) {
  .chat-list-panel .chat-list-heading { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .chat-list-heading .chat-search { grid-column: 1 / -1; grid-row: 2; }
  .chat-list-panel > .chat-toolbar .MuiTab-root { font-size: 10px; padding-inline: 4px; }
  .chat-list-panel > .chat-toolbar .MuiTab-iconWrapper { display: none; }
  .chat-list-panel .chat-layout-switch .MuiButton-root { padding-inline: 7px; min-width: 0; font-size: 11px; }
}

/* Conversation contexts keep their navigation within the same left column. */
.chat-sidebar-navigation { flex-shrink: 0; min-width: 0; container-type: inline-size; padding: 4px 8px 8px; border-bottom: 1px solid var(--mui-palette-divider); }
.chat-sidebar-navigation > .chat-toolbar { flex-direction: column; align-items: stretch; gap: 4px; }
.chat-sidebar-navigation .chat-toolbar > .module-tabs-frame { flex: none; width: 100%; }
.chat-sidebar-navigation .chat-toolbar-actions { justify-content: flex-end; gap: 2px; }
.chat-sidebar-navigation .MuiTab-root { min-width: 0; min-height: 34px; font-size: 11px; padding: 6px; }
.chat-sidebar-navigation .MuiTab-iconWrapper { font-size: 17px; margin-inline-end: 4px; }
.chat-sidebar-navigation .MuiIconButton-root { width: 30px; height: 30px; padding: 5px; }
.chat-sidebar-navigation > .module-tabs-frame { margin-top: 4px; }
.chat-context-search { padding: 12px 10px 8px; flex-shrink: 0; min-width: 0; }
.chat-context-search .MuiTextField-root { min-width: 0; flex: 1; }
.chat-context-search .MuiInputBase-root { font-size: 12px; }
.chat-group-navigation-actions { padding: 4px; gap: 4px !important; }
.chat-group-navigation-actions .MuiButton-root { min-height: 28px; padding: 4px 8px; font-size: 11px; }
.chat-internal-list .MuiListItemButton-root { min-height: 72px; padding: 12px; }
.chat-list-panel > .chat-toolbar .MuiTabs-list, .chat-sidebar-navigation .MuiTabs-list { gap: 2px; }
.chat-list-panel > .chat-toolbar .MuiTab-root, .chat-sidebar-navigation .MuiTab-root { white-space: normal; line-height: 1.25; }
@container (max-width: 360px) {
  .chat-sidebar-navigation .chat-toolbar .MuiTab-iconWrapper { display: none; }
  .chat-sidebar-navigation .chat-toolbar .MuiTab-root { font-size: 10px; padding-inline: 3px; }
}

/* Operator identity, contextual search and overflow menu shared by every chat. */
.chat-internal-list, .chat-internal-groups-list, .chat-whatsapp-compact-list { container-type: inline-size; }
.chat-shared-list-heading { display: grid; grid-template-columns: 36px fit-content(82px) minmax(0, 1fr) auto; gap: 8px; padding: 12px 10px 8px; flex-shrink: 0; }
.chat-shared-list-heading .chat-context-search { display: flex; align-items: center; min-width: 0; width: 100%; padding: 0; gap: 2px; }
.chat-shared-list-heading .chat-context-search > .MuiTextField-root { min-width: 0; flex: 1; }
@container (max-width: 360px) {
  .chat-shared-list-heading { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .chat-shared-list-heading .chat-search { grid-column: 1 / -1; grid-row: 2; }
}

/* Group and internal messages share the contact chat's compact rhythm. */
.chat-unified-bubble .chat-bubble-author { font-size: 11px; font-weight: 600; margin-bottom: 3px; color: var(--ff-brand-icons, var(--mui-palette-primary-main)); }
.chat-unified-bubble .chat-bubble-content { font-size: 13px; line-height: 1.45; }
.chat-message-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 3px; color: var(--mui-palette-text-secondary); font-size: 10px; }
.chat-message-footer > .MuiTypography-root { font-size: inherit; }
.chat-message-footer time { white-space: nowrap; }
.chat-message-footer .MuiIconButton-root { width: 24px; height: 24px; padding: 3px; }
.chat-message-footer i { font-size: 14px; }
.chat-compact-composer .chat-composer-topline { min-height: 30px; }
.chat-compact-composer .chat-compose-input > .MuiFormControl-root { width: 100%; }
.chat-compact-composer .chat-compose-input .MuiInputBase-root { font-size: inherit; }
.chat-compact-composer > .MuiChip-root { margin: 6px 4px 0 0; max-width: 100%; }
.chat-compact-composer > .MuiAlert-root { margin-block: 4px; }

.chat-whatsapp-conversation .chat-conversation-header > .chat-action-strip { margin-inline-start: auto; border: 0; padding: 0; min-height: 0; gap: 2px; }
.chat-whatsapp-conversation .chat-conversation-header > .chat-action-strip > span { flex: 0 0 auto; }

/* Received stickers keep their transparency and a compact footprint. */
.chat-unified-frame .chat-unified-bubble.chat-sticker-bubble,
.chat-whatsapp-conversation .chat-unified-bubble.chat-sticker-bubble { background: transparent; box-shadow: none; }

/* Message menus occupy their own space outside the bubble in every chat. */
.chat-message-row,
.chat-bubble-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.chat-message-row { width: 100%; }
.chat-message-row.outgoing { justify-content: flex-end; }
.chat-message-row > .chat-bubble-actions,
.chat-bubble-row > .chat-bubble-actions { flex: 0 0 28px; width: 28px; margin: 0; }
.chat-message-row.outgoing > .chat-bubble-actions,
.chat-bubble-row.outgoing > .chat-bubble-actions { order: -1; }
.chat-message-row > .chat-unified-bubble,
.chat-bubble-row > .chat-bubble { min-width: 0; max-width: min(80%, calc(100% - 32px)); }
.chat-message-row .chat-bubble-actions .module-row-action,
.chat-bubble-row > .chat-bubble-actions .module-row-action { width: 28px; min-width: 28px; height: 32px; padding: 4px; }
@media (max-width: 600px) {
  .chat-message-row > .chat-unified-bubble,
  .chat-bubble-row > .chat-bubble { max-width: calc(100% - 32px); }
}
/* Keep text on its own half of desktop conversations; compact screens retain their available width. */
@media (min-width: 601px) {
  .chat-bubble-row > .chat-bubble:has(> p),
  .chat-message-row > .chat-unified-bubble:has(.chat-bubble-content):not(:has(.chat-media-content)) {
    max-width: min(50%, calc(100% - 32px));
  }
}
/* A consistent media width also wraps captions/transcripts without stretching their bubble. */
.chat-media-content { width: 320px; max-width: 100%; min-width: 0; }

/* Reactions sit across the lower edge; normal flow accommodates multiple emojis. */
.chat-message-reactions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; position: relative; z-index: 1; margin-block: 2px -16px; }
.outgoing > .chat-bubble > .chat-message-reactions,
.chat-unified-bubble.outgoing .chat-message-reactions { justify-content: flex-start; }
.chat-bubble-row:has(.chat-message-reactions),
.chat-message-row:has(.chat-message-reactions) { margin-bottom: 24px; }
.chat-bubble:has(.chat-message-reactions),
.chat-unified-frame .chat-unified-bubble:has(.chat-message-reactions),
.chat-whatsapp-conversation .chat-unified-bubble:has(.chat-message-reactions) { overflow: visible; }

/* Conversation list: delivery, media, contact labels and registered routing colors. */
.chat-list-preview {
  margin: 3px 0;
  font-size: 12px;
  line-height: 20px;
  color: var(--mui-palette-text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.chat-list-preview-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-list-ack,
.chat-list-media-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  font-size: 14px;
}
.chat-list-preview .chat-list-ack > i,
.chat-list-preview .chat-list-media-icon {
  width: 14px;
  height: 14px;
  inline-size: 14px;
  block-size: 14px;
  font-size: 14px;
  line-height: 1;
}
.chat-list-ack-read { color: var(--mui-palette-info-main); }
.chat-list-ack-error { color: var(--mui-palette-error-main); }
.chat-list-ack-warning { color: var(--mui-palette-warning-main); }
.chat-contact-labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  min-width: 0;
  margin: 3px 0;
  font-size: 10px;
  line-height: 14px;
}
.chat-conversation-routing {
  flex-wrap: wrap;
  gap: 4px;
}
.chat-conversation-routing .chat-dept,
.chat-contact-labels .chat-dept {
  max-width: min(160px, 100%);
  font-weight: 600;
  line-height: 14px;
}
.chat-list-protocol { white-space: nowrap; }
.chat-contact-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.chat-contact-label > i {
  font-size: 12px;
  flex-shrink: 0;
  color: inherit;
}
.chat-contact-label-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-conversation-routing .chat-assignee-label {
  color: var(--mui-palette-text-primary);
  background: var(--mui-palette-action-selected);
  flex-shrink: 0;
}

.chat-list-timestamp {
  font-size: 10px;
  color: var(--mui-palette-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Compact sidebar lists, measured against the legacy chat. Keep timeline and
   Kanban styles separate; the shared Fonte · Chat preference still overrides. */
.chat-list-panel .chat-conversation-item {
  width: calc(100% - 12px);
  margin: 2px 6px;
  padding: 7px 10px;
  gap: 9px;
  border-radius: var(--mui-shape-borderRadius);
}
.chat-list-panel .chat-conversation-item.selected {
  box-shadow: inset 3px 0 var(--mui-palette-primary-main), var(--mui-customShadows-xs);
}
:is(.chat-list-panel, .chat-whatsapp-compact-list) .chat-conversation-top strong,
:is(.chat-internal-list, .chat-internal-groups-list) .chat-list-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
:is(.chat-list-panel, .chat-whatsapp-compact-list, .chat-internal-list, .chat-internal-groups-list) .chat-list-preview {
  margin: 1px 0;
  font-size: 11px;
  line-height: 1.25;
  gap: 3px;
}
:is(.chat-list-panel, .chat-whatsapp-compact-list) .chat-conversation-meta,
.chat-internal-groups-list .chat-list-description {
  font-size: 10px;
  line-height: 1.25;
}
/* Keep the message preview clear of the timestamp/unread column. */
.chat-list-panel .chat-list-preview {
  max-width: calc(100% - 3.5rem);
}
.chat-list-panel .chat-contact-labels {
  margin: 1px 0;
  gap: 2px 3px;
}
:is(.chat-list-panel, .chat-whatsapp-compact-list) .chat-dept {
  font-size: 10px;
  line-height: 1.25;
  padding: 1px 4px;
}
.chat-list-panel .chat-contact-label > i { font-size: 10px; }
.chat-internal-list .MuiListItemButton-root { min-height: 64px; padding: 7px 10px; }
.chat-internal-list .MuiListItemText-root { margin-block: 0; }
.chat-whatsapp-compact-list .chat-unified-list-item { padding: 0; }
.chat-whatsapp-groups-list .chat-whatsapp-compact-list.MuiStack-root {
  flex-wrap: nowrap;
  min-width: 0;
}
.chat-whatsapp-compact-list .chat-unified-list-item > .MuiButton-root {
  min-height: 64px;
  padding: 7px 10px;
  gap: 9px;
}
.chat-internal-group-rows > .chat-unified-list-item { margin-top: 0; }
.chat-internal-group-rows > .chat-unified-list-item > .MuiCardContent-root {
  padding: 7px 10px;
}
.chat-internal-groups-list .chat-list-description { display: block; margin-block: 1px; }
.chat-internal-group-rows .chat-unified-list-item .MuiButton-root,
.chat-internal-groups-list > .MuiCardContent-root > .MuiButton-root {
  font-size: 11px;
  line-height: 1.25;
  min-height: 28px;
  padding: 4px 8px;
}
.chat-internal-group-rows .chat-unified-list-item .MuiChip-root { height: 19px; min-width: 19px; }
.chat-internal-group-rows .chat-unified-list-item .MuiChip-label { font-size: 10px; padding-inline: 5px; }
.chat-internal-groups-list > .MuiCardContent-root > .module-tabs-frame .MuiTab-root {
  font-size: 11px;
  line-height: 1.25;
  min-height: 34px;
  padding: 6px;
}

/* Attendance timeline: keep navigation outside the scrollable message content. */
.chat-internal-workspace .chat-sidebar-navigation > .chat-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.chat-internal-start-actions { display: flex; gap: 6px; margin-block: 8px; }
.chat-internal-start-actions > .MuiButton-root { flex: 1; min-width: 0; font-size: 11px; min-height: 34px; padding: 6px; }
.chat-internal-start-actions > .MuiButton-root .MuiButton-startIcon { margin-inline: 0 4px; }
.chat-internal-groups-list > .MuiCardContent-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0;
}
.chat-internal-groups-list > .MuiCardContent-root:last-child { padding-bottom: 0; }
.chat-internal-group-rows { flex: 1; min-height: 0; overflow-y: auto; }
.chat-internal-group-rows > .chat-internal-group-item {
  flex: 0 0 auto;
  min-height: 64px;
  padding: 7px 10px;
  gap: 10px;
}
.chat-internal-group-item > .chat-unread { flex-shrink: 0; font-size: 10px; }

.chat-timeline-frame {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
}
.chat-timeline-frame > .chat-timeline {
  overflow-anchor: none;
}
/* Contact history uses overlay rails, without a native gutter or horizontal scrolling. */
.chat-conversation > .chat-timeline-frame > .chat-timeline.ff-scrollbar {
  overflow-x: hidden;
  scrollbar-gutter: auto;
}
.chat-timeline-content {
  display: flow-root;
  min-width: 0;
}
.chat-scroll-latest {
  position: absolute;
  inset-inline-end: 16px;
  bottom: 16px;
  z-index: 2;
}

/* Voice capture remains in the attendance composer, with the account's chat colors. */
.chat-contact-composer .chat-compose-input:has(.chat-voice-recorder) .MuiInputBase-root { padding-inline-end: 108px; }
.chat-contact-composer .chat-compose-send-tools:has(.chat-voice-recorder) { gap: 8px; }
.chat-compose-recording:has(.chat-voice-recorder) { border: 1px solid var(--mui-palette-divider); border-radius: 24px; background: var(--mui-palette-background-paper); }
.chat-compose-recording .chat-compose-send-tools:has(.chat-voice-recorder) { width: 100%; min-height: 56px; padding: 6px 8px; }
.chat-compose-send-tools > .chat-voice-recorder > .MuiAlert-root { position: absolute; bottom: calc(100% + 8px); inset-inline-end: 0; width: min(400px, 80vw); z-index: 1; }
.chat-compose-recording .chat-voice-recorder > .MuiAlert-root { position: static; width: auto; }

/* Phone density: desktop controls and personal font preferences stay unchanged. */
.chat-mobile-label,
.chat-mobile-composer-tools.MuiIconButton-root { display: none; }

@media (max-width: 700px), (max-width: 1000px) and (max-height: 700px) and (pointer: coarse) {
  .chat-page .chat-desktop-label { display: none; }
  .chat-page .chat-mobile-label { display: inline; }

  .chat-page .chat-list-panel .chat-list-heading,
  .chat-page .chat-shared-list-heading {
    grid-template-columns: 28px fit-content(56px) minmax(0, 1fr) auto;
    padding: 7px 8px 5px;
    gap: 6px;
  }
  .chat-page .chat-shared-list-heading > .MuiBadge-root .MuiAvatar-root {
    width: 28px;
    height: 28px;
  }
  .chat-page .chat-operator-identity .MuiTypography-subtitle1 { font-size: 12px; }
  .chat-page .chat-operator-identity .MuiTypography-caption { display: none; }
  .chat-page .chat-list-heading .chat-search { grid-column: auto; grid-row: auto; }
  .chat-page .chat-list-heading .MuiInputBase-root { min-height: 34px; }
  .chat-page .chat-list-heading .MuiInputBase-input { padding-block: 7px; }
  .chat-page .chat-list-heading .MuiIconButton-root { width: 28px; height: 34px; }

  .chat-page .chat-list-panel > .chat-toolbar,
  .chat-page .chat-sidebar-navigation { padding: 3px 6px 5px; gap: 4px; }
  .chat-page .chat-toolbar .MuiTab-root { min-height: 34px; font-size: 12px; line-height: 1.2; padding: 5px 6px; }
  .chat-page .chat-toolbar .MuiTab-iconWrapper { display: none; }
  .chat-page .chat-toolbar-actions { min-height: 34px; }
  .chat-page .chat-toolbar-actions .MuiIconButton-root { width: 34px; height: 34px; padding: 7px; }
  .chat-page .chat-list-heading i,
  .chat-page .chat-toolbar-actions i {
    font-size: 18px;
    inline-size: 18px;
    block-size: 18px;
  }
  .chat-page .chat-layout-switch { padding: 2px; }
  .chat-page .chat-layout-switch .MuiButton-root { width: 34px; height: 30px; min-width: 34px; padding: 5px; }
  .chat-page .chat-layout-switch .MuiButton-startIcon { margin: 0; }
  .chat-page .chat-list-panel > .module-tabs-frame { padding: 4px 6px; }
  .chat-page .chat-list-tabs,
  .chat-page .chat-list-tabs .MuiTab-root { min-height: 42px; }
  .chat-page .chat-list-tabs .MuiTab-root { padding-block: 3px; }
  .chat-page .chat-queue-label { gap: 2px; }
  .chat-page .chat-queue-summary > i { font-size: 14px; inline-size: 14px; block-size: 14px; }

  .chat-page .chat-list-panel .chat-conversation-item { margin-block: 1px; padding: 6px 7px; gap: 8px; }
  .chat-page .chat-conversation-top strong { font-size: 13px; }
  .chat-page .chat-conversation-item .chat-contact-avatar .MuiAvatar-root { width: 32px; height: 32px; font-size: 14px; }
  .chat-page .chat-list-footer { padding: 4px 8px; min-height: 36px; }

  .chat-page .chat-conversation-header {
    flex-wrap: nowrap;
    gap: 4px;
    padding: 6px;
    min-height: 60px;
  }
  .chat-page .chat-conversation-header > .chat-header-identity { flex: 1 1 0; }
  .chat-page .chat-header-identity .MuiTypography-subtitle1 { font-size: 13px; line-height: 1.3; }
  .chat-page .chat-header-identity > .MuiTypography-caption { font-size: 10px; line-height: 1.35; }
  .chat-page .chat-conversation-header .chat-contact-avatar .MuiAvatar-root { width: 28px; height: 28px; font-size: 13px; }
  .chat-page .chat-conversation-header > .MuiStack-root { gap: 4px; flex-shrink: 0; margin-inline-start: 0; }
  .chat-page .chat-conversation-header .chat-primary-action {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 7px;
  }
  .chat-page .chat-primary-action .MuiButton-startIcon { margin: 0; }
  .chat-page .chat-conversation-header .MuiIconButton-root:not([aria-label='Abrir informações do contato']) {
    width: 28px;
    height: 36px;
    padding: 4px;
  }
  .chat-page .chat-conversation-header i {
    font-size: 18px;
    inline-size: 18px;
    block-size: 18px;
  }
  .chat-page .chat-header-identity i { font-size: 10px; inline-size: 10px; block-size: 10px; }
  .chat-page .chat-header-identity .chat-contact-labels { max-height: 16px; overflow: hidden; margin-block: 2px 0; }

  .chat-page .chat-contact-composer { padding: 6px; }
  .chat-page .chat-contact-composer .chat-composer-topline { display: none; }
  .chat-page .chat-contact-composer.chat-composer-tools-expanded .chat-composer-topline {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 2px;
    padding-block: 2px;
    margin-bottom: 4px;
  }
  .chat-page .chat-contact-composer .chat-composer-topline > * { flex-shrink: 0; }
  .chat-page .chat-contact-composer .chat-composer-topline .MuiIconButton-root,
  .chat-page .chat-contact-composer .chat-composer-topline > .MuiButton-root {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 7px;
  }
  .chat-page .chat-contact-composer .chat-composer-topline > .MuiButton-root { margin-inline-start: auto; }
  .chat-page .chat-contact-composer .chat-composer-topline .MuiButton-startIcon { margin: 0; }
  .chat-page .chat-contact-composer i { font-size: 18px; inline-size: 18px; block-size: 18px; }
  .chat-page .chat-mobile-composer-tools.MuiIconButton-root {
    display: inline-flex;
    position: absolute;
    inset-inline-start: 3px;
    bottom: 6px;
    z-index: 1;
    width: 34px;
    height: 36px;
    padding: 7px;
  }
  .chat-page .chat-contact-composer .chat-compose-input .MuiInputBase-root,
  .chat-page .chat-contact-composer .chat-compose-input:has(.chat-voice-recorder) .MuiInputBase-root {
    min-height: 48px;
    padding-block: 12px;
    padding-inline-start: 39px;
    padding-inline-end: 88px;
    border-radius: 16px;
  }
  .chat-page .chat-contact-composer .chat-compose-input textarea { font-size: 16px; line-height: 24px; }
  .chat-page .chat-contact-composer .chat-compose-send-tools,
  .chat-page .chat-contact-composer .chat-compose-send-tools:has(.chat-voice-recorder) {
    bottom: 6px;
    inset-inline-end: 5px;
    gap: 4px;
  }
  .chat-page .chat-contact-composer .chat-compose-send-tools .MuiIconButton-root {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
  .chat-page .chat-note-composer .chat-compose-input .MuiInputBase-root { padding-inline-end: 12px; }
  .chat-page .chat-contact-composer .chat-compose-recording .chat-compose-send-tools { padding: 4px; min-height: 48px; }
}
@media (max-width: 360px) {
  .chat-page .chat-list-panel .chat-list-heading,
  .chat-page .chat-shared-list-heading { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .chat-page .chat-list-heading .chat-operator-identity { display: none; }
}

/* Internal and group composers use the same responsive controls as Attendance. */
@media (max-width: 700px), (max-width: 1000px) and (max-height: 700px) and (pointer: coarse) {
  .chat-page .chat-unified-frame .chat-conversation-header .MuiAvatar-root { width: 28px; height: 28px; font-size: 13px; }
  .chat-page .chat-context-back { width: 28px; min-width: 28px; padding-inline: 4px; }
  .chat-page .chat-header-identity .MuiTypography-h6 { font-size: 13px; line-height: 1.3; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .chat-page .chat-header-identity .MuiTypography-caption { font-size: 10px; line-height: 1.35; }
  .chat-page .chat-whatsapp-conversation .chat-conversation-header > .chat-action-strip { flex-wrap: nowrap; gap: 2px; }
  .chat-page .chat-conversation-header .module-row-action { width: 28px; min-width: 28px; padding-inline: 4px; }
  .chat-page .chat-internal-start-actions { gap: 4px; }
  .chat-page .chat-internal-start-actions .MuiButton-root { font-size: 11px; padding: 4px 8px; }
  .chat-page .chat-internal-start-actions i { inline-size: 16px; block-size: 16px; font-size: 16px; }
}

/* The conversation header has a fixed compact height, independent of the sidebar. */
.chat-conversation-heading { display: flex; flex-direction: column; flex-shrink: 0; min-width: 0; }
@media (min-width: 1001px), (min-width: 701px) and (min-height: 701px), (min-width: 701px) and (pointer: fine) {
  .chat-list-panel .chat-list-heading { min-height: 56px; padding-block: 8px; }
  .chat-conversation-heading > .chat-conversation-header {
    flex: 0 0 64px;
    height: 64px;
    min-height: 64px;
    max-height: 64px;
    flex-wrap: nowrap;
    box-sizing: border-box;
    padding: 3px 12px;
    gap: 8px;
  }
  .chat-conversation-heading .chat-header-identity > .MuiTypography-subtitle1 { font-size: 14px; line-height: 18px; }
  .chat-conversation-heading .chat-header-identity > .MuiTypography-caption { font-size: 12px; line-height: 14px; }
  .chat-conversation-heading .chat-header-identity .chat-contact-labels { margin-block: 2px 0; flex-wrap: nowrap; overflow: hidden; max-height: 16px; }
  .chat-conversation-heading .chat-header-identity { flex: 1 1 0; overflow: hidden; }
  .chat-conversation-heading > .chat-conversation-header > .MuiStack-root { flex-shrink: 0; }
  .chat-conversation-heading .chat-header-identity .chat-dept { padding: 1px 4px; line-height: 12px; }
  .chat-conversation-heading > [data-window-state='open'] { padding-block: 3px; }
  .chat-conversation-heading > [data-window-state='open'] .MuiTypography-root { font-size: 12px; line-height: 18px; }
  .chat-conversation-heading > [data-window-state='open'] i { font-size: 18px; inline-size: 18px; block-size: 18px; }
}

/* Keep learning beside the overflow menu, without a separate shortcut row. */
.chat-list-heading-actions { display: flex; align-items: center; gap: 2px; }
.chat-toolbar.chat-toolbar-empty { display: none !important; }
.chat-toolbar-actions:empty { display: none; }

/* Kanban exposes the list actions directly; wrap on narrow screens instead of
   stretching the workspace. Column navigation by touch, wheel and keyboard stays available. */
.chat-page-board {
  inline-size: 100%;
  max-inline-size: 100%;
}
.chat-toolbar-board {
  flex-wrap: wrap;
}
.chat-toolbar-board .chat-toolbar-actions {
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
  gap: 4px;
}
.chat-board-shortcuts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.chat-toolbar-board .chat-layout-switch {
  flex-shrink: 0;
  margin-inline-start: auto;
}
/* Hide only the horizontal rail requested for the attendance Kanban. */
.chat-page-board .chat-board-columns > .ps__rail-x,
.page-content:has(> .chat-page-board) > .ps__rail-x {
  display: none !important;
}

/* The sidebar and workspace tabs also reduce available width. Apply the same
   single-conversation layout to the actual container, not only the viewport. */
@container (max-width: 900px) {
  .chat-board-with-conversation > .chat-board {
    display: none;
  }
  .chat-board-with-conversation > .chat-conversation {
    flex: 1;
    min-width: 0;
    border-left: 0;
  }
}

/* Personal reminders are independent from the incoming-message count. */
.chat-unread-indicators { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: auto; flex-shrink: 0; }
.chat-manual-unread { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--mui-palette-success-main); flex-shrink: 0; }

/* Group history scrolls vertically; the composer and enclosing panes must not create an X scrollbar. */
.chat-whatsapp-conversation.ff-scrollbar,
.chat-whatsapp-conversation .chat-timeline.ff-scrollbar {
  overflow-x: hidden;
}
.chat-whatsapp-conversation .chat-timeline.ff-scrollbar { scrollbar-gutter: auto; }

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@16.1.1_@playwright+test@1.63.0_babel-plugin-macros@3.1.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[2]!./node_modules/.pnpm/next@16.1.1_@playwright+test@1.63.0_babel-plugin-macros@3.1.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[3]!./src/@core/styles/table.module.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.table_table__cB3AL {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  white-space: nowrap;

  [align='right'] > * {
    text-align: end;
  }
  [align='center'] > * {
    text-align: center;
  }

  thead {
    text-transform: uppercase;
    color: var(--mui-palette-text-primary);
    border-block-start: 1px solid var(--border-color);

    th {
      font-weight: 500;
      font-size: 0.8125rem;
      letter-spacing: 0.2px;
      line-height: 1.8462;
      text-align: start;
      block-size: 56px;
      &:not(:first-of-type):not(:last-of-type) {
        padding-block: 0.5rem;
        padding-inline: 1rem;
      }
      &:first-of-type {
        &:not(:has(input[type='checkbox'])) {
          padding-block: 0.5rem;
          padding-inline: 1.5rem 1rem;
        }
        &:has(input[type='checkbox']) {
          padding-inline-start: 0.9375rem;
        }
      }
      &:last-of-type {
        padding-block: 0.5rem;
        padding-inline: 1rem 1.5rem;
      }
    }
  }

  tbody {
    color: var(--mui-palette-text-secondary);

    th,
    td {
      font-size: 0.9375rem;
      line-height: 1.4667;
      block-size: 50px;
      &:not(:first-of-type):not(:last-of-type) {
        padding-block: 0.5rem;
        padding-inline: 1rem;
      }
      &:first-of-type {
        &:not(:has(input[type='checkbox'])) {
          padding-block: 0.5rem;
          padding-inline: 1.5rem 1rem;
        }
        &:has(input[type='checkbox']) {
          inline-size: 51px;
          padding-inline-start: 0.9375rem;
        }
      }
      &:last-of-type {
        padding-block: 0.5rem;
        padding-inline: 1rem 1.5rem;
      }
    }

    tr:not(:last-child) {
      border-block-end: 1px solid var(--border-color);
    }
    tr {
      border-block-start: 1px solid var(--border-color);
    }
  }
}

.table_cellWithInput__N6u24 input {
  inline-size: 100%;
  background-color: transparent;
  font-size: inherit;
  color: inherit;
  border-radius: var(--mui-shape-customBorderRadius-sm);
  padding-block: 6px;
  padding-inline: 10px;
  margin-inline: -10px;

  &:focus-visible {
    outline: 1px solid var(--mui-palette-primary-main);
  }
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@16.1.1_@playwright+test@1.63.0_babel-plugin-macros@3.1.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[2]!./node_modules/.pnpm/next@16.1.1_@playwright+test@1.63.0_babel-plugin-macros@3.1.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[3]!./src/@menu/styles/styles.module.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.styles_ul__8V1vZ {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@16.1.1_@playwright+test@1.63.0_babel-plugin-macros@3.1.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[2]!./node_modules/.pnpm/next@16.1.1_@playwright+test@1.63.0_babel-plugin-macros@3.1.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[3]!./src/@menu/styles/horizontal/horizontalUl.module.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.horizontalUl_root__8LnCF {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  position: relative;
  padding: 0;
  margin: 0;
}

.horizontalUl_root__8LnCF .horizontalUl_li__v84V1:not(:last-of-type) {
  margin-inline-end: 4px;
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@16.1.1_@playwright+test@1.63.0_babel-plugin-macros@3.1.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[2]!./node_modules/.pnpm/next@16.1.1_@playwright+test@1.63.0_babel-plugin-macros@3.1.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[5].use[3]!./src/@menu/styles/vertical/verticalNavBgImage.module.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.verticalNavBgImage_root__FLJiy {
  inline-size: 100%;
  block-size: 100%;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  object-fit: cover;
  object-position: center;
  z-index: 2;
}