@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700&display=swap");:root{--ink:#202124;--muted:#77736f;--line:#ebe8e4;--cream:#fbfaf8;--paper:#fff;--accent:#e85d3f;--accent-dark:#cf482d;--soft:#fff2ed}*{box-sizing:border-box}body,html{margin:0;min-height:100%;background:#f2efeb;color:var(--ink);font-family:DM Sans,Arial,sans-serif}button,input,textarea{font:inherit}button{color:inherit}.app-shell{width:calc(100vw - 36px);height:calc(100vh - 36px);min-height:650px;margin:18px;display:grid;grid-template-columns:216px minmax(310px,380px) minmax(410px,1fr) 280px;overflow:hidden;border:1px solid #e5e0da;border-radius:16px;background:var(--paper);box-shadow:0 18px 55px rgba(65,48,38,.08)}.sidebar{display:flex;flex-direction:column;padding:24px 16px 16px;background:#282725;color:#f7f4f0}.brand{display:flex;align-items:center;gap:11px;padding:0 8px 25px;font-family:Manrope,sans-serif;font-size:18px}.brand b{color:#f6a18f}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;font-weight:700;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}.brand-mark,.compose{background:var(--accent);color:white}.compose{width:100%;border:0;border-radius:9px;padding:11px 13px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;cursor:pointer;transition:.2s}.compose:hover,.send:hover{background:var(--accent-dark)}.nav-label{margin:28px 10px 8px;color:#8e8a85;font-size:10px;font-weight:700;letter-spacing:.13em}.nav-item{width:100%;border:0;border-radius:8px;background:transparent;justify-content:space-between;padding:10px 11px;color:#c7c2bc;cursor:pointer;text-align:left}.nav-item,.nav-item>span{display:flex;align-items:center}.nav-item>span{gap:10px}.nav-item small{color:#8e8a85}.nav-item.active,.nav-item:hover{background:#393735;color:white}.nav-item.active{box-shadow:inset 3px 0 var(--accent)}.unread-dot{width:8px;height:8px;margin:0 6px;border-radius:50%;background:var(--accent)}.sidebar-footer{margin-top:auto;border-top:1px solid #3c3a38;padding-top:10px}.agent{display:grid;grid-template-columns:36px 1fr 8px;gap:9px;align-items:center;padding:15px 7px 2px}.agent b,.agent small{display:block}.agent b{font-size:12px}.agent small{margin-top:2px;color:#8e8a85;font-size:10px}.status{width:8px;height:8px;border-radius:50%;background:#5fc38a;box-shadow:0 0 0 2px #282725}.avatar{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;border-radius:13px;color:#604038;font-size:13px;font-weight:700}.avatar.mini{width:29px;height:29px;border-radius:9px;font-size:9px}.avatar.large{width:68px;height:68px;border-radius:20px;font-size:19px}.agent-avatar{width:34px;height:34px;border-radius:10px;background:#514e4a;color:#eee9e3;font-size:10px}.coral{background:#fee0d7}.blue{background:#dce8fa;color:#36577b}.lilac{background:#e9dffa;color:#675081}.mint{background:#dcefe5;color:#3c6653}.amber{background:#fae8c8;color:#775b2f}.rose{background:#f5dce4;color:#795064}.conversation-list{min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--line);background:#fff}.list-header{height:94px;padding:22px 22px 13px;display:flex;align-items:flex-start;justify-content:space-between}.list-header h1{margin:0;font:700 21px Manrope,sans-serif}.list-header p{margin:5px 0 0;color:var(--muted);font-size:12px}.mobile-compose{display:none}.search{margin:0 18px 12px;padding:9px 12px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;color:#99938e;background:var(--cream)}.search:focus-within{border-color:#d7aaa0;box-shadow:0 0 0 3px #fff0ec}.search input{width:100%;border:0;outline:0;background:transparent;font-size:12px}.conversation-scroll{overflow-y:auto}.conversation{position:relative;width:100%;display:flex;gap:12px;padding:16px 18px;border:0;border-top:1px solid #f0ede9;background:#fff;cursor:pointer;text-align:left}.conversation:hover{background:#fdfbf9}.conversation.active{background:var(--soft)}.conversation.active:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}.conversation-copy{min-width:0;flex:1 1}.conversation-top{display:flex;justify-content:space-between;gap:10px}.conversation-top b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.conversation-top time{flex:none;color:#aaa39d;font-size:10px}.channel-line{display:flex;align-items:center;gap:6px;margin-top:5px;color:#57524e;font-size:11px;font-weight:600}.channel-line>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.channel-icon{width:18px;height:18px;display:inline-grid;place-items:center;border-radius:5px}.channel-icon.tiktok{background:#242323;color:white}.channel-icon.email{background:#e7eefb;color:#4e6e9d}.tiktok-mark{font:700 15px Arial;line-height:1;text-shadow:1px 0 #f04f62,-1px 0 #43d5cf}.preview-row{display:flex;align-items:center;gap:7px}.preview-row p{margin:5px 0 0;min-width:0;flex:1 1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8d8781;font-size:11px}.badge{flex:none;min-width:17px;height:17px;padding:0 5px;display:grid;place-items:center;border-radius:10px;background:var(--accent);color:white;font-size:9px;font-weight:700}.empty{padding:30px;text-align:center;color:var(--muted);font-size:13px}.chat-panel{min-width:0;display:flex;flex-direction:column;background:var(--cream);border-right:1px solid var(--line)}.chat-header{height:76px;flex:none;display:flex;align-items:center;gap:11px;padding:13px 20px;border-bottom:1px solid var(--line);background:white}.chat-title{min-width:0;flex:1 1}.chat-title h2{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 15px Manrope,sans-serif}.chat-title p{margin:4px 0 0;display:flex;align-items:center;gap:6px;overflow:hidden;color:var(--muted);font-size:10px}.chat-title .channel-icon{width:16px;height:16px}.attach,.back-button,.icon-button,.mobile-compose{display:grid;place-items:center;border:0;background:transparent;color:#77716d;cursor:pointer}.back-button{display:none}.chat-body{flex:1 1;overflow-y:auto;padding:18px 24px 30px}.date-divider{display:flex;align-items:center;gap:10px;margin-bottom:19px;color:#aaa39d;font-size:9px}.date-divider:after,.date-divider:before{content:"";height:1px;flex:1 1;background:var(--line)}.message-row{max-width:80%;display:flex;align-items:flex-end;gap:8px;margin:0 0 16px}.message-row.agent{margin-left:auto;justify-content:flex-end}.message-row>div:last-child{min-width:0}.bubble{padding:11px 13px;border:1px solid #e8e3de;border-radius:14px 14px 14px 4px;background:white;font-size:12px;line-height:1.55;box-shadow:0 2px 6px rgba(55,45,38,.03)}.agent .bubble{border-color:var(--accent);border-radius:14px 14px 4px 14px;background:var(--accent);color:white}.message-row time{display:flex;align-items:center;gap:2px;margin-top:5px;color:#aaa39d;font-size:9px}.agent time{justify-content:flex-end}.sent-check{display:flex;margin-left:3px;color:var(--accent)}.sent-check svg+svg{margin-left:-8px}.composer-wrap{flex:none;padding:0 19px 18px}.composer{border:1px solid #dfd9d3;border-radius:12px;background:white;overflow:hidden;box-shadow:0 5px 20px rgba(67,51,40,.06)}.composer textarea{width:100%;resize:none;border:0;outline:0;padding:13px 14px 5px;color:var(--ink);font-size:12px}.composer-actions{min-height:41px;padding:4px 7px 7px 10px;display:flex;align-items:center;gap:9px}.composer-actions span{flex:1 1;color:#aaa39d;font-size:9px}.send{display:flex;align-items:center;gap:6px;border:0;border-radius:8px;padding:8px 12px;background:var(--accent);color:white;font-size:11px;font-weight:700;cursor:pointer}.demo-notice{margin-bottom:7px;padding:7px 10px;border-radius:7px;background:#fff0d9;color:#775e37;font-size:10px}.details-panel{min-width:0;overflow-y:auto;background:white}.details-panel>header{height:76px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.details-panel h3{font:700 13px Manrope,sans-serif}.profile{padding:22px 18px 17px;text-align:center}.profile .avatar{margin:auto}.profile h2{margin:11px 0 2px;font:700 15px Manrope,sans-serif}.profile p{margin:0;color:var(--muted);font-size:10px;overflow-wrap:anywhere}.profile button{margin-top:12px;border:1px solid #dfd9d3;border-radius:7px;padding:7px 12px;background:white;font-size:10px;font-weight:600;cursor:pointer}.stats{display:grid;grid-template-columns:1fr 1fr;margin:0 18px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.stats div{display:flex;flex-direction:column;align-items:center;gap:3px}.stats div+div{border-left:1px solid var(--line)}.stats strong{font:700 14px Manrope,sans-serif}.stats span{color:var(--muted);font-size:9px}.details-section{padding:17px 18px 0}.section-label{margin:0 0 13px;display:flex;justify-content:space-between;color:#aaa39d;font-size:9px;font-weight:700;letter-spacing:.1em}.section-label button{border:0;background:transparent;color:var(--accent);font-size:9px;cursor:pointer}.detail-row{display:flex;gap:9px;align-items:flex-start;margin:11px 0;color:#99918b}.detail-row div{display:flex;flex-direction:column;gap:2px}.detail-row span{color:#99918b;font-size:9px}.detail-row b{color:#4a4643;font-size:10px;font-weight:500}.tags{display:flex;flex-wrap:wrap;gap:6px}.tags span{display:flex;align-items:center;gap:4px;padding:5px 7px;border-radius:6px;background:#f1efec;color:#5f5954;font-size:9px}.notes>div{display:flex;gap:8px;padding:10px;border-radius:8px;background:var(--cream);color:#8e8781}.notes>div p{margin:0;color:#69635e;font-size:9px;line-height:1.5}@media (max-width:1180px){.app-shell{grid-template-columns:190px 330px 1fr}.details-panel{display:none}}@media (max-width:820px){.app-shell{width:100%;height:100vh;min-height:560px;margin:0;grid-template-columns:76px 300px 1fr;border:0;border-radius:0}.sidebar{padding:20px 10px}.brand{justify-content:center;padding:0 0 24px}.agent .status,.agent>div:not(.avatar),.brand>span:last-child,.compose:not(svg),.nav-label,.sidebar .nav-item small,.sidebar .nav-item span:not(.unread-dot){font-size:0}.compose{height:42px;padding:0}.sidebar .nav-item{justify-content:center;height:43px}.sidebar .nav-item>span{gap:0}.unread-dot{margin:0}.agent{display:flex;justify-content:center;padding:15px 0 0}}@media (max-width:640px){.app-shell{display:block}.details-panel,.sidebar{display:none}.chat-panel,.conversation-list{width:100%;height:100vh;border:0}.mobile-hidden,.mobile-hidden-chat{display:none}.back-button,.mobile-compose{display:grid}.mobile-compose{width:38px;height:38px;border-radius:9px;background:var(--soft);color:var(--accent)}.chat-body{padding:16px}.message-row{max-width:88%}.composer-wrap{padding:0 12px 12px}}.auth-page{min-height:100vh;display:grid;grid-template-columns:minmax(340px,.9fr) minmax(440px,1.1fr);background:#f7f4f0}.auth-brand-panel{min-height:100vh;padding:44px clamp(36px,6vw,88px);display:flex;flex-direction:column;justify-content:space-between;background:#282725;color:white}.auth-brand{display:flex;align-items:center;gap:9px;font:600 18px Manrope,sans-serif}.auth-brand>span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--accent)}.auth-brand b{color:#f6a18f}.auth-brand-panel>div:nth-child(2){max-width:500px}.auth-brand-panel>div:nth-child(2) p{color:#f18a74;font-size:10px;font-weight:700;letter-spacing:.16em}.auth-brand-panel h1{margin:13px 0 18px;font:700 clamp(34px,4vw,55px)/1.08 Manrope,sans-serif;letter-spacing:-.04em}.auth-brand-panel>div:nth-child(2) span{color:#aaa5a0;font-size:14px;line-height:1.7}.auth-brand-panel small{color:#77736f;font-size:10px}.auth-content{display:grid;place-items:center;padding:36px}.auth-card{width:min(100%,420px);padding:38px;border:1px solid #e6e0da;border-radius:18px;background:white;box-shadow:0 20px 60px rgba(60,45,35,.08)}.auth-eyebrow{margin:0 0 10px;color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.14em}.auth-card h2{margin:0;font:700 27px Manrope,sans-serif;letter-spacing:-.03em}.auth-description{margin:8px 0 25px;color:var(--muted);font-size:12px;line-height:1.55}.auth-form{gap:15px}.auth-form,.auth-form label{display:flex;flex-direction:column}.auth-form label{gap:7px;color:#4d4945;font-size:11px;font-weight:600}.auth-form input{width:100%;padding:11px 12px;border:1px solid #ddd7d1;border-radius:8px;outline:0;background:#fdfcfb;font-size:12px}.auth-form input:focus{border-color:#d88a78;box-shadow:0 0 0 3px #fff0ec}.auth-form>button{margin-top:4px;padding:12px;border:0;border-radius:9px;background:var(--accent);color:white;font-weight:700;cursor:pointer}.auth-form>button:hover{background:var(--accent-dark)}.auth-form>button:disabled{opacity:.65;cursor:wait}.auth-error{margin:0;padding:9px 11px;border-radius:7px;background:#fff0ed;color:#b63f29;font-size:10px;line-height:1.4}.auth-secure{margin:20px 0 0;color:#aaa39d;text-align:center;font-size:9px}@media (max-width:760px){.auth-page{display:block}.auth-brand-panel{min-height:auto;padding:24px}.auth-brand-panel small,.auth-brand-panel>div:nth-child(2){display:none}.auth-content{min-height:calc(100vh - 82px);padding:20px}.auth-card{padding:28px 22px}}