/* =========================================================
   LiverAI Sports — Chat UI
   Prefijo: lrai-sports-  |  Acento: #1a5c8a (azul AEEH)
   ========================================================= */

.lrai-sports-container {
    --c-accent:   #1a5c8a;
    --c-accent-h: #134a71;
    --c-accent-l: #d0e4f0;
    --c-bg:       #ffffff;
    --c-bg2:      #f5f7fa;
    --c-border:   #dde5ed;
    --c-text:     #1a2530;
    --c-muted:    #6b7f8c;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, sans-serif;
    font-size:   14px;
    color:       var(--c-text);
    line-height: 1.5;

    display:       flex;
    border:        1px solid var(--c-border);
    border-radius: 12px;
    overflow:      hidden;
    background:    var(--c-bg);
    min-height:    420px;
    position:      relative;
}

/* ---- Sidebar ---- */
.lrai-sports-sidebar {
    width:          230px;
    min-width:      230px;
    display:        flex;
    flex-direction: column;
    background:     var(--c-bg2);
    border-right:   1px solid var(--c-border);
    transition:     margin-left .25s ease;
    overflow:       hidden;
}

.lrai-sports-sidebar.lrai-sports-collapsed {
    margin-left: -230px;
}

.lrai-sports-sidebar-head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         10px 12px;
    border-bottom:   1px solid var(--c-border);
    flex-shrink:     0;
}

.lrai-sports-sidebar-label {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--c-muted);
}

.lrai-sports-new-btn {
    background:    var(--c-accent);
    color:         #fff;
    border:        none;
    border-radius: 6px;
    padding:       4px 10px;
    font-size:     12px;
    font-weight:   600;
    cursor:        pointer;
    line-height:   1.6;
    transition:    background .15s;
}

.lrai-sports-new-btn:hover {
    background: var(--c-accent-h);
}

.lrai-sports-conv-list {
    flex:       1;
    overflow-y: auto;
    padding:    8px;
}

.lrai-sports-conv-item {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         7px 10px;
    border-radius:   7px;
    cursor:          pointer;
    font-size:       13px;
    transition:      background .12s;
    gap:             6px;
}

.lrai-sports-conv-item:hover {
    background: var(--c-accent-l);
}

.lrai-sports-conv-item.lrai-sports-active {
    background:  var(--c-accent-l);
    color:       var(--c-accent);
    font-weight: 600;
}

.lrai-sports-conv-title {
    flex:          1;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    font-size:     13px;
}

.lrai-sports-conv-del {
    background:  none;
    border:      none;
    cursor:      pointer;
    padding:     2px 4px;
    border-radius: 4px;
    color:       var(--c-muted);
    font-size:   14px;
    line-height: 1;
    opacity:     0;
    transition:  opacity .12s;
    flex-shrink: 0;
}

.lrai-sports-conv-item:hover .lrai-sports-conv-del {
    opacity: 1;
}

.lrai-sports-conv-del:hover {
    color:      #c0392b;
    background: #fce4e4;
}

/* ---- Main panel ---- */
.lrai-sports-main {
    flex:           1;
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    background:     var(--c-bg);
}

/* ---- Toolbar ---- */
.lrai-sports-toolbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         8px 12px;
    border-bottom:   1px solid var(--c-border);
    flex-shrink:     0;
    gap:             8px;
    background:      var(--c-bg2);
}

.lrai-sports-toolbar-left {
    display:     flex;
    align-items: center;
    gap:         6px;
}

.lrai-sports-toolbar-right {
    display:     flex;
    align-items: center;
    gap:         4px;
}

.lrai-sports-title {
    font-size:   13px;
    font-weight: 600;
    color:       var(--c-text);
}

.lrai-sports-icon-btn {
    background:    none;
    border:        none;
    cursor:        pointer;
    padding:       6px;
    border-radius: 6px;
    color:         var(--c-muted);
    font-size:     16px;
    line-height:   1;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    background .12s, color .12s;
}

.lrai-sports-icon-btn:hover {
    background: var(--c-bg2);
    color:      var(--c-text);
}

