:root{color-scheme:dark;--bg:#090913;--panel:#151420;--panel2:#1b1a29;--raised:#252238;--line:#333044;--txt:#f6f2ff;--muted:#9d98ad;--purple:#bc91ff;--purple2:#8352ef;--mint:#8be6c4;--red:#ff999c}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse 900px 420px at 75% -13%,#282046 0%,transparent 78%),var(--bg);color:var(--txt);font:14px/1.48 Inter,system-ui,-apple-system,"Segoe UI",sans-serif}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.6;cursor:not-allowed}[hidden]{display:none!important}.app{display:grid;grid-template-columns:228px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:#11111ccf;border-right:1px solid var(--line);padding:27px 17px;display:flex;flex-direction:column}.brand{font-size:21px;letter-spacing:.2px;display:flex;align-items:center;gap:5px;white-space:nowrap;font-weight:800}.brand:first-letter{color:var(--purple)}.brand span{font-size:17px;letter-spacing:.6px;font-weight:500;color:var(--purple)}.subbrand{font-size:9px;color:#817894;letter-spacing:1.6px;margin:6px 0 44px 3px}.version{color:var(--purple)}.nav{display:flex;align-items:center;gap:12px;padding:13px 14px;margin-bottom:7px;border-radius:12px;color:#b2adc3;font-weight:650}.nav:hover,.nav.active{background:#2c2347;color:#dfcfff}.side-bottom{margin-top:auto;padding:10px}.online{color:var(--mint);font-size:11px;font-weight:800;letter-spacing:1.1px}.muted{color:var(--muted)}.tiny{font-size:11px}.textbtn{background:none;border:0;color:var(--purple);padding:0}.side-bottom .muted{margin:7px 0 17px}.workspace{max-width:1680px;margin:0 auto;width:100%;padding:29px 30px}header,.right{display:flex;align-items:center;justify-content:space-between;gap:15px}header{margin-bottom:24px}header p{font-size:12px;margin:4px 0 0}.eyebrow{font-size:10px;color:var(--purple);font-weight:700;letter-spacing:1.6px}.eyebrow .dot{color:#6c557b}h1{margin:5px 0 0;font-size:31px;letter-spacing:-1px}h2{font-size:15px;margin:0;letter-spacing:-.2px}h3{font-size:13px;margin:0 0 4px}.purple{color:var(--purple)}.chip{font-size:11px;color:#ccb3ff;background:#29233d;border:1px solid #44375d;border-radius:99px;padding:9px 13px;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chip.small{padding:6px 9px}.avatar{display:grid;place-items:center;border-radius:50%;width:37px;height:37px;background:linear-gradient(140deg,#cf99ff,#7443ca);font-weight:850}.sound-toggle{display:flex;gap:7px;align-items:center;font-size:11px;color:#d7c8f3;white-space:nowrap;cursor:pointer}.sound-toggle input{accent-color:var(--purple)}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:13px}.metric,.panel{border:1px solid var(--line);background:linear-gradient(150deg,#191625,#14131d);border-radius:16px}.metric{padding:18px}.metric-name{color:#bdb4cd;font-size:12px}.metric strong{display:block;margin:7px 0 3px;font-size:28px;letter-spacing:-1px}.metric strong span{color:var(--purple)}.metric small{font-size:10px;color:#8c889a}.connection-strip{display:flex;justify-content:space-between;gap:10px;color:#958da5;font-size:11px;background:#171521b0;border:1px solid #302c40;border-radius:10px;padding:9px 13px;margin-bottom:15px}.connection-strip>span:first-child{color:var(--mint)}.panels{display:grid;grid-template-columns:minmax(235px,285px) minmax(360px,1fr) minmax(210px,258px);gap:13px}.panel{padding:18px;min-width:0}.section-head{display:flex;align-items:start;justify-content:space-between;gap:10px;margin-bottom:15px}.section-head .muted{font-size:11px}.count-chip{font-size:10px;background:#28213c;color:var(--purple);padding:4px 9px;border-radius:99px}.client-search,input:not([type=hidden]),select,textarea{color:var(--txt);background:#211e30;border:1px solid #39334e;border-radius:9px;padding:10px;outline:none}.client-search{width:100%;margin-bottom:11px}input:focus,select:focus,textarea:focus{border-color:var(--purple)}.client-list{max-height:690px;overflow-y:auto}.client{display:flex;gap:10px;padding:11px 9px;align-items:center;border-radius:11px}.client:hover,.client.selected{background:#332747}.circle{width:37px;height:37px;flex-shrink:0;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,#63439c,#34294b);color:#e6d3ff;font-weight:850}.client-text{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}.client-text b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.client-text small{font-size:10px;color:#9c94ac;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.client-meta{display:flex;flex-direction:column;align-items:end;gap:4px;min-width:48px}.client-meta strong{color:#d5b4ff;font-size:11px}.client-meta small{font-size:9px;color:#9184a5}.conversation{display:flex;flex-direction:column;min-height:690px}.chat-heading{padding-bottom:13px;border-bottom:1px solid #343041}.chat-scroll{flex:1;min-height:370px;height:520px;max-height:600px;overflow:auto;display:flex;flex-direction:column;gap:11px;padding:12px 5px 16px;overscroll-behavior:contain}.bubble{align-self:flex-start;max-width:80%;background:#2c2a39;padding:10px 13px;border-radius:14px 14px 14px 4px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px}.bubble.mine{align-self:flex-end;background:#644096;border-radius:14px 14px 4px 14px}.bubble.system{align-self:center;color:#d6befc;background:#282036;border:1px solid #463357;max-width:96%;font-size:11px}.bubble small{display:block;margin-top:4px;color:#d0c6d9ab;font-size:9px;text-align:right}.bubble-body{margin-top:5px}.chat-image,.chat-video{display:block;border-radius:9px;max-height:295px;max-width:100%;width:auto;object-fit:contain}.chat-audio{max-width:100%}.file-link{color:#e9cfff}.chat-composer{border-top:1px solid #343044;padding-top:12px;position:relative}#chat-form textarea{display:block;min-height:55px;resize:vertical;width:100%;border:0;background:#252239}.composer-tools{display:flex;align-items:center;gap:8px;margin-top:7px}.composer-tools .tiny{margin-right:auto}.icon-btn{font-size:22px;width:34px;height:34px;display:grid;place-items:center;background:#2c2541;border:1px solid #443557;border-radius:8px;color:#d7b9ff}.btn{border:1px solid #514369;border-radius:10px;background:#30273f;color:#f4e9ff;padding:9px 13px;font-weight:750;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:6px}.btn:hover,.icon-btn:hover{filter:brightness(1.15)}.btn.primary{background:linear-gradient(110deg,#c29cff,#955deb);color:#1c102b;border-color:#bb96ff}#send-status,#media-status{font-size:10px;color:var(--mint)}.error-text{color:var(--red)!important}.emoji-picker{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;padding:10px;background:#221c31;border:1px solid #483956;border-radius:12px;position:absolute;bottom:110px;left:7px;z-index:5;box-shadow:0 15px 32px #030208a0}.emoji-option{font-size:21px;cursor:pointer;border:0;background:transparent;border-radius:5px}.emoji-option:hover{background:#4a356a}.media-form{padding:15px;margin-top:9px;background:#211c2e;border:1px solid #584475;border-radius:13px}.media-form .section-head{margin-bottom:10px}.media-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:9px}.media-form label{font-size:11px;color:#b2aac0;min-width:0}.media-form input,.media-form select{width:100%;margin-top:5px;min-width:0}.media-form>input[name=caption]{width:100%}.compose-actions{display:flex;justify-content:space-between;align-items:center;margin-top:9px;gap:10px}.send-offer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px;padding-top:14px;border-top:1px solid #363044}.send-offer h3{margin:0}.offer-row{display:flex;gap:7px;min-width:0}.offer-row select{max-width:220px;width:100%;min-width:90px}.customer-panel{text-align:center}.customer-avatar{width:74px;height:74px;border-radius:21px;background:linear-gradient(140deg,#8e55d1,#43315e);display:grid;place-items:center;font-weight:850;font-size:27px;margin:19px auto 11px}.customer-panel h3{font-size:18px}.customer-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:24px 0;text-align:left}.customer-stats>div{background:#242035;border:1px solid #3e3451;border-radius:11px;padding:12px 10px}.customer-stats span{font-size:10px;color:#a79cb7;display:block}.customer-stats strong{font-size:19px;color:#d7b2ff}.customer-log-title{text-align:left;font-size:12px;font-weight:800;margin-bottom:10px}.customer-sales{text-align:left}.customer-sale{padding:9px 0;border-bottom:1px solid #342e42;display:flex;justify-content:space-between;gap:6px;font-size:11px}.customer-sale strong{white-space:nowrap;color:var(--purple)}.bottom-panels{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:13px}.product-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}.product-form label{color:#aaa0b8;font-size:11px;display:flex;flex-direction:column;gap:5px}.product-form label:first-of-type{grid-column:1/-1}.product-form .btn{justify-self:start;align-self:end}.product-form input{width:100%}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:10px;margin-top:18px}.gallery-card{padding:7px;background:#201a2e;border:1px solid #3a3051;border-radius:11px;overflow:hidden}.gallery-preview{background:#15121e;height:115px;border-radius:8px;display:grid;place-items:center;overflow:hidden;margin-bottom:7px}.gallery-preview img{width:100%;height:100%;object-fit:cover}.gallery-card b{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gallery-card .tiny{display:block;font-size:9px}.video-thumb{color:#c7a4ff}.records{margin-top:16px}.record{display:flex;justify-content:space-between;gap:9px;padding:11px 0;border-top:1px solid #342c42}.record b{font-size:12px}.record small{display:block;color:#958ca3;font-size:10px}.stars{white-space:nowrap;color:var(--purple)}.danger{color:#ffafb6}.sales-panel{margin-top:13px}.reconcile{margin-top:15px}.empty{color:#9891ab;font-size:12px;line-height:1.6;padding:13px}.empty.center{text-align:center;margin:auto}.toast{padding:11px 15px;margin-bottom:15px;border-radius:11px;background:#283b32;color:#b4efce;border:1px solid #345345}.toast.warning{background:#4a2930;color:#ffd0da}footer{font-size:10px;color:#857c93;padding:20px 0}.sale-toast-container{position:fixed;bottom:24px;right:25px;z-index:100;display:flex;flex-direction:column;gap:10px;max-width:min(390px,calc(100vw - 30px))}.sale-toast{display:flex;align-items:center;gap:16px;padding:19px 18px;background:linear-gradient(125deg,#442065,#21152d);border:1px solid #d19bff;border-radius:17px;box-shadow:0 14px 60px #12071ecc,0 0 28px #9a44ff55;animation:popIn .42s cubic-bezier(.18,.94,.32,1.35)}.sale-toast::before{content:'✦';position:absolute;top:-13px;left:30px;color:#e0b6ff;transform:rotate(23deg);font-size:27px}.sale-icon{font-size:30px;color:#f1c5ff;display:grid;place-items:center;background:#8a45c5;min-width:54px;height:54px;border-radius:16px;box-shadow:0 0 22px #b05aff66}.sale-eyebrow{font-size:10px;font-weight:800;letter-spacing:1.5px;color:#e3c4ff}.sale-toast strong{display:block;font-size:25px;color:white}.sale-desc{color:#cfc2de;font-size:11px}.sale-dismiss{align-self:start;background:none;border:0;color:#e5c9ff;font-size:22px;margin-left:auto}@keyframes popIn{from{opacity:0;transform:translateY(25px) scale(.83)}to{opacity:1;transform:translateY(0) scale(1)}}.login-body{min-height:100vh;display:grid;place-items:center;background:radial-gradient(ellipse at 55% 0%,#302048,transparent 65%),var(--bg)}.login-panel{width:min(420px,calc(100% - 30px));background:var(--panel);border:1px solid #4a335d;border-radius:19px;padding:34px;box-shadow:0 18px 65px #03010b90}.brand.big{font-size:26px}.login-panel h1{margin-top:32px}.login-form{display:grid;gap:15px;margin-top:22px}.login-form label{display:grid;gap:5px;color:#b1a8c0;font-size:12px}.login-form input{width:100%}.fine{text-align:center;color:#857d94;font-size:11px;margin-top:23px}@media(max-width:1400px){.panels{grid-template-columns:235px minmax(350px,1fr)}.customer-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr 180px 1fr;gap:10px;align-items:center}.customer-panel>.section-head{display:block;text-align:left}.customer-panel>.customer-avatar{margin:0}.customer-panel>.customer-stats{margin:0}.customer-panel>.customer-log-title,.customer-panel>.customer-sales{grid-column:1/-1}}@media(max-width:1000px){.app{grid-template-columns:70px minmax(0,1fr)}.sidebar{padding:15px 9px}.sidebar nav .nav span,.subbrand,.side-bottom,.brand span,.brand b{display:none}.sidebar .brand{justify-content:center}.nav{justify-content:center}.workspace{padding:18px}.metrics{grid-template-columns:repeat(2,1fr)}.panels{grid-template-columns:240px minmax(0,1fr)}.bottom-panels{grid-template-columns:1fr}}@media(max-width:720px){.app{display:block}.sidebar{height:auto;position:static;padding:10px 14px}.sidebar nav{display:flex;gap:6px;overflow-x:auto}.sidebar nav .nav span{display:inline}.sidebar nav .nav{font-size:11px;padding:7px;margin:0}.sidebar .brand{display:none}.workspace{padding:14px}.metrics{gap:8px}.metric{padding:13px}.metric strong{font-size:22px}.panels,.bottom-panels{display:block}.panel{margin-bottom:12px}.client-list{max-height:235px}.conversation{min-height:600px}.chat-scroll{min-height:260px;height:350px}.right{flex-wrap:wrap}.connection-strip{display:block}.customer-panel{display:block}.media-fields,.product-form{grid-template-columns:1fr}.offer-row{flex:1}.composer-tools .tiny{display:none}.compose-actions{flex-wrap:wrap}}

.routing-notice{padding:10px 13px;margin:0 0 10px;border:1px solid #715c8b;background:#2e223e;border-radius:10px;font-size:11px;line-height:1.45;color:#e6d5ff}.routing-notice form{margin-top:8px}.routing-notice .btn{font-size:11px;padding:7px 11px}


/* Nia Control V6.3 — original Purple Studio conversation redesign.
   Old CSS remains for login, metrics, alerts and product tables. */
:root{--bg:#0d0b16;--panel:#191424;--raised:#2a2339;--line:#403650;--txt:#f9f5ff;--muted:#b1a8c3;--purple:#c79aff;--purple2:#9e6be9}
body{background:radial-gradient(ellipse 960px 520px at 68% -13%,#382049 0%,transparent 73%),#0c0a13; font-size:14px}
.workspace{max-width:1920px; padding:26px clamp(15px,2.3vw,38px)}
.panels{grid-template-columns:minmax(220px,260px) minmax(0,1fr) minmax(200px,248px);gap:14px;align-items:stretch}
.panel,.metric{background:linear-gradient(150deg,#1b1627,#14111e);border:1px solid #393047;box-shadow:0 6px 24px #07041017}
.panel{border-radius:18px}
.client-search,input:not([type=hidden]),select,textarea{background:#241f30;border:1px solid #423650;color:#f9f5ff;border-radius:12px}
.client-search::placeholder,textarea::placeholder,input::placeholder{color:#9086a1}
.client{padding:13px 11px; border:1px solid transparent; margin-bottom:5px;transition:background .15s ease,border-color .15s ease}
.client.selected{background:#382849;border-color:#68517b}
.circle{border-radius:50%;width:42px;height:42px; background:linear-gradient(140deg,#8955c1,#4d2d76)}
.client-text b{font-size:13px}
.client-text small{font-size:11px}
.conversation{min-height:700px; padding:18px 17px 14px;overflow:hidden}
.chat-heading{align-items:center;margin-bottom:0;padding-bottom:17px;border-bottom:1px solid #352d40}
.chat-heading h2{font-size:16px;margin:2px 0 2px}
.chat-label{font-size:9px;color:#c4a8df;letter-spacing:1.4px;font-weight:750}
.chat-scroll{min-height:370px;height:min(53vh,580px);max-height:none;flex:1;display:flex;flex-direction:column;align-items:stretch;gap:9px;padding:24px 18px 18px;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#6e527d transparent; background:radial-gradient(ellipse at 48% 60%,#271b321e,transparent 60%)}
/* Critical: flex items must NOT shrink vertically. Shrinking caused V6.2 bubbles
   to become tall, empty-looking, illegible rectangles in Windows browsers. */
.chat-scroll .bubble{flex:0 0 auto;align-self:flex-start;box-sizing:border-box;width:max-content;min-width:78px;max-width:min(76%,620px);min-height:unset;background:#2a2535;border:1px solid #42364e;padding:12px 15px 8px;border-radius:17px 17px 17px 5px;color:#f8f1ff;white-space:normal;overflow-wrap:break-word;word-break:normal;line-height:1.5;font-size:14px;box-shadow:0 3px 12px #08060e24}
.chat-scroll .bubble.mine{align-self:flex-end;background:linear-gradient(135deg,#77509c,#5f3d82);border-color:#8c65a9;border-radius:17px 17px 5px 17px}
.chat-scroll .bubble.system{align-self:center;background:#262033;border:1px solid #4d3b63;color:#d6c0ee;max-width:90%;width:auto;min-width:0;text-align:center;padding:8px 14px;border-radius:20px;font-size:12px}
.chat-scroll .bubble.has-attachment{width:fit-content;min-width:min(240px,100%);max-width:min(72%,470px);padding:8px 8px 9px}
.chat-scroll .bubble.paid-message{width:min(360px,88%);min-width:0;max-width:85%;padding:8px 8px 9px;background:#382547;border-color:#8350ae}
.chat-scroll .bubble-body{font-size:14px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;margin:0; min-width:0}
.chat-scroll .bubble.has-attachment .bubble-body{padding:9px 6px 2px}
.chat-scroll .bubble-body:empty{display:none}
.chat-scroll .bubble-meta{display:flex;align-items:center;justify-content:flex-end;gap:5px;min-height:13px;margin-top:5px;color:#e9d8ffad;font-size:10px}
.chat-scroll .bubble-meta small{margin:0;color:inherit;font-size:10px;display:inline}
.chat-scroll .bubble-meta span{color:#cda9ff;font-size:13px}
.chat-scroll .bubble .chat-image,.chat-scroll .bubble .chat-video{max-width:100%;width:auto;max-height:365px;border-radius:11px;object-fit:contain;background:#171320}
.chat-scroll .bubble .chat-audio{max-width: min(320px,100%)}
.chat-scroll .media-image-link{display:block}
.paid-media-preview{width:100%;position:relative;border-radius:12px;overflow:hidden;max-height:360px;background:linear-gradient(145deg,#453258,#231a33);min-height:80px}
.paid-media-preview img,.paid-media-preview video{display:block;width:100%;max-height:340px;object-fit:cover}
.paid-mark{position:absolute;top:9px;left:9px;background:#170c21d9;color:#f6d6ff;font-size:10px;letter-spacing:1px;border:1px solid #db9cfc8c;padding:5px 9px;border-radius:100px;font-weight:800;pointer-events:none}
.paid-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 7px 9px;border-bottom:1px solid #9671a366;font-size:12px}
.paid-strip strong{font-size:15px;color:#f3d5ff;white-space:nowrap}
.legacy-paid{color:#d9c6eb;font-size:12px!important}
.chat-composer{margin-top:0;padding:13px 5px 10px;position:relative;border-top:1px solid #44364f;flex-shrink:0}
#chat-form textarea{min-height:64px;max-height:140px;resize:vertical;width:100%;padding:13px 14px;background:#282235;border:1px solid #4c3b5b;border-radius:13px;font-size:14px;line-height:1.5}
#chat-form textarea:focus{box-shadow:0 0 0 2px #c092fa33}
.composer-tools{min-height:42px;gap:10px}
.composer-tools .tiny{color:#9789a7;font-size:10px}
.icon-btn{width:38px;height:38px;font-size:23px;border-radius:12px;background:#33283f;border:1px solid #514364}
.btn{border-radius:11px;font-size:12px;min-height:37px}
.btn.primary{background:linear-gradient(125deg,#d1a9ff,#9a6aea);color:#21112c;border-color:#b78bec}
.routing-notice{font-size:12px;line-height:1.55;margin-top:12px}
.send-offer{display:block;border-top:1px solid #40324d;margin-top:1px;padding:18px 5px 0;flex-shrink:0}
.offer-heading{margin-bottom:12px!important;align-items:center}
.offer-heading h3{font-size:14px;margin-bottom:2px}
.offer-pill{font-size:9px;color:#d6b2f0;background:#382449;border:1px solid #614379;padding:6px 9px;border-radius:99px;font-weight:800;letter-spacing:.6px;white-space:nowrap}
.offer-grid{display:grid;grid-template-columns:140px minmax(0,1fr);gap:14px;align-items:start}
.offer-preview{position:relative;background:linear-gradient(145deg,#342448,#181321);border:1px dashed #76578c;border-radius:12px;height:166px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.offer-preview img{width:100%;height:100%;object-fit:cover}
#offer-no-preview{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;font-size:30px;color:#cfa4f1}
#offer-no-preview small{font-size:10px;color:#b3a1c7}
.offer-controls{min-width:0}
.offer-controls select{width:100%;font-size:12px;min-width:0;padding:9px}
.field-label{display:block;font-size:11px;color:#ccb7df;margin-bottom:6px;font-weight:650}
.paid-info{font-size:11px;font-weight:700;color:#e8c1ff;padding:7px 0 10px}
.caption-compose{display:flex;align-items:flex-start;gap:6px;min-width:0}
.caption-compose textarea{width:100%;min-width:0;min-height:70px;font-size:13px;resize:vertical;padding:11px}
.caption-compose .icon-btn{flex:0 0 36px;width:36px;height:36px;font-size:21px}
.offer-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.offer-actions .btn{margin-left:auto}
.send-feedback{font-size:11px;color:#a4e8d0;min-height:16px;margin-top:6px}
.free-caption-row{display:flex;align-items:center;gap:8px;margin-top:10px}
.free-caption-row input{flex:1;min-width:0;width:100%}
.free-caption-row button{flex:none}
.floating-emoji-tray{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:1001;display:grid;grid-template-columns:repeat(8,35px);gap:6px;background:#261c36;border:1px solid #8d62ae;border-radius:17px;padding:13px;box-shadow:0 14px 60px #000a;max-width:calc(100vw - 30px)}
.floating-emoji{background:#372749;color:#fff;border:0;border-radius:8px;font-size:22px;height:35px;cursor:pointer}
.floating-emoji:hover{background:#67418b}
.customer-panel{min-width:0}
.customer-panel h3{overflow-wrap:anywhere}
.gallery-preview{border-radius:12px}
.bubble.system .bubble-meta{display:none}
@media(max-width:1420px){.panels{grid-template-columns:230px minmax(0,1fr)}.customer-panel{grid-column:1/-1;display:grid;grid-template-columns:140px 1fr 200px;align-items:center;gap:12px}.customer-panel>.section-head{grid-column:1/-1}.customer-panel .customer-avatar{margin:0}.customer-panel h3{text-align:left}.customer-panel .customer-stats{margin:0}.customer-panel .customer-log-title,.customer-panel .customer-sales{grid-column:1/-1}}
@media(max-width:1060px){.app{grid-template-columns:70px minmax(0,1fr)}.panels{grid-template-columns:215px minmax(0,1fr)}.workspace{padding:16px}.chat-scroll{padding:14px 5px}.chat-scroll .bubble{max-width:90%}}
@media(max-width:730px){.app{display:block}.sidebar{position:static;height:auto}.sidebar nav{display:flex;flex-wrap:wrap}.panels,.bottom-panels{display:block}.inbox,.conversation,.customer-panel{margin-bottom:12px}.conversation{min-height:600px}.chat-scroll{height:360px;min-height:300px}.chat-scroll .bubble{max-width:90%}.offer-grid{grid-template-columns:105px 1fr;gap:10px}.offer-preview{height:135px}.offer-heading{flex-wrap:wrap}.floating-emoji-tray{grid-template-columns:repeat(6,35px)}}

/* V6.3.1: broken legacy previews should never appear as solid white blocks. */
.preview-unavailable .media-image-link,
.paid-media-preview.preview-unavailable a {display:none !important}
.media-error-label {display:none;color:#e9d5ff;text-align:center;padding:55px 18px 38px;font-size:12px;line-height:1.6}
.paid-media-preview.preview-unavailable{background:linear-gradient(140deg,#352444,#1c1528);min-height:145px}
.paid-media-preview.preview-unavailable .media-error-label{display:block}
#offer-error.preview-error-label{color:#edd2ff;font-size:11px;line-height:1.3;max-width:95%;padding:12px;text-align:center}
#offer-error.preview-error-label small{display:block;margin-top:5px;color:#b9a5cc}
.restore-photo-box{border:1px solid #514069;border-radius:12px;background:#211a2c;padding:10px 13px;margin-top:12px;color:#e5d7f3}
.restore-photo-box summary{cursor:pointer;font-size:12px;font-weight:750;color:#d8adff}
.restore-photo-box p{font-size:11px;color:#c7b4d6;line-height:1.5}
.restore-photo-box form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.restore-photo-box label{font-size:11px;color:#c4b3d5}
.restore-photo-box input[type=file]{max-width:300px;min-width:150px;flex:1;font-size:11px}

/* V6.4 Compact messenger layout: only the conversation scrolls, not the page. */
.panels{align-items:start}
.conversation{height:clamp(495px,62dvh,600px);min-height:0;max-height:600px;display:flex;flex-direction:column;overflow:hidden;padding:14px 14px 11px}
.conversation .chat-heading{flex:0 0 auto;padding:0 2px 10px}
.conversation .routing-notice{flex:0 0 auto;font-size:11px;padding:7px 10px;margin:7px 0 3px}
.chat-scroll{flex:1 1 0px;min-height:0;height:auto;max-height:none;overflow-y:auto;overflow-x:hidden;gap:7px;padding:12px 8px 10px;scrollbar-gutter:stable;overscroll-behavior:contain}
.chat-scroll .bubble{max-width:min(67%,480px);min-width:0;padding:8px 11px 6px;font-size:13px;border-radius:13px 13px 13px 4px;box-shadow:none}
.chat-scroll .bubble.mine{border-radius:13px 13px 4px 13px}
.chat-scroll .bubble-body{font-size:13px;line-height:1.42}
.chat-scroll .bubble.system{max-width:85%;padding:5px 10px;font-size:10px;min-width:0}
.chat-scroll .bubble.has-attachment{min-width:0;width:max-content;max-width:min(66%,320px);padding:6px}
.chat-scroll .bubble.paid-message{width:min(270px,82%);max-width:82%;min-width:0;padding:6px}
.chat-scroll .bubble .chat-image,.chat-scroll .bubble .chat-video{display:block;width:auto;max-width:100%;max-height:210px;object-fit:contain;border-radius:9px}
.chat-scroll .bubble.has-attachment .bubble-body{padding:7px 4px 0}
.chat-scroll .bubble-meta{font-size:9px;min-height:10px;margin-top:3px}
.paid-media-preview{width:100%;max-height:215px;min-height:0;border-radius:9px}
.paid-media-preview img,.paid-media-preview video{width:100%;height:auto;max-height:205px;object-fit:contain}
.paid-mark{top:6px;left:6px;font-size:9px;padding:3px 7px}
.paid-strip{padding:7px 5px 6px;font-size:11px}
.paid-strip strong{font-size:12px}
.chat-composer{flex:0 0 auto;padding:8px 3px 6px}
#chat-form textarea{height:43px;min-height:43px;max-height:95px;padding:9px 12px;line-height:1.35;font-size:13px}
.composer-tools{margin-top:4px;min-height:34px;gap:7px}
.composer-tools .btn{min-height:33px}
.composer-tools .icon-btn{height:32px;width:32px;font-size:19px;border-radius:9px}
/* Paid offer is collapsed until clicked; it cannot stretch the chat to page height. */
.send-offer{display:block;flex:0 0 auto;padding:0;margin:0;border-top:1px solid #40324d;overflow:visible}
.offer-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 4px;cursor:pointer;list-style:none;font-size:12px;font-weight:800;color:#ecd9ff}
.offer-summary::-webkit-details-marker{display:none}
.offer-summary small{display:block;font-size:10px;color:#aaa0ba;font-weight:400;margin-top:2px}
.offer-summary .offer-pill{font-size:10px}
.offer-chevron{display:inline-block;margin-left:5px;transition:transform .15s ease}
.send-offer[open] .offer-chevron{transform:rotate(180deg)}
.offer-content{border-top:1px solid #40324d;padding:12px 4px 7px;overflow-y:auto;max-height:min(37dvh,360px);scrollbar-color:#705382 transparent}
.offer-hint{font-size:11px;color:#aa9db7;margin:0 0 10px}
.offer-preview{height:113px}
.offer-grid{grid-template-columns:102px minmax(0,1fr);gap:10px}
.caption-compose textarea{min-height:48px;max-height:92px;font-size:12px}
.offer-actions{margin-top:9px}
.offer-actions .btn{min-height:33px}
.emoji-picker{bottom:88px;left:3px;grid-template-columns:repeat(9,1fr);gap:2px;max-width:min(370px,calc(100vw - 50px));max-height:220px;overflow:auto}
.emoji-option{font-size:19px;padding:4px}
.floating-emoji-tray{grid-template-columns:repeat(9,35px);max-height:255px;overflow:auto}
/* Broken Telegram file-id previews show a visible compact indicator, never a white box. */
.chat-scroll .bubble.preview-unavailable{background:#2e263b}
.chat-scroll .bubble .inline-media-unavailable{display:none}
.chat-scroll .bubble.preview-unavailable .inline-media-unavailable{display:block;font-size:11px;color:#cfb9e5;padding:12px 6px;max-width:200px}
.chat-scroll .paid-media-preview.preview-unavailable{min-height:0;max-height:none}
.chat-scroll .paid-media-preview.preview-unavailable .media-error-label{padding:25px 10px 12px;font-size:11px}
@media(max-width:1420px){.panels{align-items:start}}
@media(max-width:1060px){.conversation{height:clamp(485px,63dvh,600px);max-height:600px}.chat-scroll{min-height:0;height:auto;max-height:none}.chat-scroll .bubble{max-width:80%}.chat-scroll .bubble.paid-message{max-width:84%}}
@media(max-width:730px){.conversation{height:clamp(490px,75dvh,700px);max-height:none;min-height:0}.chat-scroll{height:auto;min-height:0;max-height:none}.offer-content{max-height:32dvh}.chat-scroll .bubble{max-width:88%}.chat-scroll .bubble.paid-message{max-width:88%}.floating-emoji-tray{grid-template-columns:repeat(7,35px)}}

.routing-notice summary{cursor:pointer;font-weight:750;list-style:none}.routing-notice summary::-webkit-details-marker{display:none}.routing-notice p{margin:9px 0 3px;color:#c6b8d8;font-size:11px}

/* Paid composer is a popup over chat history, never a resizer. */
.send-offer{position:relative;z-index:6}
.send-offer[open]{max-height:none;overflow:visible}
.offer-content{position:absolute;z-index:8;left:0;right:0;bottom:calc(100% + 5px);background:#22192f;border:1px solid #7b5a9d;border-radius:14px;box-shadow:0 16px 40px #06030aaf;padding:13px;max-height:min(48dvh,400px);overflow-y:auto}
@media(max-width:730px){.offer-content{max-height:min(45dvh,360px)}}


/* V6.5 — Violet Studio: chat-first layout and isolated PPV dialog */
:root{--bg:#0d0c15;--panel:#191522;--panel2:#211b2e;--line:#3d3150;--purple:#d5aaff;--purple2:#a968eb}
.workspace{max-width:1830px;padding:19px 20px}
.sidebar{background:#120f1b}
.brand{font-size:18px;letter-spacing:.15px}.brand span{font-size:16px}
header{margin-bottom:13px}header h1{font-size:25px}
header p{margin-top:2px}
.metrics{gap:10px;margin-bottom:8px}.metric{padding:10px 14px}.metric strong{font-size:22px;margin:2px 0 0}.metric small{font-size:9px}
.connection-strip{padding:6px 11px;margin-bottom:10px;font-size:10px}
.panels{grid-template-columns:220px minmax(0,1fr) 210px;gap:10px;align-items:stretch}
.panels>.panel{border-radius:15px}
.inbox{padding:13px 10px}.inbox .client-list{max-height:calc(75dvh - 115px)}
.conversation{height:clamp(610px,76dvh,850px)!important;max-height:none!important;min-height:0!important;padding:13px 14px 10px!important}
.chat-scroll{padding:12px 9px 10px!important;gap:6px!important}
.chat-scroll .bubble{font-size:13px;padding:8px 12px 6px;max-width:min(78%,570px)}
.chat-scroll .bubble-body{font-size:13px;line-height:1.4}
.chat-scroll .bubble .chat-image,.chat-scroll .bubble .chat-video{max-height:220px}
.chat-heading{margin:0!important;padding-bottom:11px!important}
.chat-composer{padding:9px 0 3px}.composer-tools .tiny{display:none}
.composer-tools{gap:7px}.composer-tools #send-status{margin-left:auto}
.ppv-trigger{display:inline-flex;align-items:center;gap:6px;height:33px;border:1px solid #8659ad;border-radius:10px;background:#4e2e70;color:#f3d7ff;padding:0 11px;font-weight:800;font-size:12px}
.ppv-trigger span{font-size:10px;font-weight:500;color:#ddc9ed}
.ppv-trigger:hover,.demo-sale:hover{filter:brightness(1.18)}
.demo-sale{height:31px;background:#2e213d;border:1px solid #644a7a;color:#d2b2eb;padding:4px 10px;border-radius:10px;font-size:11px;white-space:nowrap}
.customer-panel{padding:13px 12px}
.customer-avatar{margin:13px auto 8px;width:58px;height:58px}.customer-stats{margin:14px 0;gap:6px}
.customer-stats>div{padding:9px 7px}.customer-stats strong{font-size:17px}
/* Independent overlay: paid composer never reduces the number of visible chat messages. */
.send-offer,.send-offer[open]{position:fixed!important;inset:0!important;z-index:1100!important;margin:0!important;border:0!important;padding:18px!important;background:rgba(4,2,10,.76)!important;display:none!important;overflow-y:auto!important;max-height:none!important;align-items:center!important;justify-content:center!important}
.send-offer[open]{display:flex!important}
.send-offer>.offer-summary{display:flex;position:absolute;top:calc(50% - min(270px,43dvh));left:50%;transform:translateX(-50%);width:min(580px,calc(100vw - 35px));min-height:48px;z-index:2;border:1px solid #72518c;border-bottom:0;background:#241a32;border-radius:18px 18px 0 0;padding:13px 18px;cursor:pointer}
.send-offer>.offer-summary>span:first-child{font-size:15px}
.send-offer>.offer-summary small{margin-top:0}
.send-offer>.offer-content{position:static!important;width:min(580px,calc(100vw - 35px))!important;max-width:580px;max-height:min(79dvh,650px)!important;margin-top:43px!important;padding:18px!important;overflow-y:auto!important;border-radius:0 0 18px 18px!important;background:#241a32;box-shadow:0 15px 100px #050309bb;border:1px solid #72518c}
.send-offer .offer-grid{grid-template-columns:145px minmax(0,1fr);gap:14px}
.send-offer .offer-preview{height:172px}.send-offer .caption-compose textarea{min-height:86px}
/* Popup remains fixed and visible above modal. */
.sale-toast-container{z-index:1500;pointer-events:none}.sale-toast{pointer-events:auto;position:relative}
@media(min-width:1100px) and (max-width:1490px){.panels{grid-template-columns:200px minmax(0,1fr) 195px}.customer-panel{grid-column:auto;display:block}.customer-panel>.section-head{display:flex}.customer-panel>.customer-avatar{margin:13px auto 8px}.customer-panel>.customer-stats{margin:14px 0}.customer-panel>.customer-log-title,.customer-panel>.customer-sales{grid-column:auto}}
@media(max-width:1099px){.panels{grid-template-columns:200px minmax(0,1fr)}.customer-panel{grid-column:1/-1}.conversation{height:clamp(580px,75dvh,780px)!important}.workspace{padding:14px}}
@media(max-width:720px){.panels{display:block}.conversation{height:clamp(540px,77dvh,760px)!important}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.send-offer>.offer-summary{top:8dvh}.send-offer>.offer-content{max-height:75dvh!important;margin-top:47px!important}.send-offer .offer-grid{grid-template-columns:105px minmax(0,1fr)}.send-offer .offer-preview{height:130px}.demo-sale{padding:5px}.sidebar{position:static}}

/* Reliable vertical centering for PPV overlay irrespective of viewport height. */
.send-offer[open]{flex-direction:column!important}
.send-offer>.offer-summary{position:relative!important;top:auto!important;left:auto!important;transform:none!important;flex:0 0 auto!important;margin:0!important}
.send-offer>.offer-content{flex:0 1 auto!important;margin:0!important;max-height:min(75dvh,650px)!important}
@media(max-width:720px){.send-offer>.offer-summary{top:auto!important}.send-offer>.offer-content{max-height:75dvh!important;margin:0!important}}
/* Keep composer visible without page scrolling on a typical 900px desktop. */
@media(min-width:721px){
  .conversation{height:clamp(500px,calc(100dvh - 275px),760px)!important}
}

/* Violet Studio V6.6: live Stars sale alert */
.live-sales-state{margin-left:auto;color:#c7abeb;font-size:10px;white-space:nowrap}
.sound-hint{font-size:10px;color:#e2b9ff;white-space:nowrap}
.sale-toast-container{max-width:min(430px,calc(100vw - 24px))}
.sale-toast{min-height:102px;border:1px solid #d8a4ff;box-shadow:0 18px 70px #11051be0,0 0 36px #ac57ff77;isolation:isolate;overflow:hidden}
.sale-toast::after{content:'✦   ✧  ✦  ✧';pointer-events:none;position:absolute;right:16px;top:8px;color:#e2bcff;opacity:.5;letter-spacing:13px;animation:starglow 1s ease-out both}
.sale-details{min-width:0;flex:1}
.sale-confirmed{margin-top:6px;color:#c6f2d7;font-size:10px}
@keyframes starglow{from{opacity:0;transform:translateY(8px)}to{opacity:.5;transform:translateY(0)}}
@media(max-width:720px){.live-sales-state{display:block;margin-left:0}.sound-hint{display:none}}


/* Violet Studio V6.7 — correct emoji layer, shared Vault and mobile-first conversation */
body.ppv-open{overflow:hidden}
.floating-emoji-tray{z-index:1350!important;position:fixed!important;top:8px;bottom:auto!important;left:10px;transform:none!important;width:min(360px,calc(100vw - 20px));max-height:min(260px,42dvh);overflow-y:auto;overscroll-behavior:contain;grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:6px}
.floating-emoji-tray[hidden],.emoji-picker[hidden]{display:none!important}
.floating-emoji{width:100%;min-height:38px;height:38px;touch-action:manipulation}
.send-offer[open]{z-index:1100!important}
.mobile-chat-back{display:none;background:#352642;color:#f4ddff;border:1px solid #72548f;border-radius:11px;min-height:42px;padding:6px 12px;font-weight:700}
.vault-section{margin-top:13px;scroll-margin-top:70px}
.vault-hint{font-size:12px;color:#c0b1d1;margin:0 0 13px}
.vault-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:12px}
.vault-card{min-width:0;display:flex;flex-direction:column;gap:6px;background:#241b32;border:1px solid #58406e;border-radius:15px;padding:9px}
.vault-thumb{height:116px;display:grid;place-items:center;background:#181222;border-radius:10px;overflow:hidden;color:#d9b1ff;font-size:13px}
.vault-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.vault-title{font-size:12px;line-height:1.35;overflow-wrap:anywhere}
.vault-kind{font-size:10px;color:#bca8cb}
.vault-actions{display:flex;gap:6px;align-items:center;margin-top:auto}
.vault-actions .btn{flex:1;min-width:0;min-height:36px}
.vault-remove{width:36px;height:36px;flex:none;border-radius:10px;background:#3d294f;border:1px solid #74558b;color:#eacfff;font-size:23px}
.gallery-card{position:relative}
.gallery-card .favorite-toggle{position:absolute;z-index:2;top:10px;right:10px}
.favorite-toggle{display:inline-grid;place-items:center;width:34px;height:34px;flex:none;color:#edccff;background:#39264dcc;border:1px solid #825ea4;border-radius:10px;font-size:22px;line-height:1;touch-action:manipulation}
.favorite-toggle[aria-pressed="true"]{background:#6c3f8d;color:#ffe3a7;border-color:#c292e8}
.record .favorite-toggle{margin-left:auto}
@media(max-width:720px){
 html{scroll-padding-top:62px}
 body{overflow-x:hidden}
 .sidebar{position:sticky!important;top:0;z-index:300;padding:7px 9px!important;height:auto!important;background:#15101fe8;backdrop-filter:blur(14px);border-bottom:1px solid #62487b}
 .sidebar nav{display:flex!important;gap:5px;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;margin:0}
 .sidebar nav::-webkit-scrollbar{display:none}
 .sidebar nav .nav{white-space:nowrap;flex:0 0 auto;padding:9px 11px!important;min-height:42px;font-size:12px!important;margin:0!important}
 .workspace{padding:12px 10px!important;min-width:0}
 header{display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px;margin-bottom:12px}
 header h1{font-size:21px}
 .eyebrow{font-size:9px;letter-spacing:.6px}
 .right{gap:6px;justify-content:flex-start}
 .right .avatar{display:none}
 .right #bot-status{max-width:160px;padding:6px 9px}
 .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .metric{min-width:0;padding:10px!important}
 .metric-name{font-size:10px}
 .metric strong{font-size:20px!important}
 .metric small{font-size:9px;line-height:1.2}
 .connection-strip{font-size:10px;display:flex;flex-wrap:wrap;gap:3px;padding:7px}
 .panels{display:block!important}
 .panel{padding:12px}
 .inbox{scroll-margin-top:65px;margin-bottom:10px}
 .inbox .client-list{max-height:42dvh;min-height:100px}
 .client{min-height:54px}
 .conversation{scroll-margin-top:62px;height:calc(100dvh - 72px)!important;min-height:440px!important;max-height:850px!important;padding:10px!important;margin-bottom:10px;overflow:hidden}
 .chat-heading{gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:0!important;padding-bottom:8px!important}
 .chat-heading>div{flex:1;min-width:130px}
 .chat-heading h2{font-size:16px;overflow-wrap:anywhere}
 .chat-heading .chip.small{font-size:9px}
 .mobile-chat-back{display:inline-flex;align-items:center}
 .chat-scroll{min-height:0!important;max-height:none!important;flex:1 1 auto!important;padding:10px 3px!important}
 .chat-scroll .bubble{max-width:92%!important}
 .chat-composer{flex:none!important;background:#191421;padding-top:8px!important}
 #chat-form textarea{font-size:16px!important;min-height:54px;max-height:95px;resize:none}
 .composer-tools{display:flex;flex-wrap:wrap;gap:6px}
 .composer-tools .icon-btn,.composer-tools .ppv-trigger,.composer-tools #send-button{min-height:44px;height:44px}
 .composer-tools #send-button{margin-left:auto}
 .media-form{max-height:46dvh;overflow-y:auto;padding:10px}
 .vault-section{scroll-margin-top:65px}
 .vault-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .vault-thumb{height:105px}
 .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .favorite-toggle{width:42px;height:42px}
 .send-offer[open]{height:100dvh!important;min-height:0!important;max-height:100dvh!important;display:flex!important;flex-direction:column;justify-content:flex-start!important;align-items:stretch!important;overflow:hidden!important;padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom))!important}
 .send-offer>.offer-summary{position:relative!important;top:auto!important;left:auto!important;transform:none!important;width:100%!important;max-width:none;flex:0 0 auto!important;margin:0!important;min-height:60px;border-radius:15px 15px 0 0!important;gap:6px;padding:12px!important}
 .send-offer>.offer-summary>span:first-child{font-size:13px}
 .send-offer>.offer-content{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;flex:1 1 auto!important;min-height:0;max-height:none!important;height:auto!important;width:100%!important;max-width:none!important;overflow-y:auto!important;overscroll-behavior:contain;margin:0!important;border-radius:0 0 15px 15px!important;padding:12px!important}
 .send-offer .offer-grid{display:grid;grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
 .send-offer .offer-preview{height:110px!important;width:100%}
 .send-offer .offer-preview img{object-fit:contain}
 .send-offer .offer-controls{width:100%;min-width:0}
 .send-offer select,.send-offer textarea,.send-offer input{font-size:16px}
 .send-offer .caption-compose textarea{min-height:85px}
 .send-offer .offer-actions .btn{min-height:46px;flex:1}
 .floating-emoji-tray{z-index:1350!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;width:min(320px,calc(100vw - 20px));max-height:min(220px,36dvh);padding:9px;gap:5px}
 .floating-emoji{min-height:42px;height:42px}
 .bottom-panels{display:block}
 .bottom-panels>.panel{margin-bottom:12px}
 .product-form{display:grid;grid-template-columns:1fr!important}
 .product-form label{grid-column:auto!important}
 .product-form .btn{width:100%;min-height:44px}
 .record{gap:8px}
 .record>div{min-width:0;overflow-wrap:anywhere}
 .customer-panel{display:block!important;width:100%;margin-bottom:12px;min-width:0}
 .customer-panel>.section-head{display:flex!important;width:100%;grid-column:auto}
 .customer-panel .customer-avatar{margin:13px auto 8px}
 .customer-panel .customer-log-title,.customer-panel .customer-sales{grid-column:auto;width:100%}
}
@media(max-width:360px){.vault-grid,.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.composer-tools .ppv-trigger{padding:0 7px}}

/* Tablet header: keep status controls inside workspace width. */
@media(min-width:721px) and (max-width:1100px){
 .workspace header{flex-wrap:wrap;align-items:flex-start;gap:10px}
 .workspace header>.right{flex-wrap:wrap;justify-content:flex-start;max-width:100%;gap:8px}
 .workspace header>.right .avatar{display:none}
}
