/* ==========================================================================
   Permentis Chat Widget
   Clean, calm, healthcare-appropriate aesthetic.
   Uses CSS custom properties so it can be overridden from a child theme.
   ========================================================================== */

:root {
    --pc-font:           inherit;            /* Falls back to theme body font  */
    --pc-radius:         12px;
    --pc-radius-bubble:  18px;

    /* Colours */
    --pc-bg:             #ffffff;
    --pc-border:         #e4e9f0;
    --pc-header-bg:      #1a3a5c;
    --pc-header-text:    #ffffff;
    --pc-header-dot:     #4caf87;

    --pc-user-bg:        #1a3a5c;
    --pc-user-text:      #ffffff;
    --pc-bot-bg:         #f0f4f8;
    --pc-bot-text:       #1a1a2e;
    --pc-sender-text:    #6b7a8d;

    --pc-input-bg:       #f7f9fc;
    --pc-input-border:   #dde3ec;
    --pc-input-focus:    #1a3a5c;
    --pc-input-text:     #1a1a2e;

    --pc-send-bg:        #1a3a5c;
    --pc-send-hover:     #254f7a;
    --pc-send-icon:      #ffffff;
    --pc-send-disabled:  #a0aab6;

    --pc-error-bg:       #fff0f0;
    --pc-error-text:     #c0392b;
    --pc-error-border:   #f5c6cb;

    --pc-dot-anim:       #1a3a5c;

    --pc-shadow:         0 4px 24px rgba(26, 58, 92, 0.10);
    --pc-max-width:      680px;
    --pc-messages-height: 420px;
}


/* Widget container
   ========================================================================== */

.permentis-chat {
    display:       flex;
    flex-direction: column;
    max-width:     var(--pc-max-width);
    width:         100%;
    margin:        0 auto;
    border:        1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    background:    var(--pc-bg);
    box-shadow:    var(--pc-shadow);
    font-family:   var(--pc-font);
    overflow:      hidden;
}


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

.permentis-chat__header {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     14px 18px;
    background:  var(--pc-header-bg);
    color:       var(--pc-header-text);
    cursor:      pointer;
    user-select: none;
}

.permentis-chat__header:hover {
    background: var(--pc-send-hover);
}

.permentis-chat__header-dot {
    display:       block;
    width:         9px;
    height:        9px;
    border-radius: 50%;
    background:    var(--pc-header-dot);
    flex-shrink:   0;
}

.permentis-chat__header-name {
    font-weight: 600;
    font-size:   0.95rem;
    letter-spacing: 0.01em;
}

.permentis-chat__header-chevron {
    margin-left: auto;
    display:     flex;
    align-items: center;
    opacity:     0.7;
    transition:  transform 0.25s ease;
}

.permentis-chat__header-chevron svg {
    width:  16px !important;
    height: 16px !important;
    max-width:  16px !important;
    max-height: 16px !important;
    flex-shrink: 0;
}

/* Rotate chevron when collapsed */
.permentis-chat__header--collapsed .permentis-chat__header-chevron {
    transform: rotate(180deg);
}


/* Collapsible body
   ========================================================================== */

.permentis-chat__body {
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    max-height:     600px;
    opacity:        1;
    transition:     max-height 0.3s ease, opacity 0.25s ease;
}

.permentis-chat__body--open {
    max-height: 600px;
    opacity:    1;
}

/* Collapsed state is handled by display:none set via JS after transition */


/* Message list
   ========================================================================== */

.permentis-chat__messages {
    flex:       1;
    height:     var(--pc-messages-height);
    overflow-y: auto;
    padding:    20px 18px;
    display:    flex;
    flex-direction: column;
    gap:        14px;

    /* Smooth scrollbar on supported browsers */
    scrollbar-width: thin;
    scrollbar-color: var(--pc-border) transparent;
}

.permentis-chat__messages::-webkit-scrollbar {
    width: 5px;
}

.permentis-chat__messages::-webkit-scrollbar-thumb {
    background:    var(--pc-border);
    border-radius: 4px;
}


/* Individual messages
   ========================================================================== */

.permentis-chat__message {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    max-width:      80%;
    animation:      pc-fade-in 0.18s ease;
}

.permentis-chat__message--user {
    align-self:  flex-end;
    align-items: flex-end;
}

.permentis-chat__message--assistant {
    align-self:  flex-start;
    align-items: flex-start;
}

