.browser-app {
  --workspace: #f3f6f2;
  --panel: #fff;
  --rule: #dce5dd;
  --accent: #245244;
  font: 15px/1.5 system-ui, Arial, sans-serif;
  background: var(--workspace);
}
.browser-app header {
  justify-content: space-between;
  padding: 10px clamp(12px, 2vw, 24px);
  min-height: 60px;
}
.browser-app header .brand-lockup .brand { font-size: 23px; }
.browser-app .keypad-tagline,
.browser-app footer,
.browser-app #sub,
.browser-empty,
#chat-sidebar { display: none; }
.browser-app .browser-tools { display: flex; align-items: center; gap: 8px; }
.browser-app .browser-tools label { margin: 0 2px; font-size: 13px; color: #f0f6f2; }
.browser-app .browser-tools select,
.browser-app #install-app {
  font: inherit;
  font-size: 13px;
  color: #fff;
  background: #245244;
  border: 1px solid #91b7a7;
  border-radius: 8px;
  padding: 6px 10px;
  min-height: 36px;
}
.browser-app .browser-tools select:focus-visible { outline: 2px solid #efd294; outline-offset: 2px; }
.browser-app #install-help {
  margin: 0;
  padding: 10px 18px;
  background: #fff1cf;
}
.browser-app #browser-chat-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 15px;
  background: var(--panel);
  border-block-end: 1px solid var(--rule);
}
.browser-app #browser-chat-bar h1 {
  flex: 1;
  min-width: 0;
  margin: 0;
  text-align: start;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.browser-app main { padding: 16px; }
