/**
 * Sidekick Forge Widget Styles
 */

/* Base Widget Container */
.widget-container {
    margin: 1rem 0;
    max-width: 100%;
    width: 100%;
}

/* Widget Wrapper - matches message bubble width */
.widget-wrapper {
    max-width: 80%;
    width: 80%;  /* Use fixed 80% to match message bubbles */
}

.widget-wrapper .widget-container {
    width: 100%;
}

/* Content Catalyst Widget */
.cc-widget {
    background: rgba(15, 15, 15, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Source Type Tabs */
.cc-tab {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid transparent;
}

.cc-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.cc-tab.active {
    background: linear-gradient(135deg, rgba(1, 164, 166, 0.2), rgba(245, 100, 83, 0.1));
    border-color: rgba(1, 164, 166, 0.5);
    color: #01a4a6;
}

/* Glass Input Override for Widget */
.cc-widget .glass-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cc-widget .glass-input:focus {
    border-color: rgba(1, 164, 166, 0.5);
    outline: none;
    box-shadow: 0 0 0 2px rgba(1, 164, 166, 0.2);
}

.cc-widget select.glass-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' fill-opacity='0.5' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.cc-widget select.glass-input option {
    background: #1a1a1a;
    color: #e0e0e0;
}

/* Upload Zone */
.cc-upload-zone,
.cc-doc-drop {
    transition: all 0.2s ease;
}

.cc-upload-zone:hover,
.cc-upload-zone.dragover,
.cc-doc-drop:hover,
.cc-doc-drop.dragover {
    border-color: rgba(1, 164, 166, 0.5);
    background: rgba(1, 164, 166, 0.05);
}

/* Checkbox Styling */
.cc-checkbox {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.cc-checkbox:checked {
    background: linear-gradient(135deg, #01a4a6, #f56453);
    border-color: transparent;
}

.cc-checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

/* Progress Steps */
.cc-step {
    transition: all 0.3s ease;
}

.cc-step-icon {
    transition: all 0.3s ease;
}

/* Glass Elevated for Cards */
.glass-elevated {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Line Clamp Utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========================================
   PrintReady Widget
   ======================================== */
.print-ready-widget .print-ready-conversation-list {
    max-height: 220px;
    overflow-y: auto;
    display: grid;
    gap: 8px;
    padding-right: 4px;
}

.print-ready-widget .print-ready-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.print-ready-widget .print-ready-checkbox {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: #14b8a6;
}

.print-ready-widget .print-ready-conv-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.print-ready-widget .print-ready-btn {
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 600;
    font-size: 14px;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.print-ready-widget .print-ready-btn:hover {
    opacity: 0.92;
}

.print-ready-widget .print-ready-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.print-ready-widget .print-ready-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #14b8a6);
}

.print-ready-widget .print-ready-btn-secondary {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Modal Styles */
.cc-modal {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cc-modal.show {
    opacity: 1;
}

.cc-modal-content {
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s ease;
}

.cc-modal.show .cc-modal-content {
    transform: scale(1) translateY(0);
}

/* Article Preview in Modal */
.cc-modal-body .prose {
    color: rgba(255, 255, 255, 0.9);
}

.cc-modal-body .prose h1,
.cc-modal-body .prose h2,
.cc-modal-body .prose h3,
.cc-modal-body .prose h4 {
    color: white;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.cc-modal-body .prose h1:first-child,
.cc-modal-body .prose h2:first-child {
    margin-top: 0;
}

.cc-modal-body .prose p {
    margin-top: 1em;
    margin-bottom: 1em;
    line-height: 1.7;
}

.cc-modal-body .prose ul,
.cc-modal-body .prose ol {
    margin: 1em 0;
    padding-left: 1.5em;
}

.cc-modal-body .prose li {
    margin: 0.5em 0;
}

.cc-modal-body .prose strong {
    color: white;
}

.cc-modal-body .prose a {
    color: #01a4a6;
}

.cc-modal-body .prose blockquote {
    border-left: 3px solid #01a4a6;
    padding-left: 1em;
    margin: 1em 0;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
}

/* Submit Button Animation */
.cc-submit-arrow {
    transition: transform 0.2s ease;
}

#cc-submit-btn:hover .cc-submit-arrow {
    transform: translateX(4px);
}

/* Loading State for Submit Buttons */
#cc-submit-btn.loading,
#cc-integrity-submit.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
}

#cc-submit-btn.loading > *,
#cc-integrity-submit.loading > * {
    visibility: hidden;
}

#cc-submit-btn.loading::after,
#cc-integrity-submit.loading::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: cc-spin 0.8s linear infinite;
}

@keyframes cc-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Advanced Options Toggle */
.cc-advanced summary {
    list-style: none;
}

.cc-advanced summary::-webkit-details-marker {
    display: none;
}

.cc-advanced summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.2s ease;
}

.cc-advanced[open] summary::before {
    transform: rotate(90deg);
}

/* Document Picker Overlay */
.cc-document-picker-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 100;
}

.cc-document-picker-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

/* Document Picker Slide-up Panel */
.cc-document-picker {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 70%;
    background: rgba(20, 20, 20, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 101;
}

.cc-document-picker.show {
    transform: translateY(0);
}

/* Document Picker Header */
.cc-document-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cc-document-picker-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.cc-document-picker-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease;
}

.cc-document-picker-close:hover {
    color: white;
}

/* Document Picker Search */
.cc-document-picker-search {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cc-document-picker-search input {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cc-document-picker-search input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.cc-document-picker-search input:focus {
    border-color: rgba(1, 164, 166, 0.5);
    box-shadow: 0 0 0 2px rgba(1, 164, 166, 0.2);
}

/* Document Picker List */
.cc-document-picker-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

/* Document List Item */
.cc-document-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.2s ease;
}

.cc-document-item:hover {
    background: rgba(1, 164, 166, 0.1);
}

.cc-document-item.selected {
    background: rgba(1, 164, 166, 0.2);
    border-left: 3px solid #01a4a6;
}

.cc-document-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.cc-document-info {
    flex: 1;
    min-width: 0;
}

.cc-document-title {
    color: white;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-document-meta {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    margin-top: 2px;
}

/* Document Picker Loading State */
.cc-document-picker-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.6);
}

.cc-document-picker-loading .spinner {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: #01a4a6;
    border-radius: 50%;
    animation: cc-picker-spin 0.8s linear infinite;
    margin-bottom: 12px;
}

@keyframes cc-picker-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Document Picker Empty State */
.cc-document-picker-empty {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.5);
}

