:root{--bg-page: #f1f1f1;--bg-widget: #18181b;--bg-btn: #27272a;--bg-btn-hover: #3f3f46;--text-primary: #ffffff;--text-secondary: #a1a1aa;--color-badge: #ef4444;--av-red: #ef4444;--av-purple: #a855f7;--av-yellow: #eab308;--av-green: #22c55e;--widget-width: 420px;--widget-h-collapsed: 64px;--widget-h-expanded: 296px;--radius-collapsed: 32px;--radius-expanded: 24px;--spring-expand: cubic-bezier(.34, 1.35, .45, 1);--ease-collapse: cubic-bezier(.32, .72, 0, 1);--duration-expand: .5s;--duration-collapse: .35s}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}body{background-color:var(--bg-page);display:flex;justify-content:center;align-items:center;min-height:100vh}.widget-container{filter:drop-shadow(0 24px 48px rgba(0,0,0,.12))}.widget{background-color:var(--bg-widget);width:var(--widget-width);height:var(--widget-h-collapsed);border-radius:var(--radius-collapsed);position:relative;cursor:pointer;overflow:hidden;-webkit-mask-image:-webkit-radial-gradient(white,black);mask-image:radial-gradient(#fff,#000);transition:height var(--duration-collapse) var(--ease-collapse),border-radius var(--duration-collapse) var(--ease-collapse)}.widget.is-expanded{height:var(--widget-h-expanded);border-radius:var(--radius-expanded);cursor:default;transition:height var(--duration-expand) var(--spring-expand),border-radius var(--duration-expand) var(--spring-expand)}.controls{position:absolute;top:16px;right:16px;display:flex;gap:4px;z-index:20}.icon-btn{background:transparent;border:none;color:var(--text-secondary);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .2s,background .2s}.icon-btn:hover{color:var(--text-primary);background:#ffffff14}.icon-btn svg{width:20px;height:20px}.toggle-icon{transition:transform var(--duration-collapse) var(--ease-collapse)}.widget.is-expanded .toggle-icon{transform:rotate(180deg);transition:transform var(--duration-expand) var(--spring-expand)}.collapsed-text{position:absolute;left:90px;top:13px;display:flex;flex-direction:column;gap:2px;opacity:1;transform:translateY(0);pointer-events:none;transition:opacity .2s ease .1s,transform var(--duration-collapse) var(--ease-collapse)}.collapsed-text .line-1{color:var(--text-primary);font-size:14.5px}.collapsed-text .line-1 strong{font-weight:500}.collapsed-text .line-2{color:var(--text-secondary);font-size:13px}.widget.is-expanded .collapsed-text{opacity:0;transform:translateY(-8px);transition:opacity .15s ease,transform var(--duration-expand) var(--spring-expand)}.header-text{position:absolute;left:20px;top:22px;color:var(--text-primary);font-size:16px;font-weight:500;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .15s ease,transform var(--duration-collapse) var(--ease-collapse)}.widget.is-expanded .header-text{opacity:1;transform:translateY(0);transition:opacity .3s ease .1s,transform var(--duration-expand) var(--spring-expand)}.list-item{position:absolute;top:0;left:0;width:calc(100% - 40px);height:36px;display:flex;align-items:center;gap:12px}.item-louis{transform:translate(36px,14px);z-index:1;transition:transform var(--duration-collapse) var(--ease-collapse)}.widget.is-expanded .item-louis{transform:translate(20px,72px);z-index:4;transition:transform var(--duration-expand) var(--spring-expand)}.item-peter{transform:translate(14px,14px);z-index:2;transition:transform var(--duration-collapse) var(--ease-collapse)}.widget.is-expanded .item-peter{transform:translate(20px,128px);z-index:3;transition:transform var(--duration-expand) var(--spring-expand)}.item-aditya{transform:translate(20px,192px);opacity:0;pointer-events:none;transition:transform var(--duration-collapse) var(--ease-collapse),opacity .1s ease}.widget.is-expanded .item-aditya{transform:translate(20px,184px);opacity:1;pointer-events:auto;transition:transform var(--duration-expand) var(--spring-expand),opacity .3s ease .05s}.item-chris{transform:translate(20px,248px);opacity:0;pointer-events:none;transition:transform var(--duration-collapse) var(--ease-collapse),opacity .1s ease}.widget.is-expanded .item-chris{transform:translate(20px,240px);opacity:1;pointer-events:auto;transition:transform var(--duration-expand) var(--spring-expand),opacity .3s ease .08s}.avatar-wrapper{position:relative;flex-shrink:0;width:36px;height:36px}.avatar{width:100%;height:100%;border-radius:50%;border:2px solid var(--bg-widget);display:flex;align-items:center;justify-content:center;overflow:hidden}.badge{position:absolute;top:-4px;right:-6px;background-color:var(--color-badge);color:#fff;font-size:11px;font-weight:600;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg-widget);z-index:5;transform-origin:center;transform:scale(1);opacity:1;transition:transform var(--duration-collapse) var(--ease-collapse),opacity .2s ease .1s}.widget.is-expanded .badge{transform:scale(.2);opacity:0;transition:transform var(--duration-expand) var(--spring-expand),opacity .2s ease}.bg-red{background-color:var(--av-red)}.bg-purple{background-color:var(--av-purple)}.bg-yellow{background-color:var(--av-yellow)}.bg-green{background-color:var(--av-green)}.avatar-svg{width:100%;height:100%;transform:translateY(4px)}.item-content{display:flex;flex:1;align-items:center;justify-content:space-between;opacity:0;transform:translate(8px);transition:opacity .15s ease,transform var(--duration-collapse) var(--ease-collapse);pointer-events:none}.widget.is-expanded .item-content{opacity:1;transform:translate(0);pointer-events:auto}.widget.is-expanded .item-louis .item-content{transition:opacity .3s ease .08s,transform var(--duration-expand) var(--spring-expand) .08s}.widget.is-expanded .item-peter .item-content{transition:opacity .3s ease .12s,transform var(--duration-expand) var(--spring-expand) .12s}.widget.is-expanded .item-aditya .item-content{transition:opacity .3s ease .16s,transform var(--duration-expand) var(--spring-expand) .16s}.widget.is-expanded .item-chris .item-content{transition:opacity .3s ease .2s,transform var(--duration-expand) var(--spring-expand) .2s}.user-name{color:var(--text-primary);font-size:14.5px;font-weight:400}.actions{display:flex;gap:8px}.btn-action{background-color:var(--bg-btn);color:var(--text-primary);border:none;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:500;cursor:pointer;transition:background-color .2s ease,transform .1s ease}.btn-action:hover{background-color:var(--bg-btn-hover)}.btn-action:active{transform:scale(.96)}