.content.chat-page { width: 100%; max-width: none; padding: 18px 20px 24px; }
.chat-workspace { display: grid; grid-template-columns: 288px minmax(460px, 1fr) 238px; min-height: 680px; height: calc(100vh - 110px); overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-md); }
.chat-sidebar { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border-right: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), var(--surface-soft)); }
.chat-sidebar > header { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 17px; border-bottom: 1px solid var(--line); }
.chat-sidebar > header span { display: block; margin-bottom: 3px; color: var(--orange); font-size: .62rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.chat-sidebar > header h1 { margin: 0; color: var(--ink); font-size: 1.15rem; letter-spacing: -.025em; }
.chat-sidebar > header button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #f9731644; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--orange), var(--orange-deep)); box-shadow: 0 10px 24px #f7682b35; font-size: 1.45rem; cursor: pointer; }
.chat-status { display: flex; align-items: center; gap: 10px; margin: 12px 14px 4px; padding: 10px 12px; border: 1px solid #18a87535; border-radius: 13px; background: var(--green-soft); }
.chat-status > i { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px #18a8751f, 0 0 11px #18a87588; }
.chat-status span { min-width: 0; }
.chat-status strong, .chat-status small { display: block; }
.chat-status strong { color: var(--ink); font-size: .73rem; }
.chat-status small { margin-top: 2px; color: var(--muted); font-size: .62rem; }
.chat-status button { margin-left: auto; padding: 5px 7px; border: 1px solid #18a87555; border-radius: 8px; color: #087957; background: transparent; font-size: .55rem; font-weight: 800; cursor: pointer; }
.chat-channel-list { min-height: 0; flex: 1; overflow: auto; padding: 8px 10px 20px; scrollbar-width: thin; scrollbar-color: #71809655 transparent; }
.chat-channel-section > span { display: block; padding: 13px 9px 7px; color: var(--muted); font-size: .61rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.chat-channel { position: relative; display: grid; width: 100%; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 3px 0; padding: 9px 8px; border: 1px solid transparent; border-radius: 13px; color: var(--ink); text-align: left; background: transparent; cursor: pointer; transition: .16s ease; }
.chat-channel:hover { border-color: var(--line); background: var(--surface); }
.chat-channel.active { border-color: #f7682b55; background: linear-gradient(100deg, var(--orange-soft), var(--surface)); box-shadow: inset 3px 0 var(--orange), var(--shadow-sm); }
.chat-channel-icon { position: relative; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid color-mix(in srgb, var(--chat-color) 42%, transparent); border-radius: 12px; color: var(--chat-color); background: color-mix(in srgb, var(--chat-color) 13%, transparent); font-size: .75rem; font-style: normal; font-weight: 900; }
.chat-channel-icon > i { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border: 2px solid var(--surface); border-radius: 50%; background: var(--green); }
.chat-channel > span:nth-child(2) { min-width: 0; }
.chat-channel strong, .chat-channel small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-channel strong { color: var(--ink); font-size: .76rem; }
.chat-channel small { margin-top: 4px; color: var(--muted); font-size: .62rem; font-weight: 550; }
.chat-channel > b { display: grid; min-width: 21px; height: 21px; place-items: center; padding: 0 5px; border-radius: 999px; color: #fff; background: var(--orange); font-size: .6rem; }
.chat-channel-empty { margin: 6px 8px; color: var(--muted); font-size: .68rem; }
.chat-conversation { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto auto minmax(0, 1fr) 22px auto auto; background: var(--surface); }
.chat-conversation-header { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 20px; border-bottom: 1px solid var(--line); }
.chat-conversation-header > div { display: flex; min-width: 0; align-items: center; gap: 11px; }
.chat-conversation-header > div > span:last-child { min-width: 0; }
.chat-conversation-header strong, .chat-conversation-header small { display: block; }
.chat-conversation-header strong { color: var(--ink); font-size: .95rem; }
.chat-conversation-header small { max-width: 440px; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
#chat-search-form { display: flex; height: 38px; min-width: 210px; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
#chat-search-form input { width: 170px; height: 100%; border: 0; outline: none; color: var(--ink); background: transparent; font-size: .7rem; }
#chat-search-form button { width: 35px; height: 100%; border: 0; color: var(--muted); background: transparent; cursor: pointer; }
.chat-pinned { padding: 8px 15px 0; }
.chat-pinned button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid #e7a91255; border-radius: 12px; color: var(--ink); text-align: left; background: var(--yellow-soft); cursor: pointer; }
.chat-pinned i { color: var(--yellow); font-size: 1rem; }
.chat-pinned span { min-width: 0; }
.chat-pinned strong, .chat-pinned small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-pinned strong { font-size: .68rem; }
.chat-pinned small { margin-top: 2px; color: var(--muted); font-size: .61rem; }
.chat-message-list { min-height: 0; overflow-y: auto; padding: 18px 22px 14px; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #71809655 transparent; background-image: radial-gradient(circle at 20% 20%, #f7682b08 0, transparent 24%), radial-gradient(circle at 80% 80%, #5267e808 0, transparent 25%); }
.chat-message { position: relative; display: flex; max-width: min(720px, 82%); align-items: flex-start; gap: 9px; margin: 0 0 15px; }
.chat-message.own { margin-left: auto; flex-direction: row-reverse; }
.chat-message > .avatar { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 11px; color: #fff; font-size: .65rem; font-weight: 850; }
.chat-message-content { position: relative; min-width: 0; }
.chat-message-content > header { display: flex; align-items: center; gap: 7px; margin: 0 4px 5px; }
.chat-message.own .chat-message-content > header { justify-content: flex-end; }
.chat-message-content > header strong { color: var(--ink); font-size: .68rem; }
.chat-message-content > header time, .chat-message-content > header em { color: var(--muted); font-size: .56rem; font-style: normal; }
.chat-message-content > header b { padding: 2px 6px; border-radius: 999px; color: #996b00; background: var(--yellow-soft); font-size: .52rem; }
.chat-bubble { min-width: 96px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px 16px 16px 16px; color: var(--ink); background: var(--surface-soft); box-shadow: var(--shadow-sm); }
.chat-message.own .chat-bubble { border-color: #f7682b45; border-radius: 16px 5px 16px 16px; background: linear-gradient(135deg, var(--orange-soft), var(--surface)); }
.chat-bubble > p { margin: 0; padding: 10px 13px; font-size: .76rem; line-height: 1.48; overflow-wrap: anywhere; }
.chat-bubble a { color: #3b5bd6; text-decoration: underline; }
.chat-mention { padding: 1px 4px; border-radius: 5px; color: #b64c13; background: #f7682b18; font-weight: 800; }
.chat-reply-preview { margin: 7px 8px 0; padding: 7px 9px; overflow: hidden; border-left: 3px solid var(--orange); border-radius: 7px; background: #64748b12; }
.chat-reply-preview strong, .chat-reply-preview span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-reply-preview strong { color: var(--orange-deep); font-size: .6rem; }
.chat-reply-preview span { margin-top: 2px; color: var(--muted); font-size: .59rem; }
.chat-message.deleted .chat-bubble { opacity: .68; border-style: dashed; box-shadow: none; }
.chat-message.deleted .chat-bubble p { color: var(--muted); font-style: italic; }
.chat-message-content > footer { height: 14px; padding: 3px 5px 0; color: var(--muted); text-align: right; font-size: .54rem; }
.chat-message-actions { position: absolute; z-index: 3; top: -11px; right: 4px; display: flex; padding: 3px; opacity: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); box-shadow: var(--shadow-sm); transform: translateY(3px); transition: .15s ease; }
.chat-message.own .chat-message-actions { right: auto; left: 4px; }
.chat-message:hover .chat-message-actions, .chat-message:focus-within .chat-message-actions { opacity: 1; transform: none; }
.chat-message-actions button { display: grid; width: 27px; height: 25px; place-items: center; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: .7rem; cursor: pointer; }
.chat-message-actions button:hover { color: #fff; background: var(--orange); }
.chat-image { display: block; max-width: 420px; padding: 6px; }
.chat-image img { display: block; width: 100%; max-height: 340px; border-radius: 11px; object-fit: cover; }
.chat-file { display: flex; min-width: 260px; align-items: center; gap: 10px; padding: 10px 12px; text-decoration: none !important; }
.chat-file > i { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 10px; color: #fff; background: var(--blue); font-style: normal; }
.chat-file strong, .chat-file small { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file strong { color: var(--ink); font-size: .69rem; }
.chat-file small { margin-top: 3px; color: var(--muted); font-size: .58rem; }
.chat-audio { display: flex; min-width: 290px; align-items: center; gap: 8px; padding: 8px 10px; }
.chat-audio > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: #fff; background: var(--orange); font-size: .65rem; }
.chat-audio audio { width: 245px; height: 34px; }
.chat-typing { min-height: 22px; padding: 2px 24px; color: var(--muted); font-size: .62rem; font-style: italic; }
.chat-composer-context { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 16px 7px; padding: 8px 11px; border-left: 3px solid var(--orange); border-radius: 9px; color: var(--ink); background: var(--orange-soft); }
.chat-composer-context span { min-width: 0; }
.chat-composer-context strong, .chat-composer-context small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-composer-context strong { font-size: .65rem; }
.chat-composer-context small { margin-top: 2px; color: var(--muted); font-size: .58rem; }
.chat-composer-context button { border: 0; color: var(--muted); background: transparent; cursor: pointer; }
.chat-composer { display: flex; align-items: flex-end; gap: 8px; margin: 0 16px 15px; padding: 8px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); box-shadow: 0 10px 30px #0f172a12; }
.chat-composer textarea { min-height: 38px; max-height: 130px; flex: 1; resize: none; border: 0; outline: 0; color: var(--ink); background: transparent; line-height: 1.4; }
.chat-attach, .chat-audio-button, .chat-send-button { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: var(--surface-soft); font-size: 1rem; cursor: pointer; }
.chat-send-button { border-color: transparent; color: #fff; background: linear-gradient(135deg, var(--orange), var(--orange-deep)); box-shadow: 0 8px 20px #f7682b35; }
.chat-audio-button.recording { color: #fff; border-color: var(--red); background: var(--red); animation: chat-pulse 1s infinite; }
.chat-members { min-width: 0; overflow-y: auto; border-left: 1px solid var(--line); background: var(--surface-soft); }
.chat-members-heading { display: flex; align-items: center; justify-content: space-between; padding: 21px 16px 12px; }
.chat-members-heading strong { color: var(--ink); font-size: .76rem; }
.chat-members-heading span { display: grid; min-width: 23px; height: 23px; place-items: center; border-radius: 999px; color: var(--muted); background: var(--line); font-size: .58rem; }
.chat-members-list { padding: 2px 9px 16px; }
.chat-members-list button { display: flex; width: 100%; align-items: center; gap: 9px; padding: 8px; border: 0; border-radius: 11px; color: var(--ink); text-align: left; background: transparent; cursor: pointer; }
.chat-members-list button:hover:not(:disabled) { background: var(--surface); box-shadow: var(--shadow-sm); }
.chat-members-list button:disabled { cursor: default; }
.chat-members-list .avatar, .chat-direct-list .avatar, .chat-group-members .avatar { position: relative; display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 11px; color: #fff; font-size: .62rem; font-weight: 850; }
.chat-members-list .avatar i { position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border: 2px solid var(--surface-soft); border-radius: 50%; background: #94a3b8; }
.chat-members-list .avatar i.online { background: var(--green); }
.chat-members-list strong, .chat-members-list small { display: block; }
.chat-members-list strong { color: var(--ink); font-size: .68rem; }
.chat-members-list small { margin-top: 3px; color: var(--muted); font-size: .57rem; }
.chat-shortcuts { display: grid; gap: 8px; margin: 4px 13px 20px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; color: var(--muted); background: var(--surface); font-size: .58rem; }
.chat-shortcuts strong { margin-bottom: 3px; color: var(--ink); font-size: .66rem; }
.chat-shortcuts kbd { padding: 2px 5px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--ink); background: var(--surface-soft); box-shadow: 0 1px 0 var(--line-strong); }
.chat-shortcuts b { color: var(--orange); }
.chat-welcome { display: grid; min-height: 320px; place-items: center; align-content: center; padding: 40px; text-align: center; }
.chat-welcome > span { display: grid; width: 62px; height: 62px; place-items: center; border: 1px solid #f7682b55; border-radius: 19px; color: #fff; background: linear-gradient(135deg, #202838, #111827); box-shadow: 0 0 0 7px #f7682b0b, 0 15px 35px #0f172a22; font-weight: 900; }
.chat-welcome h3 { margin: 17px 0 6px; color: var(--ink); }
.chat-welcome p { margin: 0; color: var(--muted); font-size: .75rem; }
.chat-new-modal { display: grid; gap: 20px; }
.chat-new-modal section, #chat-group-form { padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-soft); }
.chat-new-modal section > strong, #chat-group-form > strong { color: var(--ink); }
.chat-new-modal section > p, #chat-group-form > p { margin: 5px 0 12px; color: var(--muted); font-size: .7rem; }
.chat-direct-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.chat-direct-list button { display: flex; align-items: center; gap: 9px; padding: 8px; border: 1px solid var(--line); border-radius: 11px; text-align: left; background: var(--surface); cursor: pointer; }
.chat-direct-list strong, .chat-direct-list small { display: block; }
.chat-direct-list strong { color: var(--ink); font-size: .68rem; }
.chat-direct-list small { margin-top: 2px; color: var(--muted); font-size: .57rem; }
.chat-group-members { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 11px 0 14px; }
.chat-group-members label { display: flex; align-items: center; gap: 7px; padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.chat-group-members .avatar { width: 30px; height: 30px; }
.chat-group-members strong { overflow: hidden; color: var(--ink); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-nav-badge { display: grid; min-width: 20px; height: 20px; place-items: center; margin-left: auto; padding: 0 5px; border-radius: 999px; color: #fff; background: #ef4444; box-shadow: 0 0 0 3px #ef44441c; font-size: .55rem; font-style: normal; }
.nav-tone-chat .nav-icon { color: #20b486; background: #20b48614; }
.nav-tone-chat.active .nav-icon { color: #fff; background: #20b486; box-shadow: 0 0 18px #20b48655; }
@keyframes chat-pulse { 50% { box-shadow: 0 0 0 7px #dc3f5020; } }
html[data-theme="black"] .chat-workspace { border-color: #263246; background: #0d131e; box-shadow: 0 25px 70px #0008; }
html[data-theme="black"] :is(.chat-sidebar, .chat-members) { border-color: #263246; background: linear-gradient(180deg, #0d141f, #0a1019); }
html[data-theme="black"] :is(.chat-sidebar > header, .chat-conversation-header) { border-color: #263246; }
html[data-theme="black"] .chat-conversation { background: #0b111a; }
html[data-theme="black"] .chat-message-list { background-color: #0b111a; background-image: radial-gradient(circle at 20% 20%, #f7682b0c 0, transparent 26%), radial-gradient(circle at 80% 80%, #5267e80c 0, transparent 28%); }
html[data-theme="black"] :is(.chat-sidebar h1, .chat-channel strong, .chat-conversation-header strong, .chat-message-content > header strong, .chat-file strong, .chat-members-heading strong, .chat-members-list strong, .chat-shortcuts strong, .chat-welcome h3, .chat-new-modal strong, .chat-group-members strong) { color: #edf3fb; }
html[data-theme="black"] .chat-channel:hover { border-color: #2a374b; background: #111a27; }
html[data-theme="black"] .chat-channel.active { border-color: #6b3a22; background: linear-gradient(100deg, #281810, #111925); }
html[data-theme="black"] .chat-status { border-color: #1f5b49; background: #0e271f; }
html[data-theme="black"] .chat-status strong { color: #79e4c1; }
html[data-theme="black"] #chat-search-form { border-color: #2b384c; background: #111a27; }
html[data-theme="black"] #chat-search-form input { color: #edf3fb; }
html[data-theme="black"] .chat-bubble { color: #dce5f1; border-color: #2a374b; background: #131c29; box-shadow: none; }
html[data-theme="black"] .chat-message.own .chat-bubble { border-color: #6b3a22; background: linear-gradient(135deg, #291910, #151d29); }
html[data-theme="black"] .chat-message-actions { border-color: #2a374b; background: #111925; }
html[data-theme="black"] .chat-composer { border-color: #304057; background: #101824; box-shadow: 0 15px 35px #0005; }
html[data-theme="black"] .chat-composer textarea { color: #edf3fb; }
html[data-theme="black"] :is(.chat-attach, .chat-audio-button) { border-color: #2b384c; background: #172231; }
html[data-theme="black"] :is(.chat-pinned button, .chat-composer-context) { color: #dce5f1; border-color: #59471f; background: #2a2110; }
html[data-theme="black"] :is(.chat-members-list button:hover, .chat-shortcuts, .chat-new-modal section, html[data-theme="black"] #chat-group-form, .chat-direct-list button, .chat-group-members label) { border-color: #263246; background: #111925; }
html[data-theme="black"] .chat-channel-icon > i, html[data-theme="black"] .chat-members-list .avatar i { border-color: #0c131e; }
@media (max-width: 1260px) { .chat-workspace { grid-template-columns: 260px minmax(430px, 1fr); } .chat-members { display: none; } }
@media (max-width: 880px) { .content.chat-page { padding: 10px; } .chat-workspace { height: auto; min-height: calc(100vh - 90px); grid-template-columns: 1fr; grid-template-rows: auto minmax(620px, 1fr); border-radius: 15px; } .chat-sidebar { max-height: 235px; border-right: 0; border-bottom: 1px solid var(--line); } .chat-sidebar > header { min-height: 65px; } .chat-status { display: none; } .chat-channel-list { display: flex; gap: 8px; overflow-x: auto; padding: 8px; } .chat-channel-section { display: contents; } .chat-channel-section > span, .chat-channel-empty { display: none; } .chat-channel { min-width: 180px; max-width: 220px; } .chat-conversation-header { min-height: 72px; } }
@media (max-width: 620px) { .chat-workspace { min-height: calc(100vh - 72px); border-radius: 0; } .chat-message-list { padding: 15px 10px; } .chat-message { max-width: 94%; } .chat-conversation-header { align-items: flex-start; flex-direction: column; gap: 8px; padding: 10px; } #chat-search-form { width: 100%; } #chat-search-form input { flex: 1; width: auto; } .chat-composer { margin: 0 7px 8px; } .chat-direct-list, .chat-group-members { grid-template-columns: 1fr; } }