/* ===== KM Chat Widget — Messenger-szerű lebegő chat ===== */

/* --- Lebegő gomb --- */
#kmChatBtn {
    position:fixed; bottom:24px; left:24px; z-index:1050;
    width:48px; height:48px; border-radius:50%;
    background:var(--color-primary); color:#fff;
    border:none; cursor:grab; box-shadow:0 4px 12px rgba(0,0,0,0.25);
    display:flex; align-items:center; justify-content:center;
    transition:transform 0.2s, box-shadow 0.2s;
    user-select:none;
}
#kmChatBtn:hover { transform:scale(1.08); box-shadow:0 6px 18px rgba(0,0,0,0.3); }
#kmChatBtn.dragging { cursor:grabbing; transform:scale(1.1); transition:none; }

#kmChatBadge {
    position:absolute; top:-4px; right:-4px;
    min-width:18px; height:18px; padding:0 5px;
    background:#ef4444; color:#fff; border-radius:10px;
    font-size:0.65rem; font-weight:700; line-height:18px;
    text-align:center; display:none;
}
#kmChatBadge.lathato { display:block; }

/* --- Kontakt lista panel --- */
#kmChatKontaktok {
    position:fixed; bottom:84px; left:24px; z-index:1050;
    width:320px; max-height:480px;
    background:var(--color-bg); border:1px solid var(--color-border);
    border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,0.18);
    display:flex; flex-direction:column; overflow:hidden;
    transition:opacity 0.2s, transform 0.2s;
}
#kmChatKontaktok.rejtett { opacity:0; pointer-events:none; transform:translateY(16px); }

.kmc-fejlec {
    padding:12px 14px; display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid var(--color-border);
}
.kmc-fejlec-cim { font-weight:600; font-size:0.95rem; color:var(--color-text); }
.kmc-fejlec button {
    background:none; border:none; color:var(--color-text-muted);
    cursor:pointer; font-size:1.1rem; line-height:1; padding:2px;
}
.kmc-fejlec button:hover { color:var(--color-text); }

.kmc-kereses {
    padding:8px 12px; border-bottom:1px solid var(--color-border);
}
.kmc-kereses input {
    width:100%; border:1px solid var(--color-border); border-radius:8px;
    padding:7px 10px; font-size:0.82rem; background:var(--color-bg);
    color:var(--color-text); outline:none;
}
.kmc-kereses input:focus { border-color:var(--color-primary); }

.kmc-lista {
    flex:1; overflow-y:auto; padding:4px 0;
}

