/*
 * CALNOMAD Assistant Widget — Chrome CSS
 * Version: 2.4.1 (Clean Consistent Micro-Interactions + Optimized Horizontal Launcher)
 *
 * Scope: Only widget chrome — launcher, panels, header, close button, chat cards.
 * Rule:  Zero selectors targeting shortcode output (.cp-*, .cbp-*, .rvap-*)
 */

/* ── Design tokens ────────────────────────────────────────────────────────── */
#cn-launcher,
.cn-panel {
    --cn-radius:       40px;
    --cn-shadow:       0 20px 40px -8px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.15);
    --cn-border:       rgba(255, 255, 255, 0.12);
    --cn-bg:           #ffffff;
    --cn-text:         #ffffff;
    --cn-text-muted:   rgba(255, 255, 255, 0.75);
    --cn-transition:   180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Launcher pill — horizontal layout ────────────────────────────────────── */
#cn-launcher {
    position:       fixed;
    bottom:         24px;
    right:          24px;
    z-index:        2147483647;
    transform:      none;
    display:        flex;
    flex-direction: row;
    align-items:    center;
    gap:            4px;
    background:     var(--cn-bg);
    border:         1px solid var(--cn-border);
    border-radius:  var(--cn-radius);
    padding:        5px;
    box-shadow:     var(--cn-shadow);
}

#cn-launcher.cn-position--left {
    right: auto;
    left:  24px;
}

/* ── Base pill buttons ─────────────────────────────────────────────────────── */
.cn-btn {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       8px 14px;
    border-radius: 30px;
    border:        none;
    background:    transparent;
    color:         var(--cn-text-muted);
    font-family:   inherit;
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background var(--cn-transition), color var(--cn-transition), transform var(--cn-transition);
    white-space:   nowrap;
    min-width:     unset;
    text-align:    center;
    outline:       none;
}

.cn-btn:focus-visible {
    outline: 2px solid var(--cn-accent);
    outline-offset: 2px;
}

/* ── 🌟 Book Appointment — Primary CTA (Clean & Consistent Hover) ──────────── */
.cn-btn[data-channel="book"] {
    background:   var(--cn-accent, #6366f1);
    color:        #ffffff !important;
    padding:      10px 18px;
    margin-right: 4px;
    position:     relative;
    box-shadow:   none;
}

.cn-btn[data-channel="book"]:hover {
    background: var(--cn-accent-hover, #4f46e5) !important; /* Smooth color shade shift */
    color:      #ffffff !important;
    transform:  translateY(-1px); /* Consistent micro-lift */
    box-shadow: none;             /* Clean consistency — NO glowing blue shadow */
}

/* Vertical divider line after Book button */
.cn-btn[data-channel="book"]::after {
    content:        "";
    position:       absolute;
    right:          -5px;
    top:            20%;
    height:         60%;
    width:          1px;
    background:     rgba(255, 255, 255, 0.18);
    pointer-events: none;
}

/* ── Chat & Talk — Secondary CTAs (Matching Micro-Interaction) ────────────── */
.cn-btn[data-channel="chat"],
.cn-btn[data-channel="talk"] {
    color: var(--cn-text-muted);
}

.cn-btn[data-channel="chat"]:hover,
.cn-btn[data-channel="talk"]:hover {
    color:      var(--cn-text);
    background: rgba(255, 255, 255, 0.12); /* Soft neutral overlay */
    transform:  translateY(-1px);            /* Matches primary lift */
}

.cn-btn.is-active {
    color: #ffffff;
}

.cn-btn[data-channel="chat"].is-active,
.cn-btn[data-channel="talk"].is-active {
    background: rgba(255, 255, 255, 0.18);
    color:      #ffffff;
}

/* ── Icon container ───────────────────────────────────────────────────────── */
.cn-btn__icon {
    width:           18px;
    height:          18px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    color:           inherit;
}

.cn-btn__icon svg {
    width:   16px;
    height:  16px;
    display: block;
    stroke:  currentColor;
}

/* ── Active indicator dot ─────────────────────────────────────────────────── */
.cn-btn__dot {
    width:         5px;
    height:        5px;
    border-radius: 50%;
    background:    currentColor;
    margin-left:   2px;
    opacity:       0;
    transition:    opacity var(--cn-transition);
}

.cn-btn.is-active .cn-btn__dot {
    opacity: 1;
}

/* ── Dark theme (explicit class — mirrors default) ────────────────────────── */
#cn-launcher.cn-theme--dark {
    background: #0f172a;
    border:     1px solid rgba(255, 255, 255, 0.12);
    box-shadow: var(--cn-shadow);
}

#cn-launcher.cn-theme--dark .cn-btn {
    color: rgba(255, 255, 255, 0.75);
}