.cc-document-picker-empty p {
    margin: 0;
}

/* Selected Document Display */
.cc-selected-document {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(1, 164, 166, 0.1);
    border: 1px solid rgba(1, 164, 166, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.cc-selected-document:hover {
    background: rgba(1, 164, 166, 0.15);
}

.cc-selected-document-icon {
    font-size: 20px;
}

.cc-selected-document-title {
    flex: 1;
    color: white;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-selected-document-change {
    color: #01a4a6;
    font-size: 12px;
    font-weight: 500;
}

/* Always-visible Instructions Field */
.cc-instructions-field {
    margin-bottom: 16px;
}

.cc-instructions-label {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    margin-bottom: 8px;
}

.cc-instructions-textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    font-size: 14px;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cc-instructions-textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.cc-instructions-textarea:focus {
    border-color: rgba(1, 164, 166, 0.5);
    box-shadow: 0 0 0 2px rgba(1, 164, 166, 0.2);
}

/* ========================================
   Integrity Review Phase
   ======================================== */

/* Issue Card */
.cc-integrity-issue {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px;
    transition: all 0.2s ease;
}

.cc-integrity-issue:hover {
    background: rgba(255, 255, 255, 0.05);
}

.cc-integrity-issue.severity-high {
    border-left: 3px solid #ef4444;
}

.cc-integrity-issue.severity-medium {
    border-left: 3px solid #f59e0b;
}

.cc-integrity-issue.severity-low {
    border-left: 3px solid #6b7280;
}

/* Severity Badge */
.cc-severity-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cc-severity-badge.high {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.cc-severity-badge.medium {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.cc-severity-badge.low {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

/* Verification Badge */
.cc-verification-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}

.cc-verification-badge.accurate {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.cc-verification-badge.inaccurate {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.cc-verification-badge.unverifiable {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
}

/* Toggle Switch */
.cc-toggle-switch {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.cc-toggle-option {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.3px;
}

.cc-toggle-option:hover {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.cc-toggle-option.active-correct {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.4);
}

.cc-toggle-option.active-ignore {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.35);
}

/* Source Links */
.cc-source-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.cc-source-link {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
    background: rgba(99, 102, 241, 0.12);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.2);
    text-decoration: none;
    transition: all 0.2s ease;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-source-link:hover {
    background: rgba(99, 102, 241, 0.25);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.4);
}

/* Accuracy Score */
.cc-accuracy-score {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cc-accuracy-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.cc-accuracy-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* Draft Section Tab */
.cc-draft-tab {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid transparent;
}

.cc-draft-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.cc-draft-tab.active {
    background: rgba(1, 164, 166, 0.15);
    border-color: rgba(1, 164, 166, 0.4);
    color: #01a4a6;
}

/* Responsive Adjustments */
@media (max-width: 480px) {
    .cc-source-tabs {
        flex-direction: column;
    }

    .cc-widget .grid-cols-2 {
        grid-template-columns: 1fr;
    }

    .cc-modal-content {
        max-height: 100vh;
        border-radius: 0;
    }

    .cc-document-picker {
        max-height: 80%;
    }
}

/* ============================================================================
   LINGUA Widget Styles
   ============================================================================ */

.lingua-widget {
    background: rgba(15, 15, 15, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Glass Input Override for LINGUA Widget */
.lingua-widget .glass-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.lingua-widget .glass-input:focus {
    border-color: rgba(1, 164, 166, 0.5);
    outline: none;
    box-shadow: 0 0 0 2px rgba(1, 164, 166, 0.2);
}

.lingua-widget select.glass-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' fill-opacity='0.5' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.lingua-widget select.glass-input option {
    background: #1a1a1a;
    color: #e0e0e0;
}

/* Upload Zone */
.lingua-upload-zone {
    transition: all 0.2s ease;
}

.lingua-upload-zone:hover,
.lingua-upload-zone.dragover {
    border-color: rgba(1, 164, 166, 0.5);
    background: rgba(1, 164, 166, 0.05);
}

/* Language Selection Grid */
.lingua-lang-grid {
    gap: 0.5rem;
}

.lingua-lang-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.2s ease;
}

.lingua-lang-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

.lingua-lang-checkbox {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.lingua-lang-checkbox:checked {
    background: linear-gradient(135deg, #01a4a6, #f56453);
    border-color: transparent;
}

.lingua-lang-checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    color: white;
}

.lingua-lang-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

/* Format Options */
.lingua-format-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.lingua-format-checkbox {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.lingua-format-checkbox:checked {
    background: linear-gradient(135deg, #01a4a6, #f56453);
    border-color: transparent;
}

.lingua-format-checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    color: white;
}

.lingua-format-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

/* Download Buttons */
.lingua-download-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.lingua-download-btn:hover {
    background: rgba(1, 164, 166, 0.2);
    border-color: rgba(1, 164, 166, 0.5);
}

/* Progress Phases */
.lingua-phase {
    transition: color 0.3s ease;
}

.lingua-phase-icon {
    font-size: 1rem;
}

/* LINGUA Responsive Adjustments */
@media (max-width: 480px) {
    .lingua-lang-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   Image Catalyst Widget
   ======================================== */

.ic-widget {
    background: rgba(15, 15, 15, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Mode Selection Buttons */
.ic-mode-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    padding: 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ic-mode-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.ic-mode-btn.ic-mode-active {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.35), rgba(236, 72, 153, 0.2));
    border-color: rgba(147, 51, 234, 0.7);
    box-shadow: 0 0 12px rgba(147, 51, 234, 0.3), inset 0 0 8px rgba(147, 51, 234, 0.1);
}

/* Dimension / Quality Buttons */
.ic-dim-btn,
.ic-qual-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    padding: 0.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ic-dim-btn:hover,
.ic-qual-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.ic-dim-btn.ic-dim-active,
.ic-qual-btn.ic-qual-active {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.35), rgba(236, 72, 153, 0.2));
    border-color: rgba(147, 51, 234, 0.7);
    box-shadow: 0 0 8px rgba(147, 51, 234, 0.25);
}

/* Textarea */
.ic-textarea {
    font-family: inherit;
    line-height: 1.5;
}

.ic-textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Dropzone */
.ic-dropzone {
    transition: all 0.2s ease;
}

/* Spinner */
.ic-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgba(147, 51, 234, 0.8);
    border-radius: 50%;
    animation: ic-spin 0.8s linear infinite;
}

@keyframes ic-spin {
    to { transform: rotate(360deg); }
}

/* Result Image */
.ic-result-image img {
    display: block;
    max-height: 400px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.3);
}

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   Evernote Widget
   ============================================================ */
.evernote-widget {
    background: rgba(15, 15, 15, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.evernote-tab {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.evernote-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.evernote-tab.active {
    background: linear-gradient(135deg, rgba(0, 168, 45, 0.2), rgba(0, 168, 45, 0.05));
    border-color: rgba(0, 168, 45, 0.5);
    color: #00A82D;
}

.evernote-widget .glass-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.evernote-widget .glass-input:focus {
    border-color: rgba(0, 168, 45, 0.5);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 168, 45, 0.2);
}

.evernote-btn-primary {
    background: linear-gradient(135deg, #00A82D, #008a24);
    color: white;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.evernote-btn-primary:hover {
    opacity: 0.9;
}

.evernote-note-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.15s ease;
}

.evernote-note-item:hover {
    background: rgba(0, 168, 45, 0.08);
    border-color: rgba(0, 168, 45, 0.2);
}

.evernote-notebook-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.evernote-note-detail {
    background: rgba(255, 255, 255, 0.02);
}

.evernote-note-content {
    max-height: 300px;
    overflow-y: auto;
    line-height: 1.6;
}

.evernote-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: #00A82D;
    border-radius: 50%;
    animation: evernote-spin 0.6s linear infinite;
}

@keyframes evernote-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   Trello Widget
   ============================================================ */
.trello-widget {
    background: rgba(15, 15, 15, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.trello-widget .glass-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.trello-widget .glass-input:focus {
    border-color: rgba(0, 121, 191, 0.5);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 121, 191, 0.2);
}

.trello-btn-primary {
    background: linear-gradient(135deg, #0079BF, #026AA7);
    color: white;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.trello-btn-primary:hover {
    opacity: 0.9;
}

.trello-card-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.15s ease;
}

.trello-card-item:hover {
    background: rgba(0, 121, 191, 0.08);
    border-color: rgba(0, 121, 191, 0.2);
}

.trello-board-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.trello-label {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.625rem;
    color: #fff;
    opacity: 0.9;
}

.trello-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: #0079BF;
    border-radius: 50%;
    animation: trello-spin 0.6s linear infinite;
}

@keyframes trello-spin {
    to { transform: rotate(360deg); }
}

/* ===================================================================
   Descript Connect Widget
   =================================================================== */

.descript-widget {
    background: rgba(15, 15, 15, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Upload Zone */
.descript-upload-zone {
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.descript-upload-zone:hover,
.descript-upload-zone.drag-over {
    border-color: rgba(99, 102, 241, 0.5);
    background: rgba(99, 102, 241, 0.05);
}

/* Checkbox Cards */
.descript-checkbox-card {
    cursor: pointer;
    display: block;
}

.descript-checkbox-card .descript-check-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.2s ease;
}

.descript-checkbox-card:hover .descript-check-inner {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}

.descript-checkbox-card.checked .descript-check-inner,
.descript-checkbox-card input:checked ~ .descript-check-inner {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.5);
    color: #a5b4fc;
}

.descript-checkbox-card.full-width {
    grid-column: span 2;
}

.descript-check-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

/* Select & Input */
.descript-select,
.descript-input {
    width: 100%;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.8125rem;
    appearance: none;
    outline: none;
    transition: border-color 0.2s;
}

.descript-select:focus,
.descript-input:focus {
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.descript-select option {
    background: #1a1a1a;
    color: #e0e0e0;
}

/* Textarea */
.descript-textarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.8125rem;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
}

.descript-textarea:focus {
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.descript-textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Submit Button */
.descript-submit-btn {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
}

.descript-submit-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #818cf8, #a78bfa);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

/* Open in Descript Button */
.descript-open-btn {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    text-decoration: none;
}

.descript-open-btn:hover {
    background: linear-gradient(135deg, #818cf8, #a78bfa);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

/* Phase Progress Bar */
.descript-phase-bar {
    display: flex;
    gap: 0.25rem;
}

.descript-phase-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.descript-phase-dot {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
    transition: background 0.3s ease;
}

.descript-phase-step.done .descript-phase-dot {
    background: #6366f1;
}

.descript-phase-step.active .descript-phase-dot {
    background: linear-gradient(90deg, #6366f1, #a78bfa);
    animation: descript-pulse 1.5s ease-in-out infinite;
}

.descript-phase-step span {
    color: rgba(255, 255, 255, 0.3);
}

.descript-phase-step.done span {
    color: rgba(99, 102, 241, 0.8);
}

.descript-phase-step.active span {
    color: rgba(255, 255, 255, 0.8);
}

/* Spinner */
.descript-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: descript-spin 0.8s linear infinite;
}

@keyframes descript-spin {
    to { transform: rotate(360deg); }
}

@keyframes descript-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ========== Campaign Scan Widget ========== */

.campaign-scan-widget {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(16px);
}

.cs-email-box {
    background: rgba(255, 255, 255, 0.03);
}

/* Waiting animation - three pulsing dots */
.cs-scan-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cs-scan-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #14b8a6;
    animation: cs-pulse 1.4s ease-in-out infinite;
}

.cs-scan-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.cs-scan-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes cs-pulse {
    0%, 100% { transform: scale(0.6); opacity: 0.3; }
    50% { transform: scale(1); opacity: 1; }
}

/* Processing spinner */
.cs-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #14b8a6;
    border-radius: 50%;
    animation: cs-spin 0.8s linear infinite;
}

@keyframes cs-spin {
    to { transform: rotate(360deg); }
}

/* Progress steps */
.cs-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.cs-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
    transition: all 0.3s;
}

.cs-step.active .cs-step-dot {
    background: #14b8a6;
    box-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
    animation: cs-step-pulse 1.5s ease-in-out infinite;
}

@keyframes cs-step-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(20, 184, 166, 0.3); }
    50% { box-shadow: 0 0 12px rgba(20, 184, 166, 0.7); }
}

/* Findings scroll area */
.cs-findings::-webkit-scrollbar {
    width: 4px;
}

.cs-findings::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.cs-findings::-webkit-scrollbar-track {
    background: transparent;
}

/* Image Catalyst: dimensions dropdown options */
#ic-dim-select option,
#ic-dim-select optgroup {
    background: #1a1a1a;
    color: #e0e0e0;
}