.kantor.kv3 { background: #14212a; min-height: 350px; border-color: #42585b; }
.kv3-layar { position: relative; height: clamp(350px, 37vw, 620px); overflow: hidden; touch-action: pan-y; }
.kv3 canvas { display: block; width: 100%; height: 100%; outline-offset: -4px; }
.kv3-judul { position: absolute; left: 16px; top: 16px; z-index: 2; padding: 9px 12px; background: #182a34ed; border: 1px solid #526b70; color: #f4f1ec; border-radius: 10px; max-width: calc(100% - 140px); font-size: 12px; line-height: 1.4; pointer-events: none; }
.kv3-judul b { display: block; color: #ffbd88; font-size: 13px; }
.kv3-status { position: absolute; right: 14px; top: 16px; z-index: 2; min-width: 90px; max-width: 145px; padding: 9px 12px; border: 1px solid #f08a4b; border-radius: 10px; background: #182a34ed; color: #fff; text-align: center; font-size: 12px; }
.kv3-status b { display: block; font-size: 23px; line-height: 1.2; color: #ffbd88; }
.kv3-nama { position: absolute; z-index: 3; white-space: nowrap; transform: translate(-50%, -100%); border: 1px solid #81969c; border-radius: 7px; padding: 3px 7px; font-size: 11px; font-weight: 700; line-height: 1.4; background: #1b2c36ed; color: #fff; pointer-events: none; }
.kv3-nama.saya { border-color: #ffb77f; color: #ffe3c1; }
.kv3-nama[data-offline="true"] { color: #c0c9cd; border-color: #677980; }
.kv3-bubble { position: absolute; z-index: 4; top: 83px; left: 16px; width: min(260px, calc(100% - 32px)); max-height: 160px; overflow: auto; border: 1px solid #f08a4b; border-radius: 12px; padding: 11px 13px; background: #fff5e9; color: #25313a; font-size: 13px; line-height: 1.5; box-shadow: 0 5px 18px #0003; }
.kv3-bubble p { margin: 3px 0 0; }
.kv3-bubble small { font-size: 11px; font-weight: 700; color: #765136; }
.kv3-bubble[hidden], .kv3-nama[hidden] { display: none; }
.kv3-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px; background: #182731; border-top: 1px solid #42585b; color: #d2dde0; font-size: 12px; }
.kv3-controls > div { display: flex; gap: 6px; }
.kv3-controls button { min-width: 35px; min-height: 35px; border: 1px solid #637b83; border-radius: 7px; background: #233943; color: #fff; padding: 5px 9px; font: inherit; cursor: pointer; }
.kv3-controls button:focus-visible { outline: 3px solid #ffbd88; outline-offset: 2px; }
.kv3-controls button[aria-pressed="false"] { color: #e8c893; }
@media (max-width: 600px) { .kv3-layar { height: 320px; } .kv3-judul { font-size: 11px; top: 9px; } .kv3-status { top: 9px; } .kv3-bubble { position: relative; top: auto; left: auto; width: auto; margin: 0 12px 12px; font-size: 12px; } .kv3-controls { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .kv3 * { scroll-behavior: auto; } }