#cn-launcher.cn-theme--dark .cn-btn:hover {
    color:      #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

/* ── Light theme ──────────────────────────────────────────────────────────── */
#cn-launcher.cn-theme--light {
    background: #ffffff;
    border:     1px solid #e2e8f0;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.12);
}

#cn-launcher.cn-theme--light .cn-btn {
    color: #475569;
}

#cn-launcher.cn-theme--light .cn-btn:hover {
    color:      #0f172a;
    background: #f1f5f9;
}

#cn-launcher.cn-theme--light .cn-btn[data-channel="book"] {
    color:      #ffffff !important;
    background: var(--cn-accent, #6366f1);
}

#cn-launcher.cn-theme--light .cn-btn[data-channel="book"]::after {
    background: #cbd5e1;
}

#cn-launcher.cn-theme--light .cn-btn.is-active:not([data-channel="book"]) {
    background: #e2e8f0;
    color:      #0f172a;
}

/* ── Panels Container ─────────────────────────────────────────────────────── */
.cn-panel {
    position:       fixed;
    bottom:         84px; /* Sitting 12px cleanly above horizontal launcher */
    right:          24px;
    width:          440px;
    max-height:     calc(100vh - 110px);
    z-index:        2147483646;
    background:     var(--cn-bg);
    border-radius:  20px;
    box-shadow:     var(--cn-shadow);
    border:         1px solid var(--cn-border);
    display:        none;
    flex-direction: column;
    overflow:       hidden;
}

.cn-panel.is-open {
    display: flex;
}

/* Book Panel — Wide layout for multi-step table */
#cn-panel-book {
    width:      760px;
    bottom:     84px;
    right:      24px;
    max-height: calc(100vh - 110px);
}

/* Chat Panel — Standard optimal chat width */
#cn-panel-chat {
    width:      440px;
    bottom:     84px;
    right:      24px;
    height:     calc(100vh - 120px);
    max-height: 680px;
}

/* Talk Panel — Compact voice orb layout */
#cn-panel-talk {
    width:      440px;
    bottom:     84px;
    right:      24px;
}

/* Left position variants */
.cn-panel.cn-position--left {
    right: auto;
    left:  24px;
}

#cn-panel-book.cn-position--left {
    right: auto;
    left:  24px;
}

/* ── Panel header ─────────────────────────────────────────────────────────── */
.cn-panel__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 18px;
    flex-shrink:     0;
    background:      var(--cn-accent, #6366f1);
    color:           #ffffff;
}

.cn-panel__header-info h3 {
    margin:      0 0 2px;
    font-size:   14px;
    font-weight: 700;
    line-height: 1.2;
    color:       #ffffff;
}

.cn-panel__header-info p {
    margin:    0;
    font-size: 11px;
    opacity:   0.85;
    color:     #ffffff;
}

.cn-panel__close {
    background:    rgba(255, 255, 255, 0.2);
    border:        none;
    color:         #ffffff;
    width:         28px;
    height:        28px;
    border-radius: 50%;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    transition:    background var(--cn-transition);
    font-size:     16px;
    line-height:   1;
}

.cn-panel__close:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* ── Panel body & footer ─────────────────────────────────────────────────── */
.cn-panel__body {
    flex:       1;
    overflow-y: auto;
    min-height: 0;
}

.cn-panel__footer {
    padding:     8px 16px;
    text-align:  center;
    font-size:   11px;
    color:       var(--cn-text-muted);
    background:  var(--cn-bg);
    border-top:  1px solid var(--cn-border);
    flex-shrink: 0;
}

.cn-panel__footer a {
    color:           inherit;
    text-decoration: none;
    opacity:         0.8;
}

.cn-panel__footer a:hover {
    opacity: 1;
}

/* Chat panel body fills remaining height */
#cn-panel-chat .cn-panel__body {
    flex:           1;
    min-height:     0;
    display:        flex;
    flex-direction: column;
}

#cn-panel-chat .cbp-inline-widget {
    flex:           1;
    display:        flex;
    flex-direction: column;
    min-height:     0;
}

#cn-panel-chat .cbp-panel-inline {
    height:        100% !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
}

/* ── Card Overrides & Padding Restorations ───────────────────────────────── */
.cbp-inline-widget .cn-chat-card,
.cbp-inline-widget .cn-chat-card *,
.cbp-widget .cn-chat-card,
.cbp-widget .cn-chat-card * {
    box-sizing: border-box;
}

.cbp-inline-widget .cn-chat-card__header,
.cbp-widget .cn-chat-card__header {
    padding: 10px 16px !important;
}

.cbp-inline-widget .cn-avail-card__service,
.cbp-widget .cn-avail-card__service {
    padding: 14px 16px !important;
}

