/* UI/Pages/Chat/Style.css */
@media (max-width:767px) {
    .mobile-sidebar-open { transform:translateX(0) !important;box-shadow:0 0 40px rgba(0,0,0,.6); }
    .mobile-sidebar-closed { transform:translateX(-100%) !important; }
}
#mobile-overlay { transition:opacity .3s ease; }

#profile-panel { display:flex; }
@media (min-width:1024px) {
    #profile-panel.profile-hidden {
        width:0 !important;opacity:0;margin-left:-12px;padding:0 !important;border-width:0 !important;overflow:hidden;
    }
}
@media (max-width:1023px) {
    #profile-panel {
        position:fixed;left:0;right:0;bottom:0;top:auto;z-index:60;width:100%;height:92dvh;
        border-radius:24px 24px 0 0;border-width:1px 0 0;
        transition:transform .5s var(--ease);
    }
    #profile-panel.profile-hidden {
        transform:translateY(100%);visibility:hidden;
        transition:transform .5s var(--ease),visibility 0s linear .5s;
    }
}
#profile-panel.no-anim { transition:none !important; }

#send-btn { transition:width .3s var(--ease),opacity .2s ease,transform .3s var(--ease),margin .3s var(--ease),background-color .25s var(--ease),box-shadow .25s var(--ease);width:40px; }
#send-btn.send-hidden { width:0;opacity:0;transform:scale(.5);pointer-events:none;margin-left:-4px; }

button[aria-label="Новый чат"] svg { transform-origin:center; }

/* Long words / links must not break the layout */
main p,main .bg-void-500,#pf-body h2,#pf-body p,#pf-body .pf-card { overflow-wrap:anywhere; }

