:root {
    --wa-green: #25d366;
    --wa-dark: #128c7e;
    --bubble-in: #ffffff;
    --bubble-out: #d9fdd3;
    --chat-bg: #efeae2;
    --chat-panel: #ffffff;
    --chat-border: rgba(0, 0, 0, .08);
    --chat-hover: rgba(0, 0, 0, .04);
    --chat-active: rgba(37, 211, 102, .12);
    --muted: #667781;
}
[data-bs-theme=dark] {
    --bubble-in: #202c33;
    --bubble-out: #005c4b;
    --chat-bg: #0b141a;
    --chat-panel: #111b21;
    --chat-border: rgba(255, 255, 255, .08);
    --chat-hover: rgba(255, 255, 255, .04);
    --chat-active: rgba(37, 211, 102, .15);
    --muted: #8696a0;
}

body { font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; }
.min-w-0 { min-width: 0; }


.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.account-switcher { max-width: 320px; }
.account-switcher-menu { min-width: 300px; max-height: 70vh; overflow: auto; }
.avatar-photo { object-fit: cover; padding: 0; }
.avatar-initials {
    width: 30px; height: 30px; border-radius: 50%; background: var(--wa-dark); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 600;
}
.realtime-indicator { color: var(--bs-secondary-color); }
.realtime-indicator[data-state=online] { color: var(--wa-green); }
.realtime-indicator[data-state=offline] { color: var(--bs-danger); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .3; } }

.avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--bs-secondary-bg); }
.avatar-fallback {
    display: inline-flex; align-items: center; justify-content: center; font-weight: 600;
    color: #fff; background: linear-gradient(135deg, #20c997, #128c7e);
}
.stat-card { border: 0; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.stat-card .stat-icon {
    width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
}
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.section-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; margin-bottom: .5rem; }
.tag-pill {
    display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; padding: 2px 8px; border-radius: 999px;
    background: color-mix(in srgb, var(--tag) 18%, transparent); color: var(--tag); border: 1px solid color-mix(in srgb, var(--tag) 45%, transparent);
    white-space: nowrap;
}
.qr-box img { width: 260px; max-width: 100%; background: #fff; padding: 8px; border-radius: 8px; }
.pairing-code { font-family: ui-monospace, monospace; font-size: 2rem; letter-spacing: .25em; font-weight: 700; }
.perm-matrix th, .perm-matrix td { white-space: nowrap; text-align: center; vertical-align: middle; }
.perm-matrix th:first-child, .perm-matrix td:first-child { text-align: left; position: sticky; left: 0; background: var(--bs-body-bg); z-index: 1; }
.progress-thin { height: 6px; }


.auth-page { min-height: 100vh; background: linear-gradient(135deg, #0b141a 0%, #128c7e 100%); }
.brand-link .brand-mark { width: 33px; height: 33px; max-height: 33px; opacity: 1 !important; box-shadow: none !important; }
.brand-link .brand-text { letter-spacing: .08em; font-size: 1rem; }
.brand-link .brand-text strong { font-weight: 800; }
.brand-link .brand-sub { font-weight: 300; opacity: .8; }


.page-chat .app-content { padding: 0; }
.page-chat .app-content > .container-fluid { padding: 0; }
.chat-app {
    display: grid; grid-template-columns: 360px 1fr; height: calc(100vh - var(--lte-app-header-height, 57px));
    background: var(--chat-panel); overflow: hidden;
}
.chat-app.details-open { grid-template-columns: 360px 1fr 340px; }

.chat-sidebar { display: flex; flex-direction: column; border-right: 1px solid var(--chat-border); min-width: 0; min-height: 0; }
.chat-sidebar-head { padding: .75rem; border-bottom: 1px solid var(--chat-border); }
.chip {
    border: 1px solid var(--chat-border); background: transparent; color: var(--bs-body-color); border-radius: 999px;
    padding: 2px 12px; font-size: .82rem;
}
.chip.active { background: var(--chat-active); border-color: var(--wa-green); color: var(--wa-dark); font-weight: 600; }
[data-bs-theme=dark] .chip.active { color: var(--wa-green); }
.chat-list { flex: 1; overflow-y: auto; }
.list-section-title { padding: .5rem .9rem; font-size: .75rem; color: var(--wa-dark); font-weight: 700; text-transform: uppercase; }
.chat-row {
    display: flex; gap: .75rem; align-items: center; padding: .6rem .9rem; color: inherit; text-decoration: none;
    border-bottom: 1px solid var(--chat-border);
}
.chat-row:hover { background: var(--chat-hover); color: inherit; }
.chat-row.active { background: var(--chat-active); }
.chat-row-name { font-weight: 500; }
.chat-row.unread .chat-row-name { font-weight: 700; }
.chat-row.unread .chat-row-time { color: var(--wa-green); font-weight: 600; }
.chat-row-time { color: var(--muted); font-size: .75rem; white-space: nowrap; }
.chat-row-last { color: var(--muted); font-size: .86rem; }
.chat-row-typing { color: var(--wa-green); font-size: .86rem; font-style: italic; }
.chat-row-tags i { font-size: .7rem; margin-left: 1px; }
.chat-row mark { padding: 0; background: rgba(255, 193, 7, .45); }

.chat-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--chat-bg); }
.chat-main.drag-over::after {
    content: "Dosyayı buraya bırakın"; position: absolute; inset: 12px; border: 3px dashed var(--wa-green); border-radius: 16px;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem; background: rgba(37, 211, 102, .08); z-index: 30;
}
.chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); }
.chat-empty > i { font-size: 4rem; opacity: .5; }
.chat-conversation { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-header {
    display: flex; align-items: center; padding: .55rem .9rem; background: var(--chat-panel); border-bottom: 1px solid var(--chat-border);
}
.chat-messages {
    flex: 1; overflow-y: auto; padding: .75rem 6%; background-image: url("../img/chat-bg.png"); background-size: 400px;
    background-blend-mode: soft-light;
}
[data-bs-theme=dark] .chat-messages { background-blend-mode: overlay; background-color: var(--chat-bg); }
.new-msg-pill { position: absolute; bottom: 90px; right: 28px; z-index: 20; }
.account-banner { border: 0; }

.day-divider { text-align: center; margin: .75rem 0; }
.day-divider span {
    background: var(--chat-panel); color: var(--muted); font-size: .75rem; padding: 4px 12px; border-radius: 8px;
    box-shadow: 0 1px .5px rgba(0,0,0,.13); text-transform: capitalize;
}


.msg-row { display: flex; margin: 2px 0; }
.msg-row.out { justify-content: flex-end; }
.msg-bubble {
    position: relative; max-width: min(65%, 560px); padding: 6px 8px 4px; border-radius: 8px; background: var(--bubble-in);
    box-shadow: 0 1px .5px rgba(0,0,0,.13); word-wrap: break-word; overflow-wrap: anywhere;
}
.msg-row.out .msg-bubble { background: var(--bubble-out); }
.msg-row.highlight .msg-bubble { animation: flash .8s ease-in-out 5; }
@keyframes flash { 0%, 100% { box-shadow: 0 1px .5px rgba(0,0,0,.13); } 50% { box-shadow: 0 0 0 4px var(--wa-green); filter: brightness(1.06); } }
.msg-bubble.sticker { background: transparent !important; box-shadow: none; }
.msg-bubble.deleted { opacity: .85; }
.msg-text { white-space: normal; font-size: .94rem; line-height: 1.35; padding-right: 4px; }
.msg-text a { word-break: break-all; }
.msg-sender { font-size: .72rem; color: var(--wa-dark); font-weight: 600; margin-bottom: 2px; }
[data-bs-theme=dark] .msg-sender { color: #53bdeb; }
.msg-forwarded { font-size: .72rem; color: var(--muted); font-style: italic; }
.msg-meta { display: flex; justify-content: flex-end; align-items: center; gap: 4px; font-size: .68rem; color: var(--muted); margin-top: 2px; }
.msg-ticks .bi-check2-all.text-info { color: #53bdeb !important; }
.msg-edited { font-style: italic; }
.msg-error { font-size: .75rem; color: var(--bs-danger); }
.msg-deleted { font-style: italic; color: var(--muted); font-size: .9rem; }
.msg-deleted-original { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--chat-border); font-size: .78rem; color: var(--muted); }
.msg-deleted-original img, .msg-deleted-original video { max-height: 120px; opacity: .7; }
.msg-quote {
    border-left: 4px solid var(--wa-green); background: rgba(0,0,0,.05); border-radius: 6px; padding: 4px 8px; margin-bottom: 4px;
    font-size: .82rem; cursor: pointer;
}
[data-bs-theme=dark] .msg-quote { background: rgba(255,255,255,.06); }
.msg-quote-who { color: var(--wa-dark); font-weight: 600; font-size: .75rem; }
[data-bs-theme=dark] .msg-quote-who { color: var(--wa-green); }
.msg-quote-body { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.msg-image, .msg-video { display: block; max-width: 100%; max-height: 340px; border-radius: 6px; margin-bottom: 2px; }
.msg-image-link { display: block; }
.msg-sticker { width: 150px; height: 150px; object-fit: contain; }
.media-lazy { position: relative; min-width: 220px; min-height: 140px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 6px; background: rgba(0,0,0,.08); }
.media-lazy img.blur { width: 100%; filter: blur(6px); transform: scale(1.05); }
.media-lazy .media-load-btn { position: absolute; }
.media-placeholder { font-size: 3rem; color: var(--muted); }
.msg-audio { display: flex; align-items: center; gap: 6px; min-width: 260px; }
.msg-audio audio { height: 36px; flex: 1; }
.msg-doc {
    display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; background: rgba(0,0,0,.05);
    color: inherit; text-decoration: none; min-width: 240px; margin-bottom: 2px;
}
.msg-doc-icon {
    width: 40px; height: 46px; border-radius: 4px; background: #e53935; color: #fff; display: flex; align-items: center;
    justify-content: center; font-size: .62rem; font-weight: 700;
}
.msg-location, .msg-vcard { display: flex; gap: 8px; align-items: center; color: inherit; text-decoration: none; padding: 4px 0; }
.msg-poll ul { margin: 4px 0 0; padding-left: 1.1rem; }
.msg-system { text-align: center; margin: 6px 0; }
.msg-system span { background: var(--chat-panel); font-size: .78rem; color: var(--muted); padding: 4px 12px; border-radius: 8px; }
.msg-reactions {
    position: absolute; bottom: -14px; right: 8px; background: var(--chat-panel); border-radius: 999px; padding: 0 6px;
    font-size: .85rem; box-shadow: 0 1px 3px rgba(0,0,0,.2); display: flex; gap: 2px;
}
.msg-row:has(.msg-reactions) { margin-bottom: 16px; }
.msg-menu { position: absolute; top: 2px; right: 2px; opacity: 0; transition: opacity .15s; z-index: 5; }
.msg-bubble:hover .msg-menu, .msg-menu .show { opacity: 1; }
.msg-menu-btn { padding: 0 4px; background: var(--bubble-in); border: 0; line-height: 1; }
.msg-row.out .msg-menu-btn { background: var(--bubble-out); }
.react-bar {
    position: absolute; top: -42px; right: 0; background: var(--chat-panel); border-radius: 999px; padding: 4px 6px; z-index: 40; display: flex;
}
.react-bar button { border: 0; background: none; font-size: 1.3rem; padding: 0 4px; transition: transform .1s; }
.react-bar button:hover { transform: scale(1.3); }


.chat-composer { background: var(--chat-panel); border-top: 1px solid var(--chat-border); padding: .5rem .75rem; }
.composer-row { display: flex; align-items: flex-end; gap: .4rem; }
.composer-row textarea { resize: none; border-radius: 20px; padding: .5rem 1rem; max-height: 160px; }
.composer-row .btn.rounded-circle { width: 40px; height: 40px; flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center; }
.reply-bar { display: flex; align-items: center; gap: .5rem; border-left: 4px solid var(--wa-green); background: var(--chat-hover); padding: .4rem .75rem; border-radius: 6px; margin-bottom: .5rem; }
.attach-preview { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; }
.attach-item {
    position: relative; width: 120px; flex: 0 0 120px; border: 1px solid var(--chat-border); border-radius: 8px; padding: 6px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.attach-item img { width: 100%; height: 70px; object-fit: cover; border-radius: 4px; }
.attach-item .btn-close { position: absolute; top: 2px; right: 2px; background-color: var(--chat-panel); border-radius: 50%; }
.attach-name { font-size: .75rem; max-width: 100%; }
.emoji-menu { width: 280px; }
.emoji-btn { border: 0; background: none; font-size: 1.35rem; padding: 2px 4px; border-radius: 6px; }
.emoji-btn:hover { background: var(--chat-hover); }


.chat-details { border-left: 1px solid var(--chat-border); display: flex; flex-direction: column; min-height: 0; background: var(--chat-panel); }
.chat-details-head { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; border-bottom: 1px solid var(--chat-border); }
.chat-details-body { overflow-y: auto; flex: 1; }
.stat-box { display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 8px; background: var(--chat-hover); }
.stat-box i { font-size: 1.2rem; color: var(--wa-dark); }
.stat-box small { display: block; color: var(--muted); font-size: .72rem; }
.tag-check input { display: none; }
.tag-check span {
    display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8rem; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--tag) 50%, transparent); color: var(--tag);
}
.tag-check input:checked + span { background: var(--tag); color: #fff; }
.tag-check input:disabled + span { cursor: default; opacity: .8; }
.note { padding: 6px 8px; border-radius: 6px; background: var(--chat-hover); margin-bottom: 6px; }
.note-body { white-space: normal; }
.photo-history { display: flex; gap: 6px; flex-wrap: wrap; }
.photo-history a, .photo-history .status-text { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; display: inline-flex; }
.photo-history a.current { outline: 3px solid var(--wa-green); }
.photo-history img { width: 100%; height: 100%; object-fit: cover; }
.photo-history .status-text { background: var(--wa-dark); color: #fff; font-size: .6rem; padding: 4px; align-items: center; }
.status-video { width: 100%; height: 100%; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.gallery-thumb { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--chat-hover); display: flex; align-items: center; justify-content: center; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb.video i { position: absolute; font-size: 1.8rem; color: #fff; text-shadow: 0 0 6px rgba(0,0,0,.6); }
.gallery-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 6px; background: var(--chat-hover); color: inherit; text-decoration: none; }
.gallery-row audio { height: 32px; flex: 1; }
.nav-sm .nav-link { padding: .2rem .6rem; font-size: .8rem; }


.status-card { border-radius: 12px; overflow: hidden; }
.status-media { width: 100%; height: 260px; object-fit: cover; background: #000; }
.status-text-card { height: 260px; display: flex; align-items: center; justify-content: center; padding: 1rem; text-align: center; background: linear-gradient(135deg, #128c7e, #075e54); color: #fff; font-size: 1.1rem; }


[data-bs-theme=dark] .chat-app .btn-light,
[data-bs-theme=dark] .chat-composer .btn-light { background: var(--bs-tertiary-bg); border-color: transparent; color: var(--bs-body-color); }
[data-bs-theme=dark] .chat-app .btn-light:hover { background: var(--bs-secondary-bg); }
.media-missing {
    display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 6px; background: rgba(0,0,0,.06);
    color: var(--muted); font-size: .85rem; min-width: 200px;
}


.terminal-btn { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.terminal { background: #0b0f14; color: #d1d5db; border: 1px solid #1f2937; }
.terminal-dialog { max-width: min(1400px, 96vw); }
.terminal .modal-title { color: #e5e7eb; font-size: 1.05rem; }
.term-live { font-size: .8rem; color: #9ca3af; display: inline-flex; align-items: center; gap: 4px; }
.term-live .dot { width: 8px; height: 8px; border-radius: 50%; background: #6b7280; display: inline-block; }
.term-live[data-state=online] { color: #34d399; }
.term-live[data-state=online] .dot { background: #34d399; animation: blink 1.4s infinite; }
.term-live[data-state=offline] { color: #f87171; }
.term-live[data-state=offline] .dot { background: #f87171; }
.term-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; padding: 0 1rem .75rem; }
.term-metric { background: #111827; border: 1px solid #1f2937; border-radius: 8px; padding: 6px 10px; min-width: 0; }
.term-metric small { display: block; color: #9ca3af; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; }
.term-metric strong { display: block; font-family: ui-monospace, Consolas, monospace; font-size: .9rem; color: #f3f4f6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term-bar { height: 4px; background: #1f2937; border-radius: 2px; margin-top: 4px; overflow: hidden; }
.term-bar span { display: block; height: 100%; width: 0; background: #34d399; transition: width .4s; }
.term-bar span.warn { background: #fbbf24; }
.term-bar span.danger { background: #f87171; }
.term-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: .5rem 1rem; border-top: 1px solid #1f2937; border-bottom: 1px solid #1f2937; }
.term-input { background: #111827; color: #e5e7eb; border-color: #374151; max-width: 260px; }
.term-input:focus { background: #111827; color: #fff; }
.term-input::placeholder { color: #6b7280; }
.term-screen, .term-sessions { height: 60vh; overflow: auto; padding: .5rem 1rem; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .78rem; line-height: 1.45; background: #05080c; }
.modal-fullscreen-lg-down .term-screen, .modal-fullscreen-lg-down .term-sessions { height: auto; min-height: 50vh; }
.term-sessions { font-family: inherit; font-size: .85rem; }
.tl { white-space: pre-wrap; word-break: break-word; padding: 1px 0; border-bottom: 1px solid rgba(255,255,255,.03); }
.tl > span { margin-right: 8px; }
.tl-time { color: #6b7280; }
.tl-level { display: inline-block; min-width: 44px; font-weight: 700; }
.tl-tag { color: #a78bfa; }
.tl-msg { color: #e5e7eb; }
.tl-err { color: #fca5a5; }
.tl-extra { color: #6b7280; }
.tl-stack { color: #fca5a5; margin: 2px 0 4px 60px; font-size: .72rem; white-space: pre-wrap; }
.tl-trace .tl-level, .tl-debug .tl-level { color: #6b7280; }
.tl-info .tl-level { color: #38bdf8; }
.tl-warn .tl-level, .tl-warn { color: #fbbf24; }
.tl-error .tl-level, .tl-fatal .tl-level, .tl-error, .tl-fatal { color: #f87171; }
.tl-fatal { background: rgba(248,113,113,.08); }


@media (max-width: 1399.98px) {
    .chat-app.details-open { grid-template-columns: 340px 1fr; }
    .chat-details { position: absolute; right: 0; top: 0; bottom: 0; width: 360px; max-width: 100%; z-index: 50; box-shadow: -4px 0 16px rgba(0,0,0,.15); }
    .chat-app { position: relative; }
}
@media (max-width: 991.98px) {
    .chat-app, .chat-app.details-open { grid-template-columns: 1fr; }
    .chat-main { display: none; }
    .chat-app.show-conversation .chat-sidebar { display: none; }
    .chat-app.show-conversation .chat-main { display: flex; }
    .chat-messages { padding: .5rem 3%; }
    .msg-bubble { max-width: 85%; }
    .msg-bubble:has(.msg-menu) { padding-right: 26px; }
    .msg-menu { opacity: 1; }
}


img.emoji { height: 1.2em; width: 1.2em; margin: 0 .05em 0 .1em; vertical-align: -0.22em; display: inline-block; }
.react-bar img.emoji, .emoji-btn img.emoji { height: 1.45rem; width: 1.45rem; vertical-align: middle; margin: 0; }
.react-bar button.active { background: var(--chat-active); border-radius: 50%; }
.reaction-chip { border: 0; background: none; padding: 0 2px; display: inline-flex; align-items: center; gap: 2px; color: inherit; font-size: .85rem; border-radius: 999px; }
.reaction-chip small { font-size: .7rem; color: var(--muted); }
.reaction-chip.mine { background: var(--chat-active); }
.reaction-chip:hover { transform: scale(1.1); }


.context-menu { position: fixed; z-index: 1080; min-width: 230px; max-height: 80vh; overflow-y: auto; }
.context-menu .ctx-tags { max-height: 180px; overflow-y: auto; }
.context-menu .dropdown-item.disabled { opacity: .6; }
.chat-row.pinned { background: linear-gradient(90deg, rgba(37,211,102,.06), transparent 60%); }


.viewers-banner { border-left: 0; border-right: 0; }


.chat-search-bar { background: var(--chat-panel); border-bottom: 1px solid var(--chat-border); padding: .5rem .75rem; }
.chat-search-results { max-height: 220px; overflow-y: auto; margin-top: .4rem; }
.chat-search-results:empty { display: none; }
.search-hit { display: block; padding: .35rem .5rem; border-radius: 6px; color: inherit; text-decoration: none; }
.search-hit:hover, .search-hit.active { background: var(--chat-hover); }
.search-hit.active { box-shadow: inset 3px 0 0 var(--wa-green); }
mark { padding: 0 1px; background: rgba(255, 213, 0, .45); color: inherit; border-radius: 2px; }


.chat-composer { position: relative; }
.quick-reply-pop {
    position: absolute; left: .75rem; right: .75rem; bottom: calc(100% + 4px); max-height: 320px; overflow-y: auto; z-index: 30;
    background: var(--chat-panel); border: 1px solid var(--chat-border); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.15);
}
.qr-item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .5rem .75rem; color: inherit; border-bottom: 1px solid var(--chat-border); }
.qr-item:last-child { border-bottom: 0; }
.qr-item:hover, .qr-item.active { background: var(--chat-active); }


.ai-suggestion { background: rgba(13, 202, 240, .08); border: 1px solid rgba(13, 202, 240, .35); border-radius: 10px; padding: .5rem .75rem; margin-bottom: .5rem; }
.ai-suggestion-text { white-space: pre-wrap; max-height: 160px; overflow-y: auto; }
.msg-sender.ai { color: #0aa2c0; }


.info-preview { border-radius: 8px; padding: .6rem .8rem; background: var(--bubble-in); border: 1px solid var(--chat-border); }
.info-preview.out { background: var(--bubble-out); }
.info-section { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--wa-dark); font-weight: 700; margin: 1rem 0 .5rem; }
[data-bs-theme=dark] .info-section { color: var(--wa-green); }
.info-timeline { list-style: none; padding: 0; margin: 0 0 .5rem; position: relative; }
.info-timeline::before { content: ""; position: absolute; left: 13px; top: 6px; bottom: 6px; width: 2px; background: var(--chat-border); }
.info-timeline li { display: flex; gap: .65rem; padding: .3rem 0; position: relative; }
.info-dot { flex: 0 0 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; }
.info-detail { background: var(--chat-hover); border-radius: 6px; padding: .25rem .5rem; margin-top: .2rem; }

.mi-dialog .modal-body { padding: 1rem 1.1rem 1.25rem; }
.mi-preview { display: grid; gap: .45rem; margin-bottom: 1rem; }
.mi-preview.out { justify-items: end; }
.mi-bubble { max-width: 88%; padding: .55rem .75rem .4rem; border-radius: 10px; background: var(--bubble-in); border: 1px solid var(--chat-border);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05); overflow-wrap: anywhere; }
.mi-preview.out .mi-bubble { background: var(--bubble-out); }
.mi-bubble-meta { font-size: .72rem; color: var(--muted); text-align: right; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.mi-flags { display: flex; flex-wrap: wrap; gap: .35rem; }
.mi-flag { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; padding: .1rem .55rem; border-radius: 999px;
    background: var(--chat-hover); color: var(--bs-body-color); }
.mi-flag.danger { background: rgba(var(--bs-danger-rgb), .12); color: var(--bs-danger); }
.mi-error { font-size: .82rem; color: var(--bs-danger); }
.mi-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.mi-tile { display: grid; gap: .1rem; align-content: start; padding: .55rem .7rem; border-radius: 10px; border: 1px solid var(--chat-border); min-width: 0; }
.mi-tile-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); display: flex; gap: .3rem; align-items: center; }
.mi-tile-value { font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mi-tile-sub { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mi-tabs { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid var(--chat-border); margin-bottom: .75rem; scrollbar-width: none; }
.mi-tab { border: 0; background: none; padding: .5rem .7rem; font-size: .86rem; color: var(--muted); white-space: nowrap;
    border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: .35rem; }
.mi-tab:hover { color: var(--bs-body-color); }
.mi-tab.active { color: var(--wa-dark); border-bottom-color: var(--wa-green); font-weight: 600; }
[data-bs-theme=dark] .mi-tab.active { color: var(--wa-green); }
.mi-tab:focus-visible { outline: 2px solid var(--wa-green); outline-offset: -2px; border-radius: 4px; }
.mi-count { font-size: .7rem; min-width: 1.3rem; padding: 0 .35rem; border-radius: 999px; background: var(--chat-hover); text-align: center; font-variant-numeric: tabular-nums; }
.mi-timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.mi-timeline li { display: grid; grid-template-columns: 8.2rem 28px minmax(0, 1fr); gap: .65rem; position: relative; padding-bottom: .8rem; }
.mi-timeline li::before { content: ""; position: absolute; left: calc(8.2rem + .65rem + 13px); top: 28px; bottom: 0; width: 2px; background: var(--chat-border); }
.mi-timeline li:last-child::before { display: none; }
.mi-timeline time { font-size: .76rem; color: var(--muted); text-align: right; padding-top: .3rem; font-variant-numeric: tabular-nums; }
.mi-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; position: relative; z-index: 1; }
.mi-event { padding-top: .25rem; min-width: 0; }
.mi-actor { margin-left: .4rem; font-size: .76rem; color: var(--muted); }
.mi-detail { margin-top: .3rem; font-size: .84rem; background: var(--chat-hover); border-radius: 8px; padding: .4rem .6rem; overflow-wrap: anywhere; }
.mi-list { list-style: none; margin: 0; padding: 0; display: grid; }
.mi-list li { display: flex; gap: .65rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid var(--chat-border); }
.mi-list li:last-child { border-bottom: 0; }
.mi-avatar { flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--chat-hover); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.mi-emoji { font-size: 1.05rem; background: transparent; }
.mi-meta { font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mi-reply { display: block; margin-top: .15rem; font-size: .86rem; overflow-wrap: anywhere; }
.mi-empty { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1.5rem .5rem; color: var(--muted); font-size: .88rem; text-align: center; }
.mi-empty .bi { font-size: 1.5rem; opacity: .6; }
.mi-versions { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.mi-versions li { border: 1px solid var(--chat-border); border-radius: 10px; padding: .55rem .7rem; }
.mi-versions li.current { border-color: var(--wa-green); background: var(--chat-active); }
.mi-version-head { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline; margin-bottom: .25rem; }
.mi-version-no { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--wa-dark); }
[data-bs-theme=dark] .mi-version-no { color: var(--wa-green); }
.mi-version-text { overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    .mi-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mi-timeline li { grid-template-columns: 28px minmax(0, 1fr); }
    .mi-timeline time { grid-column: 2; grid-row: 2; text-align: left; padding-top: 0; }
    .mi-timeline li::before { left: 13px; }
}
.edit-history { padding-left: 1.2rem; margin: 0; }
.edit-history li { margin-bottom: .6rem; }
.edit-history .edit-text { background: var(--chat-hover); border-radius: 6px; padding: .35rem .6rem; margin-top: .15rem; }
.edit-history li.current .edit-text { background: var(--chat-active); }


.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-list li { display: flex; gap: .65rem; padding: .55rem 0; border-bottom: 1px solid var(--chat-border); align-items: flex-start; }
.activity-list li:last-child { border-bottom: 0; }
.activity-icon { flex: 0 0 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.photo-change { display: flex; align-items: center; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--chat-border); }
.photo-change:last-child { border-bottom: 0; }
.photo-change .pc-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--chat-hover); display: flex; align-items: center; justify-content: center; color: var(--muted); flex: 0 0 44px; }
.photo-change .bi-arrow-right { color: var(--muted); }


.status-layout { display: grid; grid-template-columns: 340px 1fr; gap: 1rem; }
@media (max-width: 991.98px) { .status-layout { grid-template-columns: 1fr; } }
.status-contacts { max-height: calc(100vh - 300px); min-height: 300px; overflow-y: auto; }
.status-contact { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; cursor: pointer; border-radius: 10px; color: inherit; text-decoration: none; }
.status-contact:hover { background: var(--chat-hover); }
.status-contact.active { background: var(--chat-active); }
.status-ring { padding: 2px; border-radius: 50%; background: var(--wa-green); flex: 0 0 auto; display: inline-flex; }
.status-ring.all-deleted { background: #c4c9cc; }
.status-ring > * { border: 2px solid var(--chat-panel); border-radius: 50%; }
.status-stage { background: #111b21; border-radius: 14px; color: #e9edef; min-height: 520px; display: flex; flex-direction: column; overflow: hidden; }
.status-stage-head { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; background: rgba(0,0,0,.25); }
.status-progress { display: flex; gap: 3px; padding: .5rem 1rem 0; }
.status-progress span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); cursor: pointer; }
.status-progress span.done, .status-progress span.active { background: #fff; }
.status-body { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; padding: 1rem 3.5rem; min-height: 360px; }
.status-body img, .status-body video { max-width: 100%; max-height: 60vh; border-radius: 8px; }
.status-text { font-size: 1.5rem; text-align: center; padding: 2rem; border-radius: 12px; max-width: 520px; white-space: pre-wrap; background: #1f6e5f; }
.status-nav { position: absolute; top: 50%; transform: translateY(-50%); border: 0; background: rgba(255,255,255,.12); color: #fff; width: 40px; height: 40px; border-radius: 50%; }
.status-nav:hover { background: rgba(255,255,255,.25); }
.status-nav:disabled { opacity: .25; }
.status-nav.prev { left: .75rem; }
.status-nav.next { right: .75rem; }
.status-caption { padding: .25rem 1rem .75rem; text-align: center; white-space: pre-wrap; }
.status-deleted-badge { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 2; }
.status-body.is-deleted img, .status-body.is-deleted video, .status-body.is-deleted .status-text { opacity: .55; filter: grayscale(.6); }
.status-thumbs { display: flex; gap: .4rem; overflow-x: auto; padding: .5rem 1rem 1rem; }
.status-thumbs button { flex: 0 0 64px; height: 64px; border-radius: 8px; border: 2px solid transparent; padding: 0; overflow: hidden; background: #222e35; color: #aebac1; font-size: .7rem; position: relative; }
.status-thumbs button.active { border-color: var(--wa-green); }
.status-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.status-thumbs .thumb-del { position: absolute; top: 2px; right: 2px; color: #ff6b6b; background: rgba(0,0,0,.6); border-radius: 50%; width: 18px; height: 18px; font-size: .65rem; display: flex; align-items: center; justify-content: center; }


.settings-nav .nav-link { color: inherit; border-radius: 8px; }
.settings-nav .nav-link.active { background: var(--chat-active); color: var(--wa-dark); font-weight: 600; }
[data-bs-theme=dark] .settings-nav .nav-link.active { color: var(--wa-green); }
.form-hint { font-size: .78rem; color: var(--muted); }


html:has(body.page-chat), body.page-chat { overflow: hidden; height: 100%; }
.page-chat .app-footer { display: none; }
.page-chat .app-main { overflow: hidden; }
.chat-app { height: calc(100dvh - var(--lte-app-header-height, 57px)); }
#composerText { resize: none; overflow-y: hidden; scrollbar-width: none; }
#composerText::-webkit-scrollbar { display: none; }
#composerText.scrolling { overflow-y: auto; }
.chat-messages { overflow-anchor: none; }


.msg-image-link { display: block; cursor: zoom-in; }
.msg-video-wrap { position: relative; display: block; min-width: 220px; max-width: 100%; border-radius: 6px; overflow: hidden; cursor: pointer; background: #000; margin-bottom: 2px; }
.msg-video-wrap .msg-video { pointer-events: none; margin: 0; }
.msg-video-wrap img.blur { width: 100%; filter: blur(6px); transform: scale(1.05); display: block; }
.msg-video-wrap .media-placeholder { height: 160px; display: flex; align-items: center; justify-content: center; }
.msg-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.msg-video-meta { position: absolute; left: 8px; bottom: 6px; color: #fff; font-size: .72rem; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.media-lazy[data-lightbox] { cursor: pointer; }

body.lightbox-open { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(11, 20, 26, .97); color: #e9edef; display: none; flex-direction: column; outline: none; }
.lightbox.open { display: flex; }
.lb-head { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; }
.lb-who { font-weight: 600; }
.lb-when { color: #8696a0; }
.lb-actions { margin-left: auto; display: flex; gap: .25rem; }
.lb-btn { border: 0; background: none; color: #aebac1; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; text-decoration: none; }
.lb-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.lb-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; padding: 0 4.5rem; }
.lb-media { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.lb-img, .lb-video { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .15s ease; cursor: zoom-in; user-select: none; }
.lb-img.zoomed { cursor: zoom-out; }
.lb-blur { position: absolute; max-width: 60%; max-height: 60%; filter: blur(12px); opacity: .5; }
.lb-loading, .lb-error { position: relative; text-align: center; }
.lb-error img { max-width: 200px; border-radius: 8px; opacity: .7; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: #fff; font-size: 1.4rem; z-index: 2; }
.lb-nav:hover { background: rgba(255,255,255,.2); }
.lb-nav.prev { left: 1rem; }
.lb-nav.next { right: 1rem; }
.lb-caption { text-align: center; padding: .4rem 1rem; white-space: pre-wrap; max-height: 20vh; overflow-y: auto; }
.lb-caption:empty { display: none; }
.lb-thumbs { display: flex; gap: .4rem; overflow-x: auto; padding: .5rem 1rem .9rem; justify-content: safe center; border-top: 1px solid rgba(255,255,255,.06); }
.lb-thumbs:empty { display: none; }
.lb-thumbs button { flex: 0 0 56px; height: 56px; border-radius: 6px; border: 3px solid transparent; padding: 0; overflow: hidden; background: #202c33; color: #8696a0; position: relative; opacity: .65; }
.lb-thumbs button.active { border-color: var(--wa-green); opacity: 1; }
.lb-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.lb-thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
@media (max-width: 575.98px) { .lb-stage { padding: 0 .5rem; } .lb-nav { width: 38px; height: 38px; } }


.dropdown-submenu { position: relative; }
.dropdown-submenu > .submenu { display: none; position: absolute; top: -.5rem; left: 100%; margin: 0; min-width: 190px; }
.dropdown-submenu:hover > .submenu, .dropdown-submenu:focus-within > .submenu { display: block; }
.dropdown-menu-end .dropdown-submenu > .submenu, .dropdown-submenu.open-left > .submenu { left: auto; right: 100%; }
.context-menu { overflow: visible; }
.lottie-sticker { width: 150px; height: 150px; }
.msg-call.bad span { color: var(--bs-danger); }


.chat-kind { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--chat-panel); color: var(--wa-dark); font-size: .65rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px var(--chat-border); }
.msg-participant { font-size: .76rem; font-weight: 600; color: var(--pc, var(--wa-dark)); margin-bottom: 1px; }
[data-bs-theme=dark] .msg-participant { filter: brightness(1.45); }
.chat-composer.readonly-channel .composer-row, .chat-composer.readonly-channel .quick-reply-pop { display: none !important; }
.chat-composer.readonly-channel::before { content: "Bu bir WhatsApp kanalı; CRM'den mesaj gönderilemez."; display: block; text-align: center; font-size: .85rem; color: var(--muted); padding: .4rem 0; }


.role-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--role, #6c757d); display: inline-block; flex: 0 0 10px; margin-top: .35rem; }
.role-chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--chat-border); border-left: 3px solid var(--role, #6c757d); border-radius: 999px; padding: .2rem .6rem; font-size: .85rem; background: var(--bs-body-bg); }
.role-chip .role-dot { margin-top: 0; }
.role-chip.sm { font-size: .75rem; padding: .1rem .5rem; margin: 1px; }
.role-card { border-top: 3px solid var(--role) !important; }
.perm-matrix td.from-role { background: var(--chat-active); }

.avatar-img { object-fit: cover; padding: 0; }
.profile-avatar { position: relative; width: 104px; height: 104px; border-radius: 50%; background: var(--wa-dark); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; overflow: visible; }
.profile-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.profile-avatar-edit { position: absolute; right: 0; bottom: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--chat-border); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; box-shadow: 0 2px 6px rgba(0,0,0,.15); }

.online-card.idle { opacity: .8; }
.presence-dot { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: #2fb344; border: 2px solid var(--bs-body-bg); }
.presence-dot.idle { background: #f59f00; }
.online-tab { border: 1px solid var(--chat-border); border-radius: 8px; padding: .45rem .6rem; margin-top: .4rem; font-size: .88rem; }

.service-banner { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1900; display: flex; align-items: center; gap: .75rem;
    background: #b42318; color: #fff; padding: .75rem 1rem; border-radius: 12px; box-shadow: 0 10px 30px rgba(180,35,24,.45); max-width: min(720px, calc(100vw - 32px)); animation: sb-pulse 2s ease-in-out infinite; }
@keyframes sb-pulse { 0%, 100% { box-shadow: 0 10px 30px rgba(180,35,24,.45); } 50% { box-shadow: 0 10px 40px rgba(180,35,24,.8); } }
.announcement { border-left-width: 4px; }


.kpi .kpi-value { font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.kpi-delta { font-size: .78rem; font-weight: 600; border-radius: 999px; padding: .05rem .4rem; }
.kpi-delta.good { color: #0f7b3e; background: rgba(15,123,62,.1); }
.kpi-delta.bad { color: #b42318; background: rgba(180,35,24,.1); }
.kpi-delta.neutral { color: var(--muted); background: var(--chat-hover); }
[data-bs-theme=dark] .kpi-delta.good { color: #5cd391; }
[data-bs-theme=dark] .kpi-delta.bad { color: #ff8a80; }
.report-scroll { max-height: 330px; overflow-y: auto; }
.bar-track { height: 8px; border-radius: 4px; background: var(--chat-hover); overflow: hidden; }
.bar-track.thin { height: 4px; margin-top: 3px; }
.bar-fill { height: 100%; border-radius: 4px; }
.heatmap { overflow-x: auto; }
.hm-row { display: grid; grid-template-columns: 36px repeat(24, minmax(14px, 1fr)); gap: 3px; margin-bottom: 3px; min-width: 520px; }
.hm-head span { font-size: .68rem; color: var(--muted); text-align: left; }
.hm-day { font-size: .75rem; color: var(--muted); align-self: center; }
.hm-cell { display: inline-block; height: 22px; border-radius: 4px; background: var(--chat-hover); }
.hm-legend .hm-cell { width: 18px; height: 12px; }
.hm-cell.s1 { background: color-mix(in oklab, var(--hm, #2a78d6) 18%, var(--bs-body-bg)); }
.hm-cell.s2 { background: color-mix(in oklab, var(--hm, #2a78d6) 38%, var(--bs-body-bg)); }
.hm-cell.s3 { background: color-mix(in oklab, var(--hm, #2a78d6) 58%, var(--bs-body-bg)); }
.hm-cell.s4 { background: color-mix(in oklab, var(--hm, #2a78d6) 78%, var(--bs-body-bg)); }
.hm-cell.s5 { background: var(--hm, #2a78d6); }


.photo-flow { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.pf-card { display: block; text-align: center; padding: .75rem .5rem; border: 1px solid var(--chat-border); border-radius: 12px; color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.pf-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); color: inherit; }
.pf-imgs { display: flex; align-items: center; justify-content: center; margin-bottom: .4rem; }
.pf-old, .pf-new { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--chat-hover); color: var(--muted); }
.pf-old { opacity: .55; filter: grayscale(.5); transform: scale(.85); }
.pf-new { box-shadow: 0 0 0 3px var(--wa-green); }
.pf-arrow { color: var(--muted); margin: 0 .3rem; font-size: .9rem; }
.pf-name { font-weight: 600; font-size: .88rem; }
.pf-time { font-size: .74rem; color: var(--muted); }
.activity-day { position: sticky; top: 0; z-index: 1; background: var(--bs-body-bg); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: .6rem 0 .3rem; border-bottom: 1px solid var(--chat-border); }
.activity-filters { position: sticky; top: 1rem; }
.activity-list.compact li { padding: .4rem 0; }

.activity-list .pc-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 36px; background: var(--chat-hover);
    display: inline-flex; align-items: center; justify-content: center; color: var(--muted); max-width: 36px; }
.activity-list li > .min-w-0 { min-width: 0; overflow-wrap: anywhere; }
.dash-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }


.msg-notice { display: flex; gap: .55rem; align-items: flex-start; padding: .35rem .25rem; color: var(--muted); max-width: 320px; }
.msg-notice > i { font-size: 1.25rem; line-height: 1; margin-top: .1rem; }
.msg-notice strong { display: block; color: var(--bs-body-color); font-weight: 600; font-size: .9rem; }
.msg-notice small { display: block; font-size: .76rem; line-height: 1.3; }

.group-members { max-height: 340px; overflow-y: auto; }
.group-member { display: flex; align-items: center; gap: .55rem; padding: .35rem 0; border-bottom: 1px solid var(--chat-border); font-size: .88rem; }
.group-member:last-child { border-bottom: 0; }


#composerText { min-height: 38px; }
@media (max-width: 767.98px) {
    .app-header .container-fluid { padding-left: .35rem; padding-right: .35rem; }
    .app-header .navbar-nav .nav-link { padding-left: .35rem; padding-right: .35rem; }
    .account-switcher { max-width: 150px; }
    .account-switcher .text-truncate { max-width: 92px !important; }
    #btnTerminal { padding: .2rem .4rem; }
    .app-content-header h3 { font-size: 1.3rem; }
    .app-content { padding-left: .25rem; padding-right: .25rem; }
    .card-header { flex-wrap: wrap; row-gap: .35rem; }
    .btn-group { flex-wrap: wrap; }
    .modal-dialog { margin: .5rem; }
    .settings-nav { flex-direction: row !important; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .settings-nav .nav-link { white-space: nowrap; }
    .activity-filters { position: static; }
}
@media (max-width: 575.98px) {
    .app-header .navbar-nav .user-menu .nav-link { padding-right: 0; }
    .realtime-indicator { padding-left: .15rem !important; padding-right: .15rem !important; }
    
    .chat-filters { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .chat-filters::-webkit-scrollbar { display: none; }
    .chat-filters .chip, .chat-filters .dropdown { flex: 0 0 auto; }
    .chat-messages { padding: .5rem 2.5%; }
    .msg-bubble { max-width: 86%; }
    .chat-composer { padding: .4rem .45rem calc(.4rem + env(safe-area-inset-bottom)); }
    .composer-row { gap: .25rem; }
    .composer-row > .btn, .composer-row .dropup > .btn { width: 38px; height: 38px; padding: 0; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; }
    #btnQuickReplies, #btnAiSuggest { display: none !important; }
    #composerText { font-size: 16px; padding: .45rem .7rem; border-radius: 20px; } 
    .emoji-menu { width: min(280px, calc(100vw - 24px)); }
    .chat-search-bar .input-group-text#inChatCount { display: none; }
    .conv-header .btn { padding: .25rem .4rem; }
    .lb-head { padding: .4rem .5rem; }
    .lb-btn { width: 36px; height: 36px; }
    .status-body { padding: 1rem .5rem; }
    .hm-row { min-width: 480px; }
    .kpi .kpi-value { font-size: 1.3rem; }
}


.bk-parts { display: grid; gap: .75rem; }
.bk-part { border: 1px solid var(--chat-border); border-radius: 10px; padding: .7rem .85rem; }
.bk-part.is-disabled { opacity: .6; }
.bk-part .form-check-label { cursor: pointer; }
.bk-details summary { cursor: pointer; color: var(--wa-dark); }
[data-bs-theme=dark] .bk-details summary { color: var(--wa-green); }
.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .1rem .75rem; max-height: 16rem; overflow-y: auto; }
.bk-code { background: var(--chat-hover); border-radius: 8px; padding: .55rem .7rem; font-size: .8rem; margin: 0 0 .6rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.bk-table td { font-variant-numeric: tabular-nums; }


.lg-table td { vertical-align: top; }
.lg-src { overflow-wrap: anywhere; white-space: pre-wrap; }
.lg-input { resize: vertical; min-height: 2rem; }
.lg-json { font-size: .8rem; }
.lang-toggle { display: inline-flex; align-items: center; }

:root {
    --brand: #9f2233;
    --brand-strong: #861c2b;
    --brand-soft: #fbf0f2;
    --brand-tint: rgba(159, 34, 51, .08);
    --app-bg: #f5f3f4;
    --app-border: rgba(40, 20, 26, .08);
    --app-shadow: 0 1px 2px rgba(40, 20, 26, .04), 0 4px 14px rgba(40, 20, 26, .04);
    --illu-disc: radial-gradient(closest-side, #fbeef1 0%, #f7e9ec 72%, rgba(247, 233, 236, 0) 100%);
    --bs-link-color: #9f2233;
    --bs-link-color-rgb: 159, 34, 51;
    --bs-link-hover-color: #861c2b;
    --bs-link-hover-color-rgb: 134, 28, 43;
    --bs-focus-ring-color: rgba(159, 34, 51, .2);
}
[data-bs-theme=dark] {
    --brand: #e2586d;
    --brand-strong: #ef7a8c;
    --brand-soft: rgba(226, 88, 109, .1);
    --brand-tint: rgba(226, 88, 109, .14);
    --app-bg: #131415;
    --app-border: rgba(255, 255, 255, .07);
    --app-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    --illu-disc: radial-gradient(closest-side, #ebe7e8 0%, #dfdadb 72%, rgba(223, 218, 219, 0) 100%);
    --bs-link-color: #ee8494;
    --bs-link-color-rgb: 238, 132, 148;
    --bs-link-hover-color: #f6a9b4;
    --bs-link-hover-color-rgb: 246, 169, 180;
}


.app-main { background: var(--app-bg); }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.btn:hover, .nav-link:hover, .dropdown-item:hover, .chat-row:hover { text-decoration: none; }
.form-control:focus, .form-select:focus { border-color: rgba(159, 34, 51, .45); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { border-color: rgba(159, 34, 51, .45); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.btn { border-radius: .6rem; }
.btn-sm { border-radius: .5rem; }
.form-control, .form-select { border-radius: .55rem; }


.app-sidebar.app-sidebar {
    background: linear-gradient(180deg, #2a1a1f 0%, #1f1619 55%, #181314 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, .04);
    --lte-sidebar-color: rgba(255, 255, 255, .7) !important;
    --lte-sidebar-hover-color: #fff !important;
    --lte-sidebar-hover-bg: rgba(255, 255, 255, .06) !important;
    --lte-sidebar-active-color: #fff !important;
    --lte-sidebar-menu-active-bg: rgba(226, 88, 109, .16) !important;
    --lte-sidebar-menu-active-color: #fff !important;
    --lte-sidebar-header-color: rgba(255, 255, 255, .38) !important;
}
.app-sidebar .sidebar-brand { border-bottom: 1px solid rgba(255, 255, 255, .06); }
.app-sidebar .sidebar-menu .nav-link { border-radius: .6rem; transition: background-color .15s ease, color .15s ease; }
.app-sidebar .sidebar-menu .nav-link.active { box-shadow: inset 3px 0 0 #e2586d; font-weight: 600; }
.app-sidebar .sidebar-menu .nav-link .nav-icon { opacity: .85; }
.app-sidebar .sidebar-menu .nav-link.active .nav-icon { color: #f08a99; opacity: 1; }
.app-sidebar .nav-header { font-size: .68rem; letter-spacing: .12em; }
.app-sidebar .nav-badge { background: rgba(226, 88, 109, .9) !important; color: #fff !important; }


.app-header { border-bottom: 1px solid var(--app-border); box-shadow: none; }
.terminal-btn.terminal-btn {
    font-family: inherit; font-weight: 600; background: transparent !important; color: var(--bs-body-color) !important;
    border: 1px solid var(--app-border) !important; border-radius: 999px; padding: .25rem .8rem;
}
.terminal-btn i { color: var(--brand); }
.terminal-btn:hover { background: var(--brand-tint) !important; }
.avatar-initials { background: var(--brand); }


.app-content-header h3 { font-weight: 700; letter-spacing: -.015em; font-size: 1.55rem; }


.card { --bs-card-border-radius: .9rem; --bs-card-inner-border-radius: calc(.9rem - 1px); --bs-card-border-color: var(--app-border); }
.stat-card { border: 1px solid var(--app-border) !important; box-shadow: var(--app-shadow); }
.card-header { border-bottom-color: var(--app-border); padding: .85rem 1.1rem; }
.card-header strong { font-weight: 650; }
.card-header strong > .bi:first-child { color: var(--brand); }
.card-footer { border-top-color: var(--app-border); }
.stat-card .stat-value { letter-spacing: -.02em; }


.table > thead > tr > th {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
    color: var(--bs-secondary-color); border-bottom-width: 1px; white-space: nowrap;
}
.table { --bs-table-border-color: var(--app-border); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--brand-tint); }
.badge { font-weight: 600; letter-spacing: .01em; }


.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.25rem 1rem; gap: .3rem; }
.empty-illu { width: 176px; aspect-ratio: 1; border-radius: 50%; background: var(--illu-disc); display: grid; place-items: center; margin-bottom: .55rem; }
.empty-illu img { width: 86%; height: auto; }
.empty-title { font-weight: 650; font-size: 1.05rem; color: var(--bs-body-color); margin: 0; text-wrap: balance; }
.empty-text { color: var(--bs-secondary-color); font-size: .9rem; max-width: 44ch; margin: 0; text-wrap: pretty; }
.empty-hint { color: var(--bs-secondary-color); font-size: .8rem; margin: .35rem 0 0; }
.empty-state .btn { margin-top: .75rem; }
.empty-state.sm { padding: 1.4rem .75rem; }
.empty-state.sm .empty-illu { width: 112px; margin-bottom: .35rem; }
.empty-state.sm .empty-title { font-size: .95rem; }
.empty-state.sm .empty-text { font-size: .84rem; }
.empty-state.lg .empty-illu { width: 248px; }
.empty-state.lg .empty-title { font-size: 1.25rem; }
@media (prefers-reduced-motion: no-preference) {
    .empty-illu img { animation: illu-float 6s ease-in-out infinite; }
}
@keyframes illu-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.chat-empty .empty-state { padding: 1rem; }
td > .empty-state { padding-block: 1.6rem; }


.qr-box .qr-guide { display: flex; align-items: center; gap: 1rem; text-align: left; padding: .75rem; border-radius: .8rem; background: var(--brand-soft); }
.qr-guide .qr-img { width: 168px; height: 168px; background: #fff; padding: 6px; border-radius: .6rem; flex: 0 0 auto; }
.qr-guide .qr-illu { width: 96px; height: 96px; flex: 0 0 auto; border-radius: 50%; background: var(--illu-disc); padding: 6px; }
.link-steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; font-size: .85rem; }
.link-steps li { counter-increment: s; display: flex; gap: .5rem; align-items: flex-start; color: var(--bs-secondary-color); }
.link-steps li::before {
    content: counter(s); flex: 0 0 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center;
    font-size: .72rem; font-weight: 700; border: 1px solid var(--app-border); background: var(--bs-body-bg); color: var(--bs-body-color);
}
.link-steps li.active { color: var(--bs-body-color); font-weight: 600; }
.link-steps li.active::before { background: var(--brand); border-color: var(--brand); color: #fff; }
.link-steps li.done::before { content: "\2713"; background: #198754; border-color: #198754; color: #fff; }
@media (max-width: 575.98px) {
    .qr-box .qr-guide { flex-direction: column; }
}


.error-code { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; color: var(--brand); line-height: 1; margin-bottom: .5rem; }


[data-bs-theme=dark] .btn-light {
    --bs-btn-bg: rgba(255, 255, 255, .06); --bs-btn-border-color: var(--app-border); --bs-btn-color: var(--bs-body-color);
    --bs-btn-hover-bg: rgba(255, 255, 255, .12); --bs-btn-hover-border-color: rgba(255, 255, 255, .14); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: rgba(255, 255, 255, .16); --bs-btn-active-color: #fff;
}
[data-bs-theme=dark] .empty-illu { background: radial-gradient(closest-side, #d6d0d2 0%, #c9c2c4 68%, rgba(201, 194, 196, 0) 100%); }
[data-bs-theme=dark] .empty-illu img { filter: brightness(.94); }


.tabular { font-variant-numeric: tabular-nums; }


.dash-hero {
    position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
    padding: 1.4rem 1.5rem; margin-bottom: 1rem; border-radius: 1.1rem; border: 1px solid var(--app-border);
    background:
        radial-gradient(circle at 1px 1px, var(--hero-dot) 1px, transparent 1.2px) 0 0 / 18px 18px,
        linear-gradient(120deg, var(--hero-a) 0%, var(--hero-b) 55%, var(--hero-c) 100%);
}
:root { --hero-a: #fff6f7; --hero-b: #fdf1f3; --hero-c: #f6eef9; --hero-dot: rgba(159, 34, 51, .07); }
[data-bs-theme=dark] { --hero-a: #241a1d; --hero-b: #1f1a1d; --hero-c: #1c1b22; --hero-dot: rgba(255, 255, 255, .05); }
.dash-hero::after {
    content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(159, 34, 51, .14), transparent); pointer-events: none;
}
.dash-hero-text { position: relative; z-index: 1; min-width: 0; }
.dash-hero-date { margin: 0 0 .15rem; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--bs-secondary-color); }
.dash-hero-title { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.dash-hero-sub { margin: .55rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.dash-hero-sub > span {
    display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; padding: .25rem .65rem; border-radius: 999px;
    background: color-mix(in srgb, var(--bs-body-bg) 75%, transparent); border: 1px solid var(--app-border);
}
.dash-hero-sub i { color: var(--brand); }
.dash-hero-actions { position: relative; z-index: 1; display: flex; gap: .5rem; flex-wrap: wrap; }


.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.kpi {
    display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem .9rem; border-radius: .9rem; min-width: 0;
    background: var(--bs-body-bg); border: 1px solid var(--app-border); box-shadow: var(--app-shadow); color: inherit; text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.kpi:hover { text-decoration: none; color: inherit; transform: translateY(-1px); border-color: color-mix(in srgb, var(--brand) 30%, var(--app-border)); }
.kpi-head { display: flex; align-items: center; gap: .55rem; }
.kpi-label { font-size: .84rem; color: var(--bs-secondary-color); font-weight: 600; }
.kpi-icon { width: 30px; height: 30px; border-radius: .6rem; display: grid; place-items: center; font-size: .95rem; flex: 0 0 auto; }
.tone-brand { background: var(--brand-tint); color: var(--brand); }
.tone-in { background: rgba(42, 120, 214, .12); color: #2a78d6; }
.tone-out { background: rgba(235, 104, 52, .13); color: #c9541f; }
.tone-ok { background: rgba(25, 135, 84, .12); color: #198754; }
[data-bs-theme=dark] .tone-in { color: #6aa6ee; }
[data-bs-theme=dark] .tone-out { color: #f08a5d; }
[data-bs-theme=dark] .tone-ok { color: #4fc78d; }
.kpi-value { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.kpi-of { font-size: 1.1rem; font-weight: 600; color: var(--bs-secondary-color); letter-spacing: 0; }
.kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 32px; font-size: .8rem; margin-top: auto; }
.kpi-note { color: var(--bs-secondary-color); }
a.kpi:hover .kpi-note { color: var(--brand); }
.kpi-spark { width: 110px; height: 32px; flex: 0 0 auto; overflow: visible; }
.spark-line { fill: none; stroke: var(--bs-secondary-color); stroke-opacity: .55; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark-area { opacity: .1; }
.spark-dot { stroke: var(--bs-body-bg); stroke-width: 2; }
.delta-chip { display: inline-flex; align-items: center; gap: .05rem; padding: .05rem .4rem .05rem .2rem; border-radius: 999px; font-weight: 700; font-size: .76rem; background: var(--chat-hover); color: var(--bs-body-color); }
.delta-chip i { font-size: 1rem; line-height: 1; }
.kpi-segments { display: flex; gap: 3px; flex-wrap: wrap; max-width: 100%; }
.kpi-segments i { width: 18px; height: 6px; border-radius: 3px; }
.kpi-segments .seg-ok { background: #198754; }
.kpi-segments .seg-warn { background: #e0a400; }
.kpi-segments .seg-off { background: var(--app-border); outline: 1px solid var(--app-border); }


.chart-legend { display: flex; gap: 1rem; flex-wrap: wrap; }
.legend-item { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; color: var(--bs-secondary-color); }
.legend-item i { width: 10px; height: 10px; border-radius: 3px; }
.legend-item strong { color: var(--bs-body-color); font-variant-numeric: tabular-nums; }
.card-link-more { font-size: .82rem; font-weight: 600; display: inline-flex; align-items: center; gap: .1rem; }
.card-link-more:hover { text-decoration: none; }
.card-link-more i { font-size: .75rem; transition: transform .15s ease; }
.card-link-more:hover i { transform: translateX(2px); }


.call-feed { display: grid; }
.call-item { display: flex; align-items: center; gap: .7rem; padding: .55rem .35rem; border-radius: .65rem; color: inherit; text-decoration: none; }
.call-item:hover { background: var(--chat-hover); color: inherit; text-decoration: none; }
.call-item + .call-item { border-top: 1px solid var(--app-border); }
.call-av { position: relative; flex: 0 0 auto; }
.call-dir {
    position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
    font-size: .62rem; color: #fff; border: 2px solid var(--bs-body-bg);
}
.call-dir.in { background: #2a78d6; }
.call-dir.out { background: #eb6834; }
.call-dir.bad { background: #dc3545; }


.ghost { position: relative; min-height: 210px; }
.ghost-skeleton {
    display: grid; gap: .25rem; padding: .25rem 0; opacity: .9;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 95%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 95%);
}
.gh-row, .gh-pair { display: flex; align-items: center; gap: .7rem; padding: .55rem .35rem; }
.gh-row > span, .gh-pair > span { flex: 1; display: grid; gap: .4rem; }
.gh-av, .gh-dot, .gh-line, .gh-pill, .gh-arrow, .skeleton-list i { display: block; background: var(--gh); border-radius: 999px; }
:root { --gh: #efeced; --gh-shine: rgba(255, 255, 255, .7); }
[data-bs-theme=dark] { --gh: #24262a; --gh-shine: rgba(255, 255, 255, .05); }
.gh-av { width: 36px; height: 36px; flex: 0 0 36px; }
.gh-av.lg { width: 44px; height: 44px; flex-basis: 44px; }
.gh-dot { width: 26px; height: 26px; flex: 0 0 26px; }
.gh-arrow { width: 18px; height: 4px; flex: 0 0 18px; }
.gh-pill { width: 64px; height: 18px; flex: 0 0 64px; }
.gh-line { height: 9px; }
.w-25 { width: 25%; } .w-35 { width: 35%; } .w-60 { width: 60%; } .w-70 { width: 70%; }
.ghost-msg {
    position: absolute; inset: auto 0 .25rem 0; display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center; padding: 0 1rem;
}
.ghost-icon {
    width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; margin-bottom: .35rem; font-size: 1.15rem;
    color: var(--brand); background: var(--bs-body-bg); border: 1px solid var(--app-border); box-shadow: 0 6px 18px rgba(40, 20, 26, .08);
}
.ghost-msg strong { font-size: .95rem; }
.ghost-msg small { color: var(--bs-secondary-color); max-width: 36ch; text-wrap: pretty; }
.ghost-pairs { min-height: 190px; }
@media (prefers-reduced-motion: no-preference) {
    .gh-av, .gh-dot, .gh-line, .gh-pill, .gh-arrow, .skeleton-list i {
        background-image: linear-gradient(100deg, transparent 20%, var(--gh-shine) 45%, transparent 70%);
        background-size: 220% 100%; background-repeat: no-repeat; animation: gh-shine 2.8s ease-in-out infinite;
    }
}
@keyframes gh-shine { 0% { background-position: 130% 0; } 60%, 100% { background-position: -30% 0; } }


.skeleton-list { display: grid; gap: .7rem; padding: .5rem .25rem; }
.skeleton-list i { height: 38px; border-radius: .6rem; }


.activity-list.act-timeline { position: relative; }
.activity-list.act-timeline li { border-bottom: 0; position: relative; padding-left: 0; }
.activity-list.act-timeline li:not(:last-child)::before {
    content: ""; position: absolute; left: 15px; top: 40px; bottom: -6px; width: 2px; background: var(--app-border); border-radius: 2px;
}
.activity-list.act-timeline .activity-icon { position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--bs-body-bg); }


.status-pill { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; padding: .15rem .6rem .15rem .45rem; border-radius: 999px; background: var(--chat-hover); }
.status-pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-pill.tone-success { color: #198754; background: rgba(25, 135, 84, .1); }
.status-pill.tone-info, .status-pill.tone-warning { color: #b07800; background: rgba(224, 164, 0, .12); }
.status-pill.tone-danger { color: #c4313f; background: rgba(220, 53, 69, .1); }
.status-pill.tone-secondary, .status-pill.tone-dark { color: var(--bs-secondary-color); }
[data-bs-theme=dark] .status-pill.tone-success { color: #4fc78d; }
[data-bs-theme=dark] .status-pill.tone-info, [data-bs-theme=dark] .status-pill.tone-warning { color: #f0c24a; }
[data-bs-theme=dark] .status-pill.tone-danger { color: #f07a85; }
.io-ratio { display: grid; gap: .3rem; min-width: 8rem; }
.io-ratio small { color: var(--bs-secondary-color); font-size: .76rem; }
.ratio-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; gap: 2px; background: var(--app-border); }
.ratio-bar .in { background: #2a78d6; }
.ratio-bar .out { background: #eb6834; }
[data-bs-theme=dark] .ratio-bar .in { background: #3987e5; }
[data-bs-theme=dark] .ratio-bar .out { background: #d95926; }
.count-pill { display: inline-block; min-width: 1.6rem; padding: .1rem .5rem; border-radius: 999px; font-weight: 700; font-size: .8rem; background: var(--brand); color: #fff; text-align: center; }

@media (max-width: 1199.98px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
    .kpi-grid { gap: .6rem; }
    .kpi { padding: .8rem .85rem; }
    .kpi-value { font-size: 1.6rem; }
    .kpi-spark { width: 72px; }
    .dash-hero { padding: 1.1rem; }
    .dash-hero-actions { width: 100%; }
    .dash-hero-actions .btn { flex: 1; }
}

.dash-hero { margin-top: .9rem; }
.chart-wrap { position: relative; }
.chart-empty {
    position: absolute; inset: 0 0 1.6rem 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
    text-align: center; background: color-mix(in srgb, var(--bs-body-bg) 70%, transparent);
}
.chart-empty small { color: var(--bs-secondary-color); max-width: 40ch; }


.avatar-fallback.av-0 { background: #8c5a6a; } .avatar-fallback.av-1 { background: #3f7a8c; }
.avatar-fallback.av-2 { background: #5d7f4f; } .avatar-fallback.av-3 { background: #8a6d3b; }
.avatar-fallback.av-4 { background: #5b6bb0; } .avatar-fallback.av-5 { background: #9a5545; }
.avatar-fallback.av-6 { background: #437d6c; } .avatar-fallback.av-7 { background: #7a5c96; }
.avatar-fallback[class*=" av-"] { color: #fff; }


.dash-scroll { max-height: 400px; overflow-y: auto; scrollbar-width: thin; }
.rep-chip { display: inline-block; margin-left: .25rem; padding: 0 .45rem; border-radius: 999px; font-size: .72rem; font-weight: 700; background: var(--chat-hover); color: var(--bs-secondary-color); vertical-align: 1px; }


.ps-list { display: grid; grid-template-columns: minmax(0, 1fr); }
.ps-item { display: flex; align-items: center; gap: .8rem; padding: .6rem .35rem; border-radius: .65rem; color: inherit; text-decoration: none; }
.ps-item + .ps-item { border-top: 1px solid var(--app-border); }
.ps-item:hover { background: var(--chat-hover); color: inherit; text-decoration: none; }
.ps-pair { position: relative; flex: 0 0 auto; width: 84px; height: 48px; }
.ps-old, .ps-new { position: absolute; top: 50%; border-radius: 50%; transition: transform .25s ease, filter .25s ease, opacity .25s ease; }
.ps-old { left: 0; width: 40px; height: 40px; margin-top: -20px; overflow: hidden; filter: grayscale(1); opacity: .7; background: var(--chat-hover); }
.ps-old img, .ps-none { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; color: var(--bs-secondary-color); }
.ps-new { left: 36px; width: 44px; height: 44px; margin-top: -22px; box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--brand); }
.ps-new .avatar { display: block; }
.ps-badge {
    position: absolute; left: 68px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
    font-size: .62rem; color: #fff; background: var(--brand); border: 2px solid var(--bs-body-bg); z-index: 1;
}
.ps-item:hover .ps-old { transform: translateX(-4px); filter: grayscale(.2); opacity: .95; }
.ps-item:hover .ps-new { transform: translateX(4px); }
.ps-time { flex: 0 0 auto; color: var(--bs-secondary-color); font-size: .76rem; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ps-old, .ps-new { transition: none; } }
.status-pill { white-space: nowrap; }
.dash-accounts td:first-child { min-width: 11rem; }