.kmc-kontakt {
    display:flex; align-items:center; gap:10px;
    padding:8px 14px; cursor:pointer; transition:background 0.15s;
}
.kmc-kontakt:hover { background:var(--color-bg-alt, #f1f5f9); }
.kmc-kontakt.ai {
    border-bottom:1px solid var(--color-border);
}

.kmc-avatar {
    width:36px; height:36px; border-radius:50%; object-fit:cover;
    flex-shrink:0; background:var(--color-bg-alt, #e2e8f0);
}
.kmc-avatar-placeholder {
    width:36px; height:36px; border-radius:50%; flex-shrink:0;
    background:var(--color-primary); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:0.75rem; font-weight:600;
}
.kmc-avatar-ai {
    background:linear-gradient(135deg, var(--color-primary), #8b5cf6);
}

.kmc-kontakt-info { flex:1; min-width:0; }
.kmc-kontakt-nev {
    font-size:0.85rem; font-weight:500; color:var(--color-text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kmc-kontakt-beosztas {
    font-size:0.72rem; color:var(--color-text-muted);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* --- Beszélgetés lista (korábbi chatek) --- */
.kmc-szekciocim {
    padding:8px 14px 4px; font-size:0.7rem; font-weight:600;
    color:var(--color-text-muted); text-transform:uppercase; letter-spacing:0.5px;
}

.kmc-beszelgetes {
    display:flex; align-items:center; gap:10px;
    padding:8px 14px; cursor:pointer; transition:background 0.15s;
}
.kmc-beszelgetes:hover { background:var(--color-bg-alt, #f1f5f9); }
.kmc-beszelgetes.olvasatlan .kmc-besz-nev { font-weight:700; }

.kmc-besz-info { flex:1; min-width:0; }
.kmc-besz-nev {
    font-size:0.82rem; color:var(--color-text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kmc-besz-elonezet {
    font-size:0.72rem; color:var(--color-text-muted);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kmc-besz-ido {
    font-size:0.65rem; color:var(--color-text-muted);
    white-space:nowrap; flex-shrink:0;
}
.kmc-besz-badge {
    min-width:18px; height:18px; padding:0 5px;
    background:var(--color-primary); color:#fff; border-radius:10px;
    font-size:0.65rem; font-weight:700; line-height:18px;
    text-align:center; flex-shrink:0;
}

/* --- Mini chat ablak --- */
#kmChatAblak {
    position:fixed; bottom:84px; left:24px; z-index:1051;
    width:420px; height:66vh;
    background:var(--color-bg); border:1px solid var(--color-border);
    border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,0.18);
    display:flex; flex-direction:column; overflow:hidden;
    transition:opacity 0.2s, transform 0.2s;
    min-height:300px; min-width:300px; max-height:90vh;
}
#kmChatAblak .kmca-resize-handle {
    position:absolute; top:0; right:0; width:100%; height:8px;
    cursor:ns-resize; z-index:2;
}
#kmChatAblak .kmca-resize-handle-corner {
    position:absolute; top:0; right:0; width:16px; height:16px;
    cursor:nwse-resize; z-index:3;
}
#kmChatAblak.rejtett { opacity:0; pointer-events:none; transform:translateY(16px); }

.kmca-fejlec {
    background:var(--color-primary); color:#fff;
    padding:10px 14px; display:flex; align-items:center; gap:10px;
    flex-shrink:0;
}
.kmca-fejlec-avatar {
    width:32px; height:32px; border-radius:50%; object-fit:cover;
    background:rgba(255,255,255,0.2); flex-shrink:0;
}
.kmca-fejlec-avatar-placeholder {
    width:32px; height:32px; border-radius:50%; flex-shrink:0;
    background:rgba(255,255,255,0.2); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:0.7rem; font-weight:600;
}
.kmca-fejlec-info { flex:1; min-width:0; }
.kmca-fejlec-nev {
    font-weight:600; font-size:0.9rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kmca-fejlec-allapot { font-size:0.7rem; opacity:0.8; }
.kmca-fejlec-gombok { display:flex; gap:6px; align-items:center; flex-shrink:0; }
.kmca-fejlec-gombok button {
    background:none; border:none; color:#fff; cursor:pointer;
    opacity:0.8; font-size:1rem; line-height:1; padding:2px;
}
.kmca-fejlec-gombok button:hover { opacity:1; }

/* AI modell választó a fejlécben */
.kmca-modell-valaszto {
    appearance:none; -webkit-appearance:none;
    background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3);
    color:#fff; font-size:0.7rem; cursor:pointer; padding:2px 6px;
    border-radius:4px; outline:none; max-width:150px;
}
.kmca-modell-valaszto option { color:#333; background:#fff; }

.kmca-uzenetek {
    flex:1; overflow-y:auto; padding:12px; display:flex;
    flex-direction:column; gap:6px;
}

.kmca-uzenet {
    max-width:85%; padding:8px 12px; border-radius:12px;
    font-size:0.84rem; line-height:1.5; word-wrap:break-word;
    white-space:pre-wrap;
}
.kmca-uzenet.sajat {
    align-self:flex-end; background:var(--color-primary); color:#fff;
    border-bottom-right-radius:4px;
}
.kmca-uzenet.masik {
    align-self:flex-start; background:var(--color-bg-alt, #f1f5f9);
    color:var(--color-text); border-bottom-left-radius:4px;
}
/* AI markdown tartalom stílusok */
.kmca-uzenet.masik h3, .kmca-uzenet.masik h4, .kmca-uzenet.masik h5 {
    font-weight:700; margin:.4rem 0 .2rem; font-size:.88rem;
}
.kmca-uzenet.masik h3 { font-size:.92rem; }
.kmca-uzenet.masik p { margin:.25rem 0; }
.kmca-uzenet.masik ul, .kmca-uzenet.masik ol { padding-left:1.2rem; margin:.2rem 0; }
.kmca-uzenet.masik li { margin-bottom:.15rem; }
.kmca-uzenet.masik blockquote {
    border-left:3px solid var(--color-primary); margin:.3rem 0; padding:.2rem .5rem;
    color:var(--color-text-muted); background:rgba(0,0,0,.03); border-radius:0 4px 4px 0;
}
.kmca-uzenet.masik pre {
    background:#1e293b; color:#e2e8f0; padding:.4rem .6rem; border-radius:6px;
    overflow-x:auto; font-size:.78rem; margin:.3rem 0;
}
.kmca-uzenet.masik pre code { background:none; padding:0; color:inherit; }
.kmca-uzenet.masik code {
    background:rgba(0,0,0,.06); padding:.1rem .25rem; border-radius:3px;
    font-size:.8rem; font-family:'Consolas','Monaco',monospace;
}
.kmca-uzenet.masik hr { border:none; border-top:1px solid var(--color-border); margin:.4rem 0; }
.kmca-uzenet.masik table { border-collapse:collapse; width:100%; margin:.3rem 0; font-size:.78rem; }
.kmca-uzenet.masik th, .kmca-uzenet.masik td {
    border:1px solid var(--color-border); padding:.2rem .4rem; text-align:left;
}
.kmca-uzenet.masik th { background:rgba(0,0,0,.04); font-weight:600; }
.kmca-uzenet.masik .katex-display { margin:.3rem 0; overflow-x:hidden; }
.kmca-uzenet.masik .katex { font-size:.92em; }
.kmca-uzenet.gondolkodik { opacity:0.7; font-style:italic; display:flex; align-items:center; gap:0.5rem; }
.aic-gondolkodik-pontok { display:inline-flex; gap:3px; }
.aic-gondolkodik-pontok span { width:6px; height:6px; border-radius:50%; background:var(--color-primary, #16a34a); animation:aicPulzal 1.2s ease-in-out infinite; }
.aic-gondolkodik-pontok span:nth-child(2) { animation-delay:0.2s; }
.aic-gondolkodik-pontok span:nth-child(3) { animation-delay:0.4s; }
@keyframes aicPulzal { 0%,80%,100%{opacity:0.3;transform:scale(0.8)} 40%{opacity:1;transform:scale(1.1)} }
.kmca-uzenet.elozmeny-torolt { opacity:0.35; pointer-events:none; }
.kmca-elozmeny-elvalaszto {
    display:flex; align-items:center; gap:8px; margin:8px 0;
    font-size:0.7rem; color:var(--color-text-muted); font-style:italic;
}
.kmca-elozmeny-elvalaszto::before, .kmca-elozmeny-elvalaszto::after {
    content:''; flex:1; border-top:1px dashed var(--color-border);
}
.kmca-uzenet.rendszer {
    align-self:center; background:none; color:var(--color-text-muted);
    font-size:0.72rem; font-style:italic; padding:4px 8px;
}

.kmca-felado-nev {
    font-size:0.68rem; color:var(--color-text-muted);
    margin-bottom:2px; padding-left:2px;
}

/* Üzenet timestamp (#194) */
.kmca-uzenet-ido {
    font-size:0.6rem; color:rgba(0,0,0,0.3); margin-top:3px;
    text-align:right; line-height:1;
}
.kmca-uzenet.sajat .kmca-uzenet-ido { color:rgba(255,255,255,0.5); }
.kmca-uzenet.masik .kmca-uzenet-ido { color:var(--color-text-muted); opacity:0.55; text-align:left; }

/* Olvasási visszajelzés (#266) */
.kmca-latta { font-size:0.6rem; letter-spacing:-1px; margin-right:2px; color:rgba(255,255,255,0.4); }
.kmca-latta.olvasva { color:rgba(255,255,255,0.8); letter-spacing:-.5px; }

.kmca-uzenet-reakciok {
    display:flex; gap:4px; margin-top:4px; flex-wrap:wrap;
}
.kmca-reakcio-badge {
    display:inline-flex; align-items:center; gap:2px;
    padding:1px 6px; border-radius:10px; font-size:0.7rem;
    background:var(--color-bg-alt, #f1f5f9); border:1px solid var(--color-border);
    cursor:pointer; transition:background 0.15s;
}
.kmca-reakcio-badge:hover { background:var(--color-primary-light, #e0e7ff); }
.kmca-reakcio-badge.sajat { border-color:var(--color-primary); }

/* Input sor */
.kmca-input-sor {
    padding:10px 12px; border-top:1px solid var(--color-border);
    display:flex; gap:6px; align-items:flex-end;
}
.kmca-input-sor textarea {
    flex:1; resize:none; border:1px solid var(--color-border); border-radius:8px;
    padding:7px 10px; font-size:0.84rem; line-height:1.4; background:var(--color-bg);
    color:var(--color-text); outline:none; font-family:inherit;
    height:34px; min-height:34px; max-height:112px; overflow-y:hidden;
}
.kmca-input-sor textarea:focus { border-color:var(--color-primary); }
.kmca-input-sor button {
    background:var(--color-primary); color:#fff; border:none;
    border-radius:8px; padding:7px 12px; cursor:pointer; font-size:0.84rem;
    white-space:nowrap; align-self:flex-end;
}
.kmca-input-sor button:hover { opacity:0.9; }
.kmca-input-sor button:disabled { opacity:0.5; cursor:default; }
.kmca-input-sor .kmca-btn-ikon {
    background:none; color:var(--color-text-muted); padding:7px 6px;
}
.kmca-input-sor .kmca-btn-ikon:hover { color:var(--color-primary); background:none; }

/* AI modell info sáv */
.kmca-modell-info {
    padding:4px 12px; font-size:0.7rem; color:var(--color-text-muted);
    border-top:1px solid var(--color-border);
    display:flex; align-items:center; gap:6px;
    background:var(--color-bg); flex-shrink:0;
}
.kmca-modell-jelzo {
    width:7px; height:7px; border-radius:50%; flex-shrink:0;
    background:#22c55e;
}
.kmca-modell-jelzo.lokalis { background:#f59e0b; }
.kmca-modell-jelzo.ingyenes { background:#3b82f6; }

/* --- Tabs: Kontaktok / Beszélgetések --- */
.kmc-tabs {
    display:flex; border-bottom:1px solid var(--color-border);
}
.kmc-tab {
    flex:1; padding:8px 0; text-align:center; cursor:pointer;
    font-size:0.8rem; font-weight:500; color:var(--color-text-muted);
    border:none; background:none; border-bottom:2px solid transparent;
    transition:color 0.15s, border-color 0.15s;
}
.kmc-tab:hover { color:var(--color-text); }
.kmc-tab.aktiv { color:var(--color-primary); border-bottom-color:var(--color-primary); }

/* --- Feltöltés progress bar --- */
.kmca-feltoltes-progress { min-width:150px; max-width:70%; padding:8px 12px !important; }
.kmca-feltoltes-nev {
    font-size:0.75rem; margin-bottom:4px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kmca-feltoltes-bar-bg {
    width:100%; height:5px; border-radius:3px;
    background:rgba(255,255,255,0.3); overflow:hidden;
}
.kmca-feltoltes-bar {
    height:100%; border-radius:3px;
    background:#fff; transition:width 0.2s;
}
.kmca-feltoltes-szazalek {
    font-size:0.65rem; text-align:right; margin-top:2px; opacity:0.8;
}

/* --- Munkához csatolás gomb --- */
.kmca-uzenet { position:relative; }
.kmca-csatol-munka-btn {
    display:none; position:absolute; top:2px; right:2px;
    background:var(--color-bg); border:1px solid var(--color-border);
    border-radius:4px; cursor:pointer; font-size:0.7rem; padding:1px 4px;
    line-height:1; opacity:0.8;
}
.kmca-uzenet:hover .kmca-csatol-munka-btn { display:inline-block; }
.kmca-csatol-munka-btn:hover { opacity:1; }

/* --- Emoji picker (widget) --- */
.kmca-emoji-panel {
    position:absolute; bottom:52px; left:50px; right:12px; z-index:5;
    background:var(--color-bg); border:1px solid var(--color-border);
    border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,0.15);
    max-height:220px; display:flex; flex-direction:column; overflow:hidden;
}
.kmca-emoji-panel.rejtett { display:none; }
.kmca-emoji-tabs {
    display:flex; border-bottom:1px solid var(--color-border);
    padding:4px 6px 0; gap:2px;
}
.kmca-emoji-tab {
    background:none; border:none; border-bottom:2px solid transparent;
    padding:4px 8px; font-size:0.7rem; color:var(--color-text-muted);
    cursor:pointer; white-space:nowrap;
}
.kmca-emoji-tab:hover { color:var(--color-text); }
.kmca-emoji-tab.aktiv { color:var(--color-primary); border-bottom-color:var(--color-primary); }
.kmca-emoji-grid {
    display:grid; grid-template-columns:repeat(8, 1fr);
    gap:2px; padding:8px; overflow-y:auto; flex:1;
}
.kmca-emoji-btn {
    background:none; border:none; cursor:pointer; font-size:1.2rem;
    padding:4px; border-radius:6px; transition:background 0.12s; line-height:1;
}
.kmca-emoji-btn:hover { background:var(--color-bg-alt, #f1f5f9); }

/* --- Munkaszám linkek (widget) --- */
.chat-munkaszam-link {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    background: rgba(0,0,0,0.06);
    border-radius: 4px;
    padding: 1px 4px;
    margin: 0 1px;
    transition: background .15s;
}
.chat-munkaszam-link:hover { background: rgba(0,0,0,0.12); }
.kmca-uzenet.sajat .chat-munkaszam-link {
    color: inherit;
    background: rgba(255,255,255,0.18);
}
.kmca-uzenet.sajat .chat-munkaszam-link:hover { background: rgba(255,255,255,0.3); }

/* --- Responsive (#213 mobil optimalizálás) --- */
@media (max-width: 768px) {
    /* Chat gomb — mobil: nagyobb, jobb margók, mozgatható (#230) */
    #kmChatBtn {
        width:56px; height:56px;
    }
    #kmChatBtn svg { width:26px; height:26px; }
    /* Kontakt panel teljes szélességű */
    #kmChatKontaktok {
        width:calc(100vw - 16px); left:8px !important; right:8px;
        bottom:76px !important; max-height:65vh;
    }
    /* Chat ablak teljes szélességű, nem takarja a navigációt */
    #kmChatAblak {
        width:calc(100vw - 16px); left:8px !important; right:8px;
        bottom:76px !important; height:65vh; max-height:calc(100vh - 120px);
    }
}

/* Chat modul oldalon a widget gomb rejtése — ne duplázzuk.
   JS-ből: ha meta[name=km-modul] content="chat", elrejtjük a widgetet. */

@media (max-width: 480px) {
    #kmChatKontaktok { max-height:70vh; }
    #kmChatAblak { height:70vh; }
}

/* Markdown táblázat AI chat üzenetekben (#286) */
.md-table-wrap { overflow-x:auto; margin:0.5em 0; }
.md-table-wrap table { border-collapse:collapse; width:100%; font-size:0.85em; }
.md-table-wrap th, .md-table-wrap td { border:1px solid var(--color-border, #ddd); padding:0.35em 0.6em; text-align:left; }
.md-table-wrap th { background:var(--color-bg-alt, #f5f5f5); font-weight:600; }
.md-table-wrap tr:nth-child(even) { background:var(--color-bg-alt, #fafafa); }

/* Markdown képek AI chat üzenetekben (#287) */
.md-inline-img { max-width:100%; height:auto; border-radius:6px; margin:0.4em 0; cursor:pointer; }