/* VISTA Çözüm Asistanı — sağdan açılan çalışma paneli (kod tabanlı, dış AI servisi
   YOK). Kullanıcı isteği, 05.09.2026: ekran görüntüsündeki gibi geniş bir panel;
   Hızlı İşlemler + Bugünkü Durum (gerçek veri) + sohbet aynı sütunda, sağda Son
   Görüşülenler/Kısa Yollar sabit bir yan sütun. */
#hwChatbotBtn {
    position: fixed;
    bottom: 22px;
    right: 22px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: transparent;
    padding: 0;
    border: 0;
    box-shadow: 0 6px 20px rgba(36, 83, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    cursor: grab;
    touch-action: none;
    transition: transform .15s ease;
    overflow: hidden;
}
#hwChatbotBtn:hover { transform: scale(1.06); }
#hwChatbotBtn:active { cursor: grabbing; }
#hwChatbotBtn svg { width: 100%; height: 100%; display: block; }

.hw-robot-float {
    display: block;
    width: 100%;
    height: 100%;
    animation: hwRobotFloat 3s ease-in-out infinite;
}
@keyframes hwRobotFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
.hw-robot-blink {
    transform-box: fill-box;
    transform-origin: center;
    animation: hwRobotBlink 4.5s ease-in-out infinite;
}
@keyframes hwRobotBlink {
    0%, 92%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.15); }
}

.hw-chatbot-header-avatar { width: 26px; height: 26px; flex-shrink: 0; display: inline-flex; }
.hw-chatbot-header-avatar svg { width: 100%; height: 100%; display: block; }

/* Panel artık butonun yanında değil, sağdan açılan sabit geniş bir çalışma paneli. */
#hwChatbotPanel {
    position: fixed;
    top: 12px;
    right: 12px;
    bottom: 12px;
    width: 420px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(20, 30, 60, 0.22);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 1050;
    border: 1px solid #eef1f7;
    opacity: 0;
    transform: translateX(12px);
    transition: opacity .18s ease, transform .18s ease;
}
#hwChatbotPanel.show { display: flex; opacity: 1; transform: translateX(0); }

