/*
  The Familienchat around the framework's chat panel (bsft-ui.css carries the panel itself): the app bar's chat icon
  with its badge, the page around the panel, the household groups with their mark, and the notices above the list.
  Everything builds on the tokens of hauswerk.css, so light and dark follow the theme.
*/

/* --- app bar ---------------------------------------------------------------------------- */

.hw-chat-button {
  position: relative;
}

.hw-chat-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  border: 2px solid var(--hw-ground);
  background: var(--bsft-color-primary);
  color: var(--bsft-color-primary-contrast);
  font-family: var(--hw-font-mono);
  font-size: 10.5px;
  line-height: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* At 375px the app bar holds the household, the title, up to two page actions, the chat and the ⋯ menu: the bell moves
   into the menu so the title keeps room. */
.hw-menu-bell {
  display: none;
}

@container hw-viewport (max-width: 399.98px) {
  .hw-appbar-actions:has(.hw-chat-button) .hw-bell {
    display: none;
  }

  .hw-appbar-actions:has(.hw-chat-button) .hw-menu-bell {
    display: contents;
  }
}

/* --- chat page -------------------------------------------------------------------------- */

/* The shell grows with its page, which is right everywhere else and wrong here: a long conversation would push the
   field to write in below the fold. While the chat is on screen the shell keeps the height of the screen, so the
   transcript scrolls inside the panel and the newest message and the field stay in view. */
.hw-app:has(.hw-chat-page) {
  height: calc(100dvh / var(--hw-zoom));
}

.hw-app:has(.hw-chat-page) .hw-main,
.hw-app:has(.hw-chat-page) .hw-content {
  min-height: 0;
}

.hw-chat-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  /* The panel fills the screen the shell leaves, so its transcript scrolls inside it and the field to write in stays
     where the thumb is instead of below a long conversation. */
  flex: 1 1 auto;
  min-height: 0;
}

.hw-chat-page .bsft-chat {
  flex: 1 1 auto;
  min-height: 480px;
}

/* A grid and flex child is as wide as its widest word unless it is told otherwise: without this a long last message
   pushes the conversation row, and with it the unread count, past the right edge of the phone. */
.hw-chat-page :is(.bsft-chat, .bsft-chat-main, .bsft-chat-conversations, .bsft-chat-conversation-list, .bsft-chat-messages, .bsft-chat-message, .bsft-chat-message-text) {
  min-width: 0;
}

.hw-chat-page .bsft-chat-message-text {
  overflow-wrap: anywhere;
}

/* Hauswerk creates direct chats through "Neuer Chat" over the contacts (bsft-ui-framework #4119). */
.hw-chat-page .bsft-chat-create {
  display: none;
}

/* The composer sticks above whatever Hauswerk puts at the bottom edge — the framework panel cannot
   know that, so it reads the distance from this one property (bsft-ui.css). On the overview and on
   a wide screen that is the tab bar; inside a conversation the tab bar is gone and the composer
   owns the edge itself. The safe area is the framework's own and is not added here a second time. */
.hw-chat-page {
  --bsft-chat-composer-offset: calc(var(--hw-tabbar-height) + env(safe-area-inset-bottom));
}

/* The chat's own bands take the page's ground rather than the card surface: they cover the
   transcript scrolling under them, and a white strip across a green page reads as a card that is
   not there. */
.hw-chat-page .bsft-chat-composer {
  background: var(--hw-ground);
}

/* The panel's own conversation bar is for a host without an app bar of its own. Hauswerk has one,
   and it now carries the chat's title, its way back and its ⋯ menu (ChatPage), so the panel's bar
   would only repeat all three and take a band of the little height a phone has. */
.hw-chat-page .bsft-chat-header {
  display: none;
}

/* Side by side the list is on screen beside the conversation, so there is nothing to go back to —
   the same call the panel makes for its own back control at this width (bsft-ui.css). */
@container hw-viewport (min-width: 900px) {
  .hw-app:has(.hw-chat-page) .hw-appbar-back {
    display: none;
  }
}

.hw-chat-page .bsft-chat-draft {
  background: var(--bsft-color-surface);
}

