/* ══════════════════════════════════════════
   Figma + Manychat + Google Drive Integrations
   ══════════════════════════════════════════ */

/* ── Figma Config Bar ── */
.figma-bar { display: none; padding: var(--s-3) var(--s-5); border-top: none; background: transparent; }
.figma-bar.visible { display: flex; align-items: center; gap: var(--s-3); }
.figma-bar-label { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-sub); display: flex; align-items: center; gap: var(--s-1); white-space: nowrap; }
.figma-bar-input {
    flex: 1; max-width: 200px; padding: var(--s-1) var(--s-3);
    border: 1px solid var(--line); border-radius: var(--radius-s);
    background: var(--surface); color: var(--text); font-size: var(--text-lg);
    font-family: var(--font-mono); outline: none; transition: border-color var(--motion-hover);
}
.figma-bar-input:focus { border-color: var(--accent); }
.figma-bar-input::placeholder { color: var(--text-sub); }
.figma-bar-btn { padding: var(--s-1) var(--s-4); border: none; border-radius: var(--radius-s); font-size: var(--text-base); font-weight: var(--weight-semibold); cursor: pointer; font-family: var(--font); transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover); }
.figma-bar-save { background: var(--clr-purple-deep); color: var(--text); }
.figma-bar-save:hover { background: var(--clr-purple-darker); transform: translateY(var(--hover-lift-sm)); }
.figma-bar-save:disabled { opacity: 0.4; cursor: default; }
.figma-bar-status { font-size: var(--text-sm); color: var(--text-sub); display: flex; align-items: center; gap: var(--s-1); }
.figma-bar-status.active { color: var(--clr-purple-light); }
.figma-bar-toggle { width: 36px; height: 20px; border-radius: var(--radius); border: none; background: var(--surface-active); cursor: pointer; position: relative; transition: background var(--duration-base) var(--easing-spring), box-shadow var(--duration-base) var(--easing-out); }
.figma-bar-toggle.on { background: var(--clr-purple-deep); }
.figma-bar-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text); /* transition은 animations.css §13 범용 토글 스프링이 cascade 적용 */ }
.figma-bar-toggle.on::after { transform: translateX(16px); }

/* ── Manychat Setup Modal ── */
.mc-tab {
    padding: var(--s-2) var(--s-4); border-radius: var(--radius-pill); border: none;
    background: var(--surface); color: var(--text-sub); font-size: var(--text-base); cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover); font-weight: var(--weight-semibold); font-family: var(--font);
}
.mc-tab.active { background: var(--accent); color: var(--text); box-shadow: var(--shadow-glow-accent); }
.mc-tab:hover:not(.active) { background: var(--surface-hover); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.mc-action-btn {
    padding: var(--s-1) var(--s-4); border-radius: var(--radius-pill); border: none;
    background: var(--surface-hover); color: var(--text-sub); font-size: var(--text-sm); cursor: pointer;
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover); font-weight: var(--weight-medium); font-family: var(--font);
}
.mc-action-btn:hover { background: var(--surface-hover); color: var(--text); transform: translateY(var(--hover-lift-sm)); }
.mc-action-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.mc-step { padding: var(--s-1) 0; display: flex; align-items: center; gap: var(--s-2); }
.mc-step .icon { width: 20px; text-align: center; font-size: var(--text-lg); display: inline-flex; align-items: center; justify-content: center; }
.mc-step .icon svg { width: var(--s-4); height: var(--s-4); flex-shrink: 0; }
.mc-step.done .icon { color: var(--clr-success-vivid); }
.mc-step.fail .icon { color: var(--clr-error); }
.mc-step.active .icon { color: var(--clr-warning); }
.mc-dropzone {
    border: 2px dashed var(--border); border-radius: var(--radius); padding: var(--s-5) var(--s-5);
    text-align: center; color: var(--text-sub); font-size: var(--text-lg);
    cursor: pointer; transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover); margin-bottom: var(--s-3);
    background: var(--surface);
}
.mc-dropzone:hover, .mc-dropzone.dragover { border-color: var(--accent); background: var(--surface-hover); color: var(--text); }
.mc-dropzone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.mc-dropzone .drop-icon { font-size: var(--text-8xl); margin-bottom: var(--s-2); }
.mc-dropzone .drop-hint { font-size: var(--text-sm); color: var(--text-sub); margin-top: var(--s-1); }
.mc-pdf-badge {
    display: flex; align-items: center; gap: var(--s-3);
    background: var(--surface); border: none; border-radius: var(--radius-s);
    padding: var(--s-3) var(--s-4); font-size: var(--text-base); color: var(--text); margin-bottom: var(--s-3); width: 100%; box-sizing: border-box;
}
.mc-pdf-badge .pdf-icon { font-size: var(--text-xl); }
.mc-pdf-badge .pdf-name-input {
    font-weight: var(--weight-semibold); font-size: var(--text-lg); color: var(--text); width: 100%;
    background: transparent; border: 1px solid transparent; border-radius: var(--radius-s);
    padding: var(--s-1) var(--s-1); outline: none; font-family: inherit; transition: border-color var(--motion-hover), background-color var(--motion-hover);
}
.mc-pdf-badge .pdf-name-input:hover { border-color: var(--line-bold); transform: translateY(var(--hover-lift-sm)); }
.mc-pdf-badge .pdf-name-input:focus { border-color: var(--accent); background: rgba(0,0,0,0.2); }
.mc-pdf-badge .pdf-meta { font-size: var(--text-sm); color: var(--text-sub); padding-left: var(--s-1); }
.mc-pdf-badge .pdf-remove { cursor: pointer; opacity: 0.4; font-size: var(--text-xl); transition: opacity var(--duration-fast); }
.mc-pdf-badge .pdf-remove:hover { opacity: 1; transform: translateY(var(--hover-lift-sm)); }

/* ── Channel Selector Chips ── */
.mc-channel-chips { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); }
.mc-channel-chip {
    display: flex; align-items: center; gap: var(--s-1);
    padding: var(--s-2) var(--s-4); border-radius: var(--radius-s);
    border: none; background: var(--surface);
    cursor: pointer; font-size: var(--text-base); color: var(--text-sub);
    transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover), opacity var(--motion-hover), transform var(--motion-hover), box-shadow var(--motion-hover); user-select: none; font-family: var(--font);
}
.mc-channel-chip:hover { background: var(--surface); transform: translateY(var(--hover-lift-sm)); }
.mc-channel-chip.selected { background: var(--surface-active); color: var(--text); font-weight: var(--weight-semibold); }
.mc-channel-chip input[type="checkbox"] { display: none; }
.mc-banned-tag {
    display: inline-flex; align-items: center; gap: var(--s-1);
    background: var(--clr-error-bg-lg); color: var(--clr-error-bright); border: 1px solid var(--clr-error-bg-2xl);
    border-radius: var(--radius); padding: var(--s-1) var(--s-2); font-size: var(--text-sm); white-space: nowrap;
}
.mc-banned-tag .x { cursor: pointer; opacity: 0.6; font-size: var(--text-lg); }
.mc-banned-tag .x:hover { opacity: 1; transform: translateY(var(--hover-lift-sm)); }

/* ── Google Drive Status ── */
.gdrive-status { font-size: var(--text-sm); color: var(--text-sub); display: flex; align-items: center; gap: var(--s-1); }
.gdrive-status.connected { color: var(--clr-success); }
.gdrive-badge { padding: var(--s-1) var(--s-2); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-semibold); }