/* ==========================================================
   OpenRouter AI Chat Widget — v2.0
   ========================================================== */

/* ── Widget shell ────────────────────────────────────────── */
.orcai-widget {
    --orcai-accent:        #1a73e8;
    --orcai-user-bg:       #1a73e8;
    --orcai-user-text:     #ffffff;
    --orcai-bot-bg:        #ffffff;
    --orcai-bot-text:      #1e293b;
    --orcai-msgs-bg:       #f0f2f5;
    --orcai-input-bg:      #ffffff;
    --orcai-input-border:  #e2e8f0;
    --orcai-input-text:    #1e293b;
    --orcai-ph-color:      #94a3b8;
    --orcai-send-bg:       #1a73e8;
    --orcai-send-icon:     #ffffff;
    --orcai-footer-bg:     #ffffff;
    --orcai-footer-text:   #94a3b8;
    --orcai-footer-link:   #1a73e8;
    --orcai-dot-color:     #22c55e;
    --orcai-qr-bg:         #ffffff;
    --orcai-qr-text:       #1e293b;
    --orcai-qr-border:     #d1d5db;
    --orcai-qr-hover-bg:   #1a73e8;
    --orcai-qr-hover-text: #ffffff;
    --orcai-radius:        16px;
    --orcai-bubble-r:      18px;
    --orcai-font-size:     14px;
    --orcai-font:          'Segoe UI', system-ui, -apple-system, sans-serif;
    --orcai-height:        600px;
    --orcai-width:         420px;
    --orcai-shadow:        0 2px 8px rgba(0,0,0,.08), 0 16px 48px rgba(0,0,0,.14);
    --orcai-input-area-bg: #ffffff;

    font-family:    var(--orcai-font);
    font-size:      var(--orcai-font-size);
    display:        flex;
    flex-direction: column;
    width:          100%;
    max-width:      var(--orcai-width);
    height:         var(--orcai-height);
    border-radius:  var(--orcai-radius);
    overflow:       hidden;
    box-shadow:     var(--orcai-shadow);
    background:     var(--orcai-msgs-bg);
    border:         1px solid rgba(0,0,0,.07);
    box-sizing:     border-box;
}

/* ── Popup / Floating mode ───────────────────────────────── */
.orcai-popup {
    position:   fixed;
    bottom:     90px;
    right:      24px;
    z-index:    999999;
    display:    none;
    max-width:  var(--orcai-width);
}

.orcai-popup.orcai-popup-open {
    display:   flex;
    animation: orcai-pop-in .25s cubic-bezier(.34,1.56,.64,1);
}

@keyframes orcai-pop-in {
    from { opacity:0; transform:translateY(16px) scale(.95); }
    to   { opacity:1; transform:translateY(0)    scale(1);   }
}

/* FAB button */
.orcai-fab {
    position:      fixed;
    bottom:        24px;
    right:         24px;
    z-index:       999999;
    width:         58px;
    height:        58px;
    border-radius: 50%;
    background:    var(--orcai-send-bg);
    border:        none;
    cursor:        pointer;
    display:       none;
    align-items:   center;
    justify-content: center;
    box-shadow:    0 4px 20px rgba(0,0,0,.28);
    transition:    transform .2s, box-shadow .2s;
    color:         var(--orcai-send-icon);
}

.orcai-fab.orcai-fab-on  { display: flex; }
.orcai-fab:hover         { transform: scale(1.08); box-shadow: 0 6px 28px rgba(0,0,0,.32); }
.orcai-fab svg           { width: 26px; height: 26px; }
.orcai-fab-close         { display: none; }
.orcai-fab.orcai-fab-open .orcai-fab-open  { display: none; }
.orcai-fab.orcai-fab-open .orcai-fab-close { display: block; }

/* ── Header ──────────────────────────────────────────────── */
.orcai-header {
    display:         flex;
    align-items:     center;
    gap:             12px;
    padding:         13px 15px;
    flex-shrink:     0;
    border-bottom:   1px solid rgba(0,0,0,.07);
}

.orcai-avatar {
    width:           44px;
    height:          44px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    overflow:        hidden;
    background:      var(--orcai-send-bg);
    color:           var(--orcai-send-icon);
}

.orcai-header-info { flex: 1; min-width: 0; }