/* An open conversation is the whole screen: ChatPage says so through IHwShellChrome — the same
   signal the address is driven from — and the shell marks the app. The tab bar steps aside, the
   page gives back the room it reserved for it, and the conversation fills what is left, so the
   composer sits on the bottom edge of the window instead of in the middle of a short page. The way
   out is the chat header's own back control, which stays at the top while the transcript scrolls.
   Where a browser overlays the soft keyboard instead of shrinking the page, the app gives up the
   height it covers and the composer rides on top of it. */
.hw-app[data-hw-immersive] {
  height: calc(100dvh / var(--hw-zoom) - var(--hw-keyboard-inset));
  min-height: 0;
  overflow: hidden;
}

.hw-app[data-hw-immersive] .hw-nav {
  display: none;
}

.hw-app[data-hw-immersive] .hw-main,
.hw-app[data-hw-immersive] .hw-content {
  min-height: 0;
  padding-bottom: 0;
}

.hw-app[data-hw-immersive] .hw-chat-page {
  --bsft-chat-composer-offset: 0px;
  flex: 1;
  min-height: 0;
}

.hw-app[data-hw-immersive] .hw-chat-page .bsft-chat {
  flex: 1;
  min-height: 0;
}

/* Side by side from the wide breakpoint on: the conversation is not a place one has to leave, so
   the tab bar stays and the composer sits on the bottom of its own column. */
@container hw-viewport (min-width: 900px) {
  .hw-chat-page {
    --bsft-chat-composer-offset: 0px;
  }

  .hw-app[data-hw-immersive] {
    height: auto;
    min-height: calc(100dvh / var(--hw-zoom));
    overflow: visible;
  }

  .hw-app[data-hw-immersive] .hw-nav {
    display: block;
  }
}

.hw-chat-group {
  font-weight: 600;
  color: var(--bsft-color-muted);
}

.hw-chat-page .hw-household-mark {
  flex: none;
}

.hw-chat-contact {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  text-align: start;
}

/* --- the panel's own buttons ------------------------------------------------------------- */

/*
  hauswerk.css is loaded after bsft-ui.css, so its `.bsft-button` (centred, bold, 44 px) wins over the panel's own
  layout wherever the panel builds a row or an inline action from that class. These rules give the chat back the shape
  the framework draws: a conversation is a row of avatar, title and preview, and the message menu is a small action
  inside the bubble instead of a block button.
*/

.hw-chat-page .bsft-chat-conversation {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 12px;
  font-weight: 400;
  text-align: start;
}

.hw-chat-page .bsft-chat-conversation-title {
  font-weight: 700;
}

.hw-chat-page .bsft-chat-conversation-preview {
  min-width: 0;
}

.hw-chat-page .bsft-chat-conversation-preview-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hw-chat-page .bsft-chat-message-actions .bsft-button {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  background: none;
  color: var(--bsft-color-muted);
  font-size: 13px;
  font-weight: 600;
}

.hw-chat-page .bsft-chat-draft {
  min-height: 44px;
  padding: 11px 12px;
  border: 1px solid var(--bsft-color-border);
  border-radius: 14px;
  background: var(--bsft-color-surface);
  color: var(--bsft-color-text);
  font-family: var(--hw-font-body);
  font-size: 15px;
}

.hw-chat-page .bsft-chat-send {
  flex: none;
}

/* The panel leaves the search field the browser's own box (bsft-ui.css gives it the width and
   nothing else). It wears the chrome every other field in the app wears — the sheet field's, which
   is the one a field outside a BsftFormField follows (hauswerk.css). 16px keeps iOS from zooming
   into it on focus. */
.hw-chat-page .bsft-chat-search-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--bsft-color-border);
  border-radius: var(--bsft-radius);
  padding: calc(var(--bsft-spacing) / 2) var(--bsft-spacing);
  background: var(--bsft-color-surface);
  color: var(--bsft-color-text);
  font-family: var(--hw-font-body);
  font-size: 16px;
}

.hw-chat-page .bsft-chat-search-input::placeholder {
  color: var(--bsft-color-muted);
}

.hw-chat-page .bsft-chat-search-input:focus-visible {
  border-color: var(--bsft-color-primary);
  outline: 2px solid var(--bsft-color-primary);
  outline-offset: 1px;
}

.hw-chat-page .bsft-chat-back {
  min-height: 36px;
  padding: 0 12px;
  font-size: 14px;
}