.group-chat-panel { position: fixed; inset: 0 0 0 var(--sidebar-w, 344px); z-index: 1200; display: flex; flex-direction: column; background: var(--bg-primary, #fff); color: var(--text, #202020); padding-top: env(safe-area-inset-top, 0px); box-sizing: border-box; }
.group-chat-header { display: flex; align-items: center; gap: 14px; padding: 18px 24px 12px; border-bottom: 1px solid var(--border, #ddd); }
.group-chat-panel button { font: inherit; color: inherit; cursor: pointer; background: transparent; border: 0; }
.group-chat-panel button:disabled { opacity: .45; cursor: default; }
.group-chat-back { font-size: 24px !important; min-width: 40px; min-height: 40px; border-radius: 12px; }
.group-chat-heading { text-align: left; flex: 1; min-width: 0; }
.group-chat-heading strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; }
.group-chat-heading small { display: block; opacity: .6; margin-top: 4px; }
.group-chat-members { padding: 10px 12px; border-radius: 12px; font-size: 13px !important; }
.group-chat-tools { display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 24px; }
.group-chat-tools button { font-size: 12px; opacity: .7; padding: 5px 0; }
.group-chat-thread { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 8px 24px 24px; }
.group-chat-thread .messages { display: flex; flex-direction: column; gap: 14px; max-width: 820px; margin: 0 auto; padding: 0; }
.group-chat-thread .fork-chat-row { position: relative; flex-direction: column; align-items: flex-start; }
.group-chat-thread .fork-chat-row--end { align-items: flex-end; }
.group-chat-message-actions { display: flex; gap: 12px; padding: 4px 8px 0; opacity: .5; }
.group-chat-message-actions button { font-size: 11px; padding: 3px 0; }
.group-chat-message-actions:hover, .group-chat-message-actions:focus-within { opacity: 1; }
.group-chat-composer { margin: 0 auto; width: min(820px, 100%); padding: 0 24px calc(18px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
.group-chat-input-row { display: flex; align-items: flex-end; gap: 10px; border: 1px solid var(--border, #ddd); border-radius: 24px; padding: 8px; background: var(--bg-secondary, #f7f7f7); }
.group-chat-input-row textarea { resize: none; min-width: 0; flex: 1; box-sizing: border-box; background: transparent; color: inherit; border: 0; outline: none; padding: 10px 0; font: inherit; font-size: 16px; max-height: 150px; line-height: 1.4; }
.group-chat-attach, .group-chat-send { width: 40px; height: 40px; border-radius: 50%; font-size: 24px !important; }
.group-chat-panel .group-chat-send { background: var(--text, #202020); color: var(--bg-primary, #fff); }
.group-chat-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 8px; max-height: 180px; overflow: auto; }
.group-chat-preview:not(:empty) { padding-bottom: 12px; }
.group-chat-preview .photo-thumb { width: 78px; height: 78px; position: relative; }
.group-chat-draft-reply { width: 100%; display: flex; justify-content: space-between; gap: 12px; padding: 8px; border-left: 3px solid currentColor; font-size: 13px; box-sizing: border-box; }
.group-chat-draft-reply span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.group-chat-error { margin: 0 auto; width: min(820px, 100%); padding: 4px 24px 10px; box-sizing: border-box; font-size: 13px; color: #d45a4c; }
.group-chat-error:empty { padding: 0; }
.group-chat-older { display: block; margin: 4px auto 20px; font-size: 13px !important; }
.group-chat-older[hidden], .group-chat-tools button[hidden] { display: none; }
.group-name-input { width: 100%; box-sizing: border-box; border: 1px solid var(--border, #ddd); border-radius: 12px; padding: 12px; background: transparent; color: inherit; font: inherit; }
.group-create-button { width: 100%; margin-top: 20px; padding: 12px; border-radius: 12px; border: 0; background: var(--text, #202020); color: var(--bg-primary, #fff); font: inherit; cursor: pointer; }
.group-member-controls { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.group-member-controls button { font-size: 11px; padding: 6px 8px; }
.sidebar-group-create { background: transparent; border: 0; color: inherit; font: inherit; padding: 8px; cursor: pointer; border-radius: 10px; }
.group-chat-open .sidebar-chat-item.active { background: transparent; }
.group-chat-open .sidebar-chat-item.group-active { background: var(--bg-secondary, #eeeeee); }
@media (max-width: 899px) { .group-chat-panel { left: 0; } .group-chat-header { padding: 12px 12px 10px; } .group-chat-tools { padding: 8px 16px; gap: 12px; } .group-chat-thread { padding: 8px 14px 20px; } .group-chat-composer { padding-left: 12px; padding-right: 12px; } .group-chat-members { font-size: 12px !important; } .group-member-controls { max-width: 150px; } }
@media (hover: hover) { .group-chat-panel button:hover, .sidebar-group-create:hover { background-color: var(--bg-secondary, #eee); } }