/* Polls module UI (Discord-like) */
.poll-area label { display:block; margin-bottom:12px; border-radius:10px; padding:6px 14px; border:1px solid rgb(56,60,63); transition:all .15s ease; background:rgb(27,30,31); position:relative; }
.poll-area label:hover { border-color:#4a4e52; }
.poll-area label.selected { border-color:#5a9855; box-shadow:0 0 0 1px rgba(114,137,218,.35) inset; }
.poll-area label.winner { border-color:#3ba55d; box-shadow:0 0 0 1px rgba(59,165,93,.35) inset; }
.poll-area .row { display:flex;  align-items:center; }
.poll-area .percent a { cursor:pointer; }
.poll-area .column { display:flex; align-items:center; padding-left:10px; }
.poll-area .text { font-size:13px; color:rgba(255,255,255,.9); }
.poll-area .circle { height:18px; width:18px; display:block; border:2px solid #666; border-radius:50%; margin-left:10px; position:relative; }
.poll-area .circle:after { content:""; height:8px; width:8px; background:#5a9855; border-radius:inherit; position:absolute; left:3px; top:3px; display:none; }
.poll-area input { display:none; }
.poll-area input:checked + .row .circle { border-color:#5a9855; }
.poll-area input:checked + .row .circle:after { display:block; }
.poll-area label .opt-meter { position:absolute; left:0; top:0; bottom:0; width:calc(1% * var(--w)); border-radius:inherit; display:none; }
.poll-area label.selectall .opt-meter { display:block; background:rgb(90 152 85 / 6%); }
.poll-area label.selectall.winner .opt-meter { background:rgba(59,165,93,.25); }
.poll-area .poll-progress { height:8px; width:100%; position:relative; background:rgb(36,39,41); margin:8px 0 2px; border-radius:30px; display:none; }
.poll-area .poll-progress:after { position:absolute; content:""; height:100%; background:#5a5f66; width:calc(1% * var(--w)); border-radius:inherit; transition:all .15s ease; }
.poll-area label.selected .poll-progress:after { background:#5a9855; }
.poll-area .percent { font-size:12px; color:rgba(255,255,255,.7); display:none;}
.percent-text { font-size:16px; letter-spacing: -0.5px; padding-left:5px;}
.poll-area label.selectall .percent { display:block; line-height: 0px !important;      display: inline-flex;    align-items: center;    gap: 0;
    margin-left:auto; padding-right:10px;}
.poll-area label.selectall .poll-progress { display:none; }
.percent:after {content:"";}
.poll-area label.selected .percent:before { content:"\2713"; color:#5a9855; font-weight:700; margin-right:6px; }
.poll-area .percent .inline-avatars { display:inline-flex; align-items:center; gap:0; margin-left:8px; }
.poll-area .percent .avatar-mini { width:20px; height:20px; border-radius:50%; opacity:.95; border:1px solid rgb(30,32,33); margin-left:-6px; background:rgb(56,60,63); color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.poll-area .percent .inline-avatars .avatar-mini:first-child { margin-left:0; }
.poll-area .percent .avatar-initial { display:inline-flex; align-items:center; justify-content:center; background:rgb(56,60,63); color:#fff; font-size:11px; font-weight:bold; }
.poll-area .percent .avatar-more { display:inline-block; min-width:18px; height:18px; padding:0 6px; border-radius:9px; background:rgb(56,60,63); color:#fff; font-size:11px; line-height:18px; text-align:center; }
/* Modal */
.polls-modal-overlay { position:fixed; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.6); z-index:9999; display:flex; align-items:center; justify-content:center; }
.polls-modal { width:720px; max-width:95vw; background:rgb(27,30,31); border:1px solid rgb(56,60,63); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.5); display:flex; flex-direction:column; }
.polls-modal .content { display:flex; }
.polls-modal .left { width:200px; border-right:1px solid rgb(56,60,63); padding:12px; }
.polls-modal .right { flex:1; padding:12px; max-height:70vh; overflow:auto; }
.polls-modal .content { max-height:70vh; overflow:hidden; }
.polls-modal .left { overflow:auto; }
.polls-modal .opt-item { padding:8px 10px; border-radius:8px; margin-bottom:6px; cursor:pointer; border:1px solid transparent; color:#fff; }
.polls-modal .opt-item:hover { background:rgb(36,39,41); border-color:rgb(56,60,63); }
.polls-modal .opt-item.active { background:rgb(36,39,41); border:1px solid rgb(56,60,63); box-shadow:0 0 0 1px rgba(255,255,255,.06) inset; }
.polls-modal .voter-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:1px solid rgb(36,39,41); }
.polls-modal .voter-row .avatar-mini { width:24px; height:24px; border-radius:50%; background:linear-gradient(45deg,#5a9855,#4b6cb7); color:#fff; font-size:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgb(56,60,63); }
.polls-modal .opt-item { padding:8px 10px; border-radius:8px; margin-bottom:6px; cursor:pointer; }
.polls-modal .opt-item.active { background:rgb(36,39,41); border:1px solid rgb(56,60,63); }
.polls-modal .voter-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:1px solid rgb(36,39,41); }
.polls-modal .voter-row img { width:24px; height:24px; border-radius:50%; }
.polls-modal .header { display:flex; justify-content:space-between; align-items:center; padding:12px; border-bottom:1px solid rgb(56,60,63); }
.polls-modal .title { color:#fff; font-weight:bold; }
.polls-modal .polls-modal-close { cursor:pointer; color:#fff; opacity:.8; }

#pollVotersModal .modal-content { background:rgb(27,30,31); border:1px solid rgb(56,60,63); border-radius:10px; -webkit-box-shadow: none; box-shadow:none;}
#pollVotersModal .modal-header { border-bottom:1px solid rgb(56,60,63); }
#pollVotersModal .modal-title { color:#fff; }
#pollVotersModal .modal-title { font-weight:700; font-size:16px; }
#pollVotersModal .modal-body { background:rgb(24 26 27); color:rgba(255,255,255,.92); padding: 10px 5px; }
#pollVotersModal .modal-footer { background:rgb(24 26 27); border-top:0px solid rgb(56,60,63); }
#pollVotersModal .modal-header .close { color:#fff; opacity:.9; text-shadow:none; }
#pollVotersModal .modal-header .close:hover { opacity:1; }
#pollVotersModal .left { width:220px; border-right:1px solid rgb(56,60,63); padding:12px; }
#pollVotersModal .right { padding:12px; max-height:60vh; overflow:auto; }
#pollVotersModal .opt-item { padding:8px 12px; border-radius:8px; margin-bottom:8px; cursor:pointer; color:rgba(255,255,255,.9); font-size:14px; display:flex; align-items:center; justify-content:space-between; }
#pollVotersModal .opt-item:hover { background:rgb(36,39,41); }
#pollVotersModal .opt-item.active { background:rgb(36,39,41); box-shadow:0 0 0 1px rgba(114,137,218,.25) inset; font-weight:bold; }

.avatar-list { display:flex; align-items:center; cursor:pointer; }
.avatar-list img{ width:30px; height:30px; border-radius:50%; overflow:hidden; border:1px solid rgb(30,32,33); margin-left:-8px; transition:transform .2s ease; position:relative; z-index:1; display:block; --ty:0px; }
.avatar-list img:first-child { margin-left:0; }
/* Dynamic hover offsets for any count using CSS variables */
.avatar-list:hover img { transform: translateY(var(--ty)); }
.avatar-list:hover img:nth-child(odd) { --ty:-2px; }
.avatar-list:hover img:nth-child(even) { --ty:2px; }
/* Fine tuning for more variety across larger sets */
.avatar-list:hover img:nth-child(3n) { --ty:-1px; }
.avatar-list:hover img:nth-child(4n) { --ty:1px; }
.avatar-list:hover img:nth-child(5n) { --ty:3px; }
.avatar-list:hover img:nth-child(7n) { --ty:-3px; }
.card-poll {margin-bottom:15px;}
.card-poll .panel-heading {padding:12px; font-size:16px; font-weight:700; color:#fff; border:none; padding-bottom:0}
.avatar-list-more {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgb(58, 62, 65);
    color: rgb(215, 218, 220);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    border: 1px solid rgb(30, 32, 33);
    margin-left: -8px;
}

#createPollModal .modal-content { background:rgb(24,26,27); color:#fff; border:1px solid rgb(56,60,63); }
#createPollModal .modal-header { border-bottom:1px solid rgb(56,60,63); }
#createPollModal .modal-footer { border-top:1px solid rgb(56,60,63); }
#createPollModal .form-group { margin-bottom:12px; }
#createPollModal .polloptiondiv { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
#createPollModal input[type="text"] { background:rgb(30,32,33); border:1px solid rgb(56,60,63); color:#fff; }
/* Discord-like input with counter */
#createPollModal .discord-input { position:relative; }
#createPollModal .discord-input .char-counter { position:absolute; right:8px; bottom:6px; font-size:12px; color:rgba(255,255,255,.6); }
#createPollModal .discord-option button.deloption { padding:4px 8px; }
#pollVotersModal .opt-item::after { content:""; }
#pollVotersModal .voter-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid rgb(36,39,41); }
#pollVotersModal .voter-row img { width:28px; height:28px; border-radius:50%; border:1px solid rgb(56,60,63); }
#pollVotersModal .voter-name { color:#fff; font-size:14px; font-weight:600; }
#pollVotersModal .avatar-mini.avatar-initial { width:28px; height:28px; border-radius:50%; background:linear-gradient(45deg,#5a9855,#4b6cb7); color:#fff; font-size:13px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgb(56,60,63); }

.discord-poll-inline { background:rgb(24,26,27); color:#fff; }
.discord-poll-inline .form-group { margin-bottom:12px; }
.discord-poll-inline .polloptiondiv { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.discord-poll-inline input[type="text"] { background:rgb(46,48,50); border:1px solid rgb(56,60,63); color:#fff; border-radius:8px; height:40px; padding:8px 12px; }
.discord-poll-inline .discord-input { position:relative; }
.discord-poll-inline .discord-input .char-counter { position:absolute; right:8px; bottom:6px; font-size:12px; color:rgba(255,255,255,.6); }

/* Panel header look */
.discord-poll-inline .control-label { font-weight:600; color:rgba(255,255,255,.8); margin-bottom:6px; display:block; }

/* Answers row icons and delete button */
.discord-poll-inline .discord-option { position:relative; }
.discord-poll-inline .discord-option::before { content:"\f118"; font-family:"FontAwesome"; color:rgba(255,255,255,.4); width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; background:rgb(36,39,41); border-radius:8px; margin-right:6px; }
.discord-poll-inline .discord-option input[type="text"] { flex:1; }
.discord-poll-inline .deloption { background:rgb(64,68,75); border:none; border-radius:6px; color:#fff; }
.discord-poll-inline .deloption:hover { background:rgb(72,76,84); }

/* Add another answer button */
.discord-poll-inline #addoption { background:rgb(46,48,50); border:1px solid rgb(56,60,63); color:#fff; border-radius:8px; padding:8px 12px; }
.discord-poll-inline #addoption:hover { background:rgb(52,55,59); }

/* Toggle-style checkbox for multiple answers */
.discord-poll-inline .checkbox-wrap input[type="checkbox"] { -webkit-appearance:none; appearance:none; width:32px; height:18px; background:rgb(46,48,50); border:1px solid rgb(56,60,63); border-radius:14px; position:relative; vertical-align:middle; margin-right:6px; outline:none; cursor:pointer; }
.discord-poll-inline .checkbox-wrap input[type="checkbox"]::after { content:""; width:14px; height:14px; background:#fff; border-radius:50%; position:absolute; top:2px; left:2px; transition:all .2s ease; }
.discord-poll-inline .checkbox-wrap input[type="checkbox"]:checked { background:#5a9855; border-color:#5a9855; }
.discord-poll-inline .checkbox-wrap input[type="checkbox"]:checked::after { left:16px; }

#pollVotersModal .right { scrollbar-color: rgb(72,76,84) rgb(46,48,50); scrollbar-width: thin; }
#pollVotersModal .right::-webkit-scrollbar { width: 8px; height: 8px; }
#pollVotersModal .right::-webkit-scrollbar-track { background: rgb(46,48,50); border-radius: 8px; }
#pollVotersModal .right::-webkit-scrollbar-thumb { background: rgb(72,76,84); border-radius: 8px; border: 1px solid rgb(56,60,63); }
#pollVotersModal .right::-webkit-scrollbar-thumb:hover { background: rgb(88,92,100); }