.browser-app main h1 { font-size: 24px; }
.browser-app main > form { max-width: 480px; }
.browser-app main > .stack { max-width: 580px; }
.browser-app #view button { text-align: start; }
.browser-app #view :is(.emoji-grid, .player-buttons, .equal-actions) button { text-align: center; }
.browser-app #view input:focus,
.browser-app .inline-composer textarea:focus {
  background: #fff;
  color: var(--ink);
  border-color: #547c6d;
  outline: 2px solid #8eb4a0;
  outline-offset: 1px;
  box-shadow: none;
}
.browser-app #view .stack > button::after { content: none; }
[dir="rtl"] .browser-app #view input[dir="ltr"] { text-align: right; }
[dir="rtl"] .browser-app .inline-composer textarea:placeholder-shown { direction: rtl; text-align: right; }
.browser-app .attachment-options > button,
.browser-app .chat-option-section .stack > button { min-height: 44px; padding: 10px 14px; }
.browser-app .chat-option-section {
  max-width: 540px;
  margin-block: 14px;
  padding: 12px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--panel);
}
.browser-app .chat-option-section h2 { margin: 0 0 8px; }
.browser-app .chat-options-name { color: #52685d; text-align: start; }
.browser-app .chat-block { color: #802f2a; width: 100%; min-height: 44px; }
.browser-app .thread { gap: 9px; }
.browser-app .message { padding: 9px 13px; text-align: start; }
.browser-app .message-text { font-size: 16px; }
.browser-app .message .details,
.browser-app .day-divider { font-size: 12px; }
.browser-app .dock { display: grid; background: var(--panel); padding: 9px 14px; }
.browser-app .dock > button { width: 100%; }
.browser-app .inline-composer {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  width: min(100%, 920px);
  justify-self: center;
}
.browser-app .inline-composer textarea { margin: 0; min-height: 52px; max-height: 148px; padding: 12px; }
.browser-app .inline-composer .primary { width: auto; margin: 0; }
.browser-app .composer-tools { display: flex; align-items: center; gap: 7px; }
.browser-app .composer-tools .primary { margin-inline-start: auto; padding-inline: 20px; }
.browser-app .inline-composer p:empty { display: none; }
.browser-app .inline-composer p { margin: 0; }
.browser-app #view video.browser-player {
  margin: 8px auto;
  width: 100%;
  height: clamp(170px, 56vh, 620px);
  max-height: none;
  max-width: 1000px;
  object-fit: contain;
  background: #12241e;
  border-radius: 10px;
}
.browser-app #view audio.browser-player { max-width: 640px; }
.browser-app #chat-sidebar {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 14px;
  padding: 17px 12px 12px;
  background: var(--panel);
}
.browser-app .sidebar-title,
.browser-app .sidebar-search { display: grid; gap: 9px; padding-inline: 4px; }
.browser-app .sidebar-title h2 { margin: 0; font-size: 23px; }
.browser-app #sidebar-actions,
.browser-app #sidebar-account,
.browser-app .sidebar-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.browser-app .sidebar-search input { margin: 0; min-height: 42px; }
.browser-app .sidebar-filters button {
  min-height: 32px;
  border-color: transparent;
  border-radius: 20px;
  padding-inline: 12px;
}
.browser-app .sidebar-filters [aria-pressed="true"] { background: #e1eee6; color: #173b2d; border-color: #bdd3c5; }
.browser-app #sidebar-account { border-block-start: 1px solid var(--rule); padding: 10px 4px 0; }
.browser-app #sidebar-account button { font-size: 12px; }
.browser-app #sidebar-list { flex: 1 1 auto; overflow: auto; align-content: start; }
.browser-app #sidebar-list .chat-button {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  min-height: 68px;
  text-align: start;
  padding: 10px 9px;
}
.browser-app #sidebar-list .chat-button:hover { background: #f2f7f3; }
.browser-app #sidebar-list .chat-button::after { content: none; }
.browser-app #sidebar-list .chat-avatar {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background: #e5eee8;
  color: #245244;
  font-size: 16px;
  font-weight: 750;
}
.browser-app #sidebar-list .group-avatar { background: #f1e8d4; color: #705a2f; }
.browser-app .group-avatar::before,
.browser-app .group-avatar::after { content: ""; position: absolute; background: currentColor; }
.browser-app .group-avatar::before {
  inset-block-start: 11px;
  left: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 9px 1px currentColor;
}
.browser-app .group-avatar::after {
  inset-block-start: 20px;
  left: 10px;
  width: 11px;
  height: 8px;
  border-radius: 6px 6px 2px 2px;
  box-shadow: 9px 1px currentColor;
}
.browser-app #sidebar-list :is(.chat-row-heading, .chat-row-preview) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  text-align: start;
}
.browser-app #sidebar-list :is(.sidebar-chat-name, .chat-preview) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.browser-app #sidebar-list .sidebar-chat-name { font-size: 15px; font-weight: 750; }
.browser-app #sidebar-list .chat-preview { font-size: 13px; }
.browser-app #sidebar-list .chat-time { font-size: 11px; white-space: nowrap; }
.browser-app #sidebar-list .chat-unread-status {
  width: 7px;
  height: 7px;
  overflow: hidden;
  border-radius: 50%;
  background: #377253;
  font-size: 0;
}
.browser-app #sidebar-list .chat-unread-status:empty { visibility: hidden; }
.browser-app #sidebar-list [aria-current="true"] {
  background: #e3efe7;
  border-color: #8eb4a0;
  box-shadow: inset 0 0 0 1px #c5dacf;
}
.browser-app #sidebar-list .empty { padding-inline: 8px; }
.browser-app[data-screen="home"] #dock { display: none; }
.browser-app :is(.reply-quote, .welcome) { border-left: 0; border-inline-start: 3px solid #6c9785; }
.browser-app .device-ref,
.browser-app .recovery-code,
.browser-app video,
.browser-app audio { direction: ltr; }
.browser-app .large-text .message-text,
.browser-app.large-text .message-text { font-size: 19px; }

@media (max-width: 759px) {
  .browser-app[data-screen="home"] #chat-sidebar { display: flex; }
  .browser-app[data-screen="home"] #view { display: none; }
  .browser-app .browser-tools label { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
}
@media (max-width: 365px) {
  .browser-app header { gap: 5px; }
  .browser-app header .brand-lockup .brand { font-size: 19px; }
  .browser-app .browser-tools { gap: 5px; }
  .browser-app #install-app { padding-inline: 6px; }
}

@media (min-width: 760px) {
  .browser-app {
    display: grid;
    grid-template-columns: minmax(270px, 325px) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "header header"
      "install install"
      "status status"
      "sidebar title"
      "sidebar content"
      "sidebar actions";
  }
  .browser-app header { grid-area: header; }
  .browser-app #install-help { grid-area: install; }
  .browser-app #connection { grid-area: status; }
  .browser-app #browser-chat-bar { grid-area: title; padding-inline: clamp(18px, 3vw, 42px); }
  .browser-app .back-to-chats { display: none; }
  .browser-app main { grid-area: content; padding: 22px clamp(18px, 3vw, 42px); }
  .browser-app .dock { grid-area: actions; padding-inline: clamp(18px, 3vw, 42px); }
  .browser-app:not(.with-sidebar) main,
  .browser-app:not(.with-sidebar) .dock { grid-column: 1 / -1; }
  .browser-app:not(.with-sidebar) main { width: min(100%, 680px); justify-self: center; }
  .browser-app.with-sidebar #chat-sidebar {
    grid-area: sidebar;
    display: flex;
    border-inline-end: 1px solid var(--rule);
  }
  .browser-app[data-screen="home"] #view { display: grid; place-items: center; }
  .browser-app[data-screen="home"] #view > :not(.browser-empty) { display: none; }
  .browser-app[data-screen="home"] .browser-empty {
    display: block;
    max-width: 380px;
    padding: 22px;
    text-align: center;
  }
  .browser-app .browser-empty h2 { margin: 0 0 7px; font-size: 23px; }
  .browser-app .browser-empty p { color: #52685d; margin: 0; }
  .browser-app .thread { max-width: 920px; margin-inline: auto; }
  .browser-app .message { min-width: min(164px, 75%); max-width: 80%; }
  .browser-app .inline-composer { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .browser-app .inline-composer > p { grid-column: 1 / -1; }
  .browser-app #view video.browser-player { height: clamp(260px, 63vh, 680px); }
}