.chat-workspace { display: grid; grid-template-columns: 260px minmax(0, 1fr) 240px; background: #fff; }
.chat-shell { min-width: 0; display: flex; flex-direction: column; border-inline: 1px solid #d6e1df; }
.chat-shell > :not(.chat-history) { flex: 0 0 auto; }
.chat-history { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; }
.chat-history .chat-messages { height: 100%; padding: 16px 20px 24px; scroll-behavior: auto; overscroll-behavior: contain; }
.conversation-header { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 7px 12px; background: #fff; border-bottom: 1px solid #d6e1df; }
.conversation-header .chat-icon-button { width: 40px; height: 40px; flex: 0 0 40px; background: transparent; color: #617773; }
.conversation-heading { flex: 1; min-width: 0; display: grid; gap: 3px; padding: 0; color: #183f37; background: transparent; text-align: left; }
.conversation-heading strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; }
.conversation-heading small { color: #648078; font-size: 12px; font-weight: 400; }
#openConversations, #openMembers { display: none; }
.messenger-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.messenger-panel > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 58px; padding: 12px 16px; font-size: 16px; border-bottom: 1px solid #e5ecea; }
.messenger-panel > header button { display: none; width: 36px; height: 36px; padding: 7px; background: transparent; color: #617773; border-radius: 50%; }
.panel-header-actions { display: flex; align-items: center; gap: 2px; }
.messenger-panel > header #createGroupButton { display: grid; place-items: center; }
.messenger-panel > header button:hover { background: #edf4f2; color: #174d42; }
.messenger-panel > input { width: calc(100% - 24px); min-height: 38px; margin: 10px 12px; padding: 8px 12px; border: 1px solid #e1e8e6; border-radius: 6px; background: #f4f7f6; font-size: 14px; }
.conversation-list, .member-list { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.conversation-row { position: relative; display: flex; min-width: 0; }
.conversation-row:hover { background: #f0f5f4; }
.conversation-row.active { background: #e1f0fa; }
.conversation-open { width: 100%; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 76px; padding: 11px 12px; background: transparent; color: #23443c; text-align: left; }
.member-avatar { display: inline-grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; overflow: hidden; border-radius: 50%; background: #e3eee9; color: #34685a; font-size: 16px; font-weight: 700; }
.member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.member-avatar svg { width: 23px; height: 23px; }
.member-avatar.saved { background: #3a99d3; color: #fff; }
.member-avatar.family { background: #518775; color: #fff; }
.conversation-copy { min-width: 0; flex: 1; display: grid; gap: 5px; }
.conversation-copy strong, .conversation-copy small { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.conversation-copy strong { font-size: 14px; }
.conversation-copy small { color: #72867f; font-size: 12px; height: 19px; }
.conversation-copy .chat-inline-emoji { width: 17px; height: 17px; vertical-align: -4px; }
.conversation-copy .chat-inline-flag { width: 22px; height: 16px; vertical-align: -3px; }
.conversation-status { display: grid; justify-items: end; gap: 6px; align-self: stretch; align-content: center; }
.conversation-status time { color: #84948e; font-size: 10px; }
.conversation-status svg { width: 14px; height: 14px; color: #7c9690; }
.conversation-unread { display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 99px; background: #d44954; color: #fff; font-size: 11px; font-weight: 700; }
.conversation-unread.muted { background: #8b9997; }
.conversation-more { flex: 0 0 24px; width: 24px; padding: 3px; color: #72867f; background: transparent; }
.conversation-more svg { width: 18px; height: 18px; }
.member-row { position: relative; width: 100%; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 88px; padding: 20px 12px 24px; background: transparent; text-align: left; color: #23443c; }
.member-row:hover { background: #f0f5f4; }
.member-row-wrap { position: relative; }
.member-row-wrap .member-row { padding-right: 36px; }
.member-more { position: absolute; right: 5px; top: 50%; width: 30px; height: 30px; display: grid; place-items: center; padding: 5px; transform: translateY(-50%); border-radius: 50%; background: transparent; color: #71857f; }
.member-more:hover { background: #e5efec; color: #174d42; }
.member-more svg { width: 18px; height: 18px; }
.member-copy { min-width: 0; display: grid; gap: 6px; }
.member-copy strong { font-size: 13px; overflow-wrap: anywhere; }
.member-copy small { position: absolute; bottom: 5px; left: 12px; color: #8a9891; font-size: 11px; font-weight: 400; }
.member-role { position: absolute; right: 10px; top: 5px; color: #89978f; font-size: 9px; font-weight: 500; }
.online, .member-copy small.online { color: #329aca; }
.chat-panel-backdrop { position: absolute; inset: 0; z-index: 29; background: rgb(20 35 30 / 30%); border-radius: 0; }
.chat-jump-controls { position: absolute; right: 14px; bottom: 14px; z-index: 7; display: grid; gap: 12px; }
.chat-jump-controls > button { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #d5e2de; border-radius: 50%; background: #fff; color: #4087b2; box-shadow: 0 2px 9px rgb(32 56 49 / 12%); font-size: 25px; font-weight: 700; }
.chat-jump-controls small { position: absolute; top: -7px; right: -3px; min-width: 20px; padding: 3px 5px; border-radius: 99px; background: #438fc3; color: #fff; font-size: 10px; }
.chat-unread-badge.has-mentions { width: 26px; min-width: 26px; height: 26px; padding: 0; place-items: center; overflow: visible; background: #3e93ca; font-size: 17px; font-family: Arial, sans-serif; line-height: 1; }
.chat-unread-badge.has-mentions .mention-symbol { width: 22px; height: 22px; display: grid; place-items: center; overflow: hidden; line-height: 20px; }
.chat-unread-badge.has-mentions small { position: absolute; right: -10px; top: -8px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; border: 1px solid #fff; border-radius: 99px; background: #d44954; color: #fff; font-size: 9px; }
.chat-pinned-bar { min-height: 48px; grid-template-columns: 4px minmax(0, 1fr) 42px; align-items: center; gap: 8px; padding: 5px 10px; background: #fff; }
.chat-pinned-current { min-height: 36px; border: 0; padding: 0 3px; gap: 3px; }
.chat-pinned-current > span { font-size: 11px; font-weight: 700; color: #3787bb; }
.chat-pinned-current > strong { font-size: 13px; font-weight: 400; }
.chat-pinned-arrow { display: grid; place-items: center; height: 34px; border-radius: 4px; color: #628d9d; }
.chat-pinned-arrow svg { width: 21px; height: 21px; }
.chat-pin-segments { height: 36px; display: flex; flex-direction: column; gap: 2px; }
.chat-pin-segments i { flex: 1; min-height: 2px; width: 3px; border-radius: 2px; background: #c5e0ef; }
.chat-pin-segments i.active { background: #3a94c9; }
.chat-message-author { width: fit-content; max-width: 100%; padding: 0; border-radius: 0; background: transparent; text-align: left; overflow-wrap: anywhere; }
.chat-message-meta { max-width: 100%; white-space: nowrap; }
.chat-bubble { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.chat-mention { display: inline; padding: 0; border-radius: 0; border: 0; background: transparent; color: #268ac7; text-decoration: underline; text-underline-offset: 2px; font: inherit; cursor: pointer; }
.chat-mention-picker { position: absolute; bottom: calc(100% + 5px); left: 12px; z-index: 19; width: min(340px, calc(100% - 24px)); max-height: min(300px, 45dvh); overflow: auto; padding: 5px; border: 1px solid #d6e1df; border-radius: 8px; background: #fff; box-shadow: 0 6px 25px rgb(22 53 45 / 15%); }
.mention-option { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px; border-radius: 5px; text-align: left; color: #29473f; background: transparent; }
.mention-option.active, .mention-option:hover { background: #e7f3fb; }
.mention-option > span:last-child { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.mention-option strong { font-size: 14px; }
.mention-option small { font-size: 11px; color: #7d9189; }
.chat-forwarded { display: flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; padding: 4px 0; background: transparent; color: #348ab9; text-align: left; font-size: 12px; overflow-wrap: anywhere; }
.chat-forwarded svg { flex: 0 0 15px; width: 15px; height: 15px; }
.member-profile .modal-body { text-align: center; }
.member-profile h3 { margin: 12px 0 5px; font-size: 21px; overflow-wrap: anywhere; }
.member-profile-avatar { padding: 0; background: transparent; border-radius: 50%; }
.member-profile-avatar .member-avatar { width: 100px; height: 100px; font-size: 32px; }
.member-presence { margin: 0 0 20px; font-size: 13px; color: #789083; }
.member-description { white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; font-size: 15px; line-height: 1.6; }
.member-birthday { text-align: left; font-size: 13px; color: #648078; }
.member-profile-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.member-profile-actions button { display: flex; align-items: center; gap: 7px; min-height: 44px; }
.member-profile-actions svg { width: 18px; height: 18px; }
.member-profile-fields { display: grid; gap: 9px; margin-top: 18px; text-align: left; }
.member-profile-fields section { padding: 11px 12px; border: 1px solid #dfe8e5; border-radius: 6px; background: #f8faf9; }
.member-profile-fields section > strong { display: block; margin-bottom: 4px; color: #46635b; font-size: 12px; }
.member-profile-fields p { margin: 0; }
.member-profile-fields .empty { color: #899690; font-style: italic; }
.chat-date-separator { pointer-events: none; }
.chat-date-separator button { pointer-events: auto; padding: 7px 13px; border: 1px solid rgb(111 145 136 / 28%); border-radius: 99px; background: rgb(235 244 241 / 94%); color: #4d6b64; box-shadow: 0 3px 10px rgb(24 65 57 / 8%); backdrop-filter: blur(8px); font-size: 12px; font-weight: 900; }
.chat-date-separator button:hover { background: #e1f0ec; color: #174d42; }
.emoji-search-wrap { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 7px; padding: 9px 8px 7px; background: #fff; }
.emoji-search-wrap svg { flex: 0 0 17px; width: 17px; height: 17px; color: #71857f; }
.emoji-search, .chat-reaction-picker > .emoji-search { width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid #d8e3df; border-radius: 6px; background: #f4f7f6; color: #183f37; font: inherit; }
.chat-reaction-picker > .emoji-search { width: calc(100% - 18px); margin: 8px 9px 0; }
.emoji-empty { grid-column: 1 / -1; margin: 22px 8px; color: #7b8d87; text-align: center; font-size: 13px; }
.group-editor { width: min(720px, calc(100vw - 32px)); }
.group-editor-form { display: grid; gap: 15px; }
.group-avatar-editor { display: flex; justify-content: center; }
.group-avatar-editor > button { display: grid; justify-items: center; gap: 7px; background: transparent; color: #37645a; font-weight: 700; }
.chat-info-avatar { width: 96px; height: 96px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #e5efec; color: #3b7365; }
.chat-info-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-info-avatar svg { width: 38px; height: 38px; }
.group-member-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.group-member-picker legend { width: 100%; margin-bottom: 8px; color: #29473f; font-weight: 800; }
.group-member-picker legend small { color: #7e918b; font-weight: 400; }
.group-member-options { max-height: min(330px, 42dvh); overflow: auto; border: 1px solid #dce6e3; border-radius: 7px; }
.group-member-option { width: 100%; min-height: 62px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #edf1f0; background: #fff; text-align: left; }
.group-member-option:last-child { border-bottom: 0; }
.group-member-option:hover { background: #f3f7f6; }
.group-member-option input { flex: 0 0 18px; width: 18px; height: 18px; }
.group-member-option .member-avatar { flex-basis: 40px; width: 40px; height: 40px; }
.group-member-option > span { min-width: 0; display: grid; gap: 3px; }
.group-member-option strong { overflow-wrap: anywhere; }
.group-member-option small { color: #7b8d87; font-size: 11px; }
.group-member-option.add > svg { margin-left: auto; width: 18px; height: 18px; }
.group-create-submit { justify-self: end; min-width: 180px; }
.chat-info-window { width: min(650px, calc(100vw - 32px)); }
.chat-info-summary { display: grid; justify-items: center; gap: 8px; text-align: center; }
.chat-info-summary h3 { margin: 4px 0 0; font-size: 22px; overflow-wrap: anywhere; }
.chat-info-summary p { max-width: 520px; margin: 0; color: #667e77; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-invite-field { display: grid; gap: 7px; margin: 20px 0; color: #46635b; font-size: 12px; font-weight: 800; }
.chat-invite-field > span:last-child { display: grid; grid-template-columns: minmax(0, 1fr) 42px; }
.chat-invite-field input { min-width: 0; border-radius: 6px 0 0 6px; }
.chat-invite-field button { display: grid; place-items: center; border: 1px solid #b8ccc6; border-left: 0; border-radius: 0 6px 6px 0; background: #f2f7f5; color: #285f53; }
.chat-invite-field button svg { width: 18px; height: 18px; }
.chat-info-members { margin-top: 18px; border-top: 1px solid #dce5e2; }
.chat-info-members > header { display: flex; justify-content: space-between; padding: 14px 4px 7px; }
.group-info-member { width: 100%; min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid #edf1f0; background: transparent; text-align: left; }
.group-info-member > span:last-child { display: grid; gap: 3px; min-width: 0; }
.group-info-member small { color: #7b8d87; font-size: 11px; }
.chat-info-add { display: flex; align-items: center; gap: 7px; margin: 14px auto 0; }
.chat-info-add svg { width: 18px; height: 18px; }
.chat-calendar-nav { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 8px; }
.chat-calendar-nav strong { text-align: center; text-transform: capitalize; }
.chat-calendar-nav button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: transparent; color: #285f53; }
.chat-calendar-nav button:hover:not(:disabled) { background: #edf4f2; }
.chat-calendar-nav button:disabled { opacity: .28; }
.chat-calendar-weekdays, .chat-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.chat-calendar-weekdays { margin-top: 12px; color: #7d8d88; text-align: center; font-size: 11px; }
.chat-calendar-grid { margin-top: 6px; }
.calendar-day { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: transparent; color: #b1bab7; font-size: 14px; }
.calendar-day.has-messages { color: #111; font-weight: 800; cursor: pointer; }
.calendar-day.has-messages:hover { background: #e7f0ed; }
.calendar-day.current { background: #d8474f; color: #fff; }
.calendar-day.current:hover { background: #bd3640; }
.chat-calendar-hint { margin: 14px 0 0; color: #7b8d87; font-size: 11px; line-height: 1.5; }
.chat-reaction-picker-grid { max-height: min(326px, calc(70vh - 104px)); }
.pinned-message-list button { width: 100%; display: grid; gap: 7px; padding: 14px 8px; background: transparent; text-align: left; border-bottom: 1px solid #e1e8e6; color: #254f43; }
.pinned-message-list span { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-message.highlight .chat-bubble { animation: mention-highlight var(--highlight-duration, 4000ms) ease both; }
@keyframes mention-highlight { 0%, 80% { box-shadow: 0 0 0 3px #65b7e780, 0 0 20px #65b7e730; } 100% { box-shadow: 0 0 0 0 transparent; } }
.relation-badge.draggable { pointer-events: all; cursor: grab; touch-action: none; }
.relation-badge.draggable:active { cursor: grabbing; }
.relation-badge text { font-size: 13px; font-weight: 700; pointer-events: none; }
.relation-badge rect { fill: #fff; }
.person-layer { pointer-events: none; }
.person-card { pointer-events: auto; }
.place-suggestions { z-index: 40; }
@media (max-width: 1199px) {
  .chat-workspace { grid-template-columns: 235px minmax(0, 1fr); }
  .member-panel { display: none; }
  #openMembers { display: grid; }
  .show-members .member-panel { display: flex; position: absolute; inset: 8px 8px 8px auto; width: min(330px, calc(100% - 16px)); z-index: 30; border-radius: 8px; box-shadow: 0 8px 35px #16352840; }
  .show-members .member-panel > header button { display: grid; }
}
@media (max-width: 850px), (max-height: 500px) and (pointer: coarse) {
  .chat-workspace { grid-template-columns: minmax(0, 1fr); }
  .conversation-panel, .member-panel { display: none; }
  #openConversations, #openMembers { display: grid; }
  .show-conversations .conversation-panel, .show-members .member-panel { display: flex; position: absolute; inset: 8px; width: auto; z-index: 30; border-radius: 8px; box-shadow: 0 8px 35px #16352840; }
  .messenger-panel > header button { display: grid; }
  .chat-history .chat-messages { padding: 10px 10px 18px; }
  .conversation-header { min-height: 50px; padding: 4px 8px; }
  .chat-selection-bar { flex-wrap: wrap; padding: 5px 8px; gap: 5px; }
  .chat-selection-bar > div { gap: 5px; flex-wrap: wrap; }
  .chat-selection-bar button { min-height: 34px; padding: 4px 8px; font-size: 12px; }
  .chat-jump-controls { right: 10px; bottom: 10px; }
  .chat-pinned-bar { min-height: 43px; padding: 4px 8px; }
  .chat-pinned-current { min-height: 32px; }
  .chat-pin-segments { height: 30px; }
  .group-editor, .chat-info-window, .chat-calendar-window { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .group-editor .modal-body, .chat-info-window .modal-body { padding: 14px; }
  .group-member-options { max-height: min(310px, 36dvh); }
  .group-create-submit { width: 100%; justify-self: stretch; }
  .chat-info-avatar { width: 82px; height: 82px; }
  .chat-calendar-window .modal-body { padding: 14px; }
}
@media (min-width: 1200px) {
  .chat-panel-backdrop { display: none; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .conversation-header { min-height: 42px; padding-block: 2px; }
  .conversation-heading small { display: none; }
  .chat-pinned-bar { min-height: 36px; padding-block: 2px; }
  .chat-pinned-current { min-height: 30px; }
  .chat-pinned-current > span { font-size: 10px; }
  .chat-pinned-current > strong { font-size: 12px; }
  .chat-typing-bar { min-height: 24px; padding-block: 3px; }
  .group-editor-form { grid-template-columns: 130px minmax(0, 1fr); align-items: start; }
  .group-avatar-editor { grid-row: 1 / span 2; }
  .group-member-picker, .group-create-submit { grid-column: 1 / -1; }
  .group-member-options { max-height: 140px; }
  .chat-info-window .modal-body { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.2fr); gap: 12px 20px; }
  .chat-info-summary { align-content: start; }
  .chat-invite-field, .chat-info-members, .chat-info-add { grid-column: 2; }
}