/* Чат встречи: компактный блок, раздел «Сообщения» и навигация. */

/* --- навигация --- */
.club-header details.nav-dropdown{position:relative}
.club-nav details.nav-dropdown>summary{list-style:none;padding:10px;font-weight:600;color:inherit;display:inline-flex;align-items:center;gap:6px;border-radius:9px}
.club-nav details.nav-dropdown>summary::-webkit-details-marker{display:none}
.club-nav details.nav-dropdown>summary::after{content:"▾";font-size:.8rem;color:inherit}
.club-nav details.nav-dropdown>summary:hover:not(.selected){color:var(--red)}
.club-nav details.nav-dropdown[open]>summary{color:var(--red)}
.nav-dropdown-menu{position:absolute;z-index:40;top:calc(100% + 4px);left:0;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(25,26,33,.14);padding:8px;display:flex;flex-direction:column}
.nav-dropdown-menu a,.nav-dropdown-menu button{display:block;width:100%;text-align:left;padding:11px 12px;border-radius:8px;font-weight:600;font-size:.9rem;color:var(--ink)}
.nav-dropdown-menu a:hover,.nav-dropdown-menu button:hover{background:var(--paper);color:var(--red)}
.nav-dropdown-menu form{margin:0}
.account-menu .nav-dropdown-menu{left:auto;right:0}
.account-summary{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid #cdd0d6;border-radius:999px;font-weight:650;font-size:.9rem;list-style:none}
.account-summary::-webkit-details-marker{display:none}
.avatar-mini{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f1e6e9;color:var(--red);font-weight:750;text-transform:uppercase}
.nav-messages{display:inline-flex;align-items:center;gap:7px}
.nav-badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--red);color:#fff;font-size:.75rem;font-weight:750;line-height:1}
.manage-hub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.manage-card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.manage-card:hover{border-color:var(--red)}
.manage-card strong{font-size:1.15rem}
.manage-card span{color:var(--muted);font-size:.9rem}

/* --- компактный блок под встречей --- */
.chat-block{scroll-margin-top:20px}
.chat-block .section-row{align-items:baseline}
.chat-last{margin:14px 0 0;overflow-wrap:anywhere}
.chat-last span{color:var(--muted)}
.chat-block-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px}
.chat-block-actions .button{margin:0}
.chat-block-actions .secondary-link{margin:0}
.chat-inline-panel{margin-top:18px;border-top:1px solid var(--line);padding-top:8px}
.chat-inline-panel .chat-messages{max-height:420px;overflow-y:auto}

