/* ==========================================================
   Nadigi CSA (Copy · Share · AI) v2.1 — Stylesheet
   Tất cả styles scope dưới .nadigi-csa-plugin
   ========================================================== */

/* ── Reset cục bộ ────────────────────────────────────────── */
.nadigi-csa-plugin,
.nadigi-csa-plugin *,
.nadigi-csa-plugin *::before,
.nadigi-csa-plugin *::after {
    box-sizing: border-box;
}

.nadigi-csa-plugin button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
}

/* ── CSS Variables ───────────────────────────────────────── */
.nadigi-csa-plugin {
    --nsc-font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    --nsc-radius: 999px;
    --nsc-radius-md: 10px;
    --nsc-border: #EBEBEB; /* gray_50 */
    --nsc-bg: #FFFFFF; /* white */
    --nsc-text: #1F1E1C; /* black */
    --nsc-muted: #808080; /* gray */
    --nsc-hover-bg: #F6F6F7; /* gray_10 */
    --nsc-icon-bg: #F1F1F1; /* gray_30 — icon square background */
    --nsc-shadow: 0 8px 24px rgba(0, 0, 0, .10), 0 2px 8px rgba(0, 0, 0, .06);
    --nsc-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
    --nsc-ease: .17s cubic-bezier(.4, 0, .2, 1);

    /* brand colours */
    --nsc-facebook: #1877f2;
    --nsc-linkedin: #0a66c2;
    --nsc-x: #000000;
    --nsc-google-ai: #4285f4;
    --nsc-chatgpt: #10a37f;
    --nsc-claude: #d97757;
}

/* ──────────────────────────────────────────────────────────
   PILL WRAPPER
   ────────────────────────────────────────────────────────── */

.nadigi-csa-plugin .nadigi-csa-pill {
    position: relative !important;
    display: inline-flex !important;
    font-family: var(--nsc-font) !important;
    vertical-align: middle;
}

/* ── The pill button itself ──────────────────────────────── */
.nadigi-csa-plugin .nadigi-csa-pill-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px 12px !important;
    background: var(--nsc-bg) !important;
    border: 1px solid var(--nsc-border) !important;
    border-radius: var(--nsc-radius) !important;
    color: var(--nsc-text) !important;
    font-size: 13.5px !important;
    font-family: var(--nsc-font) !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    outline: none !important;
    text-decoration: none !important;
    transition: background var(--nsc-ease),
        border-color var(--nsc-ease),
        color var(--nsc-ease);
    user-select: none;
}

.nadigi-csa-plugin .nadigi-csa-pill-btn:hover {
    border-color: var(--nsc-muted) !important; /* gray (darker than gray_90) */
}

.nadigi-csa-plugin .nadigi-csa-pill-btn:active {
    border-color: var(--nsc-muted) !important;
}

.nadigi-csa-plugin .nadigi-csa-pill-btn[aria-expanded="true"] {
    border-color: var(--nsc-muted) !important;
}

/* SVG inside pill button */
.nadigi-csa-plugin .nadigi-csa-pill-btn>svg {
    display: block !important;
    flex-shrink: 0 !important;
}

/* Separator line before chevron */
.nadigi-csa-plugin .nadigi-csa-pill-sep {
    display: block !important;
    width: 1px !important;
    height: 16px !important;
    background: var(--nsc-border) !important;
    flex-shrink: 0 !important;
    margin: 0 2px !important;
}

/* Chevron rotation */
.nadigi-csa-plugin .nadigi-csa-pill-btn>svg:last-child {
    transition: transform var(--nsc-ease) !important;
    color: var(--nsc-muted) !important;
}

.nadigi-csa-plugin .nadigi-csa-pill-btn[aria-expanded="true"]>svg:last-child {
    transform: rotate(180deg) !important;
}

/* ── Dark Theme for main button ──────────────────────────── */
.nadigi-csa-plugin.nadigi-csa-theme-dark .nadigi-csa-pill-btn {
    background: var(--nsc-text) !important; /* black */
    color: var(--nsc-bg) !important; /* white */
    border-color: var(--nsc-text) !important;
}

.nadigi-csa-plugin.nadigi-csa-theme-dark .nadigi-csa-pill-btn:hover,
.nadigi-csa-plugin.nadigi-csa-theme-dark .nadigi-csa-pill-btn:active,
.nadigi-csa-plugin.nadigi-csa-theme-dark .nadigi-csa-pill-btn[aria-expanded="true"] {
    border-color: var(--nsc-text) !important; /* Keep black */
}

.nadigi-csa-plugin.nadigi-csa-theme-dark .nadigi-csa-pill-sep {
    background: #333 !important; /* dark separator */
}

/* Note: Arrow SVG still inherits var(--nsc-muted) as defined above */

/* ──────────────────────────────────────────────────────────
   DROPDOWN PANEL
   ────────────────────────────────────────────────────────── */

.nadigi-csa-plugin .nadigi-csa-pill-dropdown {
    position: fixed !important;
    top: 0;
    left: 0;
    min-width: 250px !important;
    max-width: 250px !important;
    background: var(--nsc-bg) !important;
    border: 1px solid var(--nsc-border) !important;
    border-radius: var(--nsc-radius-md) !important;
    box-shadow: var(--nsc-shadow) !important;
    z-index: 99990 !important;
    overflow: hidden !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity var(--nsc-ease),
        visibility var(--nsc-ease),
        transform var(--nsc-ease);
}

