/* Native DOM port of CommentInput.vue, KlipyPicker.vue, and Modal.vue. */
.comment-input [hidden],.comment-dialog [hidden] { display:none!important; }
.comment-input .comment-editor-tab[aria-selected=true] { background:#ffffff14;color:#fff; }
.comment-input .comment-editor-tab[aria-selected=false] { color:#6b7280; }
.comment-input .comment-editor-tab[aria-selected=false]:hover { color:#d1d5db; }
.comment-input .toolbar-btn { display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:.25rem;color:#6b7280;cursor:pointer;transition:all .15s; }
.comment-input .toolbar-btn:hover { color:var(--color-brand-primary);background:#ffffff0f; }
.comment-input .toolbar-btn[data-comment-action=youtube]:hover { color:var(--color-error); }
.comment-input .toolbar-btn[data-comment-action=imgur]:hover { color:var(--color-success); }
.comment-input .toolbar-btn[data-comment-action=gif]:hover { color:#c084fc; }
.comment-input .toolbar-btn .icon { width:14px;height:14px; }
.comment-input .toolbar-divider { width:1px;height:1rem;background:#ffffff14;margin:0 .25rem; }
.comment-input [data-comment-error]>.icon { width:14px;height:14px;flex:none; }
.comment-input [data-comment-dismiss]>.icon { width:12px;height:12px; }
.comment-input .preview-error { color:#fbbf24; }
.comment-input .text-red-400 { color:var(--color-error); }
.comment-dialog { padding:0;border:1px solid #ffffff1a;border-radius:12px;background:#141414;color:#d1d5db;width:calc(100% - 32px);max-width:512px;max-height:calc(100dvh - 32px);box-shadow:0 25px 50px -12px #0004;overflow:auto; }
.comment-dialog::backdrop { background:#0009;backdrop-filter:blur(8px); }
.comment-dialog-header { display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #ffffff0f;gap:12px; }
.comment-dialog-header h2 { margin:0; }
.comment-dialog-header button { border:0;background:none;cursor:pointer;padding:0;width:28px;height:28px;border-radius:6px; }
.comment-dialog-header .icon { width:16px;height:16px; }
.comment-dialog-body { padding:16px 20px;max-height:70dvh;overflow:auto; }
.comment-dialog-footer { padding:12px 20px;border-top:1px solid #ffffff0f; }
.comment-embed-url { display:block;margin-top:6px;letter-spacing:normal;text-transform:none;font-weight:400; }
.comment-gif-dialog { max-width:672px; }
.comment-gif-dialog .klipy-tab { display:flex;align-items:center;gap:.35rem;padding:.5rem .85rem;font-size:.75rem;color:#6b7280;cursor:pointer;border:0;background:transparent;border-bottom:2px solid transparent;transition:color .15s,border-color .15s; }
.comment-gif-dialog .klipy-tab .icon { width:12px;height:12px; }
.comment-gif-dialog .klipy-tab:hover { color:#e5e7eb; }
.comment-gif-dialog .klipy-tab-active { color:#fff;border-bottom-color:var(--color-brand-primary); }
.comment-gif-dialog .klipy-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;max-height:50vh;overflow-y:auto;padding:.25rem; }
.comment-gif-dialog .klipy-tile { position:relative;aspect-ratio:1;border-radius:.5rem;overflow:hidden;background:#ffffff0a;border:1px solid transparent;cursor:pointer;padding:0;transition:border-color .15s,transform .15s; }
.comment-gif-dialog .klipy-tile:hover,.comment-gif-dialog .klipy-tile:focus-visible { border-color:color-mix(in srgb,var(--color-brand-primary) 60.000%,transparent);transform:translateY(-1px); }
.comment-gif-dialog .klipy-tile img { width:100%;height:100%;object-fit:cover;display:block; }
.comment-gif-dialog .favorite-btn { position:absolute;top:.35rem;right:.35rem;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:.25rem;background:#0009;color:#9ca3af;border:0;cursor:pointer;opacity:0;transition:opacity .15s,color .15s,background-color .15s; }
.comment-gif-dialog .favorite-btn .icon { width:12px;height:12px; }
.comment-gif-dialog .klipy-tile:is(:hover,:focus-within) .favorite-btn,.comment-gif-dialog .favorite-btn.favorited { opacity:1; }
.comment-gif-dialog .favorite-btn:hover { color:var(--color-warning);background:#000c; }
.comment-gif-dialog .favorite-btn.favorited { color:var(--color-warning); }
@media(min-width:640px) { .comment-gif-dialog .klipy-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }

.comment-dialog label :is(select,textarea) { display:block;text-transform:none;letter-spacing:normal;font-weight:400; }
.comment-dialog-header button:hover { color:var(--color-brand-primary);background:color-mix(in srgb,var(--color-brand-primary) 7.843%,transparent); }