/**
 * MSPEC ChatKit – Widget Styles
 *
 * Brand Colors (Metrohm Spectro):
 *   Primary Teal   #00ADA9
 *   Accent Orange  #F47B20
 *   Dark           #3D3D3D
 */

/* ============================================================
   CSS Custom Properties
   ============================================================ */
:root {
    --mck-primary:        #00ADA9;
    --mck-primary-hover:  #009A96;
    --mck-accent:         #F47B20;
    --mck-accent-hover:   #E06A10;
    --mck-dark:           #3D3D3D;
    --mck-light:          #FFFFFF;
    --mck-border:         #E4E6EA;
    --mck-text:           #1C1E21;
    --mck-text-muted:     #65676B;
    --mck-text-light:     #FFFFFF;
    --mck-shadow-sm:      0 2px 8px rgba(0,0,0,.10);
    --mck-shadow-md:      0 8px 32px rgba(0,0,0,.14);
    --mck-shadow-lg:      0 16px 48px rgba(0,0,0,.18);
    --mck-radius:         16px;
    --mck-radius-sm:      10px;
    --mck-transition:     all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    --mck-header-h:       60px;
}

/* ============================================================
   Floating Widget – Outer Container
   ============================================================ */
.mspec-chatkit-widget {
    position:    fixed;
    bottom:      24px;
    z-index:     999999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 Oxygen, Ubuntu, Cantarell, sans-serif;
}

.mspec-chatkit-bottom-right { right: 24px; }
.mspec-chatkit-bottom-left  { left:  24px; }

/* ============================================================
   Toggle Bubble Button
   ============================================================ */
.mspec-chatkit-toggle-btn {
    width:           60px;
    height:          60px;
    border-radius:   50%;
    background:      linear-gradient(135deg, var(--mck-accent) 0%, var(--mck-accent-hover) 100%);
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      var(--mck-shadow-md);
    transition:      var(--mck-transition);
    position:        relative;
    outline:         none;
}

.mspec-chatkit-toggle-btn:hover {
    transform:  scale(1.08);
    box-shadow: var(--mck-shadow-lg);
}

.mspec-chatkit-toggle-btn:active { transform: scale(1.02); }

.mspec-chatkit-toggle-btn:focus-visible {
    outline:        3px solid var(--mck-primary);
    outline-offset: 3px;
}

.mspec-chatkit-toggle-btn svg {
    width:      26px;
    height:     26px;
    color:      var(--mck-text-light);
    transition: var(--mck-transition);
    position:   absolute;
}

/* Icon swap animation */
.mspec-chatkit-icon-chat {
    opacity:   1;
    transform: scale(1) rotate(0);
}

.mspec-chatkit-icon-close {
    opacity:   0;
    transform: scale(0.5) rotate(-90deg);
}

.mspec-chatkit-widget.is-open .mspec-chatkit-icon-chat {
    opacity:   0;
    transform: scale(0.5) rotate(90deg);
}

.mspec-chatkit-widget.is-open .mspec-chatkit-icon-close {
    opacity:   1;
    transform: scale(1) rotate(0);
}

/* ============================================================
   Chat Panel – Floating Widget
   ============================================================ */
.mspec-chatkit-panel {
    position:       absolute;
    bottom:         76px;
    width:          400px;
    height:         550px;
    max-height:     calc(100vh - 120px);
    background:     var(--mck-light);
    border-radius:  var(--mck-radius);
    box-shadow:     var(--mck-shadow-lg);
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    /* Hidden state */
    opacity:        0;
    visibility:     hidden;
    transform:      translateY(16px) scale(0.96);
    transform-origin: bottom right;
    transition:     var(--mck-transition);
    border:         1px solid rgba(0,173,169,.15);
}

.mspec-chatkit-bottom-right .mspec-chatkit-panel {
    right:            0;
    transform-origin: bottom right;
}

.mspec-chatkit-bottom-left .mspec-chatkit-panel {
    left:             0;
    transform-origin: bottom left;
}

/* Visible state */
.mspec-chatkit-widget.is-open .mspec-chatkit-panel {
    opacity:    1;
    visibility: visible;
    transform:  translateY(0) scale(1);
}

/* ============================================================
   Embedded Shortcode Container
   ============================================================ */