/* ---- chat list ---- */
.chat-item { display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;cursor:pointer;color:#737373;border:1px solid transparent; }
.chat-item:hover { background:rgba(18,18,18,.6);color:#a3a3a3; }
.chat-item.on { background:#121212;border-color:rgba(26,26,26,.8);color:#e5e5e5; }
.chat-av,.av-letter { display:flex;align-items:center;justify-content:center;font-weight:500;color:#a3a3a3; }
.chat-av { width:48px;height:48px;border-radius:50%;background:#1a1a1a;border:1px solid #262626;font-size:18px;flex-shrink:0; }
.chat-row { display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px; }
.chat-name { font-size:14px;font-weight:500;color:#e5e5e5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0; }
.chat-time { font-size:12px;color:#404040;flex-shrink:0; }
.chat-last { font-size:14px;color:#737373;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.chat-empty { padding:36px 18px;text-align:center; }
.chat-empty-t { color:#a3a3a3;font-size:14px;font-weight:500; }
.chat-empty-d { color:#404040;font-size:13px;margin-top:6px;line-height:1.5; }
.av-letter { width:100%;height:100%;font-size:16px; }
.av-letter.av-lg { font-size:30px;color:#737373; }
.chat-blank { height:100%;min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#404040;gap:6px; }
.chat-blank svg { color:#262626;margin-bottom:8px;width:36px;height:36px; }
.chat-blank-t { color:#737373;font-size:15px;font-weight:500; }
.chat-blank-d { font-size:13px; }
.day-sep { display:flex;align-items:center;justify-content:center;margin:8px 0; }
.day-sep i { height:1px;background:rgba(26,26,26,.8);flex:1; }
.day-sep span { padding:0 16px;font-size:11px;font-weight:500;color:#737373;text-transform:uppercase;letter-spacing:.14em; }

/* ---- system message: group invite ---- */
.sys-msg { display:flex;flex-direction:column;align-items:center;gap:8px; }
.sys-label { font-size:11px;color:#404040;letter-spacing:.06em;text-transform:uppercase; }
.invite-card { width:340px;max-width:100%;border-radius:20px;overflow:hidden;position:relative;background:#050505;border:1px solid #1a1a1a;box-shadow:0 12px 36px rgba(0,0,0,.45); }
.invite-banner { height:84px; }
.invite-avatar { position:absolute;left:18px;top:52px;width:60px;height:60px;border-radius:18px;border:4px solid #050505;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:600;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5); }
.invite-body { padding:40px 18px 18px; }
.invite-kicker { font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#404040; }
.invite-name { margin-top:4px;font-size:18px;font-weight:500;color:#e5e5e5;overflow-wrap:anywhere; }
.invite-desc { margin-top:6px;font-size:13px;line-height:1.5;color:#a3a3a3;overflow-wrap:anywhere; }
.invite-meta { margin-top:10px;font-size:12px;color:#737373; }
.invite-actions { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px; }
.invite-btn { padding:10px;border-radius:12px;font-size:13px;font-weight:500;color:#e5e5e5;background:#121212;border:1px solid #262626; }
.invite-btn:hover { background:#1a1a1a;border-color:#404040; }
.invite-btn.primary { background:#e5e5e5;color:#050505;border-color:#e5e5e5; }
.invite-btn.primary:hover { background:#fff; }
.invite-btn:disabled { opacity:.5;pointer-events:none; }
.invite-state { margin-top:14px;padding:10px 12px;border-radius:12px;background:#0a0a0a;border:1px solid #1a1a1a;font-size:13px;color:#a3a3a3;text-align:center; }
.is-hidden { display:none !important; }

/* ---- profile: write button / errors ---- */
.pf-write { width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:12px;font-size:14px;font-weight:500;background:#e5e5e5;color:#050505; }
.pf-write:hover { background:#fff; }
.pf-write:disabled { opacity:.6;pointer-events:none; }
.pf-err { margin-top:10px;padding:10px 12px;border-radius:12px;font-size:13px;text-align:center;color:#e5e5e5;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.28); }

/* ---- toast ---- */
#toast { position:fixed;left:50%;bottom:24px;z-index:200;max-width:min(92vw,420px);padding:12px 18px;border-radius:14px;font-size:14px;color:#e5e5e5;background:#121212;border:1px solid #404040;box-shadow:0 12px 40px rgba(0,0,0,.6);
    transform:translate(-50%,calc(100% + 40px));transition:transform .45s var(--ease);pointer-events:none;text-align:center; }
#toast.show { transform:translate(-50%,0); }
#toast.err { border-color:rgba(255,255,255,.5); }

/* ---- messages ---- */
.msg-text { white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word; }
.msg-pending { opacity:.55; }
.msg-failed .msg-text { outline:1px dashed rgba(255,255,255,.45);outline-offset:2px; }
.msg-retry { font-size:12px;color:#e5e5e5;text-decoration:underline;text-underline-offset:3px;padding:2px 0; }
.older-hint { text-align:center;font-size:12px;color:#404040;padding:4px 0; }
.chat-badge { flex-shrink:0;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:#e5e5e5;color:#050505;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center; }

/* аватар группы в списке чатов: цвета берутся из цветов группы */
.chat-av-group { color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.45);border-color:rgba(255,255,255,.12); }
.invite-open { display:block;width:100%;margin-top:8px; }
.msg-text { overflow-wrap:anywhere; }

/* ---- анимации появления (только для новых сообщений/событий, не при открытии чата) ---- */
@keyframes msg-in-mine   { from { opacity:0;transform:translateY(18px) scale(.94); } to { opacity:var(--op,1);transform:none; } }
@keyframes msg-in-theirs { from { opacity:0;transform:translateX(-16px) scale(.96); } to { opacity:var(--op,1);transform:none; } }
@keyframes invite-in     { 0% { opacity:0;transform:translateY(22px) scale(.9) rotate(-1.4deg); } 60% { opacity:1;transform:translateY(-4px) scale(1.015) rotate(.3deg); } 100% { opacity:1;transform:none; } }
@keyframes flash-soft    { 0% { background-color:rgba(255,255,255,.16); } 100% { background-color:transparent; } }
@keyframes pop           { 0% { transform:scale(.4); } 55% { transform:scale(1.25); } 100% { transform:scale(1); } }
@keyframes list-in       { from { opacity:0;transform:translateY(-10px) scale(.97); } to { opacity:1;transform:none; } }
@keyframes plane-fly     { 0% { transform:translate(0,0);opacity:1; } 45% { transform:translate(16px,-16px);opacity:0; } 46% { transform:translate(-14px,14px);opacity:0; } 100% { transform:translate(0,0);opacity:1; } }
.msg-anim-mine   { animation:msg-in-mine .55s var(--ease) backwards;transform-origin:100% 100%; }
.msg-anim-theirs { animation:msg-in-theirs .55s var(--ease) backwards;transform-origin:0 100%; }
.msg-anim-theirs .msg-text { border-radius:12px;animation:flash-soft 1.1s ease-out; }
.msg-anim-invite { animation:invite-in .8s var(--ease) backwards;transform-origin:50% 100%; }
.msg-pending { --op:.55; }
.invite-changed.invite-card { animation:pop-card .5s var(--ease); }
.invite-state.invite-changed { animation:flash-soft 1.2s ease-out; }
@keyframes pop-card { 0% { transform:scale(.97); } 100% { transform:none; } }
.chat-item-new { animation:list-in .5s var(--ease) backwards; }
.badge-pop { animation:pop .45s var(--ease); }
#send-btn.sent svg { animation:plane-fly .45s var(--ease); }

/* аватарка и ник автора сообщения открывают профиль */
.msg-who[data-profile] { cursor:pointer; }
span.msg-who[data-profile]:hover { text-decoration:underline;text-underline-offset:3px; }