/* Oitech Bot v5 – Styles */
:root {
    --oip:  #1a7a2e;
    --oipd: #145c22;
    --oipl: #e8f5eb;
    --oipm: #2e9e47;
    --oibl: #1565c0;
    --oibl2:#e3f0fd;
    --oiz:  999999;
}

#oitech-root *,
#oitech-root *::before,
#oitech-root *::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

#oitech-root {
    font-family: 'Segoe UI', Arial, sans-serif;
}

/* ── FAB ──────────────────────────────────── */
#oi-fab {
    position:      fixed;
    bottom:        24px;
    right:         24px;
    width:         60px;
    height:        60px;
    background:    var(--oip);
    border:        none;
    border-radius: 50%;
    cursor:        pointer;
    z-index:       var(--oiz);
    display:       flex;
    align-items:   center;
    justify-content: center;
    box-shadow:    0 4px 20px rgba(0,0,0,.2);
    transition:    background .2s, transform .15s;
    overflow:      hidden;
    padding:       0;
}

#oi-fab:hover             { background: var(--oipd); transform: scale(1.08); }
#oi-fab svg               { width: 27px; height: 27px; fill: #fff; }
#oi-fab .oi-fab-img       { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.oi-notif {
    position:      absolute;
    top:           2px;
    right:         2px;
    width:         18px;
    height:        18px;
    border-radius: 50%;
    background:    #e53935;
    border:        2px solid #fff;
    font-size:     9px;
    font-weight:   700;
    color:         #fff;
    display:       flex;
    align-items:   center;
    justify-content: center;
}

/* ── Window ────────────────────────────────── */
#oi-win {
    position:      fixed;
    bottom:        94px;
    right:         24px;
    width:         380px;
    height:        580px;
    background:    #fff;
    border-radius: 18px;
    border:        1px solid #dde3e8;
    display:       flex;
    flex-direction: column;
    overflow:      hidden;
    z-index:       var(--oiz);
    box-shadow:    0 6px 32px rgba(0,0,0,.15);
    animation:     oi-slide-up .2s ease;
}

#oi-win[hidden] { display: none !important; }

@keyframes oi-slide-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ─────────────────────────────────── */
#oi-hdr {
    background:    var(--oip);
    padding:       11px 12px;
    display:       flex;
    align-items:   center;
    gap:           9px;
    flex-shrink:   0;
    border-radius: 18px 18px 0 0;
}

.oi-hdr-av {
    width:         38px;
    height:        38px;
    border-radius: 50%;
    background:    #fff;
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     13px;
    font-weight:   800;
    color:         var(--oip);
    flex-shrink:   0;
    letter-spacing:-1px;
    overflow:      hidden;
}

.oi-hdr-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.oi-hdr-txt {
    display:        flex;
    flex-direction: column;
    flex:           1;
    min-width:      0;
}

.oi-hdr-txt strong {
    font-size:   14px;
    font-weight: 700;
    color:       #fff;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.oi-hdr-txt span {
    font-size: 10px;
    color:     rgba(255,255,255,.75);
    display:   flex;
    align-items: center;
    gap:       4px;
}

.oi-status-dot {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    #66bb6a;
    flex-shrink:   0;
    animation:     oi-pulse 2s infinite;
}

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

.oi-hdr-actions { display: flex; gap: 4px; flex-shrink: 0; }

.oi-hdr-actions button {
    background:    rgba(255,255,255,.18);
    border:        none;
    border-radius: 6px;
    height:        28px;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    background .15s;
    padding:       0 6px;
}

.oi-hdr-actions button:hover { background: rgba(255,255,255,.32); }

.oi-hdr-actions button svg {
    width:            14px;
    height:           14px;
    stroke:           #fff;
    fill:             none;
    stroke-width:     2.5;
    stroke-linecap:   round;
}

/* Language switch */
.oi-lang-btn {
    font-size:   11px !important;
    font-weight: 700 !important;
    color:       #fff !important;
    letter-spacing: .5px;
    min-width:   30px;
    border:      1px solid rgba(255,255,255,.4) !important;
}

.oi-lang-btn:hover {
    background: rgba(255,255,255,.35) !important;
    border-color: rgba(255,255,255,.7) !important;
}

/* ── Tabs ─────────────────────────────────── */
#oi-tabs {
    display:       flex;
    background:    var(--oipl);
    border-bottom: 1px solid #c8e6cc;
    flex-shrink:   0;
}

.oi-tab {
    flex:         1;
    padding:      9px 4px;
    font-size:    11px;
    font-weight:  600;
    border:       none;
    background:   none;
    cursor:       pointer;
    color:        #666;
    border-bottom:2px solid transparent;
    transition:   all .15s;
}