.hw-chatbot-header {
    background: var(--hw-primary, #2453ff);
    color: #fff;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.hw-chatbot-header-title { font-weight: 700; font-size: .9rem; display: flex; align-items: center; gap: .5rem; }
.hw-chatbot-header button { background: none; border: 0; color: #fff; opacity: .85; font-size: 1.05rem; cursor: pointer; padding: .2rem; }
.hw-chatbot-header button:hover { opacity: 1; }

/* İki sütun: solda kaydırılabilir içerik (Hızlı İşlemler + Bugünkü Durum + sohbet),
   sağda sabit yan panel (Son Görüşülenler + Kısa Yollar). */
.hw-chatbot-main { flex: 1 1 auto; display: flex; min-height: 0; }

.hw-chatbot-col-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.hw-chatbot-col-right {
    width: 210px;
    flex-shrink: 0;
    border-left: 1px solid #eef1f7;
    background: #fafbfd;
    overflow-y: auto;
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
@media (max-width: 620px) {
    .hw-chatbot-col-right { display: none; }
}

.hw-chatbot-side-card { }
.hw-chatbot-side-title { font-size: .68rem; font-weight: 800; color: #8a94a6; text-transform: uppercase; letter-spacing: .5px; margin-bottom: .5rem; }
.hw-chatbot-side-item {
    display: block;
    padding: .4rem .5rem;
    border-radius: 8px;
    font-size: .74rem;
    color: #1f2430;
    text-decoration: none;
    border: 1px solid transparent;
}
.hw-chatbot-side-item:hover { background: #fff; border-color: #eef1f7; color: #1f2430; }
.hw-chatbot-side-item .hw-cb-side-name { font-weight: 700; display: block; }
.hw-chatbot-side-item .hw-cb-side-amount { font-size: .7rem; font-weight: 700; }
.hw-chatbot-side-item .hw-cb-side-amount.borc { color: #dc2626; }
.hw-chatbot-side-item .hw-cb-side-amount.alacak { color: #16a34a; }
.hw-chatbot-side-empty { font-size: .7rem; color: #9aa3b5; padding: .3rem .5rem; }

.hw-chatbot-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .85rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    background: #f8f9fc;
}

/* Karşılama bloğu — robot + selam, sadece sohbet boşken görünür. */
.hw-chatbot-welcome { display: flex; align-items: center; gap: .85rem; padding: .5rem .25rem .75rem; }
.hw-chatbot-welcome-robot { width: 56px; height: 56px; flex-shrink: 0; }
.hw-chatbot-welcome-robot svg { width: 100%; height: 100%; }
.hw-chatbot-welcome-title { font-weight: 800; font-size: .95rem; color: #1f2430; }
.hw-chatbot-welcome-sub { font-size: .78rem; color: #6b7385; }

/* Hızlı İşlemler ızgarası — gerçek sayfalara/aksiyonlara gider. */
.hw-chatbot-section-title { font-size: .68rem; font-weight: 800; color: #8a94a6; text-transform: uppercase; letter-spacing: .5px; margin: .3rem .1rem; }
.hw-chatbot-quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: .3rem; }
.hw-chatbot-quick-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .6rem .4rem;
    border-radius: 10px;
    border: 1px solid #eef1f7;
    background: #fff;
    cursor: pointer;
    font-size: .72rem;
    font-weight: 700;
    color: #1f2430;
    text-align: center;
}
.hw-chatbot-quick-card:hover { border-color: var(--hw-primary, #2453ff); background: #f6f8ff; }
.hw-chatbot-quick-card i { font-size: 1.15rem; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }

/* Bugünkü Durum — gerçek verilerle dolan istatistik kartları. */
.hw-chatbot-durum-head { display: flex; align-items: baseline; justify-content: space-between; margin: .5rem .1rem .3rem; }
.hw-chatbot-durum-date { font-size: .68rem; color: #9aa3b5; }
.hw-chatbot-durum-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: .4rem; }
.hw-chatbot-durum-tile {
    border-radius: 10px;
    border: 1px solid #eef1f7;
    background: #fff;
    padding: .55rem .6rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
}
.hw-chatbot-durum-tile:hover { border-color: #d7ddf0; }
.hw-chatbot-durum-tile i { font-size: 1.05rem; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hw-chatbot-durum-tile-value { font-weight: 800; font-size: .82rem; color: #1f2430; line-height: 1.1; }
.hw-chatbot-durum-tile-label { font-size: .64rem; color: #8a94a6; }

.hw-chatbot-divider { border-top: 1px dashed #e3e7f1; margin: .3rem 0 .1rem; }

.hw-chatbot-msg { max-width: 88%; padding: .5rem .75rem; border-radius: 10px; font-size: .8rem; line-height: 1.4; }
.hw-chatbot-msg a { color: inherit; text-decoration: underline; font-weight: 600; }
.hw-chatbot-msg.bot { align-self: flex-start; background: #fff; border: 1px solid #eef1f7; color: #1f2430; border-bottom-left-radius: 2px; }
.hw-chatbot-msg.user { align-self: flex-end; background: var(--hw-primary, #2453ff); color: #fff; border-bottom-right-radius: 2px; }
.hw-chatbot-msg-time { font-size: .62rem; opacity: .55; margin-top: .2rem; text-align: right; }

/* Cari bakiye kartı (sohbet içinde) */
.hw-cb-card { align-self: flex-start; max-width: 92%; background: #fff; border: 1px solid #eef1f7; border-radius: 10px; padding: .75rem .85rem; font-size: .8rem; }
.hw-cb-card-title { font-weight: 800; font-size: .82rem; margin-bottom: .5rem; }
.hw-cb-card-balance-label { font-size: .68rem; color: #8a94a6; text-transform: uppercase; letter-spacing: .4px; }
.hw-cb-card-balance-value { font-size: 1.25rem; font-weight: 800; margin: .15rem 0 .5rem; }
.hw-cb-card-balance-value.borc { color: #dc2626; }
.hw-cb-card-balance-value.alacak { color: #16a34a; }
.hw-cb-card-row { display: flex; justify-content: space-between; font-size: .76rem; padding: .2rem 0; border-top: 1px solid #f1f3f9; }
.hw-cb-card-row:first-of-type { border-top: 0; }
.hw-cb-card-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.hw-cb-card-actions button, .hw-cb-card-actions a {
    font-size: .72rem; font-weight: 700; border-radius: 8px; border: 1px solid var(--hw-primary, #2453ff);
    background: #fff; color: var(--hw-primary, #2453ff); padding: .32rem .6rem; cursor: pointer; text-decoration: none;
}
.hw-cb-card-actions button:hover, .hw-cb-card-actions a:hover { background: var(--hw-primary, #2453ff); color: #fff; }

/* Cari eşleşme listesi (belirsizlik giderme) */
.hw-cb-list { align-self: flex-start; max-width: 92%; display: flex; flex-direction: column; gap: .3rem; }
.hw-cb-list-item {
    background: #fff; border: 1px solid #eef1f7; border-radius: 8px; padding: .45rem .6rem;
    font-size: .78rem; cursor: pointer; display: flex; justify-content: space-between; gap: .5rem;
}
.hw-cb-list-item:hover { border-color: var(--hw-primary, #2453ff); }

/* Tahsilat/Ödeme onay kartı — "Onayla" DENMEDEN veritabanına yazılmaz. */
.hw-cb-draft { align-self: flex-start; max-width: 92%; background: #fff; border: 1px solid #eef1f7; border-radius: 10px; overflow: hidden; }
.hw-cb-draft-head { background: #f6f8ff; padding: .5rem .75rem; font-weight: 800; font-size: .78rem; color: var(--hw-primary, #2453ff); }
.hw-cb-draft-body { padding: .65rem .75rem; display: flex; flex-direction: column; gap: .45rem; }
.hw-cb-draft-row { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; gap: .5rem; }
.hw-cb-draft-row label { color: #8a94a6; font-size: .72rem; flex-shrink: 0; }
.hw-cb-draft-row select, .hw-cb-draft-row input {
    border: 1px solid #dfe3ea; border-radius: 6px; padding: .25rem .4rem; font-size: .78rem; text-align: right; max-width: 60%;
}
.hw-cb-draft-foot { display: flex; gap: .5rem; padding: .55rem .75rem; border-top: 1px solid #f1f3f9; }
.hw-cb-draft-foot button { flex: 1 1 auto; border-radius: 8px; padding: .4rem; font-size: .78rem; font-weight: 700; border: 1px solid #dfe3ea; background: #fff; cursor: pointer; }
.hw-cb-draft-foot button.hw-cb-draft-onayla { background: var(--hw-primary, #2453ff); color: #fff; border-color: var(--hw-primary, #2453ff); }
.hw-cb-draft-foot button:disabled { opacity: .6; cursor: not-allowed; }
.hw-cb-draft.done { opacity: .7; }
.hw-cb-draft-result { padding: .5rem .75rem; font-size: .76rem; font-weight: 700; }
.hw-cb-draft-result.ok { color: #16a34a; }
.hw-cb-draft-result.err { color: #dc2626; }

.hw-chatbot-typing { display: flex; align-items: center; gap: 4px; padding: .65rem .8rem; align-self: flex-start; }
.hw-chatbot-typing span { width: 6px; height: 6px; border-radius: 50%; background: #b7bfd6; animation: hwChatbotTypingDot 1.2s ease-in-out infinite; }
.hw-chatbot-typing span:nth-child(2) { animation-delay: .15s; }
.hw-chatbot-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes hwChatbotTypingDot {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

#hwChatbotIntroBubble {
    position: fixed;
    z-index: 1049;
    background: #fff;
    color: #1f2430;
    padding: .55rem .85rem;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.16);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .25s ease, transform .25s ease;
}
#hwChatbotIntroBubble.show { opacity: 1; transform: translateX(0); }

.hw-chatbot-quick {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: 0 .85rem .6rem;
    flex-shrink: 0;
}
.hw-chatbot-quick button {
    font-size: .68rem;
    padding: .3rem .6rem;
    border-radius: 999px;
    border: 1px solid #e0e5f5;
    background: #fff;
    color: var(--hw-primary, #2453ff);
    cursor: pointer;
    text-align: left;
}
.hw-chatbot-quick button:hover { background: #f0f3ff; }

.hw-chatbot-input-row {
    display: flex;
    gap: .5rem;
    padding: .65rem;
    border-top: 1px solid #eef1f7;
    flex-shrink: 0;
    background: #fff;
}
.hw-chatbot-input-row input {
    flex: 1 1 auto;
    border: 1px solid #dfe3ea;
    border-radius: 8px;
    padding: .45rem .65rem;
    font-size: .8rem;
}
.hw-chatbot-input-row input:focus { outline: none; border-color: var(--hw-primary, #2453ff); }
.hw-chatbot-input-row button {
    background: var(--hw-primary, #2453ff);
    color: #fff;
    border: 0;
    border-radius: 8px;
    width: 36px;
    flex-shrink: 0;
    cursor: pointer;
}

@media (max-width: 680px) {
    #hwChatbotPanel { right: 0; left: 0; top: 0; bottom: 0; width: auto; max-width: 100vw; border-radius: 0; }
    .hw-chatbot-quick-grid { grid-template-columns: repeat(2, 1fr); }
}