.orcai-header-name {
    font-weight:     700;
    font-size:       15px;
    letter-spacing:  -.01em;
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
}

.orcai-header-status {
    display:    flex;
    align-items: center;
    gap:        5px;
    font-size:  12px;
    margin-top: 1px;
}

.orcai-dot {
    width:        8px;
    height:       8px;
    border-radius: 50%;
    background:   var(--orcai-dot-color);
    animation:    orcai-pulse 2s ease-in-out infinite;
    flex-shrink:  0;
}

@keyframes orcai-pulse {
    0%,100% { opacity:1; }
    50%     { opacity:.45; }
}

.orcai-header-btns {
    display:    flex;
    gap:        4px;
    flex-shrink: 0;
}

.orcai-icon-btn {
    background:      transparent;
    border:          none;
    border-radius:   8px;
    cursor:          pointer;
    padding:         6px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background .18s;
    line-height:     0;
}

.orcai-icon-btn svg { width: 18px; height: 18px; }

/* ── Messages area ───────────────────────────────────────── */
.orcai-messages {
    flex:             1;
    overflow-y:       auto;
    padding:          16px 14px 8px;
    display:          flex;
    flex-direction:   column;
    gap:              10px;
    scroll-behavior:  smooth;
    background:       var(--orcai-msgs-bg);
}

.orcai-messages::-webkit-scrollbar       { width: 4px; }
.orcai-messages::-webkit-scrollbar-track { background: transparent; }
.orcai-messages::-webkit-scrollbar-thumb {
    background:    rgba(0,0,0,.14);
    border-radius: 4px;
}

/* Date separator */
.orcai-date-sep {
    display:    flex;
    align-items: center;
    gap:        10px;
    margin:     4px 0;
}

.orcai-date-sep::before,
.orcai-date-sep::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: rgba(0,0,0,.1);
}

