:root{--ink:#293650;--muted:#74829c;--line:#e7ebf4;--paper:#f5f7fc;--blue:#5366e8;--shadow:0 5px 24px #34458206;font-family:'Segoe UI',Inter,Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0}button:disabled{cursor:wait;opacity:.6}a{color:inherit;text-decoration:none}button,input,select{border-radius:12px}input,select{border:1px solid #dae1f0;background:#fff;padding:12px 14px;color:var(--ink);min-width:0}input:focus,select:focus,button:focus-visible,a:focus-visible{outline:3px solid #a7b2ff;outline-offset:3px}h1,h2,h3,p{margin-top:0}p{line-height:1.65}small{line-height:1.5}[hidden]{display:none!important}.icon{width:20px;height:20px;flex-shrink:0;vertical-align:middle}.eyebrow{font-size:10px;font-weight:750;letter-spacing:1.6px;display:block}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.primary{display:inline-flex;justify-content:center;align-items:center;gap:10px;background:var(--blue);color:#fff;padding:13px 18px;font-weight:650;font-size:13px;box-shadow:0 4px 10px #5366e81c;transition:background .15s,transform .15s}.primary:hover{background:#4052cf;transform:translateY(-1px)}.primary.compact{padding:11px 15px}.primary .icon,.subtle .icon{width:17px;height:17px}.subtle{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 13px;background:#fff;color:#53617c;border:1px solid var(--line);font-size:12px;font-weight:600}.subtle:hover{background:#edf0ff;border-color:#d6dcff;color:#4658cf}
.boot-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;min-height:100dvh;color:var(--muted);background:#f7f8ff;font-size:14px}.boot-state::before{content:'';width:34px;height:34px;border:3px solid #e1e5ff;border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.control-app{display:flex;min-height:100dvh}.rail{background:#fff;color:#66728a;width:254px;flex-shrink:0;padding:29px 18px 17px;position:fixed;height:100dvh;display:flex;flex-direction:column;z-index:30;overflow:auto;border-right:1px solid var(--line);scrollbar-width:thin}.rail-brand{display:flex;gap:11px;align-items:center;padding:0 10px;color:#27354e}.brand-symbol{display:grid;grid-template-columns:repeat(2,13px);grid-template-rows:repeat(2,13px);gap:4px;transform:rotate(-6deg);flex-shrink:0}.brand-symbol i{border-radius:5px;background:#6575ef}.brand-symbol i:nth-child(2){background:#ffb85c}.brand-symbol i:nth-child(3){background:#ff92aa}.brand-symbol i:nth-child(4){background:#66cbb3}.brand-name{font-size:18px;letter-spacing:-.6px;font-weight:750}.brand-name span{font-weight:450}.brand-caption{display:block;font-size:8px;letter-spacing:.8px;color:#8b96ad;margin-top:3px;font-weight:600}
.rail-scope{position:relative;margin:30px 0 16px;padding:16px 13px 13px;background:#f6f7fe;border:1px solid #e9ebfc;border-radius:14px}.rail-scope .eyebrow{font-size:9px;color:#8a94b1;letter-spacing:1.2px}.rail select{margin:8px 0 6px;width:100%;padding:8px 2px;color:#36436b;background:transparent;border:0;font-size:13px;font-weight:700}.rail-scope small{color:#687790;font-size:10px}.nav-label{font-size:9px;font-weight:750;letter-spacing:1.5px;color:#9ba5b7;padding:0 14px;display:block;margin:23px 0 10px}.rail>.nav-label{margin-top:6px}.rail nav{display:flex;flex-direction:column;gap:5px}.rail nav a{position:relative;display:flex;align-items:center;gap:11px;padding:9px 11px;min-height:45px;font-size:13px;font-weight:550;border-radius:12px;color:#66738d;transition:background .15s}.nav-icon{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:#f1f3fa;color:#7d89a4}.nav-icon .icon{width:18px;height:18px}.rail nav a[data-view=inbox] .nav-icon{color:#219d83;background:#e9f8f1}.rail nav a[data-view=orders] .nav-icon{color:#cb8d2e;background:#fff4df}.rail nav a[data-view=clients] .nav-icon{color:#d86e92;background:#fff0f5}.rail nav a[data-view=products] .nav-icon{color:#8a6bd9;background:#f2edfd}.rail nav a[data-view=partners] .nav-icon{color:#459bbd;background:#eaf6fb}.rail nav a[data-view=ads] .nav-icon{color:#d97c5d;background:#fff0e9}.rail nav a.active{background:#edf0ff;color:#4a5fd6;font-weight:700}.rail nav a.active::before{content:'';position:absolute;left:0;width:3px;height:19px;background:#6475ec;border-radius:4px}.rail nav a.active .nav-icon{background:#dfe5ff;color:#5265de}.rail nav a:hover{background:#f3f5fd;color:#465acc}.nav-dot{width:6px;height:6px;border-radius:50%;background:#5ec9aa;margin-left:auto}
.rail-foot{margin-top:auto;padding:20px 5px 0;display:flex;align-items:center;gap:9px;border-top:1px solid var(--line)}.session-avatar{background:#eeebff;color:#7c68ce;width:36px;height:36px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;font-size:11px;font-weight:750}.rail-foot strong{font-size:11px;display:block;max-width:128px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rail-foot small{color:#687790;font-size:9px;display:block}.rail-foot button{margin-left:auto;color:#8793ad;background:transparent;padding:7px;border-radius:9px}.rail-foot button:hover{background:#fff0f1;color:#d6717b}.rail-foot .icon{width:17px;height:17px}
.main{margin-left:254px;width:calc(100% - 254px);min-width:0}.topbar{min-height:80px;background:#ffffffed;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 36px;gap:16px}.breadcrumb{font-size:12px;color:#687790;display:flex;align-items:center;gap:12px}.breadcrumb .icon{width:15px;height:15px;color:#a6afc3}.breadcrumb strong{color:#445270;font-weight:600}.top-actions{display:flex;align-items:center;gap:10px}.top-actions>span{font-size:11px;color:#687790;margin-right:5px}.menu-toggle{display:none}.content{max-width:1580px;margin:0 auto;padding:32px 36px 45px}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.page-heading .eyebrow{color:#687790;margin-bottom:9px;font-size:9px;letter-spacing:1.5px}.page-heading h1{font-size:29px;letter-spacing:-.9px;font-weight:730;line-height:1.25;margin-bottom:8px;color:#29364e}.page-heading p{color:#687790;font-size:12px;margin:0}.page-heading .stamp{display:inline-flex;align-items:center;gap:7px;font-size:10px;white-space:nowrap;color:#668d80;padding:8px 11px;border:1px solid #e2eee9;border-radius:20px;background:#f2faf5}.stamp::before{content:'';width:5px;height:5px;border-radius:50%;background:#66be98}
.hero{background:linear-gradient(110deg,#fff0e5 0%,#fff0ef 50%,#eeeafe 100%);border-radius:22px;display:flex;min-height:200px;margin-bottom:22px;overflow:hidden;position:relative;border:1px solid #f1e9f2}.hero-copy{padding:28px 30px;position:relative;z-index:1;width:64%}.hero .eyebrow{color:#bb767f;font-size:9px;letter-spacing:1.4px;margin-bottom:12px}.hero h2{font-size:27px;letter-spacing:-.8px;font-weight:720;color:#544262;margin-bottom:9px}.hero p{font-size:12px;color:#92768c;max-width:440px;margin-bottom:19px}.hero a{font-size:12px;font-weight:650;display:inline-flex;align-items:center;gap:16px;color:#7358b6;background:#fff;padding:10px 14px;border-radius:11px;box-shadow:0 3px 10px #b99eac0d}.hero a:hover{color:#4c55d8;box-shadow:0 4px 16px #9b86ca20}.hero a .icon{width:16px;height:16px}.hero-art{position:absolute;right:24px;top:0;width:280px;height:225px;pointer-events:none}.art-disc{position:absolute;width:190px;height:190px;border-radius:50%;background:#e3ddfc;top:20px;left:50px;border:16px solid #ebe6ff}.art-dots{position:absolute;width:64px;height:48px;right:3px;top:30px;background-image:radial-gradient(#c6bce8 1.4px,transparent 1.4px);background-size:11px 11px}.art-chat{position:absolute;width:191px;left:45px;top:48px;border-radius:15px;padding:15px 16px;background:#fff;box-shadow:0 13px 30px #7968a51c;transform:rotate(-5deg)}.art-chat-head{display:flex;align-items:center;gap:9px;margin-bottom:13px;color:#74648d;font-size:10px;font-weight:700}.art-chat-icon{display:grid;place-items:center;width:28px;height:28px;background:#dff6ee;color:#4db28b;border-radius:9px}.art-chat-icon .icon{width:16px;height:16px}.art-line{display:block;height:6px;border-radius:8px;background:#f0edf8;width:100%;margin-top:7px}.art-line.short{width:66%}.art-confirm{position:absolute;top:144px;left:118px;background:#fff;border-radius:11px;padding:10px 13px;display:flex;align-items:center;gap:7px;color:#5d9c87;font-size:9px;font-weight:650;box-shadow:0 8px 20px #7968a512;transform:rotate(5deg)}.art-confirm .icon{width:15px;height:15px}.art-tag{position:absolute;display:grid;place-items:center;width:37px;height:37px;border:3px solid #fff;border-radius:12px;box-shadow:0 4px 10px #8a73a512;font-size:13px;font-weight:750}.art-tag.p{left:13px;top:34px;color:#9c66d8;background:#ebddff;transform:rotate(-14deg)}.art-tag.k{right:8px;top:87px;color:#d68a3e;background:#ffe3ba;transform:rotate(10deg)}.art-tag.q{left:36px;top:158px;color:#d07d7a;background:#ffd8dd;transform:rotate(8deg)}.art-spark{position:absolute;top:6px;left:145px;color:#eeae56;font-size:27px}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:28px}.metric{--tone:#6276df;--tint:#edf0ff;background:#fff;border:1px solid var(--line);border-radius:17px;padding:18px;min-height:127px;box-shadow:var(--shadow)}.metric:nth-child(2){--tone:#a474d8;--tint:#f3ebfc}.metric:nth-child(3){--tone:#ca8a30;--tint:#fff4df}.metric:nth-child(4){--tone:#4fa48f;--tint:#e6f6ef}.metric>div{display:flex;justify-content:space-between;align-items:center;gap:7px}.metric label{font-size:12px;color:#687790;font-weight:550}.metric .metric-symbol{display:grid;place-items:center;background:var(--tint);color:var(--tone);width:32px;height:32px;border-radius:10px;flex-shrink:0}.metric-symbol .icon{width:18px;height:18px}.metric strong{font-size:29px;letter-spacing:-.9px;font-weight:720;display:block;margin:7px 0 3px;color:#34425f}.metric small{font-size:10px;color:#687790}
.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px;gap:16px}.section-heading h2{font-size:18px;font-weight:720;margin-bottom:5px;letter-spacing:-.4px}.section-heading p{font-size:11px;color:#687790;margin:0}.section-heading a{font-size:11px;color:#6a7bd8;font-weight:600}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.project-card{--project-color:#687de0;border:1px solid var(--line);background:#fff;border-radius:18px;padding:21px;min-width:0;position:relative;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s}.project-card::before{content:'';position:absolute;top:0;left:22px;right:22px;height:3px;border-radius:0 0 5px 5px;background:color-mix(in srgb,var(--project-color) 60%,white)}.project-card:hover{box-shadow:0 10px 28px #4756a111;transform:translateY(-3px)}.project-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.project-mark{width:45px;height:45px;border-radius:14px;display:grid;place-items:center;font-size:19px;font-weight:750;background:color-mix(in srgb,var(--project-color) 13%,white);color:var(--project-color)}.status-pill{font-size:9px;font-weight:550;color:#4d9277;background:#ecf8f0;padding:5px 8px;border-radius:20px;display:inline-flex;gap:5px;align-items:center}.status-pill::before{content:'';width:4px;height:4px;border-radius:50%;background:currentColor}.status-pill.off{background:#fff4e2;color:#a4803b}.project-card h3{font-size:16px;line-height:1.4;margin:14px 0 4px;font-weight:730;color:#35415c;overflow-wrap:anywhere}.project-card p{font-size:12px;color:#687790;margin-bottom:16px}.project-counts{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0;margin-top:auto}.project-counts>div{background:#f7f8fc;padding:10px 12px;border-radius:11px}.project-counts strong{display:block;font-size:20px;font-weight:700;color:#4a5770}.project-counts small{font-size:10px;color:#687790}.project-card .project-open{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px;font-size:12px;font-weight:650;background:color-mix(in srgb,var(--project-color) 7%,white);width:100%;padding:11px 12px;border-radius:10px;color:color-mix(in srgb,var(--project-color) 55%,#293650)}.project-open .icon{width:16px;height:16px}.project-error{font-size:11px;color:#a58a57;line-height:1.6;margin-top:16px}.project-card.add-project{background:#f1f4ff;border:1px dashed #ccd6f2;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-height:240px}.project-card.add-project::before{display:none}.add-project .plus{color:#8495db;width:48px;height:48px;background:#e4eaff;border-radius:15px;display:grid;place-items:center}.add-project p{max-width:185px;line-height:1.7;margin-bottom:0}
.bottom-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:19px;margin-top:25px}.action-panel,.scope-panel{padding:23px;background:#fff;border:1px solid var(--line);border-radius:18px}.action-panel h3,.scope-panel h3{font-size:14px;margin-bottom:8px;font-weight:700}.action-panel p,.scope-panel p{font-size:11px;color:#687790;margin-bottom:0}.action-row{display:flex;align-items:center;gap:12px;border-top:1px solid #f0f1f8;padding:16px 0}.action-row:first-of-type{margin-top:16px}.action-row:last-child{padding-bottom:0}.action-row>span{width:34px;height:34px;flex-shrink:0;border-radius:11px;display:grid;place-items:center;background:#e9f8f0;color:#6ab194}.action-row>span .icon{width:17px;height:17px}.action-row strong{font-size:11px;display:block;color:#59677f}.action-row small{font-size:10px;color:#687790}.action-row button{margin-left:auto;background:#f7f8fe;padding:7px;color:#8b98bf}.scope-panel{background:#f0edfd;border-color:#e8e2f9}.scope-panel h3{color:#7a65a9}.scope-panel p{color:#8b79a6}.scope-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:17px}.scope-chips span{font-size:9px;background:#ffffffb3;color:#8973ac;border-radius:8px;padding:7px 9px}
.notice{margin:20px 36px 0;padding:14px 17px;background:#fff7e4;color:#a68a4e;border:1px solid #f5e7c4;font-size:12px;border-radius:12px}.notice.error{color:#b35769;background:#fff0f3;border-color:#f4d8e0}.toolbar{display:flex;gap:10px;margin-bottom:18px;align-items:center;flex-wrap:wrap}.toolbar input{min-width:210px;flex:1;max-width:450px;font-size:12px;padding:13px 15px}.toolbar small{margin-left:auto;color:#687790;font-size:11px}.data-table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow)}.data-table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}.data-table th{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#687790;background:#fafbff;padding:18px 20px;font-weight:650}.data-table td{font-size:12px;padding:17px 20px;border-top:1px solid #f0f2f8;max-width:380px;overflow:hidden;text-overflow:ellipsis}.data-table tr:hover td{background:#fafbff}.data-table td small{font-size:10px;color:#687790;display:block}.data-table .project-tag{font-size:10px;padding:6px 9px;border-radius:8px;background:#f0edfe;color:#8c77bc}.data-table .subtle{font-size:10px;padding:7px 10px}.empty-state{text-align:center;padding:65px 25px;color:#687790;background:#fff;border:1px dashed #d9e0f2;border-radius:19px}.empty-state h2{color:#596b93;font-size:20px}.empty-state p{font-size:12px;max-width:470px;margin:0 auto 19px}.loading{padding:70px 20px;text-align:center;color:#8c9ac0;font-size:13px}
.module-host{height:calc(100dvh - 80px);display:flex;flex-direction:column}.module-toolbar{padding:12px 20px;display:flex;align-items:center;gap:16px;background:#fff;border-bottom:1px solid var(--line)}.module-toolbar strong{font-size:12px}.module-toolbar small{font-size:10px;color:#687790;margin-left:auto}.module-host iframe{width:100%;flex:1;border:0;min-height:500px;background:#fff}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.settings-card{background:#fff;padding:25px;border:1px solid var(--line);border-radius:18px}.settings-card h2{font-size:17px}.settings-card p{font-size:12px;color:#687790}.connection-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);font-size:12px}.connection-row small{color:#8896ae;font-size:10px}
.login-screen{min-height:100dvh;display:grid;grid-template-columns:1fr 1fr;background:#fff}.login-story{position:relative;overflow:hidden;background:linear-gradient(145deg,#f0edff 0%,#fceaf2 55%,#fff0de 100%);color:#594b80;padding:55px 11%;display:flex;flex-direction:column;justify-content:center}.login-story::after{content:'';width:350px;height:350px;border:55px solid #ffffff50;border-radius:50%;position:absolute;right:-200px;bottom:50px;pointer-events:none}.login-story .rail-brand{padding:0;margin-bottom:65px;color:#6a5ba7}.login-story .eyebrow{color:#a581a2;font-size:9px;margin-bottom:23px}.login-story h1{font-size:clamp(37px,4.5vw,66px);font-weight:740;letter-spacing:-2px;line-height:1.13;margin-bottom:23px;z-index:1}.login-story h1 em{color:#a184d7;font-style:normal}.login-story p{font-size:13px;color:#9f8199;max-width:340px}.login-projects{display:flex;flex-wrap:wrap;gap:9px;margin-top:29px;z-index:1}.login-projects span{font-size:10px;font-weight:600;background:#ffffff9c;border-radius:30px;padding:9px 13px;color:#9576bf}.login-projects span:nth-child(2){color:#bc8544;background:#fff4df}.login-projects span:nth-child(3){color:#be7086;background:#ffe9ed}.login-projects span:nth-child(4){color:#4f927f;background:#e5f7f0}.login-form-wrap{display:grid;place-items:center;padding:40px}.login-form-wrap form{width:100%;max-width:350px}.login-form-wrap .eyebrow{color:#8491b7;font-size:9px}.login-form-wrap h2{font-size:29px;font-weight:730;letter-spacing:-.8px;margin:15px 0 11px}.login-form-wrap p{font-size:12px;color:#687790;margin-bottom:28px}.login-form-wrap label{font-size:12px;font-weight:600;display:block;margin:19px 0;color:#6c7c9a}.login-form-wrap input{width:100%;margin-top:9px;padding:14px;background:#fafbff}.login-form-wrap .primary{width:100%;justify-content:space-between;margin-top:5px}.login-form-wrap small{font-size:10px;color:#687790;display:block;margin-top:23px;line-height:1.8}.error{color:#b35b70!important}
 dialog{border:1px solid var(--line);border-radius:20px;width:min(520px,calc(100% - 30px));padding:26px;color:var(--ink);background:#fff;max-height:90dvh;overflow:auto;box-shadow:0 30px 90px #34458220}dialog::backdrop{background:#3d45774f;backdrop-filter:blur(4px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.dialog-head strong{font-size:18px;font-weight:700}.dialog-head button{font-size:20px;border:0;background:#f3f4fd}dialog form{display:grid;gap:15px}dialog label{display:grid;gap:7px;font-size:12px;color:#6f7f9b}dialog p{font-size:12px;color:#7d8ba6}.dialog-error{font-size:12px;color:#b35b70}.dialog-options{display:grid;gap:10px}.dialog-options button{background:#f9faff;border:1px solid var(--line);padding:16px;text-align:left;color:var(--ink);display:flex;justify-content:space-between;gap:12px}.dialog-options small{color:#687790}.team-role{font-size:11px;color:#8c79bb}.view-note{font-size:10px;line-height:1.7;color:#8a98b0;margin:16px 0}.count-pill{background:#e9edff;border-radius:20px;padding:4px 8px;font-size:10px;color:#7889c5;vertical-align:middle;margin-left:4px}
@media(min-width:1550px){.content{padding:40px 50px}.topbar{padding:0 50px}}
@media(max-width:1200px){.rail{width:230px;padding:25px 13px 16px}.brand-name{font-size:17px}.main{margin-left:230px;width:calc(100% - 230px)}.topbar{padding:0 25px}.content{padding:28px 25px}.top-actions>span{display:none}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-copy{width:64%}.hero-art{right:-5px;transform:scale(.87);transform-origin:right center}.hero h2{font-size:25px}.metrics{gap:11px}.metric{padding:15px}.metric label{font-size:10px}.breadcrumb{font-size:11px;gap:9px}}
@media(max-width:900px){.rail{width:254px;padding:26px 18px 17px;transform:translateX(-100%);transition:transform .2s}.rail.open{transform:translateX(0);box-shadow:12px 0 40px #3d4b8c10}.main{margin-left:0;width:100%}.menu-toggle{display:inline-grid;place-items:center;background:#f1f3ff;color:#7b8ad3;padding:9px;border-radius:10px}.topbar{min-height:68px;padding:0 20px;gap:12px}.breadcrumb{flex:1}.top-actions .primary .button-label,.top-actions .subtle .button-label{display:none}.top-actions .primary,.top-actions .subtle{padding:10px}.content{padding:27px 22px}.module-host{height:calc(100dvh - 68px)}.notice{margin-left:22px;margin-right:22px}.hero-copy{width:65%}.settings-grid{grid-template-columns:1fr}}
@media(max-width:600px){.topbar{padding:0 17px}.breadcrumb{font-size:11px}.breadcrumb>span,.breadcrumb>.icon{display:none}.top-actions{gap:6px}.page-heading{align-items:flex-start;margin-bottom:21px}.page-heading h1{font-size:25px;letter-spacing:-.8px}.page-heading p{font-size:11px;max-width:300px}.page-heading .stamp{display:none}.content{padding:26px 18px 35px}.hero{min-height:213px;border-radius:19px}.hero-copy{padding:23px;width:100%}.hero .eyebrow{font-size:8px;letter-spacing:1px;max-width:230px}.hero h2{font-size:25px;max-width:240px}.hero p{max-width:230px;font-size:11px;color:#93788d}.hero-art{right:-95px;top:30px;opacity:.35;transform:scale(.65);z-index:0}.hero a{position:relative;font-size:11px;padding:10px 12px}.metrics{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:26px}.metric{min-height:122px;padding:15px;border-radius:15px}.metric label{font-size:10px;line-height:1.4}.metric .metric-symbol{width:28px;height:28px;border-radius:9px}.metric-symbol .icon{width:16px;height:16px}.metric strong{font-size:27px}.metric small{font-size:10px;display:block}.section-heading h2{font-size:17px}.section-heading p{font-size:10px}.section-heading a{font-size:10px;white-space:nowrap}.project-grid{grid-template-columns:1fr;gap:15px}.project-card{padding:19px}.project-card h3{font-size:16px}.project-card.add-project{min-height:170px}.project-counts{gap:12px}.project-open{min-height:43px}.bottom-grid{grid-template-columns:1fr;gap:16px}.module-toolbar{padding:9px 12px;gap:10px}.module-toolbar small{display:none}.module-toolbar strong{font-size:11px}.login-screen{display:flex;flex-direction:column}.login-story{padding:34px 30px}.login-story .rail-brand{margin-bottom:28px}.login-story h1{font-size:39px;letter-spacing:-1.5px;margin-bottom:14px}.login-story p{font-size:12px;margin:0}.login-story .eyebrow{font-size:8px;margin-bottom:17px}.login-projects{margin-top:23px;gap:7px}.login-projects span{font-size:9px;padding:7px 11px}.login-form-wrap{padding:34px 30px}.login-form-wrap h2{font-size:26px}.login-form-wrap p{margin-bottom:20px}.toolbar small{width:100%;margin-left:0}.data-table th,.data-table td{padding:15px}.settings-card{padding:21px}.connection-row{flex-wrap:wrap;gap:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.rail-dismiss{display:none}.rail-backdrop{position:fixed;inset:0;z-index:25;background:#35447740;border-radius:0;width:100%;height:100dvh}
@media(max-width:900px){.rail-dismiss{display:grid;place-items:center;position:absolute;right:7px;top:7px;width:25px;height:25px;padding:0;background:#e9edfc;color:#7184c6;font-size:19px;border-radius:8px}.rail-scope .eyebrow{padding-right:25px}}

.project-actions{display:flex;align-items:center;gap:8px;margin-top:14px}.project-actions .project-open{margin-top:0;flex:1;min-width:0}.new-tab-link{display:inline-flex;align-items:center;justify-content:center;width:39px;height:39px;flex-shrink:0;border:1px solid #e1e6f3;border-radius:10px;background:#fff;color:#697cd5}.new-tab-link:hover{background:#edf0ff;color:#4658cf}.new-tab-link .icon{width:17px;height:17px}.connection-actions{display:flex;align-items:center;gap:7px}.module-new-tab{white-space:nowrap;margin-left:auto}.module-toolbar strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.module-toolbar small{display:none}@media(max-width:600px){.module-new-tab span{display:none}.module-new-tab{padding:9px}}

.project-feature-banner{margin-top:13px}
.project-feature-link{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;border-radius:13px;background:color-mix(in srgb,var(--project-color) 8%,#fff);border:1px solid color-mix(in srgb,var(--project-color) 25%,#dce4f2);text-decoration:none;color:inherit;transition:all .18s ease;position:relative;overflow:hidden}
.project-feature-link::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--project-color);border-radius:3px 0 0 3px}
.project-feature-link:hover{background:color-mix(in srgb,var(--project-color) 13%,#fff);border-color:color-mix(in srgb,var(--project-color) 45%,#b9c7e2);transform:translateY(-1px);box-shadow:0 4px 14px color-mix(in srgb,var(--project-color) 18%,transparent)}
.project-feature-link .feature-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.project-feature-link .feature-icon{width:32px;height:32px;flex-shrink:0;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--project-color) 16%,#fff);color:var(--project-color)}
.project-feature-link .feature-icon .icon{width:16px;height:16px}
.project-feature-link .feature-text{min-width:0;flex:1}
.project-feature-link .feature-title-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.project-feature-link strong{font-size:12px;font-weight:750;color:#2b3850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-feature-link .feature-tag{font-size:8.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;background:color-mix(in srgb,var(--project-color) 20%,#fff);color:color-mix(in srgb,var(--project-color) 85%,#000);border:1px solid color-mix(in srgb,var(--project-color) 35%,transparent);padding:1px 6px;border-radius:4px}
.project-feature-link small{display:block;font-size:10px;color:#687790;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-feature-link .feature-cta{flex-shrink:0;font-size:11px;font-weight:700;background:var(--project-color);color:#fff;padding:6px 11px;border-radius:8px;display:inline-flex;align-items:center;gap:4px;transition:opacity .15s}
.project-feature-link:hover .feature-cta{opacity:.92}
.project-studio-pill-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 12px;height:39px;flex-shrink:0;border-radius:10px;border:1px solid color-mix(in srgb,var(--project-color) 30%,#e1e6f3);background:color-mix(in srgb,var(--project-color) 8%,#fff);color:color-mix(in srgb,var(--project-color) 80%,#1e293b);font-size:11px;font-weight:700;text-decoration:none;transition:all .15s ease;white-space:nowrap}
.project-studio-pill-btn:hover{background:var(--project-color);color:#fff;border-color:var(--project-color);transform:translateY(-1px)}
.project-supplier-pill-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 12px;height:39px;flex-shrink:0;border-radius:10px;border:1px solid #a7f3d0;background:#ecfdf5;color:#047857;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s ease;white-space:nowrap}
.project-supplier-pill-btn:hover{background:#059669;color:#fff;border-color:#059669;transform:translateY(-1px)}
.project-feature-banner.supplier-banner{margin-top:8px}
.project-feature-banner.supplier-banner .project-feature-link{--supp-brand:#059669;background:color-mix(in srgb,var(--supp-brand) 7%,#fff);border-color:color-mix(in srgb,var(--supp-brand) 25%,#dce4f2);cursor:pointer}
.project-feature-banner.supplier-banner .project-feature-link::before{background:var(--supp-brand)}
.project-feature-banner.supplier-banner .project-feature-link:hover{background:color-mix(in srgb,var(--supp-brand) 12%,#fff);border-color:color-mix(in srgb,var(--supp-brand) 45%,#b9c7e2);box-shadow:0 4px 14px color-mix(in srgb,var(--supp-brand) 16%,transparent)}
.project-feature-banner.supplier-banner .supplier-icon{background:color-mix(in srgb,var(--supp-brand) 15%,#fff);color:var(--supp-brand)}
.project-feature-banner.supplier-banner .supplier-tag{background:color-mix(in srgb,var(--supp-brand) 18%,#fff);color:#065f46;border-color:color-mix(in srgb,var(--supp-brand) 30%,transparent)}
.project-feature-banner.supplier-banner .feature-cta{background:var(--supp-brand)}
@media(max-width:600px){.project-feature-link .feature-cta{padding:5px 8px;font-size:10px}.project-feature-link small{max-width:180px}.project-studio-pill-btn,.project-supplier-pill-btn{padding:0 9px;font-size:10px}}

/* Supplier links modal */
.supplier-modal-wrap{display:flex;flex-direction:column;gap:16px}
.supplier-modal-intro p{margin:0;font-size:13px;color:#475569;line-height:1.55}
.supplier-modal-list{display:flex;flex-direction:column;gap:14px;max-height:60vh;overflow-y:auto;padding-right:4px}
.supplier-card-item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;transition:border-color .15s ease}
.supplier-card-item:hover{border-color:#cbd5e1}
.supp-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.supp-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.supp-name{font-size:15px;font-weight:700;color:#0f172a}
.supp-tag{font-size:11px;background:#e2e8f0;color:#334155;padding:2px 7px;border-radius:6px;font-weight:600}
.supp-meta{display:flex;align-items:center;gap:12px;font-size:12px;color:#64748b;margin-top:4px;flex-wrap:wrap}
.supp-status-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
.supp-status-badge.badge-on{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}
.supp-status-badge.badge-off{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.supp-link-box{background:#ffffff;border:1px solid #e2e8f0;border-radius:9px;padding:10px;display:flex;flex-direction:column;gap:8px}
.supp-link-label{font-size:11px;font-weight:600;color:#475569}
.supp-link-input-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.supp-url-input{flex:1;min-width:200px;height:36px;padding:0 10px;font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:8px;color:#1e293b}
.supp-btn-copy,.supp-btn-open,.supp-btn-wa{height:36px;padding:0 12px;border-radius:8px;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:4px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:all .15s ease}
.supp-btn-copy.primary{background:#0284c7;color:#ffffff;border:1px solid #0284c7}
.supp-btn-copy.primary:hover{background:#0369a1}
.supp-btn-copy.copied{background:#16a34a!important;border-color:#16a34a!important}
.supp-btn-open{background:#f8fafc;color:#334155;border:1px solid #cbd5e1}
.supp-btn-open:hover{background:#e2e8f0;color:#0f172a}
.supp-btn-wa{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.supp-btn-wa:hover{background:#10b981;color:#ffffff}
.supp-link-extra{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px}
.supp-btn-renew{background:none;border:none;padding:0;font-size:11px;color:#64748b;cursor:pointer;text-decoration:underline}
.supp-btn-renew:hover{color:#0f172a}
.supp-sub-link{color:#64748b;text-decoration:none}
.supp-sub-link:hover{text-decoration:underline;color:#0f172a}
.supp-no-link-box{background:#fffbeb;border:1px solid #fef3c7;border-radius:9px;padding:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px;color:#92400e}
.supp-btn-issue{height:32px;padding:0 12px;font-size:11px;border-radius:7px}
.supplier-modal-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;border-top:1px solid #e2e8f0;margin-top:4px}

/* Operations & Roles Pill Buttons */
.project-role-pill-btn{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:700;cursor:pointer;border:1px solid transparent;transition:all .15s ease;white-space:nowrap;text-decoration:none}
.project-role-pill-btn.supp{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.project-role-pill-btn.supp:hover{background:#059669;color:#fff;border-color:#059669}
.project-role-pill-btn.conf{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.project-role-pill-btn.conf:hover{background:#2563eb;color:#fff;border-color:#2563eb}
.project-role-pill-btn.hub{background:#fffbeb;color:#b45309;border-color:#fde68a}
.project-role-pill-btn.hub:hover{background:#d97706;color:#fff;border-color:#d97706}
.project-role-pill-btn.ram{background:#f5f3ff;color:#6d28d9;border-color:#ddd6fe}
.project-role-pill-btn.ram:hover{background:#7c3aed;color:#fff;border-color:#7c3aed}
@media(max-width:600px){.project-role-pill-btn{padding:0 8px;font-size:10px}}

/* Operations modal tabs & layout */
.operations-modal-tabs{display:flex;align-items:center;gap:6px;border-bottom:2px solid #e2e8f0;padding-bottom:10px;margin-bottom:14px;overflow-x:auto}
.op-tab-btn{background:none;border:none;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:700;color:#64748b;cursor:pointer;white-space:nowrap;transition:all .15s ease}
.op-tab-btn:hover{background:#f1f5f9;color:#1e293b}
.op-tab-btn.active{background:#0f172a;color:#ffffff}
.op-section{display:flex;flex-direction:column;gap:14px}
.op-section.hidden{display:none!important}
.op-section-content{display:flex;flex-direction:column;gap:12px;max-height:60vh;overflow-y:auto;padding-right:4px}
.op-tools-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-bottom:4px}
.op-tool-chip{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.op-tool-info strong{display:block;font-size:12px;color:#0f172a;font-weight:700}
.op-tool-info small{font-size:11px;color:#64748b;line-height:1.4}
.op-tool-btns{display:flex;gap:6px;align-items:center}
.op-filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin-top:6px}
.op-filter-chip{background:#ffffff;border:1px solid #e2e8f0;border-radius:8px;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.op-filter-chip .filter-name{font-size:12px;font-weight:600;color:#1e293b}
.op-filter-chip .filter-actions{display:flex;gap:4px;align-items:center}


/* Project administration: one native workspace with a compact project switcher. */
.project-dock{position:fixed;inset:0 auto 0 0;width:84px;background:#fff;border-right:1px solid #e7ebf4;z-index:25;display:flex;align-items:center;flex-direction:column;padding:17px 9px;gap:15px;height:100dvh;overflow-y:auto;scrollbar-width:thin}
.project-dock button{display:flex;align-items:center;justify-content:center;flex-direction:column;background:transparent;width:64px;min-height:64px;padding:8px 4px;gap:6px;flex-shrink:0;border-radius:13px;color:#7d8ba6}
.project-dock small{font-size:10px;line-height:1.2;font-weight:600;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-dock .dock-home{background:#f1f3ff;color:#6476d6;min-height:62px}.dock-home .icon{width:22px;height:22px}.dock-divider{width:30px;height:1px;background:#e8edf8;flex-shrink:0}
.project-dock nav{display:flex;flex-direction:column;gap:12px}.dock-project>span{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:color-mix(in srgb,var(--dock-color) 12%,white);color:var(--dock-color);font-size:17px;font-weight:750}
.project-dock .dock-project.active{background:color-mix(in srgb,var(--dock-color) 8%,white);color:color-mix(in srgb,var(--dock-color) 65%,#293650);box-shadow:inset 3px 0 var(--dock-color)}.project-dock button:hover{background:#f4f6fc}
body.project-mode{overflow:hidden}.project-mode .rail,.project-mode .topbar,.project-mode .module-toolbar{display:none!important}.project-mode .control-app{height:100dvh;min-height:0}.project-mode .main{margin-left:84px;width:calc(100% - 84px);height:100dvh}.project-mode .module-host{height:100dvh}.project-mode .module-host iframe{min-height:0;height:100%;flex:1}.project-mode .notice:not([hidden]){position:fixed;z-index:40;left:96px;right:12px;top:12px;margin:0;box-shadow:0 4px 18px #34458216}
@media(max-width:600px){.project-dock{inset:0 0 auto;width:100%;height:76px;flex-direction:row;gap:7px;padding:7px 8px;border-right:0;border-bottom:1px solid #e7ebf4;overflow-x:auto;overflow-y:hidden}.project-dock nav{flex-direction:row;gap:5px}.project-dock button{width:48px;min-height:59px;padding:4px 2px;gap:4px}.project-dock small{font-size:8px;max-width:46px}.project-dock .dock-home{min-height:59px;width:47px}.dock-divider{width:1px;height:32px}.dock-project>span{width:30px;height:30px;border-radius:9px;font-size:14px}.project-dock .dock-project.active{box-shadow:inset 0 -3px var(--dock-color)}.project-mode .main{margin-left:0;width:100%;height:100dvh;padding-top:76px}.project-mode .module-host{height:calc(100dvh - 76px)}.project-mode .notice:not([hidden]){left:10px;right:10px;top:85px}}
.workspace-tools{display:flex;align-items:center;gap:6px;min-height:59px;padding:10px 24px;background:white;border-bottom:1px solid #e4e9f3;flex-shrink:0;overflow-x:auto}.workspace-tools button{display:flex;align-items:center;gap:8px;padding:10px 15px;border-radius:10px;background:transparent;color:#718099;white-space:nowrap;font-size:12px}.workspace-tools .icon{width:17px;height:17px}.workspace-tools button.active{background:#edf0ff;color:#5366e8}.workspace-tools button:hover{background:#f5f7ff}.project-mode .module-host iframe{height:0;min-height:0}.workspace-tools[hidden]{display:none!important}@media(max-width:600px){.workspace-tools{padding:8px 10px;gap:3px;min-height:51px}.workspace-tools button{padding:9px 10px;font-size:11px;gap:6px}.workspace-tools .icon{width:15px;height:15px}}

/* Real-time traffic banner & pulse indicator */
.live-traffic-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#f0faf5;border:1px solid #d4ede2;border-radius:16px;padding:14px 18px;margin-bottom:20px;flex-wrap:wrap;max-width:100%;overflow:hidden}
.live-pulse{display:inline-flex;align-items:center;gap:8px;color:#286b51;font-size:13px;font-weight:650;flex-wrap:wrap}
.pulse-dot{width:9px;height:9px;border-radius:50%;background:#38b884;box-shadow:0 0 0 0 rgba(56,184,132,0.7);animation:pulse-anim 1.8s infinite;flex-shrink:0}
@keyframes pulse-anim{0%{box-shadow:0 0 0 0 rgba(56,184,132,0.7)}70%{box-shadow:0 0 0 8px rgba(56,184,132,0)}100%{box-shadow:0 0 0 0 rgba(56,184,132,0)}}
.live-sep{color:#9ecdb9;font-weight:400}
.live-summary-stats{display:flex;align-items:center;gap:8px;color:#467a63;font-size:12px;flex-wrap:wrap}
.live-summary-stats strong{color:#205742;font-weight:700}
.live-pill{display:inline-flex;align-items:center;gap:6px;font-size:9px;font-weight:650;color:#2c7d5c;background:#def5e9;padding:4px 8px;border-radius:20px}
.live-pill .pulse-dot{width:6px;height:6px}

/* Hourly traffic chart */
.hourly-chart-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 24px;margin-bottom:26px;box-shadow:var(--shadow);max-width:100%;overflow:hidden}
.chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px}
.chart-head h3{font-size:15px;font-weight:720;color:#33415c;margin:0 0 4px}
.chart-head p{font-size:11px;color:#78869e;margin:0}
.chart-badge{display:inline-flex;align-items:center;gap:7px;background:#f3f0fc;color:#6f57b7;padding:6px 12px;border-radius:20px;font-size:11px;font-weight:650;max-width:100%}
.chart-container{position:relative;padding-top:10px;max-width:100%;overflow:hidden}
.hourly-bars{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px;height:120px;align-items:end;padding-bottom:24px;border-bottom:1px solid #edf0f7;width:100%}
.hourly-bar-col{display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;position:relative;min-width:0}
.hourly-bar{width:100%;max-width:24px;min-height:3px;background:#d8e0f5;border-radius:4px 4px 0 0;transition:all .18s;position:relative;cursor:pointer}
.hourly-bar:hover{background:#5366e8!important;transform:scaleY(1.05);transform-origin:bottom}
.hourly-bar.current{background:#5366e8;box-shadow:0 2px 8px #5366e840}
.hourly-bar.peak{background:#8b5cf6}
.hourly-bar-col:hover .bar-tooltip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(-6px)}
.bar-tooltip{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:#1f293d;color:#fff;padding:6px 9px;border-radius:8px;font-size:10px;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:all .15s;z-index:10;box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.bar-tooltip strong{display:block;color:#98b0ff}
.bar-label{position:absolute;bottom:-20px;font-size:8px;color:#8f9cb5;letter-spacing:-.2px;text-align:center;width:100%;overflow:hidden}

/* Traffic Analytics Grid (Sources & Devices) */
.analytics-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;margin-bottom:26px;max-width:100%}
.analytics-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow);min-width:0;overflow:hidden}
.analytics-card h3{font-size:14px;font-weight:700;margin-bottom:6px;color:#354360}
.analytics-card p{font-size:11px;color:#78869e;margin-bottom:16px}
.sources-list{display:flex;flex-direction:column;gap:11px}
.source-item{display:flex;flex-direction:column;gap:5px}
.source-info{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#455470}
.source-info strong{color:#2a364f;font-weight:650}
.source-info small{color:#8896ae;font-size:10px}
.source-track{width:100%;height:6px;background:#f0f2f8;border-radius:6px;overflow:hidden}
.source-fill{height:100%;background:linear-gradient(90deg,#5366e8,#8b5cf6);border-radius:6px}
.devices-wrap{display:flex;flex-direction:column;gap:16px}
.device-bars{display:flex;height:12px;border-radius:8px;overflow:hidden;gap:2px;background:#f0f2f8}
.dev-bar.mobile{background:#5366e8}
.dev-bar.desktop{background:#66cbb3}
.device-legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.legend-item{display:flex;align-items:center;gap:8px;font-size:12px;color:#50607d}
.legend-dot{width:10px;height:10px;border-radius:3px}
.legend-dot.mobile{background:#5366e8}
.legend-dot.desktop{background:#66cbb3}

/* Project card performance row */
.project-metrics-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;background:#f8f9fd;border-radius:12px;padding:10px;margin-bottom:14px}
.p-stat{display:flex;flex-direction:column;gap:3px;text-align:center;min-width:0}
.p-stat small{font-size:9px;color:#808da5;text-transform:uppercase;letter-spacing:.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-stat strong{font-size:14px;color:#2e3a53;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-stat .stat-sub{font-size:10px;color:#8592a8;font-style:normal;font-weight:550}
.p-stat.alert{background:#fff1f3;border-radius:8px;padding:2px}
.p-stat.alert strong{color:#d34e68}
.p-stat.alert small{color:#cf6279}

@media(max-width:900px){
  .analytics-grid{grid-template-columns:1fr}
  .hourly-bars{gap:1px}
  .hourly-bar-col:nth-child(even) .bar-label{display:none}
}
@media(max-width:600px){
  .live-traffic-banner{padding:12px 14px}
  .live-summary-stats{font-size:11px;gap:4px 6px}
  .hourly-chart-card{padding:16px 14px}
  .analytics-card{padding:16px 14px}
  .project-metrics-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .hourly-bars{height:80px;gap:1px}
  .hourly-bar-col:not(:nth-child(6n+1)) .bar-label{display:none}
}

/* Interactive drilldown states & cards */
.clickable {
  cursor: pointer;
  user-select: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(61, 75, 140, 0.12);
}
.clickable:active {
  transform: translateY(0);
}
.metric.clickable:hover {
  border-color: var(--tone);
}
.metric-drill-tag {
  display: inline-block;
  margin-left: 4px;
  opacity: 0.6;
  font-weight: 700;
  transition: opacity .15s, transform .15s;
}
.metric.clickable:hover .metric-drill-tag {
  opacity: 1;
  transform: translate(2px, -2px);
}
.hourly-bar-col.clickable:hover .hourly-bar {
  filter: brightness(1.18);
  box-shadow: 0 0 10px rgba(83, 102, 232, 0.4);
}
.source-item.clickable:hover {
  background: #f8faff;
  border-radius: 8px;
  padding: 2px 4px;
}
.dev-bar.clickable:hover {
  filter: brightness(1.15);
}
.live-pulse.clickable:hover {
  background: #e3f5ec;
  border-radius: 8px;
  padding: 2px 6px;
}
.live-drill-hint {
  font-style: normal;
  font-weight: 700;
  color: #179667;
  margin-left: 3px;
}
.p-stat.clickable:hover {
  background: #edf1fc;
  border-radius: 8px;
}
.p-stat.clickable.alert:hover {
  background: #ffe5ea;
}
.project-counts > div.clickable:hover {
  background: #edf1fc;
}
.action-row.clickable:hover {
  background: #f9faff;
}
.art-chat.clickable:hover, .art-confirm.clickable:hover {
  transform: scale(1.05);
  box-shadow: 0 14px 30px rgba(121, 104, 165, 0.25);
}

/* Drilldown modal dialog - FULL WIDTH POPUP */
dialog.drilldown-dialog {
  width: min(1620px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  height: 92vh !important;
  max-height: 94vh !important;
  padding: 20px 24px !important;
  border-radius: 18px !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
  background: #ffffff !important;
  margin: auto !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  animation: modalPopupScale 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes modalPopupScale {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

dialog.drilldown-dialog::backdrop {
  background: rgba(15, 23, 42, 0.72) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

dialog.drilldown-dialog .dialog-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
  flex-shrink: 0 !important;
}

dialog.drilldown-dialog .dialog-head strong {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.4px !important;
}

dialog.drilldown-dialog .dialog-head button {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

dialog.drilldown-dialog .dialog-head button:hover {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border-color: #fca5a5 !important;
}

dialog.drilldown-dialog #dialogBody {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

dialog.drilldown-dialog .drill-wrap {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  gap: 12px !important;
  height: 100% !important;
}

dialog.drilldown-dialog .orders-split-layout,
.orders-split-layout {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  gap: 16px !important;
  align-items: stretch !important;
  position: relative !important;
  overflow: hidden !important;
  height: 100% !important;
}

dialog.drilldown-dialog .drill-list,
dialog.drilldown-dialog #drillContent,
.orders-split-layout #drillContent {
  flex: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  padding-right: 6px !important;
  scrollbar-width: thin;
}
.drill-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.drill-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
}
.drill-search {
  flex: 1;
  padding: 10px 14px;
  font-size: 13px;
  border: 1px solid #dae1f0;
  border-radius: 10px;
}
.drill-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.drill-tab {
  background: #f1f3fa;
  color: #61718d;
  border: 0;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.drill-tab:hover {
  background: #e4e8f4;
  color: #354562;
}
.drill-tab.active {
  background: #5366e8;
  color: #fff;
}
.drill-list {
  display: grid;
  gap: 10px;
  max-height: 60dvh;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}
.drill-card {
  background: #fff;
  border: 1px solid #e5e9f3;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.drill-card:hover {
  border-color: #ccd7ed;
  box-shadow: 0 4px 14px rgba(52, 69, 130, 0.05);
}
.drill-card.needs-action {
  border-left: 4px solid #e05d76;
  background: #fffbfa;
}
.drill-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.drill-project-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--p-color, #5366e8);
  background: color-mix(in srgb, var(--p-color, #5366e8) 12%, white);
  padding: 3px 8px;
  border-radius: 6px;
}
.drill-time {
  font-size: 10px;
  color: #8c9bb4;
  white-space: nowrap;
}
.drill-phone {
  font-size: 11px;
  color: #6b7b97;
  font-weight: 550;
}
.stage-badge {
  font-size: 9px;
  padding: 3px 7px;
  border-radius: 6px;
  font-weight: 650;
  background: #f1f3fa;
  color: #5d6e8b;
}
.stage-badge.action-alert {
  background: #fff0f3;
  color: #d84967;
  border: 1px solid #ffd4dd;
}
.unread-pill {
  font-size: 9px;
  background: #e04b68;
  color: #fff;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 700;
}
.drill-msg-snippet {
  background: #f8faff;
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 12px;
  line-height: 1.5;
  color: #3b4964;
}
.drill-msg-snippet p {
  margin: 0;
  font-size: 12px;
  color: #2b3952;
}
.msg-dir {
  font-size: 10px;
  font-weight: 700;
  color: #7b8ba6;
  display: block;
  margin-bottom: 2px;
}
.drill-next-action {
  font-size: 11px;
  color: #7158b4;
  background: #f6f3fd;
  border-radius: 6px;
  padding: 5px 8px;
}
.drill-next-action small {
  font-size: 11px;
}
.drill-order-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f9fafd;
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 12px;
}
.order-client {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.order-product {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.order-price {
  font-size: 14px;
  color: #228b57;
  font-weight: 750;
}
.city-tag {
  font-size: 10px;
  color: #637699;
}
.drill-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.drill-label {
  font-size: 11px;
  color: #7d8ea9;
}
.drill-code {
  background: #eef2fa;
  color: #4a5c82;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 11px;
  font-family: monospace;
}
.drill-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #7c8da8;
  margin-top: 4px;
  flex-wrap: wrap;
}
.drill-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.btn-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 650;
  border: 0;
  transition: background .15s, transform .15s;
}
.btn-act.inbox {
  background: #5366e8;
  color: #fff;
}
.btn-act.inbox:hover {
  background: #4052cf;
}
.btn-act.success {
  background: #24b274;
  color: #fff;
}
.btn-act.success:hover {
  background: #1c9862;
}
.btn-act.whatsapp {
  background: #25D366;
  color: #fff;
}
.btn-act.whatsapp:hover {
  background: #1eb956;
}
.btn-act.subtle {
  background: #f1f3fa;
  color: #4a5976;
}
.btn-act.subtle:hover {
  background: #e4e8f4;
  color: #27344e;
}
.action-done {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #1e9d64;
  background: #eafaf1;
  padding: 6px 10px;
  border-radius: 8px;
}
.drill-status-text {
  font-size: 11px;
  color: #8c9ab2;
}
.live-pill.compact {
  padding: 2px 6px;
  font-size: 8px;
}
.btn-act.danger {
  background: #fee2e2;
  color: #dc2626;
}
.btn-act.danger:hover {
  background: #fecaca;
  color: #b91c1c;
}
.btn-act.danger-hover:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}
.thread-card.ignored {
  opacity: 0.75;
  background: #f8fafc;
  border-style: dashed;
}

/* Sub-views Header & Navigation */
.subview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #edf1f7;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.subview-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.stage-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
}
.stage-dropdown {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
}

/* Chat Subview & Messages */
.chat-view-wrap {
  display: flex;
  flex-direction: column;
  max-height: calc(85vh - 120px);
}
.chat-messages-scroll {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  height: 200px;
  min-height: 140px;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.chat-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
  position: relative;
  display: flex;
  flex-direction: column;
}
.chat-bubble.in {
  align-self: flex-start;
  background: #ffffff;
  color: #1e293b;
  border: 1px solid #e2e8f0;
  border-bottom-left-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.chat-bubble.out {
  align-self: flex-end;
  background: #4f46e5;
  color: #ffffff;
  border-bottom-right-radius: 3px;
  box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2);
}
.chat-bubble-sender {
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 3px;
  opacity: 0.85;
}
.chat-bubble-body {
  white-space: pre-wrap;
}
.chat-bubble-time {
  font-size: 10px;
  margin-top: 4px;
  opacity: 0.75;
  align-self: flex-end;
}

/* Quick Response Chips */
.quick-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 2px;
  margin-top: 8px;
  white-space: nowrap;
}
.quick-chips-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  margin-right: 2px;
}
.quick-chip {
  padding: 5px 11px;
  border-radius: 14px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 11px;
  font-weight: 550;
  border: 1px solid #c7d2fe;
  cursor: pointer;
  transition: all .15s;
}
.quick-chip:hover {
  background: #e0e7ff;
  border-color: #a5b4fc;
}

/* Chat Reply Bar */
.chat-reply-bar {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-top: 8px;
}
#chatReplyInput {
  flex: 1;
  min-height: 44px;
  max-height: 100px;
  resize: vertical;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  font-size: 13px;
  font-family: inherit;
  color: #1e293b;
}
#chatReplyInput:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
.chat-reply-notice {
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
  padding: 6px 12px;
  border-radius: 8px;
}
.chat-reply-notice.success {
  background: #ecfdf5;
  color: #065f46;
}
.chat-reply-notice.error {
  background: #fef2f2;
  color: #991b1b;
}

/* Order Detail Sheet */
.order-detail-view-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.order-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.order-detail-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.order-detail-card h4 {
  margin: 0 0 6px 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #64748b;
}
.order-detail-card .field-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #1e293b;
}
.order-detail-card .field-label {
  color: #64748b;
  font-weight: 500;
}
.order-price-lg {
  font-size: 15px;
  color: #0f172a;
}
.order-notes-box {
  background: #fffbeb;
  border: 1px solid #fef3c7;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
  color: #92400e;
}
.order-notes-box p {
  margin: 4px 0 0 0;
}

/* Order Items Table */
.order-items-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px;
}
.order-items-card h4 {
  margin: 0 0 8px 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #475569;
}
.order-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.order-items-table th {
  text-align: left;
  padding: 8px;
  background: #f1f5f9;
  color: #475569;
  font-weight: 600;
  border-bottom: 1px solid #e2e8f0;
}
.order-items-table td {
  padding: 8px;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
}
.item-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
}

/* Order Actions Bar */
.order-actions-bar {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.actions-bar-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.actions-buttons-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.order-action-notice {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
}
.order-action-notice.success {
  background: #ecfdf5;
  color: #065f46;
}
.order-action-notice.error {
  background: #fef2f2;
  color: #991b1b;
}

/* ==========================================================================
   Popup in Popup / Sub-Dialog & Visitor Journey Styles
   ========================================================================== */
dialog.sub-dialog {
  width: min(780px, calc(100% - 24px));
  max-height: 86dvh;
  padding: 24px 26px;
  border-radius: 20px;
  border: 1px solid rgba(99, 102, 241, 0.25);
  box-shadow: 0 32px 90px rgba(15, 23, 42, 0.45);
  background: #ffffff;
  color: var(--ink);
  overflow-y: auto;
  z-index: 1000;
}
dialog.sub-dialog::backdrop {
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(5px);
}
dialog.sub-dialog.wide-sub-dialog {
  width: min(1180px, calc(100% - 20px));
}

/* Interactive visitor card in main list */
.visitor-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
.visitor-card:hover {
  border-color: #6366f1;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.14);
  transform: translateY(-1px);
}
.badge-scan {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .2px;
}

/* Visitor Detail Subview Container */
.visitor-detail-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Security Alert Box */
.security-alert-box {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 12px;
  color: #92400e;
  line-height: 1.5;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.security-alert-box strong {
  color: #78350f;
  white-space: nowrap;
}

/* Visitor Summary Grid */
.visitor-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.visitor-stat-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.visitor-stat-card .stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #64748b;
}
.visitor-stat-card .stat-val {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
.visitor-stat-card .stat-sub {
  font-size: 11px;
  color: #64748b;
}

/* Timeline & Journey Steps */
.journey-section {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.journey-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.journey-header h4 {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.journey-timeline {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 28px;
}
.journey-timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: #e2e8f0;
}
.journey-step-item {
  position: relative;
  padding-bottom: 16px;
}
.journey-step-item:last-child {
  padding-bottom: 0;
}
.step-dot {
  position: absolute;
  left: -28px;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #4f46e5;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 0 0 3px #ffffff, 0 2px 5px rgba(79, 70, 229, 0.25);
  z-index: 2;
}
.journey-step-item.suspicious .step-dot {
  background: #d97706;
  box-shadow: 0 0 0 3px #ffffff, 0 2px 5px rgba(217, 119, 6, 0.25);
}
.step-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.step-line-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.step-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  background: #ffffff;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  word-break: break-all;
}
.step-time-badge {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}
.step-duration-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #4338ca;
  background: #eef2ff;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 600;
  align-self: flex-start;
}

/* Subview footer actions */
.subview-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

/* Card AI Preview */
.card-ai-preview {
  margin: 8px 0 10px 0;
  padding: 8px 12px;
  background: linear-gradient(135deg, #f8fafc 0%, #f0fdf4 100%);
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.card-ai-preview:hover {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: #86efac;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.12);
}
.card-ai-preview-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.card-ai-hint {
  margin-left: auto;
  font-size: 11px;
  color: #059669;
  font-weight: 600;
}
.card-ai-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #1e293b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  direction: auto;
}

/* Modal Chat AI Box */
.chat-ai-box {
  margin: 10px 0;
  padding: 12px 14px;
  background: linear-gradient(135deg, #fbfbfe 0%, #f0f9ff 100%);
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.chat-ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.chat-ai-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #1e3a8a;
}
.chat-ai-title strong {
  font-weight: 700;
}
.ai-sparkle {
  font-size: 15px;
}
.ai-tag {
  font-size: 10.5px;
  font-weight: 700;
  color: #4338ca;
  background: #e0e7ff;
  padding: 2px 7px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.chat-ai-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.btn-ai {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.btn-ai.subtle {
  background: #ffffff;
  color: #475569;
  border-color: #cbd5e1;
}
.btn-ai.subtle:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.btn-ai.edit {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #93c5fd;
}
.btn-ai.edit:hover {
  background: #dbeafe;
  border-color: #60a5fa;
}
.btn-ai.send {
  background: #10b981;
  color: #ffffff;
  border-color: #059669;
}
.btn-ai.send:hover {
  background: #059669;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}
.btn-ai:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.chat-ai-draft-body {
  font-size: 13.5px;
  line-height: 1.5;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  white-space: pre-wrap;
  direction: auto;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

/* Chat Catalogue Bar */
.chat-catalogue-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  padding: 10px 14px;
  background: linear-gradient(135deg, #f0fdf4 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: 10px;
  flex-wrap: wrap;
}
.chat-catalogue-hint {
  font-size: 12px;
  color: #0369a1;
  font-weight: 500;
}

/* Subcategory Catalogue Modal & Grids */
.cat-browser-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cat-browser-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 0;
  background: #ffffff;
  padding: 8px 0;
  z-index: 5;
  border-bottom: 1px solid #e2e8f0;
}
.cat-search-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13.5px;
  outline: none;
  background: #f8fafc;
  transition: all 0.15s ease;
}
.cat-search-input:focus {
  background: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.cat-category-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.cat-pill-btn {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.cat-pill-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.cat-pill-btn.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #1d4ed8;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.cat-subcats-scroll {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: 62vh;
  overflow-y: auto;
  padding-right: 4px;
}

.cat-subcat-section {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.cat-subcat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
  flex-wrap: wrap;
}
.cat-subcat-icon {
  font-size: 18px;
}
.cat-subcat-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
}
.cat-subcat-badge {
  font-size: 11px;
  font-weight: 600;
  color: #2563eb;
  background: #eff6ff;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid #dbeafe;
}
.cat-subcat-meta {
  margin-left: auto;
  font-size: 11.5px;
  color: #64748b;
}

.cat-designs-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
@media (max-width: 1024px) {
  .cat-designs-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .cat-designs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cat-design-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  transition: all 0.15s ease;
}
.cat-design-card:hover {
  transform: translateY(-2px);
  border-color: #93c5fd;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.cat-design-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f8fafc;
  cursor: zoom-in;
  overflow: hidden;
}
.cat-design-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}
.cat-design-img-wrap:hover img {
  transform: scale(1.05);
}
.cat-zoom-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(15, 23, 42, 0.85);
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.cat-design-img-wrap:hover .cat-zoom-badge {
  opacity: 1;
}

.cat-design-info {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.cat-design-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: #1e40af;
  background: #dbeafe;
  padding: 2px 5px;
  border-radius: 4px;
  align-self: flex-start;
}
.cat-design-name {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-design-actions {
  display: flex;
  gap: 4px;
  margin-top: auto;
  padding-top: 6px;
  flex-wrap: wrap;
}
.btn-card-act {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.btn-card-act.zoom {
  background: #f1f5f9;
  color: #334155;
  border-color: #cbd5e1;
}
.btn-card-act.zoom:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.btn-card-act.insert {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}
.btn-card-act.insert:hover {
  background: #dbeafe;
}
.btn-card-act.wa {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}
.btn-card-act.wa:hover {
  background: #d1fae5;
}

/* Interactive HD Zoom Viewer (bach y zommi mziyan) */
dialog#hdZoomDialog,
.hd-zoom-dialog,
.hd-zoom-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: none;
  flex-direction: column;
  box-sizing: border-box;
}
dialog#hdZoomDialog[open],
.hd-zoom-dialog[open] {
  display: flex;
}
dialog#hdZoomDialog::backdrop {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(6px);
}
.hd-zoom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: rgba(15, 23, 42, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  gap: 12px;
  flex-wrap: wrap;
}
.hd-zoom-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.hd-zoom-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-zoom {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-zoom:hover {
  background: rgba(255, 255, 255, 0.25);
}
.btn-zoom.primary {
  background: #2563eb;
  border-color: #3b82f6;
}
.btn-zoom.primary:hover {
  background: #1d4ed8;
}
.btn-zoom.close {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  font-size: 16px;
  padding: 4px 10px;
}
.btn-zoom.close:hover {
  background: #ef4444;
  color: #ffffff;
}
.zoom-level-badge {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  font-weight: 700;
  color: #93c5fd;
  min-width: 48px;
  text-align: center;
}

.hd-zoom-viewport {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.hd-zoom-viewport.dragging {
  cursor: grabbing;
}
.hd-zoom-viewport img {
  max-width: 80vh;
  max-height: 75vh;
  object-fit: contain;
  transition: transform 0.08s ease-out;
  transform-origin: center center;
  will-change: transform;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
}

.hd-zoom-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: rgba(15, 23, 42, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  gap: 12px;
  flex-wrap: wrap;
}
.hd-zoom-footer-info {
  font-size: 12px;
  color: #94a3b8;
}
.hd-zoom-footer-actions {
  display: flex;
  gap: 8px;
}

/* Customer Screenshot Scanner (IA Vision) */
.chat-tools-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}
.chat-screenshot-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #ecfeff 0%, #f0fdf4 100%);
  border: 1px solid #a5f3fc;
  border-radius: 10px;
  transition: all 0.15s ease;
}
.chat-screenshot-bar.dragover {
  border-color: #0284c7;
  background: #e0f2fe;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2);
}
.chat-screenshot-hint {
  font-size: 12px;
  color: #0e7490;
  font-weight: 500;
}
.chat-vision-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #67e8f9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.12);
  margin-top: 6px;
  flex-wrap: wrap;
}
.chat-vision-badge {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  font-weight: 700;
  color: #0369a1;
  background: #e0f2fe;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #bae6fd;
}
.chat-vision-thumb {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #94a3b8;
  cursor: zoom-in;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.chat-vision-thumb:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}



.pochette-order-canvas{margin:12px 0;padding:14px 16px;border:1px solid #b7d8cf;border-radius:14px;background:#f3faf7;color:#143d33}
.pochette-order-canvas strong{display:block;font-size:13px;margin-bottom:8px}
.pochette-order-canvas pre{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 7px;line-height:1.55}
.pochette-order-canvas small{color:#527368;font-size:11px}

/* ── Supplier Confirmation & WhatsApp 1-Click Modal ────────────── */
.sup-confirm-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sup-order-summary-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
}
.sup-order-thumb {
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.sup-order-thumb img {
  width: 58px;
  height: 74px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  display: block;
}
.sup-order-thumb .zoom-pill {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(15, 23, 42, 0.82);
  color: #fff;
  border-radius: 4px;
  font-size: 9px;
  padding: 1px 4px;
  line-height: 1.1;
}
.sup-order-info {
  flex: 1;
  min-width: 0;
}
.sup-order-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.sup-order-client {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #334155;
  flex-wrap: wrap;
}
.sup-order-product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  font-weight: 600;
  color: #0f172a;
  font-size: 13px;
}
.sup-form-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
}
@media (max-width: 640px) {
  .sup-form-grid {
    grid-template-columns: 1fr;
  }
}
.sup-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sup-form-field label {
  font-size: 12.5px;
  color: #334155;
}
.margin-helper-pill {
  font-size: 11.5px;
  color: #0f172a;
}
.sup-batch-box {
  transition: all 0.2s ease;
}
.wa-preview-accordion summary {
  outline: none;
}
.order-supplier-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 600;
  margin-top: 4px;
}


/* ==========================================================================
   Structured Conversation Cards & Inline Mini-Chat
   ========================================================================== */
.conversation-card {
  padding: 14px 16px;
  gap: 10px;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.conv-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.conv-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.conv-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--p-color, #5366e8) 12%, white);
  color: var(--p-color, #5366e8);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid color-mix(in srgb, var(--p-color, #5366e8) 35%, white);
}

.conv-names {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.conv-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.conv-title {
  font-size: 14px;
  color: #0f172a;
  font-weight: 700;
}

.conv-phone-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: #059669;
  font-weight: 600;
  text-decoration: none;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 2px 7px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.conv-phone-link:hover {
  background: #d1fae5;
  border-color: #6ee7b7;
  color: #047857;
}

.conv-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Context Chips */
.conv-context-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.conv-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  line-height: 1.3;
}

.conv-chip.model-chip {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  font-weight: 700;
}

.conv-chip.theme-chip {
  background: #faf5ff;
  color: #7e22ce;
  border: 1px solid #e9d5ff;
}

.conv-chip.photo-chip {
  background: #fdf2f8;
  color: #be185d;
  border: 1px solid #fbcfe8;
}

.conv-chip.summary-chip {
  background: #fefce8;
  color: #854d0e;
  border: 1px solid #fef08a;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dialogue Box */
.conv-dialogue-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.conv-dialogue-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.45;
}

.dialogue-role {
  font-weight: 700;
  font-size: 11px;
  white-space: nowrap;
  padding-top: 1px;
}

.dialogue-role.client-label {
  color: #059669;
}

.dialogue-role.team-label {
  color: #475569;
}

.dialogue-body {
  color: #1e293b;
  direction: auto;
  word-break: break-word;
  flex: 1;
}

.dialogue-body.client-body {
  font-weight: 600;
  color: #0f172a;
}

.dialogue-body.team-body {
  color: #475569;
}

/* Inline Mini-Chat Accordion */
.conv-mini-chat-wrapper {
  margin: 2px 0;
}

.btn-toggle-mini-chat {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-toggle-mini-chat:hover,
.btn-toggle-mini-chat.active {
  background: #e2e8f0;
  border-color: #94a3b8;
  color: #0f172a;
}

.conv-mini-chat-timeline {
  max-height: 250px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  padding: 10px 12px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
}

.mini-bubble-row {
  display: flex;
  width: 100%;
}

.mini-bubble-row.from-client {
  justify-content: flex-start;
}

.mini-bubble-row.from-team {
  justify-content: flex-end;
}

.mini-bubble {
  max-width: 82%;
  padding: 7px 11px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.mini-bubble-row.from-client .mini-bubble {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-bottom-left-radius: 2px;
}

.mini-bubble-row.from-team .mini-bubble {
  background: #f0f4ff;
  border: 1px solid #c7d2fe;
  border-bottom-right-radius: 2px;
}

.mini-bubble-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
  font-size: 10px;
}

.mini-bubble-row.from-client .mini-author {
  font-weight: 700;
  color: #065f46;
}

.mini-bubble-row.from-team .mini-author {
  font-weight: 700;
  color: #1e40af;
}

.mini-time {
  color: #64748b;
  font-size: 9.5px;
}

.mini-bubble-text {
  color: #1e293b;
  direction: auto;
  word-break: break-word;
  white-space: pre-wrap;
}

/* Proposition IA Actions */
.card-ai-actions-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.btn-copy-ai {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-copy-ai:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}


/* Multi-Item Orders Layout in Drilldown Cards */
.order-client-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.multi-count-badge {
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: -0.2px;
}

.order-multi-items-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px;
  margin-top: 4px;
}

.multi-item-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: border-color .15s, background .15s, box-shadow .15s;
}

.multi-item-entry:hover {
  border-color: #cbd5e1;
  background: #fbfcfe;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.multi-item-num {
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  min-width: 22px;
  background: #f1f5f9;
  border-radius: 4px;
  text-align: center;
  padding: 2px 4px;
}

.multi-item-thumb-box {
  width: 38px;
  height: 50px;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}

.multi-item-thumb-img {
  width: 38px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  display: block;
}

.multi-item-thumb-placeholder {
  width: 38px;
  height: 50px;
  border-radius: 6px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.multi-item-body {
  flex: 1;
  min-width: 0;
}

.multi-item-model-line {
  font-weight: 700;
  color: #0f172a;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.multi-item-qty-badge {
  background: #f1f5f9;
  color: #334155;
  font-size: 10.5px;
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  font-weight: 600;
}

.multi-item-design-line {
  font-size: 11.5px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.multi-item-price-tag {
  text-align: right;
  font-weight: 700;
  color: #0f172a;
  font-size: 12.5px;
  white-space: nowrap;
}

.order-notes-clean {
  font-size: 11px;
  color: #475569;
  background: #f8fafc;
  border-left: 2px solid #8b5cf6;
  padding: 3px 8px;
  margin-top: 4px;
  border-radius: 0 4px 4px 0;
  line-height: 1.4;
}

.sup-items-preview-strip {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.sup-item-mini-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11.5px;
}

/* --- Inline Editable Items on Order Cards (No Modal Required) --- */
.multi-item-entry.is-inline-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all .15s ease;
}

.multi-item-entry.is-inline-row:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.multi-item-entry.flash-success {
  border-color: #22c55e !important;
  background: #f0fdf4 !important;
}

.multi-item-inline-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.multi-item-inline-top,
.multi-item-inline-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.inline-fld {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 2px 6px;
  height: 25px;
  box-sizing: border-box;
  transition: border-color .15s, background .15s, box-shadow .15s;
}

.inline-fld:focus-within {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 1.5px rgba(37, 99, 235, 0.15);
}

.inline-fld input {
  border: none !important;
  background: transparent !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 100% !important;
  outline: none !important;
  box-shadow: none !important;
  width: 100%;
}

.inline-icon {
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}

.inline-lbl {
  font-size: 10px;
  color: #64748b;
  font-weight: 700;
  flex-shrink: 0;
}

.inline-curr {
  font-size: 10px;
  color: #64748b;
  font-weight: 700;
  flex-shrink: 0;
}

.inline-fld-model {
  flex: 1.4;
  min-width: 115px;
}

.inline-fld-qty {
  width: 54px;
  flex-shrink: 0;
}

.inline-fld-qty input {
  text-align: center;
}

.inline-fld-price {
  width: 76px;
  flex-shrink: 0;
}

.inline-fld-price input {
  text-align: right;
  font-weight: 700;
  color: #16a34a !important;
}

.inline-fld-design {
  flex: 1;
  min-width: 130px;
}

.inline-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.btn-inline-save {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.2;
  transition: all .15s ease;
  height: 25px;
  box-sizing: border-box;
}

.btn-inline-save:hover {
  background: #16a34a;
  color: #ffffff;
  border-color: #15803d;
}

.btn-inline-save.saved-success {
  background: #16a34a !important;
  color: #ffffff !important;
  border-color: #15803d !important;
}

.btn-inline-delete {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 11px;
  cursor: pointer;
  line-height: 1;
  height: 25px;
  box-sizing: border-box;
  transition: all .15s ease;
}

.btn-inline-delete:hover {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

/* --- Inline Adder Card --- */
.order-inline-adder {
  background: #f8fafc;
  border: 1.5px dashed #3b82f6;
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: fadeInDown .15s ease;
}

.inline-adder-bar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.inline-adder-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #1e40af;
}

.btn-close-inline-adder {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 13px;
  cursor: pointer;
  padding: 0 4px;
}

.inline-adder-search-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.inline-adder-search-input {
  flex: 1;
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  background: #fff;
  outline: none;
}

.inline-adder-search-input:focus {
  border-color: #3b82f6;
}

.btn-inline-search-go {
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.inline-adder-quick-chips {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.adder-chip {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  color: #334155;
  cursor: pointer;
  transition: all .1s ease;
}

.adder-chip:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.inline-adder-results-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 2px;
  max-height: 105px;
}

.inline-result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 62px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 3px;
  cursor: pointer;
  text-align: center;
  transition: all .15s ease;
}

.inline-result-card:hover {
  border-color: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.inline-result-thumb {
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: 4px;
  background: #f8fafc;
}

.inline-result-name {
  font-size: 9px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  margin-top: 2px;
}

.inline-result-id {
  font-size: 8px;
  color: #2563eb;
  font-weight: 800;
}

.inline-adder-selected-design {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 4px 8px;
}

.selected-design-thumb {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 3px;
  background: #fff;
  border: 1px solid #cbd5e1;
}

.inline-adder-fields-grid {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.inline-adder-actions-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 2px;
}

.btn-cancel-inline-adder {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.btn-submit-inline-adder {
  background: #16a34a;
  color: #ffffff;
  border: 1px solid #15803d;
  border-radius: 5px;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
}

.btn-submit-inline-adder:hover {
  background: #15803d;
}


/* --- Pochette Order Item CRUD & Modal Styling --- */
.multi-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
}

.btn-item-action {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 11px;
  cursor: pointer;
  line-height: 1;
  transition: all .15s ease;
}

.btn-item-action:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  transform: translateY(-1px);
}

.btn-item-action.btn-item-delete-trigger:hover,
.btn-item-action.btn-item-delete-detail-trigger:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}

.btn-item-action.btn-item-edit-trigger:hover,
.btn-item-action.btn-item-edit-detail-trigger:hover {
  background: #e0f2fe;
  border-color: #7dd3fc;
  color: #0369a1;
}

.order-items-add-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.btn-add-item-trigger {
  background: #f0fdf4;
  color: #166534;
  border: 1px dashed #86efac;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all .15s ease;
  width: 100%;
  justify-content: center;
}

.btn-add-item-trigger:hover {
  background: #dcfce7;
  border-color: #22c55e;
  border-style: solid;
}

.order-item-modal-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #1e293b;
  max-width: 760px;
  margin: 0 auto;
}

.item-modal-order-banner {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}

.item-modal-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 6px;
}

.item-modal-tab-btn {
  background: none;
  border: none;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s ease;
}

.item-modal-tab-btn.active {
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}

.item-modal-search-box {
  display: flex;
  gap: 8px;
  align-items: center;
}

.item-modal-search-input {
  flex: 1;
  padding: 9px 12px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13.5px;
  outline: none;
  transition: border-color .15s;
}

.item-modal-search-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.item-quick-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.item-chip {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all .15s ease;
}

.item-chip:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.item-modal-categories-bar {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.item-cat-pill {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s ease;
}

.item-cat-pill.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

.item-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
  gap: 8px;
  max-height: 230px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fafafa;
}

.design-pick-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all .15s ease;
  position: relative;
  text-align: center;
}

.design-pick-card:hover {
  border-color: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.design-pick-card.selected {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 2px #2563eb;
}

.design-pick-img {
  width: 100%;
  height: 95px;
  object-fit: cover;
  border-radius: 4px;
  background: #fff;
}

.design-pick-id {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 4px;
  line-height: 1.2;
}

.design-pick-name {
  font-size: 11px;
  font-weight: 600;
  color: #0f172a;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.item-selected-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 8px;
  padding: 8px 12px;
}

.item-selected-preview img {
  width: 50px;
  height: 65px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #bbf7d0;
  background: #fff;
}

.item-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 640px) {
  .item-form-grid {
    grid-template-columns: 1fr;
  }
}

.item-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.item-form-group label {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}

.item-form-group input,
.item-form-group select {
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
}

.item-form-group input:focus,
.item-form-group select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.item-qty-price-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.item-stepper-wrap {
  display: inline-flex;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  overflow: hidden;
}

.item-stepper-btn {
  background: #f1f5f9;
  border: none;
  width: 32px;
  height: 34px;
  font-size: 15px;
  font-weight: bold;
  color: #334155;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-stepper-btn:hover {
  background: #e2e8f0;
}

.item-stepper-input {
  width: 44px;
  height: 34px;
  text-align: center;
  border: none;
  font-weight: 700;
  font-size: 14px;
}

.item-total-display-badge {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  color: #0f172a;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  white-space: nowrap;
}

.item-modal-actions-bar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}


/* SUPPLIER FINANCIAL LEDGER & PAYMENTS STYLING */
.supp-financial-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  padding: 10px 14px;
  margin-top: 10px;
}
.supp-fin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.supp-fin-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.supp-fin-title {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
}
.supp-fin-val {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.supp-fin-val.credit { color: #059669; }
.supp-fin-val.debit { color: #d97706; }
.supp-fin-val.settled { color: #64748b; }

.supp-fin-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
}
.supp-fin-tag.credit { background: #dcfce7; color: #166534; }
.supp-fin-tag.debit { background: #fef3c7; color: #92400e; }
.supp-fin-tag.settled { background: #f1f5f9; color: #475569; }

.supp-fin-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.supp-fin-sub {
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.supp-fin-pending-badge {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fef3c7;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.supp-payments-strip {
  margin-top: 10px;
  border-top: 1px dashed #e2e8f0;
  padding-top: 8px;
}
.supp-pay-strip-title {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 6px;
}
.supp-pay-items-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 140px;
  overflow-y: auto;
}
.supp-pay-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #edf2f7;
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 11px;
}
.pay-item-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pay-item-amount {
  color: #0f172a;
  font-size: 12px;
}
.pay-item-type {
  background: #e2e8f0;
  color: #334155;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}
.pay-item-date {
  color: #64748b;
}
.pay-item-note {
  color: #475569;
  font-style: italic;
}
.pay-item-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pay-item-status {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}
.pay-item-status.confirmed {
  background: #dcfce7;
  color: #166534;
}
.pay-item-status.pending {
  background: #fef3c7;
  color: #92400e;
}
.pay-item-status.disputed {
  background: #fee2e2;
  color: #991b1b;
}
.btn-pay-remind-wa {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}
.btn-pay-remind-wa:hover {
  background: #10b981;
  color: #fff;
}
.btn-pay-delete {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 12px;
}
.btn-pay-delete:hover {
  color: #dc2626;
}
.supp-pay-empty-hint {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
  margin-top: 6px;
}

/* Workshop & Delay operational row on Project Card */
.project-workshop-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
@media (max-width: 680px) {
  .project-workshop-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.p-substat.active-ws-substat {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.p-substat.active-ws-substat:hover {
  border-color: #86efac;
  background: #dcfce7;
}
.p-substat.active-ws-substat .substat-label span {
  color: #166534;
  font-weight: 600;
}
.p-substat.active-ws-substat .substat-val strong {
  color: #15803d;
}
.p-substat {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.15s ease;
  cursor: pointer;
  user-select: none;
}
.p-substat:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.p-substat .substat-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.2;
}
.p-substat .substat-val {
  font-size: 16px;
  font-weight: 750;
  color: #1e293b;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.p-substat .arrow-glyph {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 400;
}
.p-substat.warn-substat {
  background: #fffbeb;
  border-color: #fde68a;
}
.p-substat.warn-substat .substat-label {
  color: #b45309;
}
.p-substat.warn-substat .substat-val {
  color: #d97706;
}
.p-substat.warn-substat:hover {
  background: #fef3c7;
  border-color: #fcd34d;
}
.p-substat.danger-substat {
  background: #fef2f2;
  border-color: #fecaca;
}
.p-substat.danger-substat .substat-label {
  color: #b91c1c;
}
.p-substat.danger-substat .substat-val {
  color: #dc2626;
}
.p-substat.danger-substat:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}
.substat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.substat-dot.warn {
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}
.substat-dot.danger {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
  animation: pulse-dot-anim 1.5s infinite;
}
@keyframes pulse-dot-anim {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}

/* Order card delay styling */
.order-card-delayed {
  border-left: 3px solid #ef4444 !important;
  background: linear-gradient(90deg, rgba(254, 242, 242, 0.35) 0%, #fff 10%) !important;
}
.status-pill.delay-pill {
  animation: pulse-badge 2s infinite ease-in-out;
}
@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}
.workshop-unassigned-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 6px 10px;
  margin-top: 6px;
  font-size: 11.5px;
  color: #92400e;
}


/* --- DELAY BREAKDOWN SYSTEM --- */
.project-delay-breakdown-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 10px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.p-delay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}
.p-delay-title {
  font-weight: 700;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 4px;
}
.p-delay-sub {
  font-size: 10.5px;
  font-weight: 600;
  color: #64748b;
  background: #e2e8f0;
  padding: 1px 6px;
  border-radius: 10px;
}
.p-delay-sub.has-delays {
  background: #fee2e2;
  color: #b91c1c;
}
.p-delay-chips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 5px;
}
.p-delay-chip {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  transition: all 0.15s ease;
  user-select: none;
}
.p-delay-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.p-delay-chip .d-icon {
  font-size: 11px;
  line-height: 1;
}
.p-delay-chip .d-label {
  flex: 1;
  color: #64748b;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-delay-chip .d-val {
  color: #1e293b;
  font-weight: 750;
  font-size: 11.5px;
}
.p-delay-chip.is-active.danger {
  background: #fef2f2;
  border-color: #fca5a5;
}
.p-delay-chip.is-active.danger .d-label { color: #b91c1c; }
.p-delay-chip.is-active.danger .d-val { color: #dc2626; }

.p-delay-chip.is-active.warn {
  background: #fffbeb;
  border-color: #fde68a;
}
.p-delay-chip.is-active.warn .d-label { color: #b45309; }
.p-delay-chip.is-active.warn .d-val { color: #d97706; }

.p-delay-chip.is-active.purple {
  background: #f5f3ff;
  border-color: #ddd6fe;
}
.p-delay-chip.is-active.purple .d-label { color: #6d28d9; }
.p-delay-chip.is-active.purple .d-val { color: #7c3aed; }

.p-delay-chip.is-active.blue {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.p-delay-chip.is-active.blue .d-label { color: #1d4ed8; }
.p-delay-chip.is-active.blue .d-val { color: #2563eb; }

.p-delay-chip.is-active.incident {
  background: #fff1f2;
  border-color: #fecdd3;
}
.p-delay-chip.is-active.incident .d-label { color: #be123c; }
.p-delay-chip.is-active.incident .d-val { color: #e11d48; }

/* Bottom action delay pills */
.project-role-pill-btn.delay-chip-pill {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.15s ease;
}
.project-role-pill-btn.delay-chip-pill:hover {
  transform: translateY(-1px);
}
.project-role-pill-btn.delay-chip-pill.ws {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
  font-weight: 700;
}
.project-role-pill-btn.delay-chip-pill.conf {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}
.project-role-pill-btn.delay-chip-pill.aff {
  background: #fff7ed;
  border-color: #ffedd5;
  color: #c2410c;
}
.project-role-pill-btn.delay-chip-pill.shp {
  background: #f5f3ff;
  border-color: #ddd6fe;
  color: #6d28d9;
}
.project-role-pill-btn.delay-chip-pill.del {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.project-role-pill-btn.delay-chip-pill.inc {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
  font-weight: 700;
}

/* Drilldown delay sub-filters */
.drill-delay-subfilters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin: 6px 0 10px 0;
}
.delay-subfilters-label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
}
.delay-sub-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}
.delay-sub-pill:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.delay-sub-pill.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

/* Distinct Delay Badges on Order Cards */
.status-pill.delay-pill-workshop {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fca5a5 !important;
  font-size: 11px;
  font-weight: 750;
  animation: pulse-badge 2s infinite ease-in-out;
}
.status-pill.delay-pill-confirmation {
  background: #fffbeb !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
  font-size: 11px;
  font-weight: 700;
}
.status-pill.delay-pill-unassigned {
  background: #fff7ed !important;
  color: #c2410c !important;
  border: 1px solid #ffedd5 !important;
  font-size: 11px;
  font-weight: 700;
}
.status-pill.delay-pill-shipping {
  background: #f5f3ff !important;
  color: #6d28d9 !important;
  border: 1px solid #ddd6fe !important;
  font-size: 11px;
  font-weight: 700;
}
.status-pill.delay-pill-delivery {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
  font-size: 11px;
  font-weight: 700;
}
.status-pill.delay-pill-incident {
  background: #fff1f2 !important;
  color: #be123c !important;
  border: 1px solid #fecdd3 !important;
  font-size: 11px;
  font-weight: 750;
  animation: pulse-badge 1.5s infinite ease-in-out;
}

.delay-reason-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}
.delay-badge-workshop { color: #dc2626; background: rgba(239, 68, 68, 0.08); }
.delay-badge-confirmation { color: #d97706; background: rgba(217, 119, 6, 0.08); }
.delay-badge-unassigned { color: #ea580c; background: rgba(234, 88, 12, 0.08); }
.delay-badge-shipping { color: #7c3aed; background: rgba(124, 58, 237, 0.08); }
.delay-badge-delivery { color: #2563eb; background: rgba(37, 99, 235, 0.08); }
.delay-badge-incident { color: #e11d48; background: rgba(225, 29, 72, 0.08); }


/* Compact Wrapped Action Badges on Project Card */
.project-badges-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}

.project-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
}

.project-badge-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.project-badge-pill.studio {
  background: #faf5ff;
  color: #7e22ce;
  border-color: #e9d5ff;
}
.project-badge-pill.studio:hover {
  background: #7e22ce;
  color: #ffffff;
  border-color: #7e22ce;
}

.project-badge-pill.supp {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}
.project-badge-pill.supp:hover {
  background: #16a34a;
  color: #ffffff;
  border-color: #16a34a;
}
.project-badge-pill.supp .pill-act {
  color: #166534;
  font-weight: 700;
}
.project-badge-pill.supp:hover .pill-act {
  color: #ffffff;
}
.project-badge-pill.supp .pill-warn {
  color: #b45309;
  font-weight: 700;
}
.project-badge-pill.supp:hover .pill-warn {
  color: #fef08a;
}

.project-badge-pill.delay-alert {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
  font-weight: 700;
}
.project-badge-pill.delay-alert:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
}

.project-badge-pill.conf {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}
.project-badge-pill.conf:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

.project-badge-pill.hub {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}
.project-badge-pill.hub:hover {
  background: #d97706;
  color: #ffffff;
  border-color: #d97706;
}

.project-badge-pill.ram {
  background: #f5f3ff;
  color: #6d28d9;
  border-color: #ddd6fe;
}
.project-badge-pill.ram:hover {
  background: #7c3aed;
  color: #ffffff;
  border-color: #7c3aed;
}

@media (max-width: 600px) {
  .project-badge-pill {
    height: 26px;
    padding: 0 8px;
    font-size: 10px;
  }
}


/* ==========================================================================
   CONVERSATIONS HORIZONTAL PROFILES REEL & INLINE ACTIONS REDESIGN
   ========================================================================== */
.conv-profiles-reel-wrap {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 14px;
  padding: 8px 10px 10px 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.conv-profiles-reel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
}
.conv-profiles-reel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 6px 2px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.conv-profiles-reel::-webkit-scrollbar {
  height: 5px;
}
.conv-profiles-reel::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}
.conv-profiles-reel::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.conv-profiles-reel::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.conv-profile-capsule {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 82px;
  max-width: 95px;
  flex-shrink: 0;
  cursor: pointer;
  text-align: center;
  gap: 4px;
  padding: 6px 4px;
  border-radius: 10px;
  transition: all 0.2s ease;
  border: 1.5px solid transparent;
}
.conv-profile-capsule:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  transform: translateY(-2px);
}
.conv-profile-capsule.active {
  background: #eff6ff;
  border-color: #3b82f6;
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.15);
}

.capsule-avatar-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  padding: 2px;
  position: relative;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.06);
  transition: transform 0.15s;
}
.capsule-avatar-ring.ring-confirmed { border: 2.5px solid #10b981; }
.capsule-avatar-ring.ring-interested { border: 2.5px solid #8b5cf6; }
.capsule-avatar-ring.ring-action { border: 2.5px solid #f59e0b; }
.capsule-avatar-ring.ring-waiting { border: 2.5px solid #3b82f6; }

.capsule-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.capsule-text-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  background: color-mix(in srgb, var(--p-color, #5366e8) 14%, white);
  color: var(--p-color, #5366e8);
}
.capsule-icon-avatar {
  font-size: 22px;
  line-height: 1;
}
.capsule-unread-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: #ef4444;
  border: 2px solid #fff;
  border-radius: 50%;
}

.capsule-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.capsule-model {
  font-size: 10.5px;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 82px;
}
.capsule-phone {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 82px;
}
.capsule-stage {
  font-size: 8px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
  max-width: 82px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.capsule-stage.stage-confirmed { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.capsule-stage.stage-interested { background: #faf5ff; color: #6b21a8; border: 1px solid #e9d5ff; }
.capsule-stage.stage-action { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.capsule-stage.stage-waiting { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

/* INLINE ORDER & ACTIONS SECTION FIRST */
.conv-order-inline-box {
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 8px 0;
}
.conv-contact-inputs-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.conv-inp-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 105px;
}
.conv-inp-group.flex-1 {
  flex: 1;
  min-width: 140px;
}
.conv-inp-group label {
  font-size: 9.5px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.conv-order-inline-box .inp-sm,
.conv-order-inline-box .sel-sm {
  height: 28px;
  font-size: 11.5px;
  padding: 2px 7px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  color: #0f172a;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.conv-order-inline-box .inp-sm:focus,
.conv-order-inline-box .sel-sm:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}

.conv-products-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.conv-products-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 800;
  color: #1e293b;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 5px;
}
.conv-total-pill {
  background: #0f172a;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
}
.conv-items-rows-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.conv-item-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  border-bottom: 1px dashed #f1f5f9;
}
.conv-item-row:last-child {
  border-bottom: none;
}
.conv-item-thumb {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.conv-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.conv-item-ph {
  font-size: 14px;
}
.conv-inp-item-model {
  flex: 1.2;
  min-width: 100px;
}
.conv-inp-item-title {
  flex: 1.5;
  min-width: 120px;
}
.conv-item-qty-wrap {
  width: 48px;
  flex-shrink: 0;
}
.conv-item-price-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 78px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: #059669;
}
.conv-item-price-wrap input {
  width: 52px;
}
.btn-del-conv-item {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #dc2626;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}
.btn-del-conv-item:hover {
  background: #fee2e2;
  border-color: #f87171;
}
.btn-add-item-row {
  align-self: flex-start;
  background: #eff6ff;
  border: 1px dashed #93c5fd;
  color: #1d4ed8;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-add-item-row:hover {
  background: #dbeafe;
  border-color: #60a5fa;
}

.conv-actions-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 2px;
}
.btn-save-order {
  background: #059669 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 800 !important;
  font-size: 11.5px !important;
  padding: 6px 14px !important;
  border-radius: 7px !important;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(5,150,105,0.25);
  transition: background 0.15s, transform 0.1s;
}
.btn-save-order:hover {
  background: #047857 !important;
  transform: translateY(-1px);
}
.btn-saved-success {
  background: #10b981 !important;
}

/* DISCUSSION AT THE END */
.conv-discussion-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  border-top: 1px dashed #e2e8f0;
  padding-top: 8px;
}

.flash-highlight {
  animation: flashGlow 1.8s ease;
}
@keyframes flashGlow {
  0% { background: #dbeafe; }
  100% { background: #ffffff; }
}


/* SIDE CHAT DRAWER & CLIENT INLINE EDITING IN ORDERS DRILLDOWN */
dialog.drilldown-dialog.has-side-chat {
  width: min(1620px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
}

.orders-split-layout {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  gap: 16px !important;
  align-items: stretch !important;
  position: relative !important;
  overflow: hidden !important;
  height: 100% !important;
}

.orders-split-layout #drillContent {
  flex: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  padding-right: 6px !important;
  scrollbar-width: thin;
}

/* Side Chat Drawer */
.orders-side-chat-drawer {
  width: 440px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  height: 100% !important;
  max-height: 100% !important;
  position: relative;
  animation: slideDrawerIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 900px) {
  dialog.drilldown-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    inset: 0 !important;
  }
  .orders-split-layout {
    flex-direction: column !important;
  }
  .orders-side-chat-drawer {
    width: 100% !important;
    height: 60vh !important;
  }
}

@keyframes slideDrawerIn {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.side-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
}

.side-chat-title-box {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.side-chat-title-box strong {
  font-size: 13px;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-chat-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

.side-chat-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.btn-side-head {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  color: #334155;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  transition: all 0.15s;
}

.btn-side-head:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
}

.btn-side-head.btn-side-close {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
  font-weight: 700;
  font-size: 12px;
}

.btn-side-head.btn-side-close:hover {
  background: #fee2e2;
  color: #b91c1c;
}

.side-chat-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 12px;
}

.side-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.side-msg-bubble {
  max-width: 85%;
  padding: 8px 11px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.4;
  word-break: break-word;
}

.side-msg-bubble.is-in {
  align-self: flex-start;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-bottom-left-radius: 2px;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.side-msg-bubble.is-out {
  align-self: flex-end;
  background: #dcf8c6;
  border: 1px solid #bbf7d0;
  border-bottom-right-radius: 2px;
  color: #064e3b;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.side-msg-time {
  font-size: 9.5px;
  opacity: 0.7;
  margin-top: 4px;
  text-align: right;
}

.side-chat-empty {
  padding: 24px 12px;
  text-align: center;
  color: #64748b;
  font-size: 12px;
}

.side-templates {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.btn-side-tpl {
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11px;
  color: #2563eb;
  text-align: left;
  cursor: pointer;
  line-height: 1.3;
  transition: all 0.15s;
}

.btn-side-tpl:hover {
  background: #eff6ff;
  border-color: #3b82f6;
}

.side-chat-smart-box {
  padding: 8px 12px;
  background: #f5f3ff;
  border-top: 1px solid #e0e7ff;
  border-bottom: 1px solid #e0e7ff;
  font-size: 12px;
}

.side-smart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  color: #4338ca;
  font-size: 11px;
  margin-bottom: 4px;
}

.btn-use-smart {
  background: #6366f1;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
}

.btn-use-smart:hover {
  background: #4f46e5;
}

.side-smart-text {
  color: #312e81;
  font-style: italic;
  max-height: 65px;
  overflow-y: auto;
  line-height: 1.35;
}

.side-chat-footer {
  padding: 10px 12px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.side-chat-input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  resize: none;
  font-family: inherit;
  outline: none;
}

.side-chat-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.side-chat-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.side-chat-tip {
  font-size: 10px;
  color: #94a3b8;
}

.btn-side-send {
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-side-send:hover {
  background: #1d4ed8;
}

/* Active Chat Card Styling */
.order-card.is-chat-active {
  border: 2px solid #2563eb !important;
  background: #f8faff !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
  position: relative;
}

.active-chat-card-banner {
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #bfdbfe;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* CLIENT INLINE CARD (ORGANIZED INPUTS) */
.order-client-inline-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 6px;
}

.client-inline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.client-inline-title {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.btn-inline-save-client {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}

.btn-inline-save-client:hover {
  background: #16a34a;
  color: #ffffff;
  border-color: #15803d;
}

.client-inline-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.order-client-inline-card .inline-fld {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  height: 28px;
  padding: 0 6px;
  gap: 4px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.order-client-inline-card .inline-fld:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.order-client-inline-card .inline-icon {
  font-size: 12px;
  opacity: 0.75;
  flex-shrink: 0;
}

.order-client-inline-card input,
.order-client-inline-card select {
  border: none;
  outline: none;
  background: transparent;
  font-size: 11.5px;
  color: #0f172a;
  width: 100%;
  font-family: inherit;
  font-weight: 500;
  min-width: 0;
}