.mspec-chatkit-embedded {
    width:          100%;
    min-height:     400px;
    border-radius:  var(--mck-radius);
    overflow:       hidden;
    background:     var(--mck-light);
    box-shadow:     var(--mck-shadow-md);
    border:         1px solid rgba(0,173,169,.2);
    display:        flex;
    flex-direction: column;
    font-family:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                    Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* ============================================================
   Panel Header
   ============================================================ */
.mspec-chatkit-panel-header {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     0 16px;
    height:      var(--mck-header-h);
    min-height:  var(--mck-header-h);
    background:  linear-gradient(135deg, var(--mck-primary) 0%, #009A96 100%);
    color:       var(--mck-text-light);
    flex-shrink: 0;
}

.mspec-chatkit-bot-avatar {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      rgba(255,255,255,.2);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

.mspec-chatkit-bot-avatar svg {
    width:  20px;
    height: 20px;
    fill:   var(--mck-text-light);
}

.mspec-chatkit-bot-info {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            1px;
    overflow:       hidden;
}

.mspec-chatkit-bot-name {
    font-weight:   600;
    font-size:     15px;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.mspec-chatkit-bot-status {
    font-size: 12px;
    opacity:   0.85;
}

.mspec-chatkit-minimize-btn {
    background:    transparent;
    border:        none;
    cursor:        pointer;
    color:         rgba(255,255,255,.8);
    padding:       4px;
    display:       flex;
    align-items:   center;
    border-radius: 6px;
    transition:    var(--mck-transition);
    flex-shrink:   0;
}

.mspec-chatkit-minimize-btn:hover {
    background: rgba(255,255,255,.15);
    color:      var(--mck-text-light);
}

.mspec-chatkit-minimize-btn:focus-visible {
    outline: 2px solid rgba(255,255,255,.6);
}

.mspec-chatkit-minimize-btn svg {
    width:  20px;
    height: 20px;
}

/* ============================================================
   Welcome Banner (shown before iframe finishes loading)
   ============================================================ */
.mspec-chatkit-welcome-banner {
    padding:     10px 16px;
    background:  rgba(0, 173, 169, 0.08);
    border-bottom: 1px solid rgba(0, 173, 169, 0.15);
    font-size:   13px;
    line-height: 1.5;
    color:       var(--mck-text);
    flex-shrink: 0;
}

/* ============================================================
   Iframe Wrapper + iframe
   ============================================================ */
.mspec-chatkit-iframe-wrapper {
    flex:     1;
    overflow: hidden;
    position: relative;
}

.mspec-chatkit-iframe {
    width:    100%;
    height:   100%;
    border:   none;
    display:  block;
}

/* ============================================================
   Admin unconfigured notice (shortcode)
   ============================================================ */
.mspec-chatkit-notice {
    background:    linear-gradient(135deg, rgba(0,173,169,.08) 0%, rgba(244,123,32,.04) 100%);
    border:        1px solid rgba(0,173,169,.3);
    border-radius: var(--mck-radius-sm);
    padding:       14px 18px;
    font-size:     14px;
    color:         var(--mck-text);
    font-family:   inherit;
}

.mspec-chatkit-notice a {
    color:           var(--mck-primary);
    text-decoration: none;
    font-weight:     500;
}

.mspec-chatkit-notice a:hover { text-decoration: underline; }

/* ============================================================
   Responsive – Tablet
   ============================================================ */
@media (max-width: 768px) {
    .mspec-chatkit-widget {
        bottom: 16px;
    }

    .mspec-chatkit-bottom-right { right: 16px; }
    .mspec-chatkit-bottom-left  { left:  16px; }

    .mspec-chatkit-panel {
        width:  calc(100vw - 32px);
        height: calc(100vh - 140px);
        bottom: 72px;
    }

    .mspec-chatkit-bottom-right .mspec-chatkit-panel { right: -8px; }
    .mspec-chatkit-bottom-left  .mspec-chatkit-panel { left:  -8px; }

    .mspec-chatkit-toggle-btn {
        width:  54px;
        height: 54px;
    }

    .mspec-chatkit-toggle-btn svg {
        width:  22px;
        height: 22px;
    }
}

/* ============================================================
   Responsive – Mobile (full-width sheet)
   ============================================================ */
@media (max-width: 480px) {
    .mspec-chatkit-panel {
        width:         100vw;
        height:        calc(100vh - 90px);
        border-radius: var(--mck-radius) var(--mck-radius) 0 0;
        bottom:        66px;
    }

    .mspec-chatkit-bottom-right .mspec-chatkit-panel,
    .mspec-chatkit-bottom-left  .mspec-chatkit-panel {
        right: -16px;
        left:  -16px;
    }
}

/* ============================================================
   Dark Mode
   ============================================================ */
@media (prefers-color-scheme: dark) {
    .mspec-chatkit-panel,
    .mspec-chatkit-embedded {
        background:   var(--mck-dark);
        border-color: rgba(0,173,169,.25);
    }

    .mspec-chatkit-welcome-banner {
        background:    rgba(0, 173, 169, 0.12);
        border-color:  rgba(0, 173, 169, 0.2);
        color:         #E8E8E8;
    }
}

/* ============================================================
   Print – Hide widget entirely
   ============================================================ */
@media print {
    .mspec-chatkit-widget,
    .mspec-chatkit-embedded {
        display: none !important;
    }
}