.cbp-inline-widget .cn-avail-card__date,
.cbp-widget .cn-avail-card__date {
    padding: 10px 16px !important;
}

.cbp-inline-widget .cn-avail-card__slots,
.cbp-widget .cn-avail-card__slots {
    padding: 14px 16px !important;
}

.cbp-inline-widget .cp-slot-btn,
.cbp-widget .cp-slot-btn {
    padding: 12px 8px !important;
}

.cbp-inline-widget .cp-action-primary,
.cbp-widget .cp-action-primary {
    padding: 8px 16px !important;
}

.cbp-inline-widget .cn-bc__badge,
.cbp-widget .cn-bc__badge {
    margin: 12px 14px 0 !important;
    padding: 4px 10px !important;
}

.cbp-inline-widget .cn-bc__attendee,
.cbp-widget .cn-bc__attendee {
    padding: 10px 14px 0 !important;
}

.cbp-inline-widget .cn-bc__rows,
.cbp-widget .cn-bc__rows {
    padding: 8px 14px !important;
}

.cbp-inline-widget .cn-bc__row,
.cbp-widget .cn-bc__row {
    padding: 8px 0 !important;
}

.cbp-inline-widget .cn-bc__manage,
.cbp-widget .cn-bc__manage {
    padding: 10px 14px !important;
}

/* CalenPress service grid padding restorations */
.cbp-inline-widget .cp-services-grid,
.cbp-widget .cp-services-grid {
    padding: 14px 16px !important;
    gap: 10px !important;
}

.cbp-inline-widget .cp-service-card,
.cbp-widget .cp-service-card {
    padding: 18px !important;
}

.cbp-inline-widget .cp-service-card-header,
.cbp-widget .cp-service-card-header {
    margin-bottom: 10px !important;
}

.cbp-inline-widget .cp-service-meta,
.cbp-widget .cp-service-meta {
    gap: 5px !important;
}

/* CalenPress practitioner grid restorations */
.cbp-inline-widget .cp-team-grid,
.cbp-widget .cp-team-grid {
    padding: 14px 16px !important;
    gap: 16px !important;
}

.cbp-inline-widget .cp-practitioner-card,
.cbp-widget .cp-practitioner-card {
    padding: 20px 14px !important;
    gap: 10px !important;
}

.cbp-inline-widget .cp-practitioner-avatar,
.cbp-widget .cp-practitioner-avatar {
    width: 72px !important;
    height: 72px !important;
}

.cn-opt-grid { 
    padding: 4px 0; 
}