.permentis-chat__sender {
    font-size:     0.72rem;
    color:         var(--pc-sender-text);
    font-weight:   500;
    padding-left:  4px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.permentis-chat__bubble {
    padding:       10px 14px;
    border-radius: var(--pc-radius-bubble);
    font-size:     0.92rem;
    line-height:   1.55;
    word-break:    break-word;
    white-space:   pre-wrap;
}

.permentis-chat__message--user .permentis-chat__bubble {
    background:              var(--pc-user-bg);
    color:                   var(--pc-user-text);
    border-bottom-right-radius: 5px;
}

.permentis-chat__message--assistant .permentis-chat__bubble {
    background:           var(--pc-bot-bg);
    color:                var(--pc-bot-text);
    border-bottom-left-radius: 5px;
}


/* Typing indicator
   ========================================================================== */

.permentis-chat__bubble--typing {
    display:     flex;
    align-items: center;
    gap:         5px;
    padding:     12px 16px;
    min-width:   52px;
}

.permentis-chat__bubble--typing span {
    display:       block;
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    var(--pc-dot-anim);
    opacity:       0.35;
    animation:     pc-typing-dot 1.2s infinite;
    flex-shrink:   0;
}

.permentis-chat__bubble--typing span:nth-child(2) {
    animation-delay: 0.2s;
}

.permentis-chat__bubble--typing span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes pc-typing-dot {
    0%, 60%, 100% { opacity: 0.25; transform: translateY(0);    }
    30%            { opacity: 0.9;  transform: translateY(-4px); }
}


/* Error notice
   ========================================================================== */

.permentis-chat__error {
    align-self:    center;
    font-size:     0.82rem;
    color:         var(--pc-error-text);
    background:    var(--pc-error-bg);
    border:        1px solid var(--pc-error-border);
    border-radius: 8px;
    padding:       8px 14px;
    text-align:    center;
    max-width:     90%;
}


/* Input area
   ========================================================================== */

.permentis-chat__input-area {
    display:     flex;
    align-items: flex-end;
    gap:         8px;
    padding:     12px 14px;
    border-top:  1px solid var(--pc-border);
    background:  var(--pc-bg);
}

.permentis-chat__input {
    flex:          1;
    resize:        none;
    border:        1px solid var(--pc-input-border);
    border-radius: 10px;
    padding:       10px 13px;
    font-family:   var(--pc-font);
    font-size:     0.92rem;
    line-height:   1.5;
    background:    var(--pc-input-bg);
    color:         var(--pc-input-text);
    max-height:    120px;
    overflow-y:    auto;
    transition:    border-color 0.15s ease, box-shadow 0.15s ease;
    outline:       none;

    scrollbar-width: thin;
    scrollbar-color: var(--pc-border) transparent;
}

.permentis-chat__input:focus {
    border-color: var(--pc-input-focus);
    box-shadow:   0 0 0 3px rgba(26, 58, 92, 0.08);
}

.permentis-chat__input:disabled {
    opacity: 0.55;
    cursor:  not-allowed;
}

.permentis-chat__input::placeholder {
    color:   #9aa5b4;
    opacity: 1;
}


/* Send button
   ========================================================================== */

.permentis-chat__send-btn {
    flex-shrink:   0;
    width:         40px;
    height:        40px;
    border:        none;
    border-radius: 10px;
    background:    var(--pc-send-bg);
    color:         var(--pc-send-icon);
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    background 0.15s ease, transform 0.1s ease;
    padding:       0;
}

.permentis-chat__send-btn:hover:not(:disabled) {
    background: var(--pc-send-hover);
}

.permentis-chat__send-btn:active:not(:disabled) {
    transform: scale(0.94);
}

.permentis-chat__send-btn:disabled {
    background: var(--pc-send-disabled);
    cursor:     not-allowed;
}

.permentis-chat__send-btn svg {
    width:  18px !important;
    height: 18px !important;
    max-width:  18px !important;
    max-height: 18px !important;
    flex-shrink: 0;
}


/* Markdown tables inside bot bubbles
   ========================================================================== */

.permentis-chat__bubble .permentis-chat__table {
    border-collapse: collapse;
    font-size:       0.85rem;
    margin-top:      6px;
    margin-bottom:   2px;
    width:           100%;
}

.permentis-chat__bubble .permentis-chat__table th,
.permentis-chat__bubble .permentis-chat__table td {
    border:   1px solid #cdd5df;
    padding:  6px 10px;
    text-align: left;
}

.permentis-chat__bubble .permentis-chat__table th {
    background:  rgba(26, 58, 92, 0.08);
    font-weight: 600;
}

.permentis-chat__bubble .permentis-chat__table tr:nth-child(even) td {
    background: rgba(26, 58, 92, 0.03);
}

/* Links inside bot bubbles */
.permentis-chat__bubble a {
    color:           var(--pc-header-bg);
    text-decoration: underline;
    word-break:      break-all;
}

.permentis-chat__bubble a:hover {
    opacity: 0.75;
}


/* Animations
   ========================================================================== */

@keyframes pc-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}


/* Responsive tweaks
   ========================================================================== */

@media (max-width: 480px) {
    .permentis-chat__messages {
        height: 55vh;
    }

    .permentis-chat__message {
        max-width: 92%;
    }
}