.oi-tab-on              { color: var(--oipd); border-bottom-color: var(--oip); background: #fff; }
.oi-tab:hover:not(.oi-tab-on) { color: var(--oip); background: #d4edda; }

/* ── Panes ──────────────────────────────────── */
.oi-pane                { display: none; flex: 1; overflow: hidden; flex-direction: column; }
.oi-pane-on             { display: flex; }
.oi-pane[hidden]        { display: none !important; }

/* ── Messages ────────────────────────────────── */
#oi-messages {
    flex:          1;
    overflow-y:    auto;
    padding:       12px;
    display:       flex;
    flex-direction:column;
    gap:           10px;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

.oi-row { display: flex; gap: 8px; max-width: 93%; animation: oi-pop .2s ease; }
.oi-row-bot  { align-self: flex-start; }
.oi-row-user { align-self: flex-end; flex-direction: row-reverse; }

@keyframes oi-pop {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.oi-avatar {
    width:         30px;
    height:        30px;
    border-radius: 50%;
    flex-shrink:   0;
    margin-top:    2px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     9px;
    font-weight:   800;
    overflow:      hidden;
}

.oi-row-bot  .oi-avatar { background: var(--oipl); color: var(--oipd); border: 1px solid #c8e6cc; }
.oi-row-user .oi-avatar { background: var(--oibl2); color: #0c447c;   border: 1px solid #b3d1f5; }
.oi-avatar-img          { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.oi-col { display: flex; flex-direction: column; }

.oi-bubble {
    border-radius: 12px;
    padding:       9px 12px;
    font-size:     12.5px;
    line-height:   1.65;
    color:         #1a1a1a;
    border:        .5px solid #e4e9e4;
    background:    #f6faf6;
}

.oi-row-user .oi-bubble {
    background:    var(--oip);
    color:         #fff;
    border-color:  var(--oip);
    border-radius: 12px 12px 3px 12px;
}

.oi-row-bot  .oi-bubble { border-radius: 12px 12px 12px 3px; }
.oi-bubble a            { color: var(--oibl); }
.oi-row-user .oi-bubble a { color: #b3d1f5; }
.oi-bubble strong       { font-weight: 600; }
.oi-bubble code         { background: #f0f0f0; padding: 1px 5px; border-radius: 4px; font-size: 11px; }

.oi-timestamp { font-size: 9px; color: #aaa; margin-top: 2px; }

/* Typing dots */
.oi-typing-dots { display: flex; gap: 4px; align-items: center; padding: 2px 0; }

.oi-typing-dots span {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    var(--oipm);
    animation:     oi-dot 1.2s infinite;
}

.oi-typing-dots span:nth-child(2) { animation-delay: .2s; }
.oi-typing-dots span:nth-child(3) { animation-delay: .4s; }

@keyframes oi-dot {
    0%, 80%, 100% { opacity: .3; transform: scale(.8); }
    40%           { opacity: 1;  transform: scale(1); }
}

/* KB cards inside messages */
.oi-kb-cards { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; }

.oi-kb-card {
    background:    #fff;
    border:        1px solid #b3d1f5;
    border-radius: 8px;
    padding:       8px 10px;
    cursor:        pointer;
    transition:    border-color .15s, background .15s;
}

.oi-kb-card:hover       { border-color: var(--oibl); background: var(--oibl2); }
.oi-kb-card-top         { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.oi-kb-id               { font-size: 10px; color: var(--oibl); font-weight: 700; }
.oi-kb-title            { font-size: 11.5px; font-weight: 600; color: #1a1a1a; }
.oi-kb-desc             { font-size: 10.5px; color: #555; margin-top: 3px; line-height: 1.4; }
.oi-snow-badge          { font-size: 9px; background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; border-radius: 4px; padding: 1px 5px; font-weight: 600; }
.oi-tags                { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.oi-tag                 { font-size: 9px; padding: 1px 7px; border-radius: 20px; font-weight: 600; background: var(--oipl); color: var(--oipd); }

/* Quick actions */
.oi-qa-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

.oi-qa-btn {
    font-size:     10.5px;
    padding:       4px 11px;
    border-radius: 20px;
    border:        1px solid #b3d1f5;
    background:    #fff;
    color:         var(--oibl);
    cursor:        pointer;
    font-weight:   500;
    transition:    all .15s;
}

.oi-qa-btn:hover { background: var(--oip); color: #fff; border-color: var(--oip); }

/* ── Ticket form ──────────────────────────── */
#oi-ticket-form {
    margin:        0 10px 10px;
    background:    #fff;
    border:        1px solid #c8e6cc;
    border-radius: 12px;
    overflow:      hidden;
    animation:     oi-pop .2s ease;
    flex-shrink:   0;
}

#oi-ticket-form[hidden] { display: none !important; }

.oi-tf-header {
    background:    var(--oipl);
    padding:       9px 12px;
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    font-size:     12px;
    font-weight:   600;
    color:         var(--oipd);
    border-bottom: 1px solid #c8e6cc;
}

.oi-tf-header button {
    background: none;
    border:     none;
    cursor:     pointer;
    color:      #888;
    font-size:  15px;
    line-height:1;
    padding:    0 2px;
    transition: color .1s;
}

.oi-tf-header button:hover { color: #333; }

.oi-tf-body {
    padding:        10px 12px;
    display:        flex;
    flex-direction: column;
    gap:            7px;
}

.oi-tf-body label {
    display:        flex;
    flex-direction: column;
    gap:            3px;
    font-size:      10.5px;
    font-weight:    600;
    color:          #444;
}

.oi-tf-body input,
.oi-tf-body textarea {
    background:  #fafafa;
    border:      1px solid #c8e6cc;
    border-radius: 7px;
    color:       #1a1a1a;
    font-size:   12px;
    padding:     6px 10px;
    outline:     none;
    font-family: inherit;
    transition:  border-color .15s;
    width:       100%;
}

.oi-tf-body textarea { resize: none; line-height: 1.5; }
.oi-tf-body input:focus,
.oi-tf-body textarea:focus { border-color: var(--oip); }
.oi-tf-body input::placeholder,
.oi-tf-body textarea::placeholder { color: #bbb; }

.oi-tf-error {
    font-size:     11px;
    color:         #c62828;
    background:    #ffebee;
    border:        1px solid #ffcdd2;
    border-radius: 6px;
    padding:       6px 9px;
}

#oi-tf-submit {
    background:      var(--oip);
    color:           #fff;
    border:          none;
    border-radius:   8px;
    padding:         8px 14px;
    font-size:       12px;
    font-weight:     600;
    cursor:          pointer;
    width:           100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    transition:      background .15s;
    font-family:     inherit;
}

#oi-tf-submit:hover    { background: var(--oipd); }
#oi-tf-submit:disabled { opacity: .6; cursor: default; }

.oi-tf-note { font-size: 10px; color: #888; text-align: center; line-height: 1.4; }

/* ── Input area ───────────────────────────── */
#oi-input-area {
    padding:       9px 11px;
    border-top:    1px solid #e8f5eb;
    background:    var(--oipl);
    flex-shrink:   0;
}

#oi-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }

.oi-chip {
    font-size:     10.5px;
    color:         var(--oipd);
    border:        1px solid #81c784;
    background:    #fff;
    border-radius: 20px;
    padding:       3px 10px;
    cursor:        pointer;
    font-weight:   500;
    transition:    all .12s;
}

.oi-chip:hover { background: var(--oip); color: #fff; border-color: var(--oip); }

.oi-input-row { display: flex; gap: 7px; align-items: flex-end; }

#oi-text-input {
    flex:          1;
    background:    #fff;
    border:        1px solid #81c784;
    border-radius: 10px;
    color:         #1a1a1a;
    font-size:     12.5px;
    padding:       8px 11px;
    resize:        none;
    outline:       none;
    min-height:    38px;
    max-height:    88px;
    line-height:   1.5;
    transition:    border-color .15s;
    font-family:   inherit;
}

#oi-text-input:focus       { border-color: var(--oip); }
#oi-text-input::placeholder { color: #aaa; }

#oi-send-btn {
    width:         38px;
    height:        38px;
    background:    var(--oip);
    border:        none;
    border-radius: 10px;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    transition:    background .15s, transform .1s;
}

#oi-send-btn:hover  { background: var(--oipd); }
#oi-send-btn:active { transform: scale(.94); }
#oi-send-btn svg    { width: 15px; height: 15px; fill: #fff; }

/* ── KB panel ─────────────────────────────── */
.oi-kb-panel {
    flex:          1;
    overflow-y:    auto;
    padding:       12px;
    display:       flex;
    flex-direction:column;
    gap:           7px;
    scrollbar-width: thin;
}

.oi-kb-search {
    background:    #fff;
    border:        1px solid #81c784;
    border-radius: 8px;
    color:         #1a1a1a;
    font-size:     12.5px;
    padding:       7px 11px;
    outline:       none;
    width:         100%;
    font-family:   inherit;
}

.oi-kb-search:focus       { border-color: var(--oip); }
.oi-kb-search::placeholder { color: #aaa; }

.oi-kb-label {
    font-size:      10px;
    color:          #888;
    font-weight:    700;
    letter-spacing: .5px;
    padding:        4px 0 2px;
}

.oi-kb-snow-link {
    display:         block;
    text-align:      center;
    font-size:       10.5px;
    color:           var(--oibl);
    padding:         8px 0 2px;
    text-decoration: none;
}

.oi-kb-snow-link:hover { text-decoration: underline; }

/* States */
.oi-state-msg { font-size: 11px; color: #aaa; padding: 10px 0; text-align: center; }

/* ── Responsive ────────────────────────────── */
@media (max-width: 420px) {
    #oi-win  { width: calc(100vw - 16px); right: 8px; bottom: 82px; height: 83vh; }
    #oi-fab  { right: 16px; bottom: 16px; }
}