.cn-card-wrapper .cp-practitioner-avatar   { border-color: var(--cn-accent, #6366f1); }
.cn-card-wrapper .cp-practitioner-initials { background:   var(--cn-accent, #6366f1); }

.cn-card-wrapper {
    width:          100%;
    display:        flex;
    flex-direction: column;
    gap:            6px;
    padding:        2px 0;
}

.cn-chat-card.cn-bc {
    width:       100%;
    max-width:   100%;
    margin:      4px 0;
    align-self:  stretch;
}

.cn-card-wrapper .cn-chat-card {
    width:     100%;
    max-width: 100%;
}

/* ── Chat Cards Base Styling ────────────────────────────────────────────── */
.cn-chat-card {
    font-family:   'DM Sans', system-ui, -apple-system, sans-serif;
    background:    #ffffff;
    border:        1.5px solid #e2e8f0;
    border-radius: 14px;
    overflow:      hidden;
    margin:        4px 0;
    max-width:     100%;
    box-shadow:    0 4px 16px rgba(0,0,0,.06);
}

.cn-chat-card__header {
    padding:         10px 14px;
    background:      #f8fafc;
    border-bottom:   1.5px solid #e2e8f0;
    font-size:       11px;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  .06em;
    color:           #64748b;
    display:         flex;
    align-items:     center;
    gap:             6px;
}

.cn-chat-card__divider {
    height:     1px;
    background: #e2e8f0;
    margin:     0;
}

/* ── Availability Card ───────────────────────────────────────────────────── */
.cn-avail-card__service {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 16px;
    gap:             12px;
}

.cn-avail-card__service-name {
    font-size:     16px;
    font-weight:   700;
    color:         #0f172a;
    margin-bottom: 4px;
}

.cn-avail-card__service-meta {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   12px;
    color:       #64748b;
    font-weight: 500;
}

.cn-avail-card__service-price {
    font-size:     17px;
    font-weight:   700;
    color:         var(--cn-accent, #6366f1);
    flex-shrink:   0;
    margin-bottom: 6px;
    text-align:    right;
}

.cn-avail-card__practitioner {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   12px;
    font-weight: 600;
    color:       #475569;
}

.cn-avail-card__pavatar {
    width:           24px;
    height:          24px;
    border-radius:   50%;
    background:      var(--cn-accent, #6366f1);
    color:           #fff;
    font-size:       11px;
    font-weight:     700;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

.cn-avail-card__date {
    display:       flex;
    align-items:   center;
    gap:           7px;
    padding:       10px 16px;
    background:    #f8fafc;
    font-size:     13px;
    font-weight:   600;
    color:         #334155;
    border-top:    1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.cn-avail-card__date svg { 
    color:       #94a3b8; 
    flex-shrink: 0; 
}

.cn-avail-card__slots {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   8px;
    padding:               14px 16px;
}

.cn-avail-card__empty {
    padding:    24px 16px;
    text-align: center;
    font-size:  13px;
    color:      #94a3b8;
}

/* ── Booking Confirmation Card ───────────────────────────────────────────── */
.cn-bc {
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}

.cn-bc__badge {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    margin:         12px 14px 0;
    padding:        4px 10px;
    background:     #ecfdf5;
    color:          #16a34a;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius:  20px;
}

.cn-bc__attendee {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     10px 14px 0;
}

.cn-bc__attendee-avatar {
    width:           36px;
    height:          36px;
    border-radius:   8px;
    background:      var(--cn-accent, #6366f1);
    color:           #fff;
    font-size:       14px;
    font-weight:     700;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

.cn-bc__attendee-name {
    font-size:   14px;
    font-weight: 700;
    color:       #0f172a;
}

.cn-bc__attendee-sub {
    font-size:  11px;
    color:      #64748b;
    margin-top: 1px;
}

.cn-bc__rows {
    padding:    8px 14px;
    margin-top: 8px;
}

.cn-bc__row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         8px 0;
    border-bottom:   1px solid #f1f5f9;
    font-size:       13px;
}

.cn-bc__row:last-child { border-bottom: none; }

.cn-bc__row-key {
    color:       #94a3b8;
    font-weight: 500;
}

.cn-bc__row-val {
    font-weight: 600;
    color:       #1e293b;
    text-align:  right;
}

.cn-bc__manage {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         10px 14px;
    font-size:       13px;
    font-weight:     600;
    color:           var(--cn-accent, #6366f1);
    text-decoration: none;
    border-top:      1.5px solid #e2e8f0;
    transition:      background .15s;
    font-family:     inherit;
    background:      transparent;
    border-left:     none;
    border-right:    none;
    border-bottom:   none;
    cursor:          pointer;
    width:           100%;
}

.cn-bc__manage:hover { background: #f8fafc; }

/* ── Slot Picker Bubble ──────────────────────────────────────────────────── */
.cn-slot-bubble {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    max-width:      280px;
}

.cn-slot-prose {
    font-size:   13px;
    line-height: 1.4;
    color:       #0f172a;
}

.cn-slot-meta {
    display:   flex;
    gap:       6px;
    flex-wrap: wrap;
}

.cn-slot-meta span {
    font-size:     10px;
    font-weight:   600;
    padding:       3px 8px;
    background:    #f1f5f9;
    border-radius: 20px;
    color:         #475569;
}

.cn-slot-grid {
    display:   flex;
    flex-wrap: wrap;
    gap:       5px;
}

.cn-slot-pill {
    padding:       5px 11px;
    border-radius: 20px;
    border:        1px solid #e2e8f0;
    background:    #ffffff;
    font-size:     12px;
    font-weight:   600;
    color:         #0f172a;
    cursor:        pointer;
    transition:    all .15s;
    line-height:   1;
}

.cn-slot-pill:hover {
    border-color: var(--cn-accent, #6366f1);
    color:        var(--cn-accent, #6366f1);
    background:   #eef2ff;
}

.cn-slot-pill--selected {
    background:   var(--cn-accent, #6366f1);
    border-color: var(--cn-accent, #6366f1);
    color:        #ffffff;
}

/* ── Responsive Mobile Media Queries ─────────────────────────────────────── */
@media (max-width: 600px) {
    #cn-launcher {
        bottom: 16px;
        right:  16px;
    }

    #cn-launcher.cn-position--left {
        left: 16px;
    }

    .cn-panel {
        width:      calc(100vw - 32px) !important;
        right:      16px !important;
        left:       16px !important;
        bottom:     72px !important;
        max-height: calc(100vh - 90px) !important;
    }

    #cn-panel-book,
    #cn-panel-chat {
        width:      calc(100vw - 32px) !important;
        right:      16px !important;
        left:       16px !important;
        bottom:     72px !important;
        height:     calc(100vh - 90px) !important;
    }
}

@media (max-width: 900px) and (min-width: 601px) {
    #cn-panel-book,
    #cn-panel-chat {
        width:  calc(100vw - 48px);
        right:  24px;
        left:   24px;
        bottom: 84px;
    }
}