/* ---- Messages ---- */
.lrai-sports-messages {
    flex:           1;
    overflow-y:     auto;
    padding:        16px;
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

/* ---- Welcome ---- */
.lrai-sports-welcome {
    text-align: center;
    margin:     auto;
    padding:    40px 24px;
    color:      var(--c-muted);
}

.lrai-sports-welcome-icon {
    font-size:     48px;
    margin-bottom: 12px;
    display:       block;
}

.lrai-sports-welcome h2 {
    font-size:   18px;
    font-weight: 700;
    color:       var(--c-text);
    margin:      0 0 8px;
}

.lrai-sports-welcome p {
    font-size:     13px;
    margin:        0;
    max-width:     340px;
    margin-inline: auto;
}

/* ---- Message bubbles ---- */
.lrai-sports-msg {
    display:     flex;
    gap:         10px;
    align-items: flex-start;
}

.lrai-sports-msg-user {
    flex-direction: row-reverse;
}

.lrai-sports-avatar {
    width:         32px;
    height:        32px;
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     11px;
    font-weight:   700;
    flex-shrink:   0;
    text-transform: uppercase;
}

.lrai-sports-msg-user .lrai-sports-avatar {
    background: var(--c-accent);
    color:      #fff;
}

.lrai-sports-msg-bot .lrai-sports-avatar {
    background: var(--c-accent-l);
    color:      var(--c-accent);
}

.lrai-sports-bubble {
    padding:       10px 14px;
    border-radius: 12px;
    max-width:     80%;
    line-height:   1.6;
    font-size:     14px;
    word-break:    break-word;
}

.lrai-sports-msg-user .lrai-sports-bubble {
    background:    var(--c-accent);
    color:         #fff;
    border-radius: 12px 12px 4px 12px;
}

.lrai-sports-msg-bot .lrai-sports-bubble {
    background:    var(--c-bg2);
    color:         var(--c-text);
    border-radius: 12px 12px 12px 4px;
}

/* Markdown dentro de burbujas */
.lrai-sports-bubble p             { margin: 0 0 8px; }
.lrai-sports-bubble p:last-child  { margin-bottom: 0; }
.lrai-sports-bubble ul,
.lrai-sports-bubble ol            { margin: 6px 0 6px 18px; padding: 0; }
.lrai-sports-bubble li            { margin-bottom: 3px; }
.lrai-sports-bubble code {
    background:    rgba(0,0,0,.07);
    padding:       1px 5px;
    border-radius: 4px;
    font-family:   monospace;
    font-size:     13px;
}
.lrai-sports-bubble pre {
    background:    rgba(0,0,0,.06);
    padding:       10px 12px;
    border-radius: 8px;
    overflow-x:    auto;
    font-size:     13px;
    margin:        6px 0;
}
.lrai-sports-bubble pre code  { background: none; padding: 0; }
.lrai-sports-bubble strong    { font-weight: 700; }
.lrai-sports-bubble em        { font-style: italic; }
.lrai-sports-bubble h1,
.lrai-sports-bubble h2,
.lrai-sports-bubble h3 {
    margin:      10px 0 4px;
    font-weight: 700;
    line-height: 1.3;
}
.lrai-sports-bubble h1 { font-size: 17px; }
.lrai-sports-bubble h2 { font-size: 15px; }
.lrai-sports-bubble h3 { font-size: 14px; }
.lrai-sports-bubble table {
    border-collapse: collapse;
    width:           100%;
    font-size:       13px;
    margin:          6px 0;
}
.lrai-sports-bubble th,
.lrai-sports-bubble td {
    border:  1px solid var(--c-border);
    padding: 5px 8px;
}
.lrai-sports-bubble th { background: rgba(0,0,0,.04); font-weight: 600; }
.lrai-sports-bubble blockquote {
    border-left: 3px solid var(--c-accent);
    margin:      6px 0;
    padding:     4px 12px;
    color:       var(--c-muted);
}

.lrai-sports-msg-user .lrai-sports-bubble code,
.lrai-sports-msg-user .lrai-sports-bubble pre {
    background: rgba(255,255,255,.2);
}

/* ---- Typing indicator ---- */
.lrai-sports-typing {
    display:       flex;
    align-items:   center;
    gap:           6px;
    padding:       8px 14px;
    background:    var(--c-bg2);
    border-radius: 12px 12px 12px 4px;
    width:         fit-content;
}

.lrai-sports-dot {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    var(--c-muted);
    animation:     lrai-sports-bounce 1.2s infinite ease-in-out;
}

.lrai-sports-dot:nth-child(2) { animation-delay: .2s; }
.lrai-sports-dot:nth-child(3) { animation-delay: .4s; }

@keyframes lrai-sports-bounce {
    0%, 80%, 100% { transform: translateY(0);   opacity: .4; }
    40%            { transform: translateY(-6px); opacity: 1; }
}

/* ---- Bottom / Input ---- */
.lrai-sports-bottom {
    border-top:  1px solid var(--c-border);
    padding:     12px;
    flex-shrink: 0;
    background:  var(--c-bg);
}

.lrai-sports-input-row {
    display:     flex;
    gap:         8px;
    align-items: flex-end;
}

.lrai-sports-input-row textarea,
.lrai-sports-textarea {
    flex:          1;
    resize:        none;
    border:        1px solid var(--c-border);
    border-radius: 8px;
    padding:       10px 12px;
    font-size:     14px;
    font-family:   inherit;
    line-height:   1.5;
    color:         var(--c-text);
    background:    var(--c-bg);
    outline:       none;
    transition:    border-color .15s;
    min-height:    44px;
    max-height:    140px;
    overflow-y:    auto;
}

.lrai-sports-input-row textarea:focus {
    border-color: var(--c-accent);
    box-shadow:   0 0 0 3px rgba(26,92,138,.12);
}

.lrai-sports-input-row textarea::placeholder {
    color: var(--c-muted);
}

.lrai-sports-send-btn {
    background:    var(--c-accent);
    color:         #fff;
    border:        none;
    border-radius: 8px;
    padding:       10px 14px;
    cursor:        pointer;
    font-size:     18px;
    line-height:   1;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    transition:    background .15s;
    height:        44px;
    width:         44px;
}

.lrai-sports-send-btn:hover:not(:disabled) {
    background: var(--c-accent-h);
}

.lrai-sports-send-btn:disabled {
    opacity: .5;
    cursor:  not-allowed;
}

.lrai-sports-hint {
    font-size:  11px;
    color:      var(--c-muted);
    margin-top: 6px;
    text-align: center;
}

/* ---- Popup / modal ---- */
.lrai-sports-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.4);
    z-index:    10000;
}

