/**
 * Copilot Chat — widget styles
 *
 * Structure:
 *  .copilot-chat-wrapper        — fixed overlay container, always in DOM, hidden by default
 *  .copilot-chat-wrapper.copilot-chat--open — JS adds this to show the window
 *  .copilot-chat-window         — the visible chat panel
 *  .copilot-chat-header         — top bar with title and close button
 *  .copilot-chat-loading        — spinner shown during SDK init
 *  .copilot-chat-error          — error message shown if init fails
 *  .copilot-chat-mount          — empty div the SDK renders into
 *
 * Customisation:
 *  Adjust the CSS custom properties in the :root block below.
 *  Do not edit the layout rules unless you need structural changes.
 */

/* ============================================================================
   Custom properties — edit these to match the brand
   ============================================================================ */

:root {
    --copilot-chat-accent:          #0063B1;
    --copilot-chat-accent-text:     #ffffff;
    --copilot-chat-header-bg:       #252E74;
    --copilot-chat-close-hover-bg:  #A3435D;
    --copilot-chat-header-text:     #ffffff;
    --copilot-chat-window-bg:       #ffffff;
    --copilot-chat-window-radius:   12px;
    --copilot-chat-window-width:    380px;
    --copilot-chat-window-height:   520px;
    --copilot-chat-window-bottom:   24px;
    --copilot-chat-window-right:    24px;
    --copilot-chat-shadow:          0 8px 32px rgba(0, 0, 0, 0.18);
    --copilot-chat-z-index:         99999;
    --copilot-chat-font-size:       15px;
    --copilot-chat-spinner-color:   #0063B1;
}

/* ============================================================================
   Wrapper — fixed position, covers nothing, just anchors the window
   ============================================================================ */

.copilot-chat-wrapper {
    position:   fixed;
    bottom:     var( --copilot-chat-window-bottom );
    right:      var( --copilot-chat-window-right );
    z-index:    var( --copilot-chat-z-index );
    display:    flex;
    align-items: flex-end;
    justify-content: flex-end;

    /* Hidden by default — JS adds .copilot-chat--open to show */
    visibility: hidden;
    opacity:    0;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.copilot-chat-wrapper.copilot-chat--open {
    visibility:     visible;
    opacity:        1;
    pointer-events: all;
}

/* ============================================================================
   Chat window panel
   ============================================================================ */

.copilot-chat-window {
    display:        flex;
    flex-direction: column;
    width:          var( --copilot-chat-window-width );
    height:         var( --copilot-chat-window-height );
    background:     var( --copilot-chat-window-bg );
    border-radius:  var( --copilot-chat-window-radius );
    box-shadow:     var( --copilot-chat-shadow );
    overflow:       hidden;
    font-size:      var( --copilot-chat-font-size );

    /* Slide up on open */
    transform:      translateY( 16px );
    transition:     transform 0.2s ease;
}

.copilot-chat-wrapper.copilot-chat--open .copilot-chat-window {
    transform: translateY( 0 );
}

/* ============================================================================
   Header
   ============================================================================ */

.copilot-chat-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0 16px;
    height:          52px;
    background:      var( --copilot-chat-header-bg );
    color:           var( --copilot-chat-header-text );
    flex-shrink:     0;
}

.copilot-chat-header__title {
    font-weight: 600;
    font-size:   15px;
    letter-spacing: 0.01em;
}

#copilot-chat-close {
    background: var(--copilot-chat-header-bg);
    border: none;
}

#copilot-chat-close:hover {
    background-color: var(--copilot-chat-close-hover-bg);
}

.copilot-chat-header__close {
    background:  transparent;
    border:      none;
    color:       var( --copilot-chat-header-text );
    font-size:   22px;
    line-height: 1;
    cursor:      pointer;
    padding:     4px 8px;
    border-radius: 4px;
    transition:  background 0.15s ease;
}

.copilot-chat-header__close:hover,
.copilot-chat-header__close:focus {
    background: rgba( 255, 255, 255, 0.2 );
    outline:    none;
}

/* ============================================================================
   Loading state
   ============================================================================ */

.copilot-chat-loading {
    display:         none; /* shown via JS */
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    flex:            1;
    color:           #555;
    font-size:       14px;
}

.copilot-chat-loading__spinner {
    display:       block;
    width:         32px;
    height:        32px;
    border:        3px solid rgba( 0, 0, 0, 0.1 );
    border-top-color: var( --copilot-chat-spinner-color );
    border-radius: 50%;
    animation:     copilot-spin 0.7s linear infinite;
}

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

/* ============================================================================
   Error state
   ============================================================================ */

.copilot-chat-error {
    display:     none; /* shown via JS */
    flex:        1;
    padding:     24px;
    text-align:  center;
    color:       #c0392b;
    font-size:   14px;
}

.copilot-chat-error p {
    margin: 0;
}

/* ============================================================================
   SDK mount point
   ============================================================================ */

.copilot-chat-mount {
    flex:     1;
    overflow: hidden;

    /* The SDK renders its own internal scrollable area.
       Hiding overflow here prevents double scrollbars. */
}

/* The SDK renders a wrapper div with inline height — override it so the
   mount point controls the height rather than the SDK's default value. */
.copilot-chat-mount > div {
    height: 100% !important;
}

/* ============================================================================
   Responsive — smaller window on mobile
   ============================================================================ */

@media ( max-width: 480px ) {
    .copilot-chat-wrapper {
        bottom: 0;
        right: 5%;
        width: 90%;
        margin: 0 auto;
    }

    .copilot-chat-window {
        width:         100%;
        height:        75vh;
        border-radius: var( --copilot-chat-window-radius ) var( --copilot-chat-window-radius ) 0 0;
    }
}