@import url('../../prototype-shared/components.css');

.qtabs .qtab {flex:1;text-align:center;padding:6px;font-size:11px;border-radius:var(--r-pill);color:var(--text-2);font-weight:600;cursor:pointer}

@media(max-width:1280px){.queue-shell{grid-template-columns:300px 1fr 320px}}
@media(max-width:1100px){.queue-shell{grid-template-columns:1fr;height:auto}}

.user-logout {display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-left:8px;border-radius:8px;color:#A9F0FA;text-decoration:none;font-size:14px;transition:background .15s ease, color .15s ease}
.user-logout:hover {background:rgba(237,30,121,.15);color:#ED1E79}
.user-logout:focus-visible {outline:2px solid #ED1E79;outline-offset:2px}

.topbar .user-chip:hover {background:var(--risk-soft, rgba(237,30,121,.06))}

.topbar .user-chip .role-menu {position:absolute;top:calc(100% + 6px);right:0;left:auto;bottom:auto;min-width:260px;background:#fff;border-radius:12px;box-shadow:0 20px 50px rgba(30,27,94,.18);border:1px solid var(--border);padding:6px;display:none;z-index:50}

.topbar .user-chip .role-opt {display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;font-size:12px;color:var(--text);transition:background .15s ease}
.topbar .user-chip .role-opt:hover {background:var(--risk-soft, rgba(237,30,121,.06))}
.topbar .user-chip .role-opt .ic {font-size:14px;line-height:1;margin-top:1px;color:var(--brand)}
.topbar .user-chip .role-opt .rt {font-weight:700;color:var(--brand)}
.topbar .user-chip .role-opt .rd {font-size:10px;color:var(--text-3);margin-top:2px}
.topbar .user-chip .role-sep {height:1px;background:var(--border);margin:4px 6px}


/* ===== Карточка ручной модерации (queue-item) ===== */

.mod-banner {display:flex;align-items:flex-start;gap:12px;padding:14px 18px;margin:14px 18px 10px;border-radius:10px;
  background:repeating-linear-gradient(135deg, var(--risk-soft) 0 12px, #FFF1F7 12px 24px);
  border:1px solid var(--risk-soft)}
.mod-banner .mb-ic {font-size:16px;line-height:1.4;color:var(--brand);margin-top:1px;flex-shrink:0}
.mod-banner .mb-body {display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.mod-banner .mb-title {font-weight:700;color:var(--brand);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.mod-banner .mb-causes {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.mod-banner .mb-causes li {font-size:13px;line-height:1.5;color:var(--text)}
.mod-banner .mb-causes strong {color:var(--text);font-weight:700;margin-right:4px}
.mod-banner .mb-causes .mb-detail {color:var(--text-2);font-weight:500}

.split2 {display:grid;grid-template-columns:1fr 1.15fr;gap:14px;padding:0 18px}
.s2-col {display:flex;flex-direction:column;background:var(--surface-2);border-radius:14px;overflow:hidden}
.s2-head {display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border);background:#fff}
.s2-head h4 {font-size:11px;text-transform:uppercase;letter-spacing:0;color:var(--brand-deep);font-weight:700;margin:0;padding:0}
.s2-body {padding:14px;display:flex;flex-direction:column;gap:10px;min-height:380px;flex:1}
.s2-src .src-title {font-weight:700;color:var(--text);font-size:13px;line-height:1.4}
.s2-src .src-text {font-size:12px;line-height:1.6;color:var(--text-2)}
.s2-src .src-image {margin-top:4px;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:#fff}
.s2-src .src-image img {display:block;width:100%;height:auto;max-height:260px;object-fit:cover}
.s2-src .src-image figcaption {padding:8px 10px;font-size:11px;line-height:1.4;color:var(--text-2);font-style:italic;background:#fafafb;border-top:1px solid var(--border)}

.ca-tabs {display:flex;gap:8px;padding:10px 12px;background:#fff;border-bottom:1px solid var(--border);overflow:hidden;align-items:center}
.ca-tab {display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px 6px 8px;border-radius:999px;border:1px solid var(--border);background:#fff;cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;color:var(--text-2);transition:.15s;position:relative;
  box-shadow:0 1px 2px rgba(30,27,94,.06)}
.ca-tab:hover {border-color:var(--brand);background:#fff;transform:translateY(-1px);box-shadow:0 2px 6px rgba(237,30,121,.18)}
.ca-tab.active {border-color:var(--brand);background:var(--risk-soft);box-shadow:0 2px 10px rgba(237,30,121,.28)}
.ca-tab .ca-mark {width:6px;height:6px;border-radius:50%;background:transparent;display:inline-block;flex-shrink:0;margin-left:2px}
.ca-tab.edited .ca-mark {background:var(--warning)}
.ca-tab.valid .ca-mark {background:var(--ok)}

.ca-meta {display:flex;align-items:center;gap:6px;padding:10px 14px;font-size:11px;color:var(--text-2);background:#fff;border-bottom:1px solid var(--border)}
.ca-meta strong {color:var(--brand-deep);font-weight:700}

.ca-body {padding:14px;display:flex;flex-direction:column;gap:6px;background:#fff;flex:1;position:relative}
.ca-body .field-lbl {font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:700;margin-top:6px}
.ca-body .field-lbl:first-child {margin-top:0}
.ca-body .field-lbl .lbl-meta {margin-left:6px;font-size:10px;font-weight:600;color:var(--text-3);text-transform:none;letter-spacing:0}
.ca-body .ca-title {font-weight:700;font-size:13px;color:var(--text);line-height:1.4;resize:vertical;min-height:44px;overflow:hidden;white-space:pre-wrap;word-break:break-word;font-family:inherit}
.ca-body .ca-text {font-family:'Montserrat';font-size:12px;line-height:1.6;resize:none;min-height:140px;flex:1}

.ca-body.regen .ca-title, .ca-body.regen .ca-text {color:transparent;
  background:linear-gradient(90deg, var(--surface-2) 0%, #fff 50%, var(--surface-2) 100%);
  background-size:200% 100%;animation:shim 1.1s linear infinite;pointer-events:none}
@keyframes shim {0%{background-position:200% 0}100%{background-position:-200% 0}}

.pub-checklist {padding:18px}
.pub-checklist .pc-title {font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:700;margin-bottom:8px}
.checklist .ck.opt {color:var(--text-3)}
.checklist .ck.opt .box {background:transparent;border:1.5px solid var(--text-3);color:var(--text-3)}
.checklist .ck.opt .opt-tag {font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;margin-left:4px;font-weight:700}

.rej-modal {position:fixed;inset:0;background:rgba(30,27,94,.5);display:none;align-items:center;justify-content:center;z-index:60;backdrop-filter:blur(4px)}
.rej-modal.open {display:flex}
.rej-panel {width:460px;background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(30,27,94,.3);overflow:hidden;display:flex;flex-direction:column}
.rej-head {display:flex;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border)}
.rej-head h3 {margin:0;margin-right:auto}
.rej-body {padding:18px;display:flex;flex-direction:column}
.rej-body .field-lbl {font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:700;margin-bottom:6px}
.rej-foot {display:flex;gap:8px;justify-content:flex-end;padding:14px 18px;border-top:1px solid var(--border);background:var(--surface-2)}

.snackbar {position:fixed;bottom:24px;left:50%;transform:translate(-50%, 20px);opacity:0;pointer-events:none;
  background:var(--brand-deep);color:#fff;padding:12px 18px;border-radius:12px;display:flex;align-items:center;gap:12px;
  font-size:12px;font-weight:500;box-shadow:0 20px 50px rgba(30,27,94,.4);z-index:70;transition:.25s}
.snackbar.show {opacity:1;pointer-events:auto;transform:translate(-50%, 0)}
.snackbar .sb-action {color:var(--accent-soft);border-color:transparent;background:transparent;height:24px}
.snackbar .sb-action:hover {background:rgba(255,255,255,.1)}

#modCard.rejected {opacity:.6;filter:grayscale(.3)}

@media(max-width:1100px){.split2 {grid-template-columns:1fr}}