/* KUNTI inherits the PBL Executive Luxury system while keeping its focused copilot workspace. */
:root { --kunti-maroon: #571f2c; --kunti-burgundy: #76283a; --kunti-ivory: #f5f3f0; --kunti-gold: #bea78a; }
.shell { background: radial-gradient(circle at 78% 8%, rgb(190 167 138 / 13%), transparent 24rem), var(--kunti-ivory); }
.sidebar { background: linear-gradient(165deg, #28272e, #201f25 58%, #321f29); border-right: 1px solid rgb(255 255 255 / 9%); box-shadow: 8px 0 28px rgb(20 12 17 / 10%); }
.kunti-name { letter-spacing: -.04em; color: #fff7f0; }
.kunti-avatar { position: relative; display: grid; place-items: center; width: 96px; height: 96px; margin: 18px 0 12px; border: 1px solid rgb(190 167 138 / 40%); border-radius: 28px; background: radial-gradient(circle at 35% 25%, #d4ae9460, transparent 38%), linear-gradient(145deg, #793240, #2e2028); box-shadow: 0 12px 26px rgb(0 0 0 / 20%), inset 0 1px rgb(255 255 255 / 14%); }
.kunti-avatar::after { content: ""; position: absolute; inset: -5px; border: 1px solid rgb(190 167 138 / 30%); border-radius: 32px; animation: kunti-breathe 3s ease-in-out infinite; }
.kunti-avatar-core { display: grid; place-items: center; width: 53px; height: 53px; border: 1px solid rgb(255 255 255 / 35%); border-radius: 18px; color: #fff8f2; font-size: 28px; font-weight: 800; background: linear-gradient(145deg, #ad4144, #571f2c); box-shadow: 0 0 25px rgb(190 167 138 / 18%); }
.kunti-avatar-wave { position: absolute; right: 8px; bottom: 8px; width: 8px; height: 8px; border-radius: 99px; background: #91c39c; box-shadow: 0 0 0 4px rgb(145 195 156 / 18%); }
.kunti-avatar[data-kunti-state="thinking"] .kunti-avatar-core { animation: kunti-pulse 1s ease-in-out infinite; }
.kunti-avatar[data-kunti-state="offline"] .kunti-avatar-wave { background: #a79ca0; box-shadow: none; }
@keyframes kunti-breathe { 50% { transform: scale(1.04); opacity: .55; } }
@keyframes kunti-pulse { 50% { box-shadow: 0 0 0 8px rgb(190 167 138 / 14%), 0 0 26px rgb(190 167 138 / 28%); } }
.badge { color: #f6e8db; border-color: rgb(190 167 138 / 42%); background: rgb(190 167 138 / 13%); }
.main { min-width: 0; }
.topbar { background: rgb(255 254 253 / 88%); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgb(65 35 42 / 4%), 0 8px 24px rgb(55 31 38 / 3%); }
.title { color: #3a2732; letter-spacing: -.02em; }
.conversation { scrollbar-color: #c9b6ad transparent; }
.messages { gap: 15px; }
.message, .welcome, .composer-wrap, .example, .hint { border: 1px solid #e7e1dc; border-radius: 15px; box-shadow: 0 8px 24px rgb(46 27 35 / 5%); background: #fffefd; }
.message { padding: 17px 19px; }
.message.user { background: linear-gradient(140deg, #76283a, #571f2c); color: #fff7f0; border-color: #76283a; }
.message.assistant { background: #fffefd; }
.composer { border: 1px solid #dcd3ce; border-radius: 13px; background: #fffefd; transition: border-color 160ms ease, box-shadow 160ms ease; }
.composer:focus-within { border-color: #a85a69; box-shadow: 0 0 0 3px rgb(142 49 65 / 7%); }
.composer textarea { border: 0; background: transparent; min-height: 78px; resize: vertical; }
.composer button, .actions button { background: linear-gradient(120deg, #6e2332, #970000 72%, #ad4144); border: 1px solid #792132; border-radius: 9px; color: #fff; min-height: 39px; font-weight: 600; }
.composer button:hover, .actions button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.welcome h1 { color: #3a2732; }
.example { transition: transform 160ms ease, border-color 160ms ease; }
.example:hover { transform: translateY(-2px); border-color: #c7a795; }
@media (max-width: 900px) { .shell { grid-template-columns: 1fr; } .sidebar { min-height: auto; padding: 18px; } .conversation { padding: 18px; } }
@media (max-width: 600px) { .topbar { padding: 13px 16px; } .conversation { padding: 14px; } .sidebar-copy { font-size: 12px; } .message { padding: 14px; } }
@media (prefers-reduced-motion: reduce) { .example:hover, .composer button:hover, .actions button:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .kunti-avatar::after, .kunti-avatar-core { animation: none; } }

/* Authenticated ERP floating copilot panel. The developer console remains a separate full-screen route. */
.kunti-widget { position: fixed; right: 24px; bottom: 24px; z-index: 80; font-family: inherit; isolation: isolate; contain: layout paint; }
.kunti-fab { position: relative; display:grid; place-items:center; width:58px; height:58px; padding:0; border:1px solid rgb(190 167 138 / 65%); border-radius:50%; background:linear-gradient(145deg,#76283a,#571f2c); box-shadow:0 14px 36px rgb(38 19 26 / 28%); cursor:pointer; }
.kunti-fab:hover { transform:translateY(-2px); filter:brightness(1.06); }
.kunti-fab-dot { position:absolute; right:2px; bottom:3px; width:12px; height:12px; border:2px solid #fffefd; border-radius:50%; background:#85be8d; }
.kunti-unread { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; border:2px solid #fffefd; border-radius:99px; color:#fff; background:#a63e48; font-size:10px; line-height:14px; }
.kunti-float-panel { display:flex; flex-direction:column; width:min(390px, calc(100vw - 32px)); height:min(590px, calc(100vh - 48px)); overflow:hidden; border:1px solid rgb(87 31 44 / 20%); border-radius:18px; background:#fffefd; box-shadow:0 24px 70px rgb(35 19 25 / 28%); animation:kunti-panel-in 180ms ease-out; }
.kunti-widget.is-expanded .kunti-float-panel { width:min(520px, calc(100vw - 32px)); height:min(780px, calc(100vh - 48px)); }
.kunti-float-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; color:#fff7f0; background:linear-gradient(135deg,#571f2c,#76283a); }
.kunti-float-identity { display:flex; align-items:center; gap:10px; min-width:0; }
.kunti-float-identity strong, .kunti-float-identity small { display:block; }
.kunti-float-identity small { margin-top:2px; color:#eadbd3; font-size:11px; }
.kunti-float-actions { display:flex; gap:4px; }
.kunti-float-actions .icon-button { display:inline-grid; place-items:center; width:30px; height:30px; padding:0; border-color:#ffffff3b; color:#fff; background:#ffffff12; }
.kunti-female-avatar { position:relative; display:grid; place-items:center; flex:0 0 auto; overflow:hidden; border:1px solid #d2ad98; border-radius:50%; background:linear-gradient(160deg,#d8b39b,#9f5661 65%,#571f2c); box-shadow:inset 0 1px #fff8,0 5px 14px #280e1640; }
.kunti-female-avatar--small { width:42px; height:42px; }
.kunti-female-avatar--panel { width:40px; height:40px; }
.kunti-hair { position:absolute; top:-7%; width:82%; height:68%; border-radius:50% 50% 42% 42%; background:#3e2028; box-shadow:inset 8px 0 #6c3039; }
.kunti-face { position:relative; z-index:1; width:54%; height:54%; margin-top:8px; border-radius:48% 48% 45% 45%; background:#e7bda7; }
.kunti-eye { position:absolute; top:43%; width:4px; height:3px; border-radius:50%; background:#3d2025; animation:kunti-blink 5s infinite; }
.kunti-eye--left { left:25%; }.kunti-eye--right { right:25%; }
.kunti-mouth { position:absolute; left:39%; bottom:22%; width:22%; height:3px; border-radius:50%; background:#8b3b48; transition:height .15s ease; }
.kunti-widget[data-kunti-state="speaking"] .kunti-mouth { height:8px; animation:kunti-mouth 220ms ease-in-out infinite alternate; }
.kunti-widget[data-kunti-state="speaking"] .kunti-female-avatar { animation:kunti-head 900ms ease-in-out infinite alternate; }
.kunti-widget[data-kunti-state="thinking"] .kunti-female-avatar { animation:kunti-breathe 1.4s ease-in-out infinite; }
.kunti-widget[data-kunti-state="listening"] .kunti-female-avatar { box-shadow:0 0 0 5px #bea78a3b, inset 0 1px #fff8, 0 5px 14px #280e1640; }
.kunti-float-messages { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; gap:8px; padding:14px; background:linear-gradient(180deg,#f8f2ec,#fffefd); }
.kunti-float-message { flex:0 0 auto; max-width:92%; min-width:0; overflow:visible; display:flex; flex-direction:column; gap:7px; padding:11px 13px; border:1px solid #e7e1dc; border-radius:14px; color:#33292d; font-size:13px; line-height:1.55; background:#fffefd; box-shadow:0 4px 14px rgba(48,34,39,.035); }
.kunti-float-message small { color:#8b7d80; font-size:10px; align-self:flex-end; }
.kunti-float-message.user { align-self:flex-end; max-width:78%; border-color:#76283a; color:#fff7f0; background:linear-gradient(135deg,#76283a,#571f2c); box-shadow:none; }
.kunti-message-body { display:flex; flex-direction:column; gap:6px; min-width:0; max-width:100%; overflow-wrap:anywhere; word-break:break-word; }
.kunti-message-paragraph { margin:0; max-width:100%; overflow-wrap:anywhere; word-break:break-word; color:#3e3538; line-height:1.55; }
.kunti-message-heading { margin:4px 0 0; color:#2e2528; font-size:12px; line-height:1.35; font-weight:700; letter-spacing:.01em; }
.kunti-message-heading:first-child { margin-top:0; }
.kunti-message-list { margin:0; padding-left:20px; color:#3e3538; }
.kunti-message-list li { margin:3px 0; padding-left:2px; }
.kunti-message-body strong { color:#2e2528; font-weight:700; }
.kunti-float-message.user .kunti-message-body { white-space:pre-wrap; }
.kunti-float-message.user .kunti-message-body, .kunti-float-message.user strong { color:#fff7f0; }
.kunti-image-attachment { display:flex; align-items:center; gap:7px; max-width:100%; padding:7px 9px; border:1px solid rgba(255,255,255,.28); border-radius:9px; background:rgba(255,255,255,.10); color:#fff7f0; text-decoration:none; font-size:11px; line-height:1.3; }
.kunti-image-attachment:hover { background:rgba(255,255,255,.17); text-decoration:none; }
.kunti-image-attachment-icon { flex:0 0 auto; font-size:14px; }
.kunti-image-attachment-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kunti-action-row,.kunti-choice-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:3px; }
.kunti-action-btn { position:relative; overflow:hidden; min-height:34px; max-width:100%; padding:0 12px; border-radius:10px; border:1px solid #d9d4d0; background:#f7f5f3; color:#493d41; font:600 11px/1.2 inherit; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 3px 7px rgba(24,48,38,.06), inset 0 1px 0 rgba(255,255,255,.45); transition:transform .08s ease,box-shadow .08s ease,filter .12s ease; }
.kunti-action-btn:hover { filter:brightness(1.02); }
.kunti-action-btn:active { transform:translateY(2px) scale(.985); box-shadow:0 1px 3px rgba(24,48,38,.10), inset 0 2px 5px rgba(0,0,0,.08); }
.kunti-action-btn.approve { background:#eaf8ef; color:#128247; border-color:#9fdfb9; }
.kunti-action-btn.reject { background:#fff0f0; color:#c23d3d; border-color:#efb4b4; }
.kunti-action-btn.edit { background:#eef5ff; color:#2f72d6; border-color:#b8d3fb; }
.kunti-action-btn.hapus { background:#ffecec; color:#b52828; border-color:#eaa1a1; }
.kunti-action-btn.neutral { background:#f6f3f1; color:#5b4d51; border-color:#d9cfca; }
.kunti-ripple { position:absolute; border-radius:50%; transform:scale(0); animation:kunti-ripple .42s ease-out; background:rgba(255,255,255,.62); pointer-events:none; }
@keyframes kunti-ripple { to { transform:scale(4); opacity:0; } }
.kunti-runtime-bar { display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; padding:8px 10px; border-top:1px solid #ece7e3; color:#6f6468; background:#faf8f6; font-size:10px; }
.kunti-runtime-bar label { font-weight:500; }
.kunti-runtime-bar select { min-height:28px; padding:3px 24px 3px 8px; border:1px solid #dcd3ce; border-radius:8px; color:#3f3438; background:#fffefd; font:inherit; }
.kunti-runtime-bar [data-kunti-source] { flex:1 1 150px; overflow:hidden; text-align:right; text-overflow:ellipsis; white-space:nowrap; }
.kunti-external-confirm { display:inline-flex; align-items:center; gap:5px; }
.kunti-external-confirm input { width:14px; height:14px; margin:0; accent-color:#76283a; }
.kunti-float-composer { padding:10px; border-top:1px solid #e7e1dc; background:#fffefd; }
.kunti-float-composer textarea { min-height:50px; max-height:130px; width:100%; padding:8px 9px; border:1px solid #dcd3ce; border-radius:10px; resize:vertical; }
.kunti-float-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:7px; }
.kunti-float-toolbar .icon-button { display:inline-grid; place-items:center; width:34px; height:34px; padding:0; font-size:10px; }
.kunti-float-toolbar [data-kunti-attach], .kunti-float-toolbar [data-kunti-stop], .kunti-float-toolbar [data-kunti-retry], .kunti-float-toolbar [data-kunti-copy], .kunti-float-toolbar [data-kunti-clear] { width:auto; padding:0 8px; }
.kunti-float-toolbar [data-kunti-clear] { font-weight:600; }
.kunti-float-toolbar .icon-button:disabled { opacity:.42; cursor:not-allowed; }
.kunti-float-toolbar .button { margin-left:auto; min-height:34px; padding:0 14px; }
.kunti-float-hint { color:#85766f; font-size:10px; }
@keyframes kunti-panel-in { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes kunti-blink { 0%,45%,48%,100% { transform:scaleY(1); } 46%,47% { transform:scaleY(.1); } }
@keyframes kunti-mouth { from { transform:scaleX(.65); } to { transform:scaleX(1.25); } }
@keyframes kunti-head { from { transform:rotate(-2deg) translateY(0); } to { transform:rotate(2deg) translateY(-2px); } }
@media (max-width:640px) { .kunti-widget { right:16px; bottom:16px; } .kunti-float-panel { width:calc(100vw - 32px); height:min(620px,calc(100vh - 32px)); } }
@media (prefers-reduced-motion:reduce) { .kunti-fab:hover { transform:none; } .kunti-float-panel,.kunti-eye,.kunti-mouth,.kunti-female-avatar { animation:none!important; } }
