.chat-nav-badge { position: absolute; top: 2px; right: 4px; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #c63337; color: #fff; font-size: 10px; font-weight: 800; }
.chat-nav-badge[hidden] { display: none; }
.main-panel:has(> .chat-topbar) { display: grid; grid-template-rows: auto minmax(0, 1fr); height: calc(100dvh - var(--ribbon-height)); min-height: 0; overflow: hidden; }
.main-panel:has(> .chat-topbar) > .page-content { display: flex; min-width: 0; min-height: 0; padding: 14px; overflow: hidden; }
.chat-view { box-sizing: border-box; display: grid; flex: 1; grid-template-columns: minmax(213.75px, 247.5px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); width: 100%; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--border-default); border-radius: 14px; background: #fff; box-shadow: var(--shadow-xs); }
.chat-module-primary { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 56px; padding: 9px 15px; border-right: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); background: #fbfefd; }
.chat-module-primary h2 { flex: 1; min-width: 0; margin: 0; font-size: 16px; }
.chat-manage-wallpapers { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; white-space: nowrap; }
.chat-manage-wallpapers svg, .chat-create-group svg { width: 15px; height: 15px; }
.chat-create-group[hidden] { display: none; }
.chat-list-panel, .chat-conversation-panel { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
.chat-list-panel { grid-column: 1; grid-row: 2; grid-template-rows: auto minmax(0, 1fr); border-right: 1px solid var(--border-default); }
.chat-conversation-header { position: relative; z-index: 2; grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; min-height: 56px; padding: 9px 15px; border-bottom: 1px solid var(--border-default); background: #fbfefd; }
.chat-view:not(.has-active-conversation) .chat-conversation-header { display: none; }
.chat-view:not(.has-active-conversation) .chat-conversation-panel { grid-row: 1 / 3; }
.chat-dialog-header h3 { margin: 0; font-size: 16px; }
.chat-module-primary .chat-subtle-button { padding-inline: 7px; white-space: nowrap; }
.chat-create-group { display: inline-flex; align-items: center; gap: 5px; }
.chat-current-title { min-width: 0; margin-right: auto; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.chat-icon-button { display: inline-grid; flex: 0 0 36px; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border-default); border-radius: 9px; background: #fff; color: var(--text-secondary); cursor: pointer; }
.chat-icon-button:hover { background: var(--brand-soft); color: var(--brand-hover); }
.chat-icon-button svg { width: 18px; height: 18px; }
.chat-icon-button[hidden] { display: none; }
.chat-subtle-button, .chat-link-button, .chat-danger-button, .chat-older { min-height: 32px; padding: 5px 10px; border: 1px solid var(--border-default); border-radius: 8px; background: #fff; color: var(--brand-hover); font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.chat-subtle-button:hover, .chat-link-button:hover, .chat-older:hover { background: var(--brand-soft); }
.chat-danger-button { color: #b33337; }
.chat-danger-button:hover { background: #fff1f1; }
.chat-search, .chat-field input, .chat-field select, .chat-compose-text { box-sizing: border-box; width: 100%; min-width: 0; padding: 9px 11px; border: 1px solid var(--border-default); border-radius: 9px; background: #fff; color: var(--text-primary); font: inherit; font-size: 12px; }
.chat-list-panel > .chat-search { width: calc(100% - 24px); margin: 12px; }
.chat-search-results { display: grid; }
.chat-search-label { padding: 7px 13px 5px; color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.chat-person-result, .chat-menu-action { width: 100%; min-height: 38px; padding: 8px 13px; border: 0; border-bottom: 1px solid var(--border-subtle); background: #fff; color: var(--text-primary); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.chat-person-result { display: flex; align-items: center; gap: 9px; }
.chat-person-result .chat-avatar { flex-basis: 32px; width: 32px; height: 32px; }
.chat-person-result > svg { width: 15px; height: 15px; color: var(--text-muted); }
.chat-person-copy { display: grid; flex: 1; min-width: 0; gap: 2px; }
.chat-person-copy strong, .chat-person-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-person-copy small { color: var(--text-muted); font-size: 10px; }
.chat-person-result:hover, .chat-menu-action:hover { background: var(--brand-soft); }
.chat-action-popover { position: fixed; z-index: 1400; width: min(220px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow-y: auto; border: 1px solid var(--border-default); border-radius: 11px; background: #fff; box-shadow: 0 10px 28px rgba(10,35,31,.16); }
.chat-action-popover .chat-menu-action { display: flex; align-items: center; gap: 10px; min-height: 39px; padding: 9px 12px; }
.chat-action-popover .chat-menu-action svg { flex: 0 0 16px; width: 16px; height: 16px; color: var(--text-muted); }
.chat-action-popover .chat-menu-action.is-danger { color: #b33337; }
.chat-action-popover .chat-menu-action.is-danger svg { color: #b33337; }
.chat-action-popover .chat-menu-action:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.chat-action-popover .chat-menu-action:last-child { border-bottom: 0; }
.chat-conversation-list { min-height: 0; overflow-y: auto; }
.chat-begin-button { display: block; margin: 0 auto; }
.chat-conversation-item { position: relative; min-width: 0; }
.chat-conversation-row { box-sizing: border-box; display: flex; align-items: center; width: 100%; min-width: 0; gap: 9px; padding: 12px 38px 12px 12px; border-bottom: 1px solid var(--border-subtle); background: #fff; color: var(--text-primary); }
.chat-conversation-open { display: flex; flex: 1; align-items: center; min-width: 0; gap: 9px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.chat-conversation-open:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; }
.chat-conversation-quick { position: absolute; top: 6px; right: 6px; display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: rgba(255,255,255,.92); color: var(--text-muted); cursor: pointer; opacity: 0; pointer-events: none; }
.chat-conversation-quick svg { width: 15px; height: 15px; }
.chat-conversation-item:is(:hover, :focus-within) .chat-conversation-quick { opacity: 1; pointer-events: auto; }
.chat-conversation-quick:hover, .chat-conversation-quick:focus-visible { border-color: var(--border-default); color: var(--brand-hover); }
.chat-quick-menu { z-index: 1600; }
.chat-conversation-row:is(:hover, :focus-within, .is-active) { background: #e9f7f4; }
.chat-avatar { flex: 0 0 38px; width: 38px; height: 38px; font-size: 11px; }
.chat-avatar-trigger { display: inline-grid; flex: 0 0 44px; place-items: center; width: 44px; height: 44px; margin: -3px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; }
.chat-avatar-trigger:not(:disabled) { cursor: pointer; }
.chat-avatar-trigger:disabled { cursor: default; }
.chat-avatar-trigger:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
@media (hover: hover) {
  .chat-avatar-trigger:not(:disabled):hover .chat-avatar { filter: brightness(.91); }
}
@media (prefers-reduced-motion: no-preference) {
  .chat-avatar-trigger .chat-avatar { transition: filter .16s ease; }
}
.chat-avatar.is-group { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--brand-soft); color: var(--brand-hover); }
.chat-avatar.is-group .chat-group-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chat-avatar.is-group svg[hidden] { display: none; }
.chat-avatar svg { width: 19px; height: 19px; }
.chat-header-avatar { flex-basis: 34px; width: 34px; height: 34px; }
.chat-header-avatar-trigger { margin: -5px; }
.chat-header-avatar-trigger[hidden] { display: none; }
.chat-conversation-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
.chat-conversation-copy strong, .chat-conversation-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-conversation-copy strong { font-size: 12px; }
.chat-conversation-copy small, .chat-conversation-meta { color: var(--text-muted); font-size: 10px; }
.chat-conversation-meta { display: grid; flex: 0 0 auto; justify-items: end; gap: 4px; }
.chat-count { display: grid; min-width: 18px; height: 18px; padding: 0 4px; place-items: center; border-radius: 999px; background: var(--brand); color: #fff; font-size: 10px; }
.chat-conversation-panel { grid-column: 2; grid-row: 2; grid-template-rows: minmax(0, 1fr) auto; }
.chat-conversation-panel.is-selecting { grid-template-rows: auto minmax(0, 1fr) auto; }
.chat-within-search-anchor { position: relative; display: inline-flex; flex: 0 0 auto; }
.chat-within-search { position: absolute; z-index: 3; top: calc(100% + 8px); right: 0; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 7px; width: min(360px, calc(100vw - 88px)); padding: 10px; border: 1px solid var(--border-default); border-radius: 11px; background: #fff; box-shadow: 0 12px 30px rgba(10,35,31,.16); }
.chat-within-search[hidden] { display: none; }
.chat-within-search-results, .chat-within-search > .chat-subtle-button { grid-column: 1 / -1; }
.chat-within-search-results { display: grid; max-height: min(250px, 38dvh); overflow-y: auto; }
.chat-within-search-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; padding: 8px; border: 0; border-bottom: 1px solid var(--border-subtle); background: #fff; color: var(--text-primary); text-align: left; cursor: pointer; }
.chat-within-search-result:hover, .chat-within-search-result:focus-visible { background: var(--brand-soft); }
.chat-within-search-result strong { font-size: 10px; }
.chat-within-search-result span { grid-column: 1 / -1; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.chat-within-search-result time { grid-column: 2; grid-row: 1; color: var(--text-muted); font-size: 9px; }
.chat-message.is-search-target .chat-bubble { outline: 3px solid var(--brand); outline-offset: 3px; }
.chat-author.is-former-member { color: var(--text-muted); }
.chat-group-event { justify-self: center; max-width: min(85%, 420px); padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.7); color: var(--text-muted); font-size: 10px; text-align: center; }
.chat-forward-selection { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--border-default); background: #f7fcfa; }
.chat-forward-selection[hidden] { display: none; }
.chat-forward-selection strong { flex: 1; min-width: 120px; font-size: 11px; }
.chat-forward-selection .chat-send-button { min-height: 32px; }
.chat-conversation-panel.is-empty { grid-template-rows: minmax(0, 1fr); }
.chat-conversation-panel.is-empty > .chat-messages, .chat-conversation-panel.is-empty > .chat-composer, .chat-conversation-panel.is-empty > .chat-forward-selection { display: none; }
.chat-empty-conversation { display: none; }
.chat-conversation-panel.is-empty .chat-empty-conversation { display: flex; align-items: center; justify-content: center; flex-direction: column; min-width: 0; padding: 24px; background: #f4f8f7; text-align: center; }
.chat-empty-brand { display: block; margin-bottom: 17px; color: #000; font-family: "Rockwell Extra Bold", Rockwell, Georgia, serif; font-size: clamp(32px, 5vw, 48px); font-weight: normal; letter-spacing: -.065em; line-height: 1; }
.chat-empty-conversation strong { color: var(--text-secondary); font-size: 13px; }
.chat-empty-conversation p { margin: 6px 0 0; color: var(--text-muted); font-size: 11px; }
.chat-messages { min-height: 0; padding: 14px; overflow-y: auto; background-color: #f1f8f6; background-size: cover; }
.chat-messages[data-pattern="NONE"] { background-position: center center; background-repeat: no-repeat; }
.chat-messages[data-pattern="DOTS"] { background-image: radial-gradient(#b5d5ce 1px, transparent 1px); background-size: 22px 22px; }
.chat-messages[data-pattern="GRID"] { background-image: linear-gradient(#daeae6 1px, transparent 1px), linear-gradient(90deg, #daeae6 1px, transparent 1px); background-size: 24px 24px; }
.chat-message-list { display: grid; align-content: end; gap: 10px; min-height: 100%; }
.chat-view .chat-message { position: relative; display: flex; flex-shrink: 1; align-items: stretch; justify-content: flex-start; min-width: 0; max-width: 100%; gap: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.chat-view .chat-message.is-mine { justify-content: flex-end; }
.chat-message-unit { position: relative; display: flex; width: fit-content; max-width: min(74%, 650px); min-width: 0; }
.chat-bubble { box-sizing: border-box; display: grid; width: fit-content; max-width: 100%; min-width: 70px; gap: 5px; padding: 9px 11px; border: 1px solid var(--border-default); border-radius: 12px; background: #fff; color: var(--text-primary); overflow-wrap: anywhere; cursor: pointer; }
.chat-message.is-mine .chat-bubble { border-color: #bde4da; background: #dcf4eb; }
.chat-message:not(.is-selecting):not(.is-mine) .chat-message-unit:is(:hover, :focus-within) .chat-bubble,
.chat-message:not(.is-selecting):not(.is-mine).has-menu-open .chat-bubble { border-radius: 12px 0 0 12px; }
.chat-message:not(.is-selecting).is-mine .chat-message-unit:is(:hover, :focus-within) .chat-bubble,
.chat-message:not(.is-selecting).is-mine.has-menu-open .chat-bubble { border-radius: 0 12px 12px 0; }
.chat-conversation-panel[data-sent-color="DEFAULT"] .chat-message.is-mine .chat-bubble { background: #dcf4eb; border-color: #bde4da; }
.chat-conversation-panel[data-sent-color="BLUE"] .chat-message.is-mine .chat-bubble { background: #e3f0ff; border-color: #c7def5; }
.chat-conversation-panel[data-sent-color="ROSE"] .chat-message.is-mine .chat-bubble { background: #fbeaf0; border-color: #f1d0df; }
.chat-conversation-panel[data-sent-color="AMBER"] .chat-message.is-mine .chat-bubble { background: #fff2d9; border-color: #f0dfb5; }
.chat-conversation-panel[data-sent-color="SLATE"] .chat-message.is-mine .chat-bubble { background: #e9eef2; border-color: #d0dbe3; }
.chat-conversation-panel[data-received-color="TEAL"] .chat-message:not(.is-mine) .chat-bubble { background: #dcf4eb; border-color: #bde4da; }
.chat-conversation-panel[data-received-color="BLUE"] .chat-message:not(.is-mine) .chat-bubble { background: #e3f0ff; border-color: #c7def5; }
.chat-conversation-panel[data-received-color="ROSE"] .chat-message:not(.is-mine) .chat-bubble { background: #fbeaf0; border-color: #f1d0df; }
.chat-conversation-panel[data-received-color="AMBER"] .chat-message:not(.is-mine) .chat-bubble { background: #fff2d9; border-color: #f0dfb5; }
.chat-conversation-panel[data-received-color="SLATE"] .chat-message:not(.is-mine) .chat-bubble { background: #e9eef2; border-color: #d0dbe3; }
.chat-view .chat-author { margin: 0; color: var(--brand-hover); font-size: 10px; }
.chat-view .chat-member-tag { display: block; margin-top: -3px; color: var(--text-muted); font-size: 9px; line-height: 1.2; }
.chat-view .chat-forwarded, .chat-view .chat-message-meta { color: var(--text-muted); font-size: 9px; }
.chat-view .chat-message-meta { display: block; justify-self: end; margin: 0; }
.chat-view .chat-message-body { margin: 0; color: inherit; font-size: 12px; line-height: 1.45; white-space: pre-wrap; }
.chat-reply-preview { margin: 0; padding: 5px 8px; border-left: 3px solid var(--brand); border-radius: 4px; background: rgba(255,255,255,.65); color: var(--text-secondary); font-size: 10px; }
.chat-reply-preview > strong { display: block; }
.chat-image-link { display: block; justify-self: start; width: fit-content; max-width: 360px; min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--border-default); border-radius: 8px; background: transparent; line-height: 0; cursor: zoom-in; }
.chat-media-status { color: var(--text-muted); font-size: 11px; }
.chat-image-link:hover { border-color: var(--brand); }
.chat-image { display: block; max-width: 100%; max-height: 330px; object-fit: contain; }
.chat-image-viewer { position: fixed; inset: 0; box-sizing: border-box; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden; overscroll-behavior: contain; border: 0; background: rgba(10, 22, 21, .96); color: #fff; }
.chat-image-viewer::backdrop { background: rgba(10, 22, 21, .72); }
.chat-image-viewer-toolbar { position: absolute; z-index: 1; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: flex-end; box-sizing: border-box; gap: 5px; height: calc(54px + env(safe-area-inset-top)); padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); background: linear-gradient(rgba(7, 19, 18, .75), rgba(7, 19, 18, 0)); }
.chat-image-viewer-control { display: inline-grid; flex: 0 0 36px; place-items: center; box-sizing: border-box; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, .22); border-radius: 9px; background: rgba(255, 255, 255, .09); color: #fff; cursor: pointer; text-decoration: none; }
.chat-image-viewer-control:hover, .chat-image-viewer-control:focus-visible { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .18); }
.chat-image-viewer-control:focus-visible { outline: 2px solid #7ad6ca; outline-offset: 2px; }
.chat-image-viewer-control:disabled { opacity: .4; cursor: not-allowed; }
.chat-image-viewer-control svg { width: 17px; height: 17px; }
.chat-image-viewer-zoom { min-width: 44px; color: rgba(255, 255, 255, .9); font-size: 11px; font-variant-numeric: tabular-nums; text-align: center; }
.chat-image-viewer-stage { position: absolute; inset: calc(54px + env(safe-area-inset-top)) 0 0; overflow: hidden; touch-action: none; }
.chat-image-viewer-stage.is-pannable { cursor: grab; }
.chat-image-viewer-stage.is-dragging { cursor: grabbing; }
.chat-image-viewer-canvas { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.chat-image-viewer-image { position: absolute; top: 0; left: 0; max-width: none; max-height: none; transform: translate(-50%, -50%); user-select: none; -webkit-user-drag: none; }
.chat-image-viewer-image[hidden], .chat-image-viewer-status[hidden] { display: none; }
.chat-image-viewer-status { position: absolute; top: 50%; left: 50%; width: min(280px, calc(100% - 32px)); margin: 0; transform: translate(-50%, -50%); color: rgba(255, 255, 255, .84); font-size: 13px; text-align: center; }
.chat-audio { justify-self: start; max-width: 100%; }
.chat-file { display: inline-flex; align-items: center; justify-self: start; max-width: 100%; min-width: 0; gap: 7px; padding: 7px 9px; border: 1px solid var(--border-default); border-radius: 8px; background: rgba(255,255,255,.64); color: var(--brand-hover); font-size: 11px; text-decoration: none; }
.chat-file:hover, .chat-file:focus-visible { border-color: var(--brand); background: var(--brand-soft); }
.chat-file svg { flex: 0 0 15px; width: 15px; height: 15px; }
.chat-file-name { min-width: 0; overflow-wrap: anywhere; }
.chat-restricted-file { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.chat-file-risk { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); font-size: 10px; }
.chat-file-risk svg { width: 13px; height: 13px; flex: 0 0 13px; }
.chat-message-action { position: absolute; top: 0; right: -12.5px; bottom: 0; display: inline-grid; place-items: center; box-sizing: border-box; width: 13.5px; min-height: 32px; padding: 0; border: 1px solid var(--border-default); border-radius: 0 10px 10px 0; background: #f7faf9; color: var(--text-muted); cursor: pointer; opacity: 0; pointer-events: none; transform: translateX(2px); transition: opacity 80ms ease, transform 80ms ease, background-color 80ms ease; }
.chat-message-action::before { position: absolute; inset: 0 -13.5px 0 0; content: ""; }
.chat-message.is-mine .chat-message-action { right: auto; left: -12.5px; border-color: #bde4da; border-radius: 10px 0 0 10px; background: #e9f7f2; transform: translateX(-2px); }
.chat-message.is-mine .chat-message-action::before { inset: 0 0 0 -13.5px; }
.chat-message-unit:is(:hover, :focus-within) .chat-message-action, .chat-message.has-menu-open .chat-message-action { opacity: 1; pointer-events: auto; transform: translateX(0); }
.chat-message-action:hover { background: #dcefe9; color: var(--brand-hover); }
.chat-message-action svg { width: 11px; height: 15px; }
.chat-message-action:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.chat-message.is-selecting { align-items: center; gap: 8px; }
.chat-message.is-selecting .chat-message-action { display: none; }
.chat-message-select { flex: 0 0 17px; width: 17px; height: 17px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.chat-message.is-selected .chat-bubble { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .chat-message-action { transition: none; }
}
.chat-forward-card { display: grid; gap: 0; max-width: 100%; overflow: hidden; border: 1px solid rgba(64,112,104,.18); border-radius: 7px; background: rgba(255,255,255,.58); }
.chat-forward-item { display: grid; min-width: 0; gap: 3px; padding: 8px 9px; }
.chat-forward-item + .chat-forward-item { border-top: 1px solid rgba(64,112,104,.16); }
.chat-forward-item > strong { color: var(--brand-hover); font-size: 10px; }
.chat-forward-item .chat-image { max-width: 100%; }
.chat-forward-drawer .chat-dialog-content { align-content: start; gap: 12px; }
.chat-forward-targets { display: grid; align-content: start; max-height: calc(100dvh - 185px); overflow-y: auto; border: 1px solid var(--border-subtle); border-radius: 9px; }
.chat-forward-target .chat-person-copy { font-size: 12px; font-weight: 700; }
.chat-older { display: block; margin: 0 auto 12px; }
.chat-older[hidden] { display: none; }
.chat-empty, .chat-muted { padding: 12px; color: var(--text-muted); font-size: 11px; text-align: center; }
.chat-composer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; min-width: 0; gap: 7px; padding: 10px; border-top: 1px solid var(--border-default); background: #fff; }
.chat-composer[hidden] { display: none; }
.chat-composer > button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; gap: 5px; }
.chat-composer > button svg { flex: 0 0 15px; width: 15px; height: 15px; }
.chat-compose-text { min-width: 0; min-height: 38px; max-height: 128px; max-height: min(128px, max(40px, 25dvh)); line-height: 1.5; resize: none; overflow-y: auto; }
.chat-composer-context { box-sizing: border-box; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; padding: 5px 8px; border-left: 3px solid var(--brand); background: var(--brand-soft); font-size: 11px; }
.chat-composer-context > span { min-width: 0; overflow-wrap: anywhere; }
.chat-composer-context > button { flex: 0 0 auto; }
.chat-composer-context[hidden] { display: none; }
.chat-recording-time { margin-left: auto; color: #b33337; font-weight: 800; font-variant-numeric: tabular-nums; }
.chat-send-button { min-height: 33px; padding: 7px 13px; border: 0; border-radius: 8px; background: var(--brand-hover); color: #fff; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.chat-send-button:disabled, .chat-subtle-button:disabled { opacity: .5; cursor: not-allowed; }
.chat-mobile-back { display: none; }
.chat-dialog { box-sizing: border-box; width: min(440px, calc(100vw - 24px)); max-height: min(85dvh, 700px); padding: 0; overflow: auto; border: 1px solid var(--border-default); border-radius: 13px; box-shadow: 0 20px 60px rgba(10,35,31,.2); color: var(--text-primary); }
.chat-dialog::backdrop { background: rgba(14,37,35,.24); }
.chat-dialog.is-drawer { width: min(410px, 100vw); height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-radius: 0; border-top: 0; border-bottom: 0; }
.chat-dialog.is-drawer::backdrop { background: rgba(14,37,35,.18); }
.chat-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 14px 18px; border-bottom: 1px solid var(--border-default); }
.chat-dialog-close { display: inline-grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border-default); border-radius: 50%; background: #fff; color: var(--text-secondary); cursor: pointer; }
.chat-dialog-close svg { width: 15px; height: 15px; }
.chat-dialog-close:hover { background: var(--brand-soft); color: var(--brand-hover); }
.chat-dialog-content { display: grid; gap: 12px; padding: 16px; }
.chat-options-drawer .chat-dialog-content, .chat-group-drawer .chat-dialog-content { align-content: start; gap: 0; padding: 0 18px 20px; }
.chat-options-section { display: grid; gap: 11px; padding: 19px 0; border-bottom: 1px solid var(--border-subtle); }
.chat-options-section:last-child { border-bottom: 0; }
.chat-group-photo-setting { display: flex; align-items: center; gap: 10px; }
.chat-group-photo-preview { flex: 0 0 52px; width: 52px; height: 52px; }
.chat-group-photo-copy { display: grid; gap: 3px; min-width: 0; }
.chat-group-photo-copy strong { font-size: 12px; }
.chat-group-photo-copy span { color: var(--text-muted); font-size: 11px; }
.chat-group-photo-input { display: none; }
.chat-section-title { margin: 0; color: var(--text-primary); font-size: 12px; font-weight: 800; }
.chat-section-description { margin: 0; color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.chat-setting-row { display: flex; align-items: center; min-height: 40px; gap: 10px; padding: 7px 10px; border: 1px solid var(--border-subtle); border-radius: 9px; background: #fbfefd; }
.chat-setting-row > svg { width: 16px; height: 16px; color: var(--brand-hover); }
.chat-setting-row input { margin-left: auto; order: 3; accent-color: var(--brand); }
.chat-setting-row span { flex: 1; }
.chat-option-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.chat-option-action svg { width: 15px; height: 15px; }
.chat-drawer-footer { display: flex; justify-content: flex-end; padding: 15px 0 19px; border-bottom: 1px solid var(--border-subtle); }
.chat-drawer-footer .chat-option-action, .chat-group-submit { min-height: 38px; }
.chat-color-group { display: grid; gap: 9px; }
.chat-color-group > strong { font-size: 11px; }
.chat-color-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.chat-color-swatch { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid #bdcfcb; border-radius: 50%; background: var(--swatch-color); color: var(--brand-hover); cursor: pointer; }
.chat-color-swatch svg { width: 15px; height: 15px; opacity: 0; }
.chat-color-swatch[aria-pressed="true"] { outline: 2px solid var(--brand); outline-offset: 2px; }
.chat-color-swatch[aria-pressed="true"] svg { opacity: 1; }
.chat-field { display: grid; gap: 5px; font-size: 11px; font-weight: 750; }
.chat-checkbox { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.chat-people-results { display: grid; max-height: 220px; overflow-y: auto; }
.chat-people-results .chat-checkbox { padding: 7px 0; border-bottom: 1px solid var(--border-subtle); }
.chat-members-drawer .chat-dialog-content { align-content: start; gap: 0; padding: 15px 18px 24px; }
.chat-member-search { position: relative; margin: 15px 0 10px; }
.chat-member-search .chat-search { margin: 0; }
.chat-member-results { position: absolute; inset: calc(100% + 4px) 0 auto; z-index: 5; width: 100%; }
.chat-member-add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 18px; }
.chat-member-add svg { width: 15px; height: 15px; }
.chat-member-section-title { margin: 12px 0 4px; color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.chat-member-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 32px; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border-subtle); }
.chat-member-open { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
.chat-member-open.is-openable { cursor: pointer; }
.chat-member-open.is-openable:hover { background: var(--brand-soft); }
.chat-member-open.is-openable:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.chat-member-copy { display: grid; min-width: 0; gap: 3px; }
.chat-member-copy strong { overflow: hidden; color: var(--text-primary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.chat-member-copy span, .chat-member-copy small { color: var(--text-muted); font-size: 10px; }
.chat-member-menu-button { flex-basis: 32px; width: 32px; height: 32px; }
.chat-member-menu-button[hidden] { display: none; }
.chat-message-action[hidden] { display: none; }
.chat-member-menu { position: absolute; z-index: 6; top: 44px; right: 0; width: min(220px, 100%); overflow: hidden; border: 1px solid var(--border-default); border-radius: 9px; background: #fff; box-shadow: 0 12px 28px rgba(10,35,31,.16); }
.chat-member-menu[hidden] { display: none; }
.chat-member-menu .chat-menu-action:last-child { border-bottom: 0; }
.chat-member-menu .chat-menu-action { display: flex; align-items: center; gap: 9px; }
.chat-member-menu .chat-menu-action svg { flex: 0 0 15px; width: 15px; height: 15px; color: var(--brand-hover); }
.chat-member-menu .chat-menu-action.is-danger svg { color: #b33337; }
.chat-member-alias-editor { display: flex; grid-column: 1 / -1; gap: 7px; }
.chat-wallpaper-drawer { position: fixed; z-index: 1200; inset: 0 0 0 auto; display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(390px, 100vw); overflow: hidden; border-left: 1px solid var(--border-default); background: #fff; box-shadow: -15px 0 40px rgba(10,35,31,.15); }
.chat-wallpaper-drawer .chat-dialog-content { align-content: start; overflow-y: auto; }
.chat-wallpaper-manager .chat-dialog-content { gap: 13px; padding: 20px; }
.chat-wallpaper-manager .chat-section-title:not(:first-child) { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.chat-wallpaper-manager input[type="file"] { width: 100%; min-width: 0; }
.chat-wallpaper-manager .chat-option-action svg { width: 15px; height: 15px; }
.chat-wallpaper-list { display: grid; gap: 9px; }
.chat-wallpaper-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.chat-shared-wallpaper-item { display: grid; align-content: start; min-width: 0; gap: 4px; }
.chat-shared-wallpaper-item .chat-wallpaper-choice { width: 100%; }
.chat-shared-wallpaper-remove { justify-self: end; min-height: 25px; padding: 3px 6px; color: #b33337; }
.chat-shared-wallpaper-remove svg { width: 13px; height: 13px; }
.chat-group-sent-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 220px; overflow-y: auto; }
.chat-wallpaper-choice { display: grid; min-width: 0; gap: 5px; padding: 4px; border: 1px solid var(--border-default); border-radius: 9px; background: #fff; color: var(--text-primary); font: inherit; font-size: 10px; text-align: left; cursor: pointer; }
.chat-wallpaper-choice[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.chat-wallpaper-choice:disabled { opacity: .48; cursor: not-allowed; }
.chat-wallpaper-preview { display: block; width: 100%; height: 62px; border-radius: 5px; background: #f1f8f6; object-fit: cover; object-position: center center; }
.chat-wallpaper-preview.is-dots { background-image: radial-gradient(#b5d5ce 1px, transparent 1px); background-size: 14px 14px; }
.chat-wallpaper-preview.is-grid { background-image: linear-gradient(#daeae6 1px, transparent 1px), linear-gradient(90deg, #daeae6 1px, transparent 1px); background-size: 15px 15px; }
.chat-wallpaper-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-group-drawer .chat-dialog-content > .chat-section-description { padding: 18px 0; }
.chat-group-drawer .chat-field { margin-bottom: 18px; }
.chat-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.chat-section-heading strong { font-size: 12px; }
.chat-selection-count { color: var(--text-muted); font-size: 10px; }
.chat-selected-people { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-selected-people:empty { display: none; }
.chat-person-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 7px 5px 9px; border: 1px solid #bde4da; border-radius: 999px; background: var(--brand-soft); color: var(--brand-hover); font: inherit; font-size: 10px; cursor: pointer; }
.chat-person-chip .chat-avatar { flex-basis: 20px; width: 20px; height: 20px; font-size: 8px; }
.chat-person-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-person-chip svg { flex: 0 0 12px; width: 12px; height: 12px; }
.chat-group-search-wrap { min-width: 0; }
.chat-group-search-wrap .chat-search { margin-bottom: 9px; }
.chat-group-results { position: fixed; z-index: 2; box-sizing: border-box; min-height: 0; max-height: 280px; margin: 0; overflow-y: auto; border: 1px solid var(--border-default); border-radius: 9px; background: #fff; box-shadow: 0 12px 28px rgba(10,35,31,.16); }
.chat-member-search .chat-member-results { position: absolute; inset: calc(100% + 4px) 0 auto; z-index: 5; width: 100%; }
.chat-member-row.has-no-actions { grid-template-columns: minmax(0, 1fr); }
.chat-group-results[hidden] { display: none; }
.chat-person-choice { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 48px; padding: 6px 9px; border: 0; border-bottom: 1px solid var(--border-subtle); background: #fff; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.chat-person-choice:hover, .chat-person-choice.is-active { background: var(--brand-soft); }
.chat-person-choice .chat-avatar { flex-basis: 32px; width: 32px; height: 32px; }
.chat-group-rules { display: grid; gap: 9px; margin: 10px 0 4px; }
.chat-group-rules .chat-checkbox { justify-content: space-between; min-height: 34px; }
.chat-group-rules .chat-checkbox input { order: 2; accent-color: var(--brand); }
.chat-group-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.chat-group-submit svg { width: 16px; height: 16px; }
.chat-wallpaper-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--border-subtle); border-radius: 9px; }
.chat-wallpaper-row img { width: 46px; height: 40px; border-radius: 6px; object-fit: cover; object-position: center center; }
.chat-wallpaper-upload-preview { box-sizing: border-box; width: 100%; height: 160px; border: 1px solid var(--border-default); border-radius: 8px; object-fit: cover; object-position: center center; }
.chat-wallpaper-upload-preview[hidden] { display: none; }
.chat-wallpaper-row input { min-width: 0; padding: 6px; border: 1px solid var(--border-default); border-radius: 7px; }
.chat-wallpaper-row button { padding: 4px 6px; font-size: 9px; }
.chat-wallpaper-row-action { display: inline-grid; place-items: center; width: 30px; height: 30px; }
.chat-wallpaper-row-action svg { width: 15px; height: 15px; }
.chat-view :focus-visible, .chat-dialog :focus-visible, .chat-wallpaper-drawer :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (min-width: 721px) and (max-width: 1024px) {
  .chat-view { grid-template-columns: minmax(285px, 330px) minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .main-panel:has(> .chat-topbar) > .page-content { padding: 10px; }
  .chat-view { grid-template-columns: minmax(0, 1fr); }
  .chat-module-primary { border-right: 0; padding-right: 15px; }
  .chat-list-panel, .chat-conversation-panel { grid-column: 1; grid-row: 2; min-height: 0; }
  .chat-conversation-header { grid-column: 1; grid-row: 1; }
  .chat-conversation-panel { display: none; }
  .chat-view.has-active-conversation .chat-module-primary { display: none; }
  .chat-view.has-active-conversation .chat-list-panel { display: none; }
  .chat-view.has-active-conversation .chat-conversation-panel { display: grid; }
  .topbar.chat-topbar { flex-wrap: nowrap; }
  .topbar.chat-topbar .topbar-heading { flex: 1 1 auto; }
  .topbar.chat-topbar .topbar-tools-host { flex: 0 0 auto; }
  .chat-mobile-back { display: inline-grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border: 0; border-radius: 7px; background: var(--brand-soft); color: var(--brand-hover); font-size: 22px; }
  .chat-message-unit { max-width: 86%; }
  .chat-message.is-selecting .chat-message-unit { max-width: calc(86% - 25px); }
  .chat-composer { gap: 4px; padding: 7px 7px calc(7px + env(safe-area-inset-bottom)); }
  .chat-composer > .chat-subtle-button { width: 40px; min-width: 40px; min-height: 40px; padding: 5px 6px; }
  .chat-composer .chat-compose-text { min-height: 40px; }
  .chat-composer > button { gap: 0; white-space: nowrap; }
  .chat-composer > button svg { flex-basis: 17px; width: 17px; height: 17px; }
  .chat-composer .chat-send-button { width: 40px; min-width: 40px; min-height: 40px; padding: 0; }
  .chat-composer .chat-composer-label, .chat-composer .chat-send-label { display: none; }
  .chat-manage-wallpapers span { display: none; }
  .chat-wallpaper-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chat-image-viewer-toolbar { gap: 3px; }
  .chat-image-viewer-control { flex-basis: 32px; width: 32px; height: 32px; }
  .chat-image-viewer-toolbar .chat-image-viewer-control:last-child { flex-basis: 44px; width: 44px; height: 44px; }
  .chat-image-viewer-zoom { min-width: 36px; }
}
@media (hover: none) {
  .chat-conversation-quick { opacity: 1; pointer-events: auto; }
  .chat-conversation-row { padding-right: 38px; }
  .chat-message-action { opacity: 1; pointer-events: auto; transform: none; }
  .chat-message.is-mine .chat-message-action { transform: none; }
  .chat-message:not(.is-selecting):not(.is-mine) .chat-bubble { border-radius: 12px 0 0 12px; }
  .chat-message:not(.is-selecting).is-mine .chat-bubble { border-radius: 0 12px 12px 0; }
}