.lrai-sports-popup {
    position:      fixed;
    top:           50%;
    left:          50%;
    transform:     translate(-50%,-50%);
    background:    #fff;
    border-radius: 12px;
    padding:       24px;
    box-shadow:    0 20px 60px rgba(0,0,0,.25);
    z-index:       10001;
    max-width:     420px;
    width:         90%;
}

.lrai-sports-popup h3 {
    margin:      0 0 12px;
    font-size:   16px;
    font-weight: 700;
}

.lrai-sports-popup-actions {
    display:         flex;
    gap:             8px;
    justify-content: flex-end;
    margin-top:      20px;
}

.lrai-sports-btn {
    padding:       8px 16px;
    border-radius: 7px;
    border:        none;
    cursor:        pointer;
    font-size:     13px;
    font-weight:   600;
    transition:    background .15s;
}

.lrai-sports-btn-primary {
    background: var(--c-accent);
    color:      #fff;
}

.lrai-sports-btn-primary:hover {
    background: var(--c-accent-h);
}

.lrai-sports-btn-ghost {
    background: var(--c-bg2);
    color:      var(--c-text);
}

.lrai-sports-btn-ghost:hover {
    background: var(--c-border);
}

.lrai-sports-btn-danger {
    background: #fce4e4;
    color:      #c0392b;
}

.lrai-sports-btn-danger:hover {
    background: #f5c6c6;
}

/* ---- Login required ---- */
.lrai-sports-login-required {
    text-align:    center;
    padding:       48px 24px;
    background:    var(--c-bg2);
    border-radius: 12px;
    color:         var(--c-muted);
}

.lrai-sports-login-required a {
    color:       var(--c-accent);
    font-weight: 600;
}

/* ---- Scrollbars ---- */
.lrai-sports-messages::-webkit-scrollbar,
.lrai-sports-conv-list::-webkit-scrollbar    { width: 5px; }
.lrai-sports-messages::-webkit-scrollbar-track,
.lrai-sports-conv-list::-webkit-scrollbar-track { background: transparent; }
.lrai-sports-messages::-webkit-scrollbar-thumb,
.lrai-sports-conv-list::-webkit-scrollbar-thumb {
    background:    var(--c-border);
    border-radius: 99px;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .lrai-sports-sidebar {
        position:   absolute;
        top:        0;
        left:       0;
        bottom:     0;
        z-index:    100;
        box-shadow: 4px 0 16px rgba(0,0,0,.12);
    }
    .lrai-sports-sidebar.lrai-sports-collapsed {
        margin-left: -230px;
        box-shadow:  none;
    }
    .lrai-sports-bubble {
        max-width: 92%;
    }
}