/* --- раздел «Сообщения» --- */
.chat-layout{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);gap:22px;align-items:start}
.chat-list{display:flex;flex-direction:column;gap:10px}
.chat-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.chat-filters a{padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:.875rem;font-weight:600;line-height:1.2}
.chat-filters a:hover{border-color:var(--red)}
.chat-filters a.selected{background:var(--red);border-color:var(--red);color:#fff}
.chat-list-item{display:flex;flex-direction:column;gap:5px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-width:0}
.chat-list-item:hover{border-color:var(--red)}
.chat-list-item.active{border-color:var(--red);box-shadow:0 0 0 2px rgba(166,36,54,.12)}
.chat-list-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.chat-list-top strong{overflow-wrap:anywhere}
.chat-unread{flex-shrink:0;display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--red);color:#fff;font-size:.8rem;font-weight:750}
.chat-preview{color:var(--muted);font-size:.9rem;overflow-wrap:anywhere}
.chat-preview strong{color:var(--ink)}
.chat-list-marks{display:flex;flex-wrap:wrap;gap:6px}
.chat-list-marks:empty{display:none}

/* --- фотографии --- */
.chat-photos{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chat-photo{display:block;border:1px solid #e6e7ea;border-radius:10px;overflow:hidden;background:#f5f5f7;line-height:0}
.chat-photo img{display:block;width:auto;height:auto;max-width:220px;max-height:220px;object-fit:cover}
.chat-photo:hover{border-color:var(--red)}
.chat-photo-tools{margin:0 0 12px}
.chat-attachments{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.chat-attachments:empty{display:none}
.chat-attachment{position:relative;width:96px;height:96px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#f5f5f7}
.chat-attachment img{display:block;width:100%;height:100%;object-fit:cover}
.chat-attachment.loading{display:grid;place-items:center;color:var(--muted);font-size:1.2rem}
.chat-attachment-remove{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:rgba(25,26,33,.72);color:#fff;font-size:15px;line-height:1}
.chat-photo-add{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.chat-photo-add form{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.chat-photo-button{position:relative;overflow:hidden;cursor:pointer}
.chat-photo-button input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.chat-photo-button:focus-within{outline:3px solid #2563eb;outline-offset:2px}
.chat-photo-add .field-help{margin:0}
.chat-upload-error{color:#812833;font-size:.875rem}
.chat-drop{outline:2px dashed var(--red);outline-offset:4px;border-radius:10px}
.chat-photo-lightbox{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(15,16,22,.88)}
.chat-photo-lightbox img{max-width:100%;max-height:100%;border-radius:8px;background:#fff}
.chat-photo-lightbox-close{position:absolute;top:16px;right:20px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:var(--ink);font-size:22px;line-height:1}
.chat-placeholder{color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius);padding:40px;text-align:center}
.chat-view{min-width:0}

/* --- беседа --- */
.chat-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;min-width:0}
.chat-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px}
.chat-head h2{font-size:1.35rem;overflow-wrap:anywhere}
.chat-head .secondary-link{margin:0 0 6px}
.chat-head-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.chat-head-actions form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chat-head-actions input[type=text]{min-height:40px;width:200px}
.chat-personal-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.chat-bans{margin-top:10px}
.chat-bans:empty{display:none}
.chat-ban-row{border-top:1px solid var(--line);margin-top:8px;padding-top:10px;display:flex;flex-direction:column;gap:8px}
.chat-ban-row form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chat-ban-row input[type=text]{min-height:40px;flex:1 1 220px;min-width:0}
.chat-messages{display:flex;flex-direction:column;gap:14px;padding:16px 0;min-width:0}
.chat-earlier{align-self:center;color:var(--red);font-size:.9rem}
.chat-message{background:var(--paper);border:1px solid #e6e7ea;border-radius:12px;padding:12px 14px;min-width:0}
.chat-message-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;font-size:.85rem;color:var(--muted)}
.chat-message-meta{margin:0;min-width:0;overflow-wrap:anywhere}
.chat-message-meta strong{color:var(--ink)}
.chat-message-tools{display:flex;align-items:center;gap:2px;flex-shrink:0}
.chat-reply{font-size:.85rem;color:var(--muted);border-left:3px solid #d8c2c7;padding-left:10px;margin-top:6px;overflow-wrap:anywhere}
.chat-body{margin-top:6px;white-space:pre-wrap;overflow-wrap:anywhere}
.chat-body a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.chat-deleted{color:var(--muted);font-style:italic}
.chat-new-pill{position:sticky;bottom:12px;display:flex;justify-content:center;margin:8px 0}
.chat-access-lost{color:#812833;background:#fce9eb;border:1px solid #e6b7bc;border-radius:10px;padding:12px 16px;margin:10px 0}
.chat-composer{margin-top:8px;border-top:1px solid var(--line);padding-top:14px}
.chat-reply-context{font-size:.875rem;color:var(--muted);margin:0 0 10px;overflow-wrap:anywhere}
.chat-composer textarea{min-height:70px}
.chat-composer-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;flex-wrap:wrap}
.chat-error{color:#812833;font-size:.875rem}
.chat-read-form{margin-top:8px}
.chat-read-form button{padding:6px 0}

/* --- документы и обсуждение активности --- */
.chat-documents{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.chat-document{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid #e6e7ea;border-radius:10px;padding:10px 14px;max-width:420px}
.chat-document:hover{border-color:var(--red)}
.chat-document-name{font-weight:650;overflow-wrap:anywhere}
.chat-document .muted{font-size:.8rem}
.chat-attachment-doc{display:flex;flex-direction:column;gap:4px;justify-content:center;height:100%;padding:8px;font-size:.8rem;text-align:center;overflow-wrap:anywhere}
.chat-attachment-name{font-weight:650}
.chat-edit-form{display:flex;flex-direction:column;gap:8px;margin-top:8px;border-top:1px dashed var(--line);padding-top:8px}
.chat-edit-form textarea{min-height:60px;width:100%}
.chat-edit-form .chat-error{display:block}
.chat-edited{font-size:.8rem}
.chat-activity-block{border-left:4px solid var(--red)}
.chat-activity-block .section-row h2{font-size:1.1rem}
.chat-discussion-toggle{margin-top:12px}
.chat-discussion-toggle form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.chat-discussion-toggle input[type=text]{flex:1 1 220px;min-height:40px}

/* --- компактные действия сообщения, смайлики и реакции --- */
.chat-icon-button{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:1.05rem;line-height:1;cursor:pointer}
.chat-icon-button:hover,.chat-icon-button:focus-visible{background:#efe4e6;color:var(--red)}
.chat-edit-toggle{font-size:.95rem}
.chat-actions{position:relative}
.chat-actions>summary{list-style:none}
.chat-actions>summary::-webkit-details-marker{display:none}
.chat-menu{display:flex;flex-direction:column;gap:2px}
.js .chat-menu.chat-menu-popup{position:fixed;z-index:130;min-width:220px;max-width:min(300px,calc(100vw - 16px));max-height:calc(100vh - 16px);overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(25,26,33,.18);padding:8px}
.chat-menu-item{display:block;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-weight:600;font-size:.9rem;cursor:pointer}
.chat-menu-item:hover,.chat-menu-item:focus-visible{background:var(--paper);color:var(--red)}
.chat-menu-item.danger{color:#812833}
.chat-menu-section>summary{list-style:none;cursor:pointer}
.chat-menu-section>summary::-webkit-details-marker{display:none}
.chat-menu-section[open]>summary{background:var(--paper);color:var(--red)}
.chat-menu-section form{display:flex;flex-direction:column;gap:8px;padding:8px 12px 4px}
.chat-menu-section form input[type=text],.chat-menu-section form input[type=number]{min-height:38px;width:100%}
.chat-menu-section form textarea{min-height:64px;width:100%}
.chat-reaction-strip{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:2px 4px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.chat-reaction-quick{display:flex;gap:2px;margin:0}
.chat-reaction-chip{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:34px;min-height:34px;padding:2px 7px;border:1px solid transparent;border-radius:999px;background:transparent;font-size:1.05rem;line-height:1;cursor:pointer}
.chat-reaction-chip:hover,.chat-reaction-chip:focus-visible{background:var(--paper);border-color:var(--line)}
.chat-reaction-chip[aria-pressed=true],.chat-reactions form.mine .chat-reaction-chip{background:#fbe9ec;border-color:#e6b7bc}
.chat-reaction-more>summary{list-style:none}
.chat-reaction-more>summary::-webkit-details-marker{display:none}
.chat-reaction-more-body{display:flex;flex-direction:column;gap:8px;padding:8px 4px 4px}
.chat-reaction-more-body form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chat-reaction-more-body select{min-height:38px;max-width:100%}
.chat-reactions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chat-reactions form{margin:0}
.chat-reaction-count{font-size:.8rem;font-weight:650;color:var(--muted)}
.chat-reactions form.mine .chat-reaction-count{color:#812833}
.chat-emoji{position:relative;display:inline-block}
.chat-emoji-panel{position:absolute;z-index:60;left:0;bottom:calc(100% + 6px);width:min(320px,calc(100vw - 24px));max-height:280px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(25,26,33,.18);padding:8px}
.chat-menu .chat-emoji-panel{position:static;width:auto;max-height:220px;box-shadow:none;margin-top:6px;border-radius:8px}
.chat-emoji-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.chat-emoji-tab{padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:.8rem;font-weight:600;cursor:pointer}
.chat-emoji-tab[aria-selected=true]{background:var(--red);border-color:var(--red);color:#fff}
.chat-emoji-grid{display:grid;grid-template-columns:repeat(7,2.1rem);gap:2px}
.chat-emoji-group{display:contents}
.chat-emoji-group[hidden]{display:none}
.chat-emoji-cell{display:grid;place-items:center;width:2.1rem;height:2.1rem;padding:0;border:0;border-radius:8px;background:transparent;font-size:1.15rem;line-height:1;cursor:pointer}
.chat-emoji-cell:hover,.chat-emoji-cell:focus-visible{background:var(--paper)}
.chat-composer-tools{display:flex;align-items:center;gap:8px;margin-top:8px}
.chat-edit-tools{display:flex;align-items:center;justify-content:space-between;gap:10px}
.chat-edit-tools .chat-composer-tools{margin:0}
html:not(.js) .chat-emoji-toggle,html:not(.js) .chat-edit-toggle{display:none}
html:not(.js) .chat-emoji-slot{display:none}
.js [data-chat-reaction-fallback]{display:none}
html:not(.js) .chat-menu{position:static;border:0;box-shadow:none;padding:0}

/* --- модерация сообщения и запреты --- */
.js .chat-menu.chat-menu-popup{overflow-x:hidden}
.chat-moderation-overlay{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:14px;background:rgba(15,16,22,.5)}
.chat-moderation-dialog{display:flex;flex-direction:column;width:min(430px,100%);max-height:min(88vh,660px);background:#fff;border-radius:14px;box-shadow:0 22px 60px rgba(25,26,33,.3);overflow:hidden}
.chat-moderation-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.chat-moderation-title{font-size:1rem;font-weight:700;margin:0;overflow-wrap:anywhere;min-width:0}
.chat-moderation-close{display:grid;place-items:center;width:38px;height:38px;min-height:38px;padding:0;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:1.35rem;line-height:1;cursor:pointer}
.chat-moderation-close:hover,.chat-moderation-close:focus-visible{background:var(--paper);color:var(--red)}
.chat-moderation-body{overflow-y:auto;overflow-x:hidden;padding:12px 16px 16px;min-width:0}
.chat-moderation-panel{display:flex;flex-direction:column;gap:12px;min-width:0}
.chat-moderation-target{margin:0;font-size:.9rem;overflow-wrap:anywhere}
.chat-moderation-panel .field-help{margin:0}
.chat-moderation-actions{display:flex;flex-direction:column;gap:6px}
.chat-moderation-actions .check-label{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:.9rem;font-weight:500;cursor:pointer}
.chat-moderation-actions .check-label:hover{border-color:var(--red)}
.chat-moderation-actions .check-label:has(input:checked){border-color:var(--red);background:#fbf4f5}
.chat-moderation-actions input[type=radio]{width:18px;height:18px;min-height:0;padding:0;margin:0;flex-shrink:0;accent-color:var(--red)}
.chat-moderation-panel form{display:flex;flex-direction:column;gap:8px;padding:0;min-width:0}
.chat-moderation-panel form[hidden]{display:none}
.chat-moderation-panel form label{display:block;font-size:.8rem;font-weight:600;margin:0}
.chat-moderation-panel form input[type=text],.chat-moderation-panel form input[type=number],
.chat-moderation-panel form select{min-height:40px;width:100%;min-width:0}
.chat-moderation-panel form .chat-error{display:block}
.chat-ban-duration{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chat-ban-duration legend{width:100%;font-size:.8rem;font-weight:600;padding:0;margin-bottom:2px}
.chat-ban-duration .check-label{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:.875rem;font-weight:500;cursor:pointer}
.chat-ban-duration .check-label:hover{border-color:var(--red)}
.chat-ban-duration .check-label:has(input:checked){border-color:var(--red);background:#fbf4f5}
.chat-ban-duration input[type=radio]{width:18px;height:18px;min-height:0;padding:0;margin:0;flex-shrink:0;accent-color:var(--red)}
.chat-ban-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:8px}
.chat-ban-fields label{grid-column:1/-1}
.chat-moderation-buttons{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.chat-moderation-buttons .button{margin:0}
/* Кнопки применения: читаемый контраст в обычном, hover, focus и disabled состояниях.
   Класс .danger задаёт тёмно-красный цвет текста поверх красного фона — перекрываем его. */
.chat-moderation-dialog .button,
.chat-moderation-dialog .button.small{color:#fff}
.chat-moderation-dialog .button:hover:not(:disabled){background:var(--red-dark);border-color:var(--red-dark);color:#fff}
.chat-moderation-dialog .button:focus-visible{color:#fff;outline:3px solid #2563eb;outline-offset:2px}
.chat-moderation-dialog .button:disabled{background:#f0dfe1;border-color:#d9b9be;color:#7a1f2c;opacity:1;cursor:not-allowed}
.chat-moderation-cancel{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--muted);font-size:.9rem}
.chat-moderation-cancel:hover{border-color:var(--red);color:var(--red)}
.chat-hidden-note{margin-top:6px;color:var(--muted);font-size:.85rem;font-style:italic}
.chat-hidden-body{border-left:3px solid #d8c2c7;padding-left:10px;background:#fbf4f5}
html:not(.js) .chat-moderation-actions{display:none}
html:not(.js) .chat-moderation-panel{padding:8px 12px 4px}
html:not(.js) .chat-moderation-panel form{border-top:1px dashed var(--line);padding-top:10px}
html:not(.js) .chat-moderation-buttons{justify-content:flex-start}

@media(max-width:800px){
    .club-nav{align-items:flex-start}
    .chat-layout{grid-template-columns:1fr}
    .chat-layout-open .chat-list{display:none}
    .chat-inline-panel .chat-messages{max-height:none;overflow:visible}
    .manage-hub{grid-template-columns:1fr}
    .nav-dropdown-menu{position:static;box-shadow:none;border:0;padding:0 0 0 12px;min-width:0}
    .account-menu .nav-dropdown-menu{right:auto}
}
@media(max-width:520px){
    .chat-panel{padding:16px 14px}
    .chat-head-actions{align-items:flex-start}
    .chat-head-actions input[type=text]{width:100%}
    .chat-personal-actions{justify-content:flex-start}
    .chat-filters a{padding:6px 10px;font-size:.8rem}
    .chat-ban-row form{flex-direction:column;align-items:stretch}
    .chat-ban-row input[type=text]{flex:none;width:100%}
    .chat-block-actions .button{width:100%}
    .chat-photo img{max-width:100%}
    .chat-attachment{width:78px;height:78px}
    .chat-photo-add form{width:100%}
    .chat-icon-button{width:38px;height:38px}
    .chat-reaction-chip{min-width:38px;min-height:38px}
    .chat-emoji-grid{grid-template-columns:repeat(6,2.3rem)}
    .chat-emoji-cell{width:2.3rem;height:2.3rem}
}