.nadigi-csa-plugin .nadigi-csa-pill-dropdown.nadigi-csa-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}


/* ── Dropdown items ──────────────────────────────────────── */
.nadigi-csa-plugin .nadigi-csa-pill-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 11px 14px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--nsc-text) !important;
    font-family: var(--nsc-font) !important;
    font-size: 13.5px !important;
    text-align: left !important;
    cursor: pointer !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
    transition: background var(--nsc-ease);
}

.nadigi-csa-plugin .nadigi-csa-pill-item:hover {
    background: var(--nsc-hover-bg) !important;
}

.nadigi-csa-plugin .nadigi-csa-pill-item:not(:last-child) {
    border-bottom: 1px solid var(--nsc-border) !important;
}

/* Icon in dropdown item */
.nadigi-csa-plugin .nadigi-csa-item-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: var(--nsc-icon-bg) !important; /* gray_30 */
    color: var(--nsc-muted) !important;
    transition: background var(--nsc-ease), color var(--nsc-ease);
}

.nadigi-csa-plugin .nadigi-csa-item-icon svg {
    display: block !important;
    width: 15px !important;
    height: 15px !important;
}

.nadigi-csa-plugin .nadigi-csa-pill-item:hover,
.nadigi-csa-plugin .nadigi-csa-pill-item:focus {
    background: var(--nsc-hover-bg) !important;
    color: var(--nsc-text) !important;
}

.nadigi-csa-plugin .nadigi-csa-pill-item:hover .nadigi-csa-item-icon,
.nadigi-csa-plugin .nadigi-csa-pill-item:focus .nadigi-csa-item-icon {
    background: var(--nsc-border) !important; /* gray_50 (#EBEBEB) instead of gray_30 (#F1F1F1) */
}

/* Brand color on hover - increased specificity */
.nadigi-csa-plugin .nadigi-csa-pill-item:hover .nadigi-csa-item-icon.nadigi-icon-facebook {
    background: var(--nsc-facebook) !important;
    color: #fff !important;
}

.nadigi-csa-plugin .nadigi-csa-pill-item:hover .nadigi-csa-item-icon.nadigi-icon-linkedin {
    background: var(--nsc-linkedin) !important;
    color: #fff !important;
}

.nadigi-csa-plugin .nadigi-csa-pill-item:hover .nadigi-csa-item-icon.nadigi-icon-x {
    background: var(--nsc-x) !important;
    color: #fff !important;
}

.nadigi-csa-plugin .nadigi-csa-pill-item:hover .nadigi-csa-item-icon.nadigi-icon-google-ai {
    background: var(--nsc-google-ai) !important;
    color: #fff !important;
}

.nadigi-csa-plugin .nadigi-csa-pill-item:hover .nadigi-csa-item-icon.nadigi-icon-chatgpt {
    background: var(--nsc-chatgpt) !important;
    color: #fff !important;
}

.nadigi-csa-plugin .nadigi-csa-pill-item:hover .nadigi-csa-item-icon.nadigi-icon-claude {
    background: var(--nsc-claude) !important;
    color: #fff !important;
}

/* Text in dropdown item */
.nadigi-csa-plugin .nadigi-csa-item-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    line-height: 1.2 !important;
}

.nadigi-csa-plugin .nadigi-csa-item-text strong {
    font-weight: 500 !important;
    font-size: 13.5px !important;
    color: var(--nsc-text) !important;
    text-decoration: none !important;
}

.nadigi-csa-plugin .nadigi-csa-item-text small {
    font-size: 11.5px !important;
    color: var(--nsc-muted) !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}

/* ──────────────────────────────────────────────────────────
   TOAST
   ────────────────────────────────────────────────────────── */

#nadigi-csa-toast {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    background: #1F1E1C !important; /* black */
    color: #FFFFFF !important; /* white */
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18) !important;
    z-index: 999999 !important;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .22s, transform .22s;
    pointer-events: none !important;
    line-height: 1.3 !important;
}

#nadigi-csa-toast.nadigi-csa-toast-show {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

#nadigi-csa-toast svg {
    display: block !important;
    flex-shrink: 0 !important;
    color: #4ade80 !important;
}

/* Toast Left Position */
#nadigi-csa-toast.nadigi-csa-toast-left {
    right: auto !important;
    left: 24px !important;
}

/* ── Responsive ──────────────────────────────────────────── */
/* Note: Dropdown left/right position is handled dynamically by JS
   in openDropdown() to prevent viewport overflow on all screen sizes. */

@media (max-width: 480px) {
    .nadigi-csa-plugin .nadigi-csa-pill-btn {
        padding: 6px 10px !important;
        font-size: 12.5px !important;
    }

    .nadigi-csa-plugin .nadigi-csa-pill-dropdown {
        min-width: 240px !important;
        max-width: 240px !important;
    }

    #nadigi-csa-toast {
        bottom: 16px !important;
        right: 16px !important;
    }
    
    #nadigi-csa-toast.nadigi-csa-toast-left {
        left: 16px !important;
        right: auto !important;
    }
}