.orcai-date-sep span { font-size: 11px; color: #94a3b8; padding: 0 4px; white-space: nowrap; }

/* Bot label (name + mini avatar) */
.orcai-bot-label {
    display:    flex;
    align-items: center;
    gap:        7px;
    margin-bottom: 2px;
}

.orcai-mini-avatar {
    width:           28px;
    height:          28px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    overflow:        hidden;
    background:      var(--orcai-send-bg);
    color:           var(--orcai-send-icon);
}

.orcai-bot-label span { font-size: 12px; font-weight: 600; color: #475569; }

/* ── Individual message ──────────────────────────────────── */
.orcai-msg {
    display:        flex;
    flex-direction: column;
    animation:      orcai-in .22s cubic-bezier(.34,1.4,.64,1);
}

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

.orcai-msg.orcai-user { align-items: flex-end; }
.orcai-msg.orcai-bot  { align-items: flex-start; }

.orcai-bubble {
    max-width:      80%;
    padding:        10px 14px;
    line-height:    1.55;
    word-break:     break-word;
    white-space:    pre-wrap;
}

.orcai-msg.orcai-user .orcai-bubble {
    background:    var(--orcai-user-bg);
    color:         var(--orcai-user-text);
    border-radius: var(--orcai-bubble-r) var(--orcai-bubble-r) 4px var(--orcai-bubble-r);
}

.orcai-msg.orcai-bot .orcai-bubble {
    background:    var(--orcai-bot-bg);
    color:         var(--orcai-bot-text);
    border-radius: var(--orcai-bubble-r) var(--orcai-bubble-r) var(--orcai-bubble-r) 4px;
    box-shadow:    0 1px 3px rgba(0,0,0,.07);
}

.orcai-msg.orcai-error .orcai-bubble {
    background: #fee2e2;
    color:      #dc2626;
    border:     1px solid #fca5a5;
}

.orcai-msg-time {
    font-size:  10px;
    color:      #94a3b8;
    margin-top: 3px;
    padding:    0 2px;
}

/* ── Typing indicator ────────────────────────────────────── */
.orcai-typing {
    padding:    0 14px 6px;
    flex-shrink: 0;
    background: var(--orcai-msgs-bg);
}

.orcai-typing-bubble {
    display:       inline-flex;
    gap:           5px;
    align-items:   center;
    padding:       10px 16px;
    background:    var(--orcai-bot-bg);
    border-radius: var(--orcai-bubble-r) var(--orcai-bubble-r) var(--orcai-bubble-r) 4px;
    box-shadow:    0 1px 3px rgba(0,0,0,.07);
}

.orcai-typing-bubble span {
    width:        7px;
    height:       7px;
    border-radius: 50%;
    background:   #94a3b8;
    animation:    orcai-bounce .9s ease-in-out infinite;
}

.orcai-typing-bubble span:nth-child(2) { animation-delay: .15s; }
.orcai-typing-bubble span:nth-child(3) { animation-delay: .3s; }

@keyframes orcai-bounce {
    0%,60%,100% { transform: translateY(0); }
    30%         { transform: translateY(-5px); }
}

/* ── Quick Reply buttons ─────────────────────────────────── */
.orcai-qr-wrap {
    display:        flex;
    flex-direction: column;
    gap:            7px;
    padding:        0 14px 8px;
    background:     var(--orcai-msgs-bg);
    align-items:    flex-start;
}

.orcai-qr-btn {
    background:    var(--orcai-qr-bg);
    border:        1.5px solid var(--orcai-qr-border);
    border-radius: 22px;
    padding:       8px 18px;
    font-size:     13.5px;
    font-family:   var(--orcai-font);
    cursor:        pointer;
    color:         var(--orcai-qr-text);
    transition:    background .18s, border-color .18s, color .18s, transform .14s;
    display:       flex;
    align-items:   center;
    gap:           6px;
    white-space:   nowrap;
    line-height:   1.4;
}

.orcai-qr-btn:hover {
    background:   var(--orcai-qr-hover-bg);
    border-color: var(--orcai-qr-hover-bg);
    color:        var(--orcai-qr-hover-text);
    transform:    translateX(3px);
}

.orcai-qr-btn:active { transform: scale(.97); }

/* ── Input row ───────────────────────────────────────────── */
.orcai-input-row {
    display:      flex;
    align-items:  flex-end;
    gap:          8px;
    padding:      10px 12px;
    background:   var(--orcai-input-area-bg);
    border-top:   1px solid rgba(0,0,0,.06);
    flex-shrink:  0;
}

.orcai-textarea {
    flex:         1;
    padding:      9px 14px;
    border:       1.5px solid var(--orcai-input-border);
    border-radius: 22px;
    font-family:  var(--orcai-font);
    font-size:    var(--orcai-font-size);
    line-height:  1.5;
    resize:       none;
    outline:      none;
    background:   var(--orcai-input-bg);
    color:        var(--orcai-input-text);
    transition:   border-color .2s, box-shadow .2s;
    min-height:   40px;
    max-height:   110px;
    overflow-y:   auto;
    box-sizing:   border-box;
}

.orcai-textarea:focus {
    border-color: var(--orcai-accent);
    box-shadow:   0 0 0 3px rgba(26,115,232,.12);
}

.orcai-textarea::placeholder { color: var(--orcai-ph-color); }

.orcai-send-btn {
    width:         40px;
    height:        40px;
    border-radius: 50%;
    background:    var(--orcai-send-bg);
    border:        none;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         var(--orcai-send-icon);
    flex-shrink:   0;
    transition:    transform .14s, opacity .14s;
}

.orcai-send-btn:hover  { opacity: .88; transform: scale(1.06); }
.orcai-send-btn:active { transform: scale(.93); }
.orcai-send-btn:disabled { opacity: .38; cursor: not-allowed; transform: none; }
.orcai-send-btn svg    { width: 16px; height: 16px; }

/* ── Footer ──────────────────────────────────────────────── */
.orcai-footer {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             4px;
    padding:         6px 0 8px;
    background:      var(--orcai-footer-bg);
    font-size:       11px;
    color:           var(--orcai-footer-text);
    flex-shrink:     0;
    border-top:      1px solid rgba(0,0,0,.05);
}

.orcai-footer a {
    color:           var(--orcai-footer-link);
    text-decoration: none;
    font-weight:     600;
}

.orcai-footer a:hover { text-decoration: underline; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 500px) {
    .orcai-widget            { border-radius: calc(var(--orcai-radius) * .6); max-width: 100%; }
    .orcai-bubble            { max-width: 88%; }
    .orcai-popup             { right:12px; bottom:78px; left:12px; max-width:100%; }
    .orcai-fab               { right:14px; bottom:14px; }
}