/* Inbox Terpadu — disalin dari design/desain-interaktif.html (jangan ubah tanpa acuan desain) */
:root{
  --bg:#EEF0F5;--surface:#FFFFFF;--ink:#2A2B3A;--ink2:#6A6B7C;--muted:#A0A1B2;
  --line:#ECEDF3;--hair:#F2F3F8;
  --pink:#EC4E95;--pink-soft:#FBD9E8;--pink-card:#FCE4EF;
  --yellow:#F4B740;--yellow-soft:#FBE7B2;--yellow-card:#FDF1D6;
  --blue:#5FA8F5;--blue-soft:#D5E6FB;--blue-card:#E4F0FD;
  --green:#2FB888;--green-soft:#CFEEE2;
  --violet:#8B7CF0;--violet-soft:#E4DEFB;
  --shadow:0 2px 10px rgba(42,43,58,.05);--shadow-h:0 10px 28px rgba(42,43,58,.10);
  --r-card:20px;--r-btn:12px;
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font-family:"Plus Jakarta Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.45;background:var(--bg)}
a{color:var(--pink);text-decoration:none;font-weight:700}
button{font-family:inherit;cursor:pointer}
.mono{font-family:"IBM Plex Mono",monospace;font-feature-settings:"tnum" 1}
.i{width:18px;height:18px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}.i.sm{width:15px;height:15px}
.card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.app{height:100vh;display:flex;flex-direction:column}
.topbar{height:68px;flex:none;display:flex;align-items:center;gap:16px;padding:0 20px;background:var(--surface);border-bottom:1px solid var(--line);z-index:20}
.brand{display:flex;align-items:center;gap:11px}
.brand-badge{width:38px;height:38px;border-radius:12px;background:var(--pink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;box-shadow:0 6px 16px rgba(236,78,149,.35)}
.brand b{font-weight:800;font-size:17px;letter-spacing:-.01em}
.search{flex:1;max-width:480px;display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;background:var(--bg);border:1px solid var(--line);border-radius:14px;color:var(--muted)}
.search input{border:0;background:transparent;outline:none;width:100%;font:inherit;color:var(--ink)}
.kbd{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:1px 7px;background:var(--surface)}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:11px}
.pill{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:999px;font-weight:800;font-size:12.5px;background:var(--green-soft);color:#1E8E68}
.iconbtn{width:42px;height:42px;border-radius:13px;border:1px solid var(--line);background:var(--surface);color:var(--ink2);display:flex;align-items:center;justify-content:center;position:relative;transition:.18s}.iconbtn:hover{background:var(--bg)}
.iconbtn .ndot{position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--pink);border:2px solid var(--surface)}
.avatars{display:flex}.avatars .avatar{margin-left:-9px;box-shadow:0 0 0 2px var(--surface)}
.avatar{width:36px;height:36px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex:none}
.btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:800;font-size:13.5px;transition:.18s}.btn:hover{background:var(--bg)}
.btn-primary{background:var(--pink);border:0;color:#fff;box-shadow:0 8px 20px rgba(236,78,149,.3)}.btn-primary:hover{background:#E13A86;transform:translateY(-1px)}
.btn.sm{height:36px;padding:0 14px;font-size:12.5px;border-radius:11px}
.body{flex:1;min-height:0;display:flex;flex-wrap:wrap}
.sidebar{width:244px;flex:none;padding:18px 12px;overflow-y:auto;display:flex;flex-direction:column;gap:18px;background:var(--surface);border-right:1px solid var(--line)}
.nav-grp{display:flex;flex-direction:column;gap:3px}
.nav-cap{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:3px 13px 5px}
.nav-item{display:flex;align-items:center;gap:11px;min-height:44px;padding:6px 13px;border-radius:13px;border:0;background:transparent;color:var(--ink2);font-weight:700;font-size:13px;line-height:1.25;width:100%;text-align:left;transition:.16s}.nav-item:hover{background:var(--bg);color:var(--ink)}
.nav-item .ico{color:var(--muted)}
.nav-item .count{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);font-weight:700;background:var(--bg);border-radius:999px;padding:1px 8px}
.nav-item.active{background:var(--pink-card);color:var(--ink)}.nav-item.active .ico{color:var(--pink)}.nav-item.active .count{background:#fff;color:var(--pink)}
.nav-dot{width:22px;display:flex;justify-content:center;flex:none}.nav-dot span{width:11px;height:11px;border-radius:50%}
.side-card{margin-top:auto;border-radius:15px;padding:14px;background:var(--pink-card);display:flex;flex-direction:column;gap:3px}
.side-card b{font-size:12.5px;font-weight:800;color:var(--pink);display:flex;align-items:center;gap:8px}
.side-card .ld{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(47,184,136,.18)}
.side-card span{font-size:11px;color:var(--ink2);font-weight:600}
.work{flex:999 1 560px;min-width:0;display:flex;flex-wrap:wrap;gap:14px;padding:14px;height:100%}
.col{height:100%;min-width:0;border-radius:var(--r-card);display:flex;flex-direction:column;overflow:hidden}
.queue{flex:1 1 330px}
.q-head{flex:none;padding:16px 16px 13px;display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--line)}
.q-title{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.q-title b{font-size:15px;font-weight:800;white-space:nowrap}.q-title .count{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--pink);background:var(--pink-card);border-radius:999px;padding:2px 10px;font-weight:700}
.q-title .hint{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted)}
.tabs{display:flex;gap:4px}.tab{height:32px;padding:0 13px;border-radius:10px;border:0;background:transparent;color:var(--ink2);font-weight:700;font-size:12.5px}.tab:hover{background:var(--bg)}.tab.active{background:var(--pink);color:#fff}
.filters{display:flex;gap:6px;flex-wrap:wrap}.select{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink2);font-weight:700;font-size:12px}
.q-list{flex:1;overflow-y:auto;padding:8px}
.conv{display:flex;flex-direction:column;gap:7px;padding:12px;border-radius:15px;background:transparent;text-align:left;width:100%;transition:.14s;margin-bottom:3px;border:1px solid transparent}
.conv:hover{background:var(--bg)}
.conv.active{background:var(--pink-card);border-color:var(--pink-soft)}
.c-top{display:flex;align-items:center;gap:10px}
.c-ava{width:40px;height:40px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:#fff}
.c-main{min-width:0;flex:1}.c-name{display:flex;align-items:center;gap:7px}.c-name b{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c-time{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted);flex:none}
.ch{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;color:var(--ink2)}.ch .cd{width:7px;height:7px;border-radius:50%}
.c-snip{color:var(--ink2);font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.c-sub{color:var(--muted);font-size:11px;font-weight:600}
.c-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:5px;height:23px;padding:0 10px;border-radius:999px;font-size:10.5px;font-weight:800}.badge .bd{width:6px;height:6px;border-radius:50%}
.b-new{background:var(--yellow-card);color:#B07D14}.b-new .bd{background:var(--yellow)}
.b-prog{background:var(--blue-card);color:#2E7CC4}.b-prog .bd{background:var(--blue)}
.b-wait{background:var(--pink-card);color:var(--pink)}.b-wait .bd{background:var(--pink)}
.b-done{background:var(--green-soft);color:#1E8E68}.b-done .bd{background:var(--green)}
.asg{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--ink2)}
.sla{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:700;margin-left:auto}.sla.ok{color:#1E8E68}.sla.risk{color:#D98A1E}.sla.wait{color:var(--muted)}
.thread{flex:999 1 430px}
.th-head{flex:none;padding:15px 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
.th-id{display:flex;align-items:center;gap:11px;min-width:0}.th-id .c-ava{width:46px;height:46px;border-radius:14px}.th-id .nm b{font-size:16px;font-weight:800}
.th-actions{margin-left:auto;display:flex;align-items:center;gap:7px}
.th-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:13px;background:var(--bg)}
.daysep{align-self:center;font-size:11px;font-weight:800;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 14px}
.msg{display:flex;max-width:78%}.msg.in{align-self:flex-start}.msg.out{align-self:flex-end}
.bubble{padding:11px 15px;border-radius:17px;font-size:13.5px;line-height:1.5}
.msg.in .bubble{background:var(--pink-soft);border-top-left-radius:6px;color:var(--ink)}
.msg.out .bubble{background:var(--yellow-soft);color:var(--ink);border-top-right-radius:6px}
.b-time{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--muted);margin-top:4px;display:block}.msg.out .b-time{text-align:right}
.composer{flex:none;padding:13px 16px 16px;border-top:1px solid var(--line);background:var(--surface)}
.win-banner{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#1E8E68;background:var(--green-soft);border-radius:11px;padding:9px 13px;margin-bottom:11px}
.win-banner.closed{color:#B07D14;background:var(--yellow-card)}
.cmp-tabs{display:flex;gap:4px;margin-bottom:9px}.cmp-tab{height:32px;padding:0 14px;border-radius:10px;border:0;background:transparent;font-weight:800;font-size:12.5px;color:var(--muted)}.cmp-tab.active{background:var(--pink-card);color:var(--pink)}
.cmp-box{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--surface)}
.ta{width:100%;border:0;outline:none;resize:none;padding:13px 15px;font:inherit;font-size:13.5px;min-height:60px;color:var(--ink);display:block;background:transparent}
.cmp-bar{display:flex;align-items:center;gap:5px;padding:8px 10px;border-top:1px solid var(--line)}
.tool{width:36px;height:36px;border-radius:11px;border:0;background:transparent;color:var(--ink2);display:flex;align-items:center;justify-content:center}.tool:hover{background:var(--bg)}
.tool.ai{width:auto;gap:7px;padding:0 13px;font-weight:800;font-size:12.5px;color:#fff;background:var(--pink);box-shadow:0 6px 14px rgba(236,78,149,.3)}
.cmp-send{margin-left:auto;display:flex;align-items:center;gap:8px}
.context{flex:1 1 290px;max-width:320px;padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.ctx-person{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}.ctx-person .c-ava{width:68px;height:68px;border-radius:22px;font-size:22px}.ctx-person b{font-size:17px;font-weight:800}
.tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.tag{font-size:11px;font-weight:800;padding:5px 12px;border-radius:999px;background:var(--bg);color:var(--ink2)}.tag.on{background:var(--pink);color:#fff}
.ctx-card{border-radius:15px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.ctx-h{padding:11px 14px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.ctx-b{padding:13px 14px;display:flex;flex-direction:column;gap:11px}
.kv{display:flex;gap:10px;font-size:12.5px}.kv .k{color:var(--muted);width:86px;flex:none;font-weight:700}.kv .v{color:var(--ink);font-weight:700}
.note{background:var(--yellow-card);border:1px solid var(--yellow-soft);border-radius:14px;padding:11px 13px;font-size:12.5px;color:#8A6410}.note .nm{font-weight:800;color:#B07D14;display:block;font-size:11px;margin-bottom:3px}
@media (max-width:1200px){.context{display:none}}
@media (max-width:980px){.body{display:block}.sidebar{width:100%;border-right:0;border-bottom:1px solid var(--line)}.work{display:block;height:auto}.col{height:auto;margin-bottom:14px}.th-body{min-height:300px}}
.brand-badge,.btn-primary,.tool.ai{position:relative;overflow:hidden}
.btn-primary::after,.tool.ai::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);transition:left .6s ease;pointer-events:none}
.btn-primary:hover::after,.tool.ai:hover::after{left:150%}
.c-ava{transition:transform .22s cubic-bezier(.2,.8,.2,1)}.conv:hover .c-ava{transform:scale(1.07) rotate(-4deg)}
.side-card .ld,.ndot{animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,184,136,.5)}70%{box-shadow:0 0 0 7px rgba(47,184,136,0)}100%{box-shadow:0 0 0 0 rgba(47,184,136,0)}}
.ndot{animation-name:pulsep}@keyframes pulsep{0%{box-shadow:0 0 0 0 rgba(236,78,149,.5)}70%{box-shadow:0 0 0 6px rgba(236,78,149,0)}100%{box-shadow:0 0 0 0 rgba(236,78,149,0)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}