/* ============================================================
   DECAN MOVIE — Comments Pro (additive layer)
   Slide-over community panel attached to the theater.
   ============================================================ */

#cpro-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 3200;
  width: min(400px, 100vw); height: 100dvh;
  background: #10141d; border-left: 1px solid rgba(255,255,255,.1);
  box-shadow: -30px 0 80px rgba(0,0,0,.6);
  display: flex; flex-direction: column;
  transform: translateX(105%); transition: transform 0.3s ease;
}
#cpro-drawer.open { transform: translateX(0); }
#cpro-backdrop {
  position: fixed; inset: 0; z-index: 3199; background: rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
#cpro-backdrop.open { opacity: 1; pointer-events: auto; }

.cpro-head {
  padding: 14px 14px 10px; border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
}
.cpro-head-top { display: flex; align-items: center; gap: 8px; }
.cpro-title { font-size: 1rem; font-weight: 800; color: #fff; flex: 1; }
.cpro-title small { display: block; color: #8b8f9e; font-weight: 600; font-size: 0.7rem; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.cpro-x {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05); color: #fff; cursor: pointer; font-size: 1rem;
}
.cpro-x:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
.cpro-controls { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.cpro-count {
  font-size: 0.72rem; font-weight: 800; color: #b9f7ff; background: rgba(0,229,255,.1);
  border: 1px solid rgba(0,229,255,.25); border-radius: 999px; padding: 6px 11px; white-space: nowrap;
}
.cpro-sort {
  margin-left: auto; background: #1a1d24; color: #fff; border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px; padding: 8px 10px; font-size: 0.75rem; font-weight: 700; cursor: pointer; outline: none;
  min-height: 38px;
}

.cpro-list { flex: 1; overflow-y: auto; padding: 12px 14px 16px; -webkit-overflow-scrolling: touch; }
.cpro-empty {
  text-align: center; color: #8b8f9e; padding: 44px 18px; font-size: 0.83rem; line-height: 1.6;
  border: 1px dashed rgba(255,255,255,.12); border-radius: 14px; margin-top: 8px;
}
.cpro-empty i { font-size: 1.8rem; color: var(--neon-cyan); display: block; margin-bottom: 10px; }
.cpro-skel {
  border-radius: 12px; height: 86px; margin-bottom: 10px;
  background: linear-gradient(90deg, #161a23 25%, #202634 50%, #161a23 75%);
  background-size: 200% 100%; animation: cproShimmer 1.4s infinite;
}
@keyframes cproShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.cpro-comment {
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
  border-radius: 13px; padding: 11px 12px; margin-bottom: 10px;
}
.cpro-comment.reported-hidden { opacity: 0.65; }
.cpro-chead { display: flex; gap: 9px; align-items: center; }
.cpro-avatar {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 34px;
  background: #1c2230; border: 1px solid rgba(255,255,255,.12);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 0.8rem; color: var(--neon-cyan);
}
.cpro-who { flex: 1; min-width: 0; }
.cpro-name { font-size: 0.8rem; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpro-name .cpro-you { color: var(--neon-cyan); font-weight: 700; font-size: 0.68rem; margin-left: 5px; }
.cpro-name .cpro-admin-tag {
  color: #04121a; background: var(--neon-cyan); border-radius: 5px; padding: 1px 5px;
  font-size: 0.6rem; margin-left: 5px; vertical-align: 1px;
}
.cpro-time { font-size: 0.68rem; color: #6d7484; }
.cpro-text { font-size: 0.83rem; color: #d7dbe6; line-height: 1.6; margin: 8px 0 4px; word-wrap: break-word; }
.cpro-actions { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.cpro-abtn {
  background: transparent; border: none; color: #8b8f9e; cursor: pointer;
  font-size: 0.72rem; font-weight: 700; padding: 7px 8px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 5px; min-height: 34px;
}
.cpro-abtn:hover { color: #fff; background: rgba(255,255,255,.06); }
.cpro-abtn.liked { color: var(--neon-pink, #ff007f); }
.cpro-abtn.danger:hover { color: #ff7d9c; }
.cpro-hot {
  font-size: 0.62rem; font-weight: 900; color: #ffe3a3; background: rgba(255,183,3,.12);
  border: 1px solid rgba(255,183,3,.3); padding: 3px 7px; border-radius: 999px; margin-left: auto;
}
.cpro-replies { margin-top: 8px; padding-left: 10px; border-left: 2px solid rgba(0,229,255,.2); display: grid; gap: 8px; }
.cpro-reply { background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.05); border-radius: 10px; padding: 8px 10px; }
.cpro-reply .cpro-text { margin: 5px 0 2px; font-size: 0.79rem; }
.cpro-rform { display: flex; gap: 6px; margin-top: 8px; }
.cpro-rform input {
  flex: 1; background: #080c12; border: 1px solid rgba(255,255,255,.12); border-radius: 9px;
  padding: 9px 10px; color: #fff; font-size: 0.78rem; outline: none; min-width: 0;
}
.cpro-rform input:focus { border-color: var(--neon-cyan); }
.cpro-rform button {
  background: rgba(0,229,255,.12); border: 1px solid rgba(0,229,255,.35); color: #b9f7ff;
  border-radius: 9px; padding: 0 12px; font-weight: 800; cursor: pointer; min-height: 38px;
}

.cpro-composer { border-top: 1px solid rgba(255,255,255,.08); padding: 12px 14px 16px; background: rgba(0,0,0,.3); }
.cpro-composer textarea {
  width: 100%; background: #080c12; border: 1px solid rgba(255,255,255,.12); border-radius: 11px;
  padding: 11px 12px; color: #fff; font-size: 0.83rem; outline: none; resize: vertical; min-height: 64px;
  font-family: inherit; line-height: 1.5;
}
.cpro-composer textarea:focus { border-color: var(--neon-cyan); }
.cpro-composer-row { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.cpro-post {
  flex: 1; background: #fff; color: #000; border: none; border-radius: 10px; padding: 11px;
  font-weight: 800; cursor: pointer; min-height: 44px;
}
.cpro-post:hover { background: var(--neon-cyan); }
.cpro-post:disabled { opacity: 0.5; cursor: wait; }
.cpro-signin {
  width: 100%; background: rgba(0,229,255,.1); border: 1px solid rgba(0,229,255,.35); color: #b9f7ff;
  border-radius: 10px; padding: 12px; font-weight: 800; cursor: pointer; min-height: 44px;
}
.cpro-hint { font-size: 0.68rem; color: #6d7484; margin-top: 8px; line-height: 1.5; text-align: center; }
.cpro-flags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cpro-flag {
  font-size: 0.68rem; font-weight: 700; border-radius: 999px; padding: 6px 10px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #cfd3de; min-height: 32px;
}
.cpro-flag:hover { border-color: #ff7d9c; color: #ffb3c1; }

@media (max-width: 640px) {
  #cpro-drawer {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 82dvh;
    border-left: none; border-top: 1px solid rgba(255,255,255,.12);
    border-radius: 18px 18px 0 0; transform: translateY(105%);
  }
  #cpro-drawer.open { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #cpro-drawer, #cpro-backdrop { transition: none; }
  .cpro-skel { animation: none; }
}