:root {
/* Bảng màu theo Google Material 3 / Workspace admin console */
--bg: #F4F5FA;
--panel: #ffffff;
--border: #dadce0;
--text: #202124;
--text-muted: #5f6368;
--accent: #5E50D6; /* Đồng bộ tông màu logo với sidebar */
--accent-hover: #3D2EC3;
--accent-soft: #ECEBFB;
--accent-2: #7047ED;
--accent-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
--accent-border: #E0DEF2;
--surface-subtle: #FAF9FF;
--focus-ring: rgba(94,80,214,.24);
--warn: #b06000; /* text đủ tương phản trên nền vàng */
--warn-soft: #fef7e0; /* Google Yellow 50 */
--danger: #d93025; /* Google Red 600 */
--danger-soft: #fce8e6;
--blue: #1a73e8;
--blue-soft: #e8f0fe;
--purple: #9334e6; /* Google Purple 500 */
--purple-soft: #f3e8fd;
--green: #1e8e3e; /* Google Green 600 */
--green-soft: #e6f4ea;
/* Tông màu logo 19bot (xanh dương -> tím) dùng riêng cho menu trái */
--brand-blue: #3b5bfd;
--brand-purple: #9b3ff5;
--brand-text: #4b3fa8;
--brand-soft-start: rgba(59,91,253,.10);
--brand-soft-end: rgba(155,63,245,.10);
--radius: 12px;
--shadow-1: 0 1px 2px 0 rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15);
--shadow-2: 0 1px 3px 0 rgba(60,64,67,.30), 0 4px 8px 3px rgba(60,64,67,.15);
}
* { box-sizing: border-box; }
html, body {
margin: 0;
height: 100%;
overflow: hidden;
}
body {
background: var(--bg);
color: var(--text);
font-family: "Google Sans Text", Roboto, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
}
button { font-family: inherit; }
button:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 2px;
}
.hidden { display: none !important; }
/* ===================== LOGIN SCREEN ===================== */
#login-screen {
height: 100vh; min-height: 100vh; display: flex;
background: var(--panel);
overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* ---- Left panel: decorative, brand story (hidden on narrow screens) ---- */
.login-hero {
position: relative; flex: 1 1 46%; min-width: 0; overflow: hidden;
display: flex; flex-direction: column; justify-content: space-between;
padding: 48px 56px; box-sizing: border-box;
background:
radial-gradient(560px 420px at 12% 8%, var(--brand-soft-start), transparent 60%),
radial-gradient(560px 460px at 90% 85%, var(--brand-soft-end), transparent 60%),
#fbfaff;
}
.login-hero-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: var(--brand-text); position: relative; z-index: 2; }
.login-hero-brand .dot { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple)); }
.login-hero-scatter { position: relative; flex: 1; margin: 28px 0; min-height: 220px; }
.login-bubble {
position: absolute; border-radius: 50%; display: flex; align-items: center; justify-content: center;
box-shadow: 0 10px 24px rgba(60,50,120,.14); font-size: 20px; color: #fff;
animation: bubble-float 4s ease-in-out infinite;
}
.login-bubble.b1 { top: 4%; left: 6%; width: 64px; height: 64px; background: linear-gradient(135deg,#3b5bfd,#5b7bff); animation-delay: 0s; }
.login-bubble.b2 { top: 20%; left: 46%; width: 46px; height: 46px; background: linear-gradient(135deg,#9b3ff5,#c17bff); animation-delay: .8s; }
.login-bubble.b3 { top: 2%; left: 78%; width: 54px; height: 54px; background: linear-gradient(135deg,#1e8e3e,#3fb862); animation-delay: 1.6s; }
.login-bubble.b4 { top: 42%; left: 10%; width: 40px; height: 40px; background: linear-gradient(135deg,#f2a93b,#f7c873); animation-delay: 2.2s; }
.login-bubble.b5 { top: 48%; left: 68%; width: 70px; height: 70px; background: #fff; color: var(--accent); box-shadow: 0 12px 28px rgba(60,50,120,.16); animation-delay: .4s; }
.login-bubble.b6 { top: 70%; left: 32%; width: 50px; height: 50px; background: linear-gradient(135deg,#5E50D6,#9b3ff5); animation-delay: 1.2s; }
.login-bubble.b7 { top: 78%; left: 6%; width: 36px; height: 36px; background: #fff; color: var(--brand-purple); animation-delay: 2.8s; }
@keyframes bubble-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.login-hero-copy { position: relative; z-index: 2; }
.login-hero-copy h1 { font-size: 30px; margin: 0 0 10px; color: var(--text); font-weight: 700; }
.login-hero-copy p { margin: 0 0 22px; color: var(--text-muted); font-size: 14.5px; max-width: 380px; }
.login-hero-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.login-hero-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); }
.login-hero-list .tick {
flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--green-soft); color: var(--green);
display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
/* ---- Right panel: the actual login form ---- */
.login-form-panel { flex: 1 1 54%; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; }
.login-card { width: 100%; max-width: 400px; }
.login-card-tools { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.login-home-link { color:var(--text-muted); font-size:13px; font-weight:600; text-decoration:none; }
.login-home-link:hover { color:var(--accent); }
.login-home-link:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; border-radius:4px; }
.login-language-switcher { justify-content:flex-end; }
.language-switcher { display:flex; align-items:center; gap:3px; }
.language-switcher button {
border:1px solid var(--border); background:#fff; color:var(--text-muted); min-width:34px;
height:30px; padding:0 8px; border-radius:8px; font:700 11px/1 inherit; cursor:pointer;
}
.language-switcher button:hover { border-color:var(--accent-border); color:var(--accent); }
.language-switcher button.active { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.login-brand {
font-weight: 500; font-size: 22px; margin: 0 0 6px; text-align: center;
font-family: "Google Sans Text", Roboto, sans-serif;
}
.login-brand::before {
content: ""; display: block; width: 200px; height: 62px; margin: 0 auto 14px;
background-image: url('19bot.png');
background-size: contain; background-repeat: no-repeat; background-position: center;
}
.login-brand span { color: var(--text); }
.login-title { font-size: 36px; font-weight: 700; margin: 0 0 10px; text-align: left; color: var(--text); }
.login-sub { color: var(--text-muted); font-size: 17px; margin: 0 0 30px; text-align: left; }
.login-field { margin-bottom: 18px; }
.login-field label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 6px; color: var(--text-muted); }
.login-field input {
width: 100%; padding: 15px 18px; border: 1px solid var(--border); border-radius: 12px;
font-size: 17px; font-family: inherit; background: var(--bg); box-sizing: border-box;
}
.login-field input:focus { outline: none; border: 1.5px solid var(--accent); background: #fff; padding: 14.5px 17.5px; }
.login-error { color: var(--danger); font-size: 14px; margin: 6px 0 0; min-height: 18px; }
.login-forgot-note { font-size: 14px; color: var(--text-muted); margin: 2px 0 0; }
.login-forgot-note .zalo-support-icon-link { margin-left:4px; }
.zalo-support-icon-link {
display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
width:30px; height:30px; border-radius:9px; text-decoration:none; flex:0 0 auto;
background:#fff; border:1px solid #dce5ff; box-shadow:0 2px 7px rgba(41,98,255,.16);
transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.zalo-support-icon-link:hover { transform:translateY(-1px); border-color:#9db6ff; box-shadow:0 5px 12px rgba(41,98,255,.22); }
.zalo-support-icon-link:focus-visible { outline:3px solid rgba(41,98,255,.28); outline-offset:2px; }
.zalo-support-icon-link.is-inline { width:27px; height:27px; border-radius:8px; }
.zalo-support-icon-link.is-large { width:58px; height:58px; border-radius:16px; }
.zalo-support-icon { width:82%; height:82%; display:block; }
.zalo-support-modal-action { display:flex; justify-content:center; padding:12px 14px; margin-bottom:14px; border-radius:10px; background:#f4f7ff; }
.btn-login {
width: 100%; margin-top: 20px; padding: 15px; border: none; border-radius: 100px;
background: var(--accent); color: #fff; font-weight: 500; font-size: 17px; cursor: pointer;
font-family: "Google Sans Text", Roboto, sans-serif;
}
.btn-login:hover { background: var(--accent-hover); box-shadow: var(--shadow-1); }
.btn-login:disabled { opacity: .75; cursor: default; }
.btn-login { display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-login-spinner {
display: inline-block; vertical-align: middle;
width: 16px; height: 16px; border-radius: 50%;
border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
animation: btn-spin .6s linear infinite; flex-shrink: 0;
margin-right: 8px;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn-google { width:100%; min-height:46px; border:1px solid var(--border); border-radius:24px; background:#fff; color:var(--text); font:500 14px inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; }
.btn-google:hover { background:var(--bg); }
.btn-google:disabled { opacity:.65; cursor:wait; }
.google-icon { width:18px; height:18px; flex:0 0 18px; display:block; }
.login-divider {
display: flex; align-items: center; gap: 12px; margin: 22px 0 18px;
color: var(--text-muted); font-size: 14px;
}
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.google-signin-wrap { display: flex; justify-content: center; min-height: 40px; }
.google-signup-note { margin-top:9px; text-align:center; color:var(--text-muted); font-size:12.5px; line-height:1.45; }
.login-footer {
margin-top: 32px; text-align: center; font-size: 13.5px; color: #80868b;
}
/* ===================== FIRST CUSTOMER ONBOARDING ===================== */
body.customer-onboarding-active { overflow:hidden; }
.customer-onboarding {
position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center;
padding: clamp(18px, 4vw, 56px); overflow: auto;
background:rgba(35,25,48,.38);
backdrop-filter:blur(11px) saturate(.72);
-webkit-backdrop-filter:blur(11px) saturate(.72);
}
.portal-auth-pending #login-screen,.portal-auth-pending #app-screen { visibility:hidden; }
.portal-auth-gate { position:fixed; z-index:99999; inset:0; display:none; place-items:center; align-content:center; gap:9px; padding:24px; color:#4f3657; background:#f8f5fa; text-align:center; }
.portal-auth-pending .portal-auth-gate { display:grid; }
.portal-auth-gate > span { width:35px; height:35px; border:3px solid #e6d9ea; border-top-color:#87379f; border-radius:50%; animation:portal-auth-spin .8s linear infinite; }
.portal-auth-gate b { margin-top:6px; font-size:15px; }
.portal-auth-gate small { color:#847589; font-size:12px; }
@keyframes portal-auth-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .portal-auth-gate > span { animation:none; } }
.customer-onboarding::before {
content:""; position:fixed; inset:0; pointer-events:none;
background:rgba(94,80,214,.08);
}
.customer-onboarding-orb {
display:none;
}
.customer-onboarding-orb-one {
width:210px; height:210px; left:-72px; top:16%;
background:linear-gradient(135deg, rgba(94,80,214,.24), rgba(112,71,237,.08));
}
.customer-onboarding-orb-two {
width:280px; height:280px; right:-92px; bottom:6%; animation-delay:-3s;
background:linear-gradient(135deg, rgba(155,63,245,.18), rgba(59,91,253,.08));
}
.customer-onboarding-shell {
position:relative; width:min(920px, 100%); min-height:570px; display:grid;
grid-template-columns:minmax(290px, .88fr) minmax(410px, 1.12fr);
overflow:hidden; border:1px solid rgba(255,255,255,.86); border-radius:30px;
background:rgba(255,255,255,.9); box-shadow:0 34px 90px rgba(54,43,123,.2), 0 8px 24px rgba(54,43,123,.09);
backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.customer-onboarding-showcase {
position:relative; overflow:hidden; padding:42px 38px; color:#fff;
background:
radial-gradient(circle at 24% 18%, rgba(255,255,255,.17), transparent 34%),
linear-gradient(155deg, #4939c5 0%, var(--accent) 48%, #7444d4 100%);
}
.customer-onboarding-showcase::after {
content:""; position:absolute; width:260px; height:260px; right:-125px; bottom:-104px;
border:1px solid rgba(255,255,255,.22); border-radius:50%; box-shadow:0 0 0 38px rgba(255,255,255,.045), 0 0 0 76px rgba(255,255,255,.03);
}
.customer-onboarding-logo {
display:block; width:150px; max-height:54px; object-fit:contain; object-position:left center;
filter:brightness(0) invert(1); margin-bottom:27px;
}
.customer-onboarding-kicker { font-size:10px; line-height:1.2; font-weight:800; letter-spacing:.18em; opacity:.78; }
.customer-onboarding-showcase h2 { margin:12px 0 12px; font-size:30px; line-height:1.18; letter-spacing:-.035em; }
.customer-onboarding-showcase p { margin:0; max-width:310px; font-size:14px; line-height:1.65; color:rgba(255,255,255,.82); }
.customer-onboarding-core {
position:relative; width:142px; height:142px; display:grid; place-items:center; margin:40px auto 34px;
}
.customer-onboarding-core::before {
content:""; position:absolute; inset:26px; border-radius:50%;
background:radial-gradient(circle at 35% 28%, #fff, #d9dcff 18%, #8276f5 48%, #35209e 100%);
box-shadow:0 18px 46px rgba(24,14,101,.42), inset 0 1px 6px rgba(255,255,255,.85);
animation:customer-onboarding-core-pulse 2.4s ease-in-out infinite;
}
.customer-onboarding-core-ring { position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.35); }
.customer-onboarding-core-ring.ring-one { inset:12px; animation:customer-onboarding-spin 8s linear infinite; border-left-color:transparent; }
.customer-onboarding-core-ring.ring-two { inset:0; border-style:dashed; opacity:.54; animation:customer-onboarding-spin 13s linear infinite reverse; }
.customer-onboarding-core-mark { position:relative; z-index:1; font-size:16px; font-weight:800; letter-spacing:.08em; text-shadow:0 2px 8px rgba(31,18,110,.55); }
.customer-onboarding-pills { position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:7px; }
.customer-onboarding-pills span { padding:6px 10px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(255,255,255,.11); font-size:10.5px; font-weight:600; color:rgba(255,255,255,.88); }
.customer-onboarding-panel { padding:42px 46px 34px; display:flex; flex-direction:column; justify-content:center; min-width:0; }
.customer-onboarding-badge { display:flex; align-items:center; gap:8px; color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.12em; }
.customer-onboarding-badge > span:first-child { width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:#6b5ae8; box-shadow:0 0 0 5px rgba(107,90,232,.12); animation:customer-onboarding-status-pulse 1.6s ease-in-out infinite; }
.customer-onboarding-panel > h2 { margin:14px 0 5px; color:#211d39; font-size:28px; line-height:1.22; letter-spacing:-.03em; }
.customer-onboarding-status { min-height:24px; margin:0; color:#6b677d; font-size:14px; transition:opacity .2s ease; }
.customer-onboarding-progress { width:100%; height:7px; margin:22px 0 20px; overflow:hidden; border-radius:999px; background:#edeaf8; }
.customer-onboarding-progress > span { display:block; width:8%; height:100%; border-radius:inherit; background:var(--accent-gradient); box-shadow:0 0 14px rgba(94,80,214,.38); transition:width .75s cubic-bezier(.2,.75,.25,1); }
.customer-onboarding-steps { list-style:none; margin:0; padding:0; }
.customer-onboarding-steps li { position:relative; display:grid; grid-template-columns:34px 1fr; gap:12px; min-height:62px; color:#9691a5; }
.customer-onboarding-steps li:not(:last-child)::after { content:""; position:absolute; left:16px; top:34px; bottom:0; width:2px; background:#e8e5f1; transition:background .35s ease; }
.customer-onboarding-steps li.is-complete:not(:last-child)::after { background:linear-gradient(#39aa66, #72c990); }
.customer-onboarding-step-marker {
position:relative; z-index:1; width:34px; height:34px; display:grid; place-items:center;
border:1px solid #ded9ea; border-radius:12px; background:#faf9fd; color:#9791a7; font-size:12px; font-weight:800;
transition:all .35s ease;
}
.customer-onboarding-step-copy { min-width:0; padding:0 0 14px; }
.customer-onboarding-step-copy strong { display:block; color:inherit; font-size:13.5px; line-height:1.35; transition:color .35s ease; }
.customer-onboarding-step-copy small { display:block; overflow:hidden; margin-top:2px; color:#aaa5b6; font-size:11.5px; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; }
.customer-onboarding-steps li.is-current { color:#3c345e; }
.customer-onboarding-steps li.is-current .customer-onboarding-step-marker { border-color:transparent; background:var(--accent-gradient); color:#fff; box-shadow:0 7px 18px rgba(94,80,214,.28); transform:scale(1.04); }
.customer-onboarding-steps li.is-current .customer-onboarding-step-marker::after { content:""; position:absolute; inset:-6px; border:1px solid rgba(94,80,214,.2); border-radius:16px; animation:customer-onboarding-marker-pulse 1.8s ease-out infinite; }
.customer-onboarding-steps li.is-complete { color:#337a4d; }
.customer-onboarding-steps li.is-complete .customer-onboarding-step-marker { border-color:#c7ead4; background:#eaf8ef; color:transparent; box-shadow:none; transform:none; }
.customer-onboarding-steps li.is-complete .customer-onboarding-step-marker::before { content:"✓"; position:absolute; color:#24934c; font-size:15px; }
.customer-onboarding-footnote { margin:2px 0 0; color:#aaa6b2; font-size:10.5px; text-align:center; }
.customer-onboarding.is-finished .customer-onboarding-badge { color:#208947; }
.customer-onboarding.is-finished .customer-onboarding-badge > span:first-child { background:#2ca85a; box-shadow:0 0 0 5px rgba(44,168,90,.12); animation:none; }
@keyframes customer-onboarding-drift { 0%,100% { transform:translate3d(0,0,0); } 50% { transform:translate3d(0,-18px,0); } }
@keyframes customer-onboarding-spin { to { transform:rotate(360deg); } }
@keyframes customer-onboarding-core-pulse { 0%,100% { transform:scale(.96); } 50% { transform:scale(1.04); } }
@keyframes customer-onboarding-status-pulse { 0%,100% { opacity:.5; } 50% { opacity:1; } }
@keyframes customer-onboarding-marker-pulse { from { transform:scale(.9); opacity:.7; } to { transform:scale(1.25); opacity:0; } }
@media (max-width: 760px) {
.customer-onboarding { place-items:start center; padding:14px; }
.customer-onboarding-shell { min-height:0; grid-template-columns:1fr; border-radius:24px; }
.customer-onboarding-showcase { min-height:150px; padding:24px 26px; }
.customer-onboarding-logo { width:112px; height:38px; margin-bottom:14px; }
.customer-onboarding-showcase h2 { max-width:280px; margin:7px 0; font-size:22px; }
.customer-onboarding-showcase p { max-width:330px; font-size:12px; line-height:1.45; }
.customer-onboarding-core { position:absolute; width:112px; height:112px; right:12px; bottom:5px; margin:0; opacity:.8; }
.customer-onboarding-pills { display:none; }
.customer-onboarding-panel { padding:26px 24px 22px; }
.customer-onboarding-panel > h2 { margin-top:11px; font-size:24px; }
.customer-onboarding-progress { margin:18px 0; }
.customer-onboarding-steps li { min-height:57px; }
.customer-onboarding-step-copy small { white-space:normal; }
}
@media (prefers-reduced-motion: reduce) {
.customer-onboarding *, .customer-onboarding *::before, .customer-onboarding *::after { animation:none !important; transition-duration:.01ms !important; }
}
@media (max-width: 880px) {
.login-hero { display: none; }
.login-form-panel { padding: 24px 20px; }
}
.role-pill {
font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
text-transform: uppercase; letter-spacing: .03em; flex-shrink: 0; margin-left: 8px;
}
.role-admin { background: var(--purple-soft); color: var(--purple); }
.role-manager { background: var(--blue-soft); color: var(--blue); }
.role-kh { background: var(--green-soft); color: var(--green); }
.role-nv { background: var(--warn-soft); color: var(--warn); }
/* ===================== APP SHELL ===================== */
#app-screen { height: 100vh; display: flex; flex-direction: column; }
.topbar {
height: 60px; flex-shrink: 0; background: rgba(255,255,255,.96); border-bottom: 1px solid #E5E3F1;
display: flex; align-items: center; justify-content: space-between; padding: 0 20px; gap: 12px;
box-shadow:0 2px 12px rgba(42,35,90,.055); backdrop-filter:blur(10px); position:relative; z-index:20;
}
.topbar-brand {
font-weight: 500; font-size: 16px; letter-spacing: -.2px; display: flex; align-items: center; gap: 10px;
font-family: "Google Sans Text", Roboto, sans-serif;
}
.topbar-brand::before {
content: ""; display: inline-block; width: 105px; height: 32px; flex-shrink: 0;
background-image: url('19bot.png');
background-size: contain; background-repeat: no-repeat; background-position: center;
}
.topbar-brand span { color: var(--text-muted); font-weight: 400; }
#topbar-new-message-dot {
display:none; width:10px; height:10px; flex:0 0 10px; box-sizing:content-box;
margin-left:2px; border:2px solid #fff; border-radius:50%; background:var(--danger);
box-shadow:0 0 0 1px rgba(217,48,37,.12);
}
#topbar-new-message-dot.is-visible { display:inline-block; position:relative; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.notification-toggle-btn {
position:relative; display:inline-grid; place-items:center; width:38px; height:38px; flex:0 0 38px;
padding:0; border:1px solid #e5d8ec; border-radius:12px; color:#74318f;
background:linear-gradient(135deg,#fbf4fd,#f2e3f7); cursor:pointer;
box-shadow:0 5px 14px rgba(106,48,132,.10); transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.notification-toggle-btn:hover { transform:translateY(-1px); box-shadow:0 7px 17px rgba(106,48,132,.15); }
.notification-toggle-btn:focus-visible { outline:3px solid rgba(122,55,151,.18); outline-offset:2px; }
.notification-toggle-btn svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.notification-status-dot { position:absolute; top:4px; right:4px; width:11px; height:11px; border:2px solid #fff; border-radius:50%; background:#9b95a0; }
.notification-toggle-btn.is-enabled { color:#5f247a; background:linear-gradient(135deg,#f8edfb,#ead3f2); border-color:#d8b9e3; }
.notification-toggle-btn.is-enabled .notification-status-dot { background:#20a464; box-shadow:0 0 0 3px rgba(32,164,100,.12); }
.notification-toggle-btn.is-blocked { color:#8f8993; background:#f6f5f7; border-color:#e5e1e7; box-shadow:none; }
.notification-toggle-btn.is-blocked .notification-status-dot { background:#d14a43; }
.plan-warning-btn { position:relative; display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid #e4dce7; border-radius:12px; background:#fff; color:#756a78; cursor:pointer; transition:.18s ease; }
.plan-warning-btn:hover { transform:translateY(-1px); color:#9b5a00; border-color:#e8c47e; background:#fffaf0; box-shadow:0 7px 17px rgba(139,90,0,.14); }
.plan-warning-btn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.plan-warning-btn.has-alerts { color:#a15d00; border-color:#edbd64; background:#fff7e6; animation:planWarningGlow_ 1.8s ease-in-out infinite; }
.plan-warning-btn.has-critical { color:#b42318; border-color:#f0a29c; background:#fff1f0; }
.plan-warning-count { position:absolute; top:-5px; right:-5px; display:grid; place-items:center; min-width:19px; height:19px; padding:0 5px; border:2px solid #fff; border-radius:999px; background:#d92d20; color:#fff; font-size:10px; font-weight:800; line-height:1; }
.plan-usage-banner-host { position:fixed; top:88px; left:50%; z-index:45; width:min(680px,calc(100vw - 32px)); box-sizing:border-box; transform:translateX(-50%); pointer-events:none; }
.plan-usage-banner { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; box-sizing:border-box; padding:13px 14px 13px 16px; border:1px solid; border-radius:16px; box-shadow:0 14px 38px rgba(55,38,26,.16); pointer-events:auto; animation:planUsageBannerIn_ .22s ease-out; }
.plan-usage-banner.is-warning { border-color:#efc76d; background:#fff8df; color:#765000; }
.plan-usage-banner.is-danger { border-color:#ed9b95; background:#fff0ef; color:#9f2520; box-shadow:0 14px 38px rgba(132,35,28,.18); }
.plan-usage-banner-icon { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.plan-usage-banner-copy { display:grid; gap:2px; min-width:0; }
.plan-usage-banner-copy strong { color:inherit; font-size:14px; line-height:1.35; }
.plan-usage-banner-copy span { color:inherit; opacity:.86; font-size:12.5px; line-height:1.45; }
.plan-usage-banner-close { display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:10px; background:transparent; color:inherit; cursor:pointer; }
.plan-usage-banner-close:hover { background:rgba(255,255,255,.72); }
.plan-usage-banner-close:focus-visible { outline:3px solid currentColor; outline-offset:1px; }
.plan-usage-banner-close svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.plan-upgrade-topbar-btn { display:flex; align-items:center; gap:7px; min-height:40px; padding:0 13px; border:1px solid #d9b9e1; border-radius:12px; background:linear-gradient(135deg,#f8edfb,#ead3f2); color:#632476; cursor:pointer; font:inherit; font-size:13px; font-weight:800; white-space:nowrap; box-shadow:0 5px 13px rgba(106,48,132,.1); }
.plan-upgrade-topbar-btn:hover { transform:translateY(-1px); box-shadow:0 8px 18px rgba(106,48,132,.17); }
.plan-upgrade-topbar-btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
@keyframes planWarningGlow_ { 0%,100% { box-shadow:0 0 0 0 rgba(217,140,32,.08); } 50% { box-shadow:0 0 0 6px rgba(217,140,32,.14); } }
@keyframes planUsageBannerIn_ { from { opacity:0; transform:translateY(-8px) scale(.985); } to { opacity:1; transform:none; } }
@media (max-width:700px) {
.plan-usage-banner-host { top:72px; width:calc(100vw - 20px); }
.plan-usage-banner { align-items:start; gap:9px; padding:11px 10px 11px 12px; border-radius:14px; }
.plan-usage-banner-icon { width:21px; height:21px; margin-top:1px; }
.plan-usage-banner-copy strong { font-size:13px; }
.plan-usage-banner-copy span { font-size:11.5px; }
.plan-usage-banner-close { width:30px; height:30px; margin-top:-4px; }
}
@media (prefers-reduced-motion:reduce) { .plan-usage-banner { animation:none; } }
.sheet-switch {
display: flex; align-items: center; gap: 8px; flex-wrap:wrap; font-size: 13px; color: var(--text-muted);
margin-bottom: 18px; max-width: 930px;
}
.sheet-switch select {
padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px;
font-weight: 600; color: var(--text); font-family: inherit; min-width: 180px; max-width: 320px;
background: var(--accent-soft);
}
#report-refresh-btn { margin-left: auto; }
.topbar-user { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.topbar-account { position:relative; }
.topbar-user .avatar {
width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
display: flex; align-items: center; justify-content: center; border:0; padding:0; cursor:pointer;
}
.topbar-user .avatar svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.topbar-user .avatar:not(:disabled):hover { background:#ead7ef; }
.topbar-user .avatar:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.topbar-user .avatar:disabled { cursor:default; }
.account-dropdown {
position:absolute; z-index:140; top:calc(100% + 10px); right:0; width:248px; padding:8px;
border:1px solid rgba(218,207,222,.94); border-radius:16px; background:#fff;
box-shadow:0 18px 48px rgba(55,31,62,.18); transform-origin:top right;
}
.account-menu-item {
position:relative; display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:9px 11px;
border:0; border-radius:11px; background:transparent; color:#4d3d51; cursor:pointer; font:inherit;
font-size:13.5px; font-weight:650; text-align:left;
}
.account-menu-item:hover,.account-menu-item:focus-visible { outline:0; background:#f7eff9; color:#712b84; }
.account-menu-item svg { width:20px; height:20px; flex:0 0 20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.account-menu-item .plan-warning-count { position:static; margin-left:auto; }
.account-menu-divider { height:1px; margin:6px 5px; background:#eee7f0; }
.account-menu-logout { color:#a52b32; }
.account-menu-logout:hover,.account-menu-logout:focus-visible { color:#a52b32; background:#fff0f1; }
.account-help-modal { text-align:center; }
.account-help-icon { display:grid; place-items:center; width:54px; height:54px; margin:0 auto 13px; border-radius:17px; background:#f3e5f6; color:#78318b; }
.account-help-icon svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.account-help-contact { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:20px 0 4px; text-align:left; }
.account-help-contact a { display:flex; flex-direction:column; gap:4px; padding:13px 14px; border:1px solid #e5d9e8; border-radius:12px; background:#fcf9fd; color:#5f276d; text-decoration:none; }
.account-help-contact a:hover { border-color:#cfa8d7; background:#f8effa; }
.account-help-contact span { color:#8b7b8e; font-size:11.5px; font-weight:650; }
.account-help-contact strong { font-size:14px; overflow-wrap:anywhere; }
.btn-logout {
border: 1px solid var(--border); background: #fff; padding: 6px 12px; border-radius: 7px;
font-size: 12.5px; cursor: pointer; color: var(--text);
}
.btn-logout:hover { background: var(--bg); }
/* Thanh tín hiệu loading TOÀN CỤC — hiện mỗi khi có request đang chạy qua
fetchPortalAdmin/callPortalAdmin (xem globalLoadingStart_/End_), bất kể
đang ở menu nào, để luôn biết "đang tải" thay vì chỉ 1 vài nơi tự hiện chữ. */
#global-loading-bar {
position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 9999;
background: transparent; pointer-events: none; overflow: hidden;
}
#global-loading-bar::before {
content: ""; display: block; height: 100%; width: 40%;
background: var(--accent);
opacity: 0; transform: translateX(-100%);
}
#global-loading-bar.is-active::before {
opacity: 1;
animation: global-loading-sweep 1.1s ease-in-out infinite;
}
@keyframes global-loading-sweep {
0% { transform: translateX(-120%); }
50% { transform: translateX(140%); }
100% { transform: translateX(380%); }
}
.app { display: flex; flex: 1; min-height: 0; position: relative; }
.sidebar {
width: 232px; flex-shrink: 0; border-right: 1px solid rgba(0,0,0,.08);
background:
radial-gradient(260px 220px at 12% 5%, rgba(255,255,255,.15), transparent 66%),
linear-gradient(165deg, #4939C5 0%, var(--accent) 48%, #7444D4 100%);
padding: 12px; overflow-y: auto; display:flex; flex-direction:column;
transition: width .18s ease;
}
.sidebar-channel-picker { margin:auto 4px 2px; padding:11px; border:1px solid rgba(255,255,255,.18); border-radius:12px; background:rgba(255,255,255,.1); }
.sidebar-channel-picker label { display:block; margin-bottom:6px; color:rgba(255,255,255,.72); font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; }
.sidebar-channel-picker select { width:100%; min-width:0; padding:8px 10px; border:1px solid rgba(255,255,255,.28); border-radius:8px; background:#fff; color:var(--text); font:600 12px inherit; }
.sidebar.collapsed .sidebar-channel-picker { display:none !important; }
.mobile-channel-picker { display:none; }
.sidebar.collapsed { width: 64px; padding: 12px 8px; }
/* Nút để NGOÀI .sidebar (không phải con) vì .sidebar có overflow-y:auto —
trình duyệt sẽ tự cắt luôn theo trục ngang nếu đặt phần tử nhô ra bên
trong nó, nên phải đặt ở đây, định vị theo .app (position:relative). */
.sidebar-toggle-btn {
position: absolute; top: 14px; left: 219px; width: 26px; height: 26px; border-radius: 50%;
background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-1);
color: var(--accent); display: flex; align-items: center; justify-content: center;
cursor: pointer; z-index: 5; padding: 0; transition: left .18s ease;
}
.sidebar-toggle-btn:hover { background: var(--accent-soft); }
.sidebar-toggle-btn svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.4; transition: transform .18s ease; }
.sidebar.collapsed + .sidebar-toggle-btn { left: 51px; }
.sidebar.collapsed + .sidebar-toggle-btn svg { transform: rotate(180deg); }
.nav-item {
display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 10px 16px; margin-bottom: 2px; color: rgba(255,255,255,.88);
cursor: pointer; font-size: 13.5px; border-radius: 100px;
}
.nav-item:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav-item.active { color: #fff; background: rgba(255,255,255,.24); font-weight: 700; box-shadow:0 5px 14px rgba(35,22,112,.17), inset 0 0 0 1px rgba(255,255,255,.08); }
.nav-item:focus-visible { background: rgba(255,255,255,.18); outline-color: rgba(255,255,255,.82); }
.sidebar.collapsed .nav-item { justify-content: center; padding: 10px 0; gap: 0; }
.sidebar.collapsed .nav-item .nav-label { display: none; }
.sidebar.collapsed .nav-group-label { display: none; }
/* Tooltip khi menu thu gọn — dựng bằng JS + position:fixed, gắn thẳng vào
body (không nằm trong .sidebar) để không bị overflow của .sidebar cắt mất. */
.nav-tooltip {
position: fixed; background: #1f1147; color: #fff; padding: 6px 10px; border-radius: 6px;
font-size: 12.5px; font-weight: 500; white-space: nowrap; box-shadow: var(--shadow-1);
opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 9999;
}
.nav-tooltip.show { opacity: 1; }
.nav-icon {
flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
}
.nav-icon svg { width: 20px; height: 20px; stroke: currentColor; }
@media (min-width: 481px) {
.sidebar.collapsed .nav-icon { width:28px; height:28px; }
.sidebar.collapsed .nav-icon svg { width:28px; height:28px; }
}
.nav-group-label {
padding: 18px 16px 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em;
color: rgba(255,255,255,.7); font-weight: 800;
}
.main {
flex:1; padding:26px 32px 60px; overflow-y:auto; min-width:0; display:flex; flex-direction:column;
background:var(--bg);
}
.main:has(#page-conversations.active) { padding-bottom: 0; }
.main:has(#page-conversations.active) #sheet-switch-wrap { max-width: none; }
/* "Quản lý Page" có nhiều cột (Tên, Sheet URL, Token, Page ID, Script URL...)
nên bỏ giới hạn 930px mặc định của .section để bảng dùng hết chiều ngang
màn hình, đỡ bị cắt cột Script URL như các section khác (form ngắn). */
#page-pages .section { max-width: none; }
#page-users .section { max-width: none; }
.page-header, #sheet-switch-wrap { flex-shrink: 0; }
.page-header {
display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; max-width:930px;
}
.page-header h1 { font-size:21px; margin:0 0 4px; font-family:"Google Sans Text",Roboto,sans-serif; font-weight:700; letter-spacing:-.015em; }
.page-header p { margin: 0; color: var(--text-muted); }
.save-bar { display: flex; gap: 10px; align-items: center; }
.ic-refresh {
display: inline-block; width: 13px; height: 13px; vertical-align: -2px; margin-right: 1px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.btn { border: 1px solid var(--border); background: var(--panel); padding: 8px 18px; border-radius: 100px;
font-size: 13.5px; cursor: pointer; font-weight: 500; color: var(--accent);
}
.btn:hover { background: var(--accent-soft); }
.btn-primary { background: var(--accent-gradient); border-color:transparent; color:#fff; box-shadow:0 4px 10px rgba(94,80,214,.18); }
.btn-primary:hover { background:linear-gradient(135deg,var(--accent-hover),#6238D8); box-shadow:0 6px 14px rgba(61,46,195,.24); transform:translateY(-1px); }
.btn-ghost { border: none; background: none; color: var(--accent); font-weight: 500; padding: 6px 8px; cursor: pointer; }
.btn-danger-ghost { border: none; background: none; color: var(--danger); font-weight: 600; padding: 6px 8px; cursor: pointer; }
.save-status { font-size: 12.5px; color: var(--text-muted); }
.main.page-config-active { padding-bottom:88px; }
.main.page-config-active #page-save-bar {
position:fixed; left:auto; right:max(32px, calc(100vw - 1194px)); bottom:18px; z-index:1000; min-height:52px;
display:flex; align-items:center; justify-content:flex-end; gap:12px;
width:auto; max-width:calc(100vw - 64px); padding:9px 10px 9px 18px;
border:1px solid #dfe3ec; border-radius:16px;
background:rgba(255,255,255,.96); box-shadow:0 10px 32px rgba(31,41,55,.16);
backdrop-filter:blur(8px);
}
.sidebar.collapsed ~ .main.page-config-active #page-save-bar { left:auto; right:max(32px, calc(100vw - 1026px)); }
.main.page-config-active #page-save-bar.is-dirty { border-color:#f2bf62; box-shadow:0 10px 34px rgba(201,132,17,.18); }
#page-save-bar.is-dirty .save-status { color:#a86600; font-weight:600; }
#page-save-bar { pointer-events:auto; isolation:isolate; }
#page-save-bar #config-save-btn { position:relative; z-index:2; pointer-events:auto; touch-action:manipulation; }
#page-save-bar button:disabled { opacity:.48; cursor:default; }
.page-pane { display: none; }
.page-pane.active { display: block; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.subnav { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.subnav-item {
padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--text-muted);
cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subnav-item.active { color: var(--accent); border-bottom-color: var(--accent); }
/* Config navigation: rounded segmented menu. */
#config-subnav {
width: max-content;
max-width: 100%;
gap: 4px;
margin-bottom: 24px;
padding: 3px;
overflow-x: auto;
flex-wrap: nowrap;
border: 1px solid var(--accent-border);
border-radius: 999px;
background: var(--surface-subtle);
scrollbar-width: none;
box-shadow:0 5px 16px rgba(45,36,96,.065);
}
#config-subnav::-webkit-scrollbar { display: none; }
#config-subnav .subnav-item {
flex: 0 0 auto;
min-height: 44px;
margin: 0;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 999px;
color: #615b72;
font-size: 14px;
font-weight: 700;
white-space: nowrap;
transition: color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
#config-subnav .subnav-item:hover { color: var(--accent); background: #f0edff; }
#config-subnav .subnav-item.active {
color: #fff;
background: var(--accent-gradient);
box-shadow: 0 6px 14px rgba(94, 80, 214, .25);
}
#config-subnav .subnav-item.active:hover { color: #fff; background: linear-gradient(135deg, var(--accent-hover) 0%, #6238D8 100%); }
#config-subnav .subnav-item:active { transform: scale(.98); }
/* Config sections */
.section { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:16px; overflow:hidden; max-width:930px; }
.section-header { padding:14px 18px; border-bottom:1px solid var(--border); font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px; }
.section-header .badge { font-weight: 500; font-size: 11.5px; color: var(--text-muted); }
.section-body { padding: 6px 18px 14px; }
.field-row { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; padding: 12px 0; border-bottom: 1px solid #e8eaed; }
.field-row:last-child { border-bottom: none; }
.field-label { font-weight: 600; padding-top: 6px; }
.field-hint { font-weight: 400; color: var(--text-muted); font-size: 12px; margin-top: 3px; }
.global-operation-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; border-bottom:1px solid #e8eaed; }
.global-operation-pair > .field-row { grid-template-columns:minmax(0,1fr) auto; min-width:0; border-bottom:0; }
.global-operation-pair .toggle { margin-top:1px; }
.field-row.system-ai-rules-layout { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.system-ai-rules-layout > .field-label { padding-top: 0; }
.system-ai-rules-content { width: 100%; min-width: 0; }
.range-control { width:min(100%,560px); display:grid; grid-template-columns:minmax(160px,1fr) 82px; gap:12px; align-items:center; min-height:36px; }
.range-control input[type="range"] { width:100%; height:4px; margin:0; border:0; border-radius:999px; appearance:none; background:linear-gradient(90deg,var(--accent) 0 var(--slider-progress),#dddaf8 var(--slider-progress) 100%); accent-color:var(--accent); cursor:pointer; }
.range-control input[type="range"]::-webkit-slider-thumb { width:18px; height:18px; border:2px solid #fff; border-radius:50%; appearance:none; background:var(--accent); box-shadow:0 1px 3px rgba(32,33,36,.22),0 0 0 1px var(--accent); }
.range-control input[type="range"]::-moz-range-track { height:4px; border:0; border-radius:999px; background:#dddaf8; }
.range-control input[type="range"]::-moz-range-progress { height:4px; border-radius:999px; background:var(--accent); }
.range-control input[type="range"]::-moz-range-thumb { width:14px; height:14px; border:2px solid #fff; border-radius:50%; background:var(--accent); box-shadow:0 1px 3px rgba(32,33,36,.22),0 0 0 1px var(--accent); }
.range-control input[type="range"]:disabled { cursor:not-allowed; opacity:.58; }
.range-value { box-sizing:border-box; width:82px; min-width:82px; min-height:34px; padding:6px 9px; border:1px solid var(--border); border-radius:9px; background:#f8f7fb; color:var(--text); font-size:13px; font-weight:700; line-height:20px; text-align:right; font-variant-numeric:tabular-nums; }
.settings-subheading { margin:16px 0 2px; padding:11px 12px; border-left:3px solid var(--accent); border-radius:0 9px 9px 0; background:var(--accent-soft); color:var(--text); }
.settings-subheading > div { font-size:13px; font-weight:700; }
.settings-subheading > span { display:block; margin-top:3px; color:var(--text-muted); font-size:12px; font-weight:400; }
.settings-fixed-limits { margin-top:16px; display:grid; gap:8px; padding:14px 16px; border:1px solid var(--border); border-radius:12px; background:#f8f9fb; color:var(--text-muted); font-size:12px; line-height:1.55; }
.settings-fixed-limits b { color:var(--text); }
#settings-natural-stats-retention-row.is-disabled { opacity:.55; }
input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="number"], input[type="time"], input[type="password"], textarea, select {
width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px;
font-size: 13.5px; font-family: inherit; background: #fff; color: var(--text);
}
textarea { resize: vertical; min-height: 60px; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring); }
fieldset[disabled] input, fieldset[disabled] textarea, fieldset[disabled] select { background: #f3f4f6; color: #8a8f98; }
.toggle { position: relative; display: inline-block; width: 42px; height: 24px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-track { position: absolute; inset: 0; background: #ccc; border-radius: 24px; transition: 0.15s; cursor: pointer; }
.toggle-track:before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: 0.15s; }
.toggle input:checked + .toggle-track { background: var(--accent); }
.toggle input:checked + .toggle-track:before { transform: translateX(18px); }
.kh-perm { display: none; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--text-muted); cursor: pointer; user-select: none; }
.kh-perm input { accent-color: var(--accent); cursor: pointer; }
.field-row.field-locked-for-kh { opacity: 0.55; }
.field-row.field-locked-for-kh input, .field-row.field-locked-for-kh textarea, .field-row.field-locked-for-kh select { cursor: not-allowed; background: #f3f4f6; }
.offday-choice {
display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 10px;
width: min(100%, 360px);
}
.offday-option { position: relative; cursor: pointer; user-select: none; }
.offday-option input { position:absolute; z-index:1; left:14px; top:19px; width:18px; height:18px; margin:0; accent-color:var(--accent); cursor:pointer; outline:none; }
.offday-option span {
min-height:62px; padding:10px 14px 10px 43px; border:1px solid var(--border); border-radius:10px;
display: flex; flex-direction: column; justify-content: center; gap: 1px;
background: #fff; color: var(--text); transition: border-color .16s, background .16s, box-shadow .16s, transform .16s;
}
.offday-option strong { font-size: 14px; font-weight: 700; }
.offday-option small { font-size: 12px; color: var(--text-muted); }
.offday-option:hover span { border-color:#aaa2ed; background:#faf9ff; }
.offday-option input:checked + span {
border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover);
}
.offday-option input:checked + span small { color: #6257a8; }
.offday-option input:focus-visible + span { outline: 3px solid rgba(94,80,214,.22); outline-offset: 2px; }
.offday-option input:disabled + span { cursor: not-allowed; background: #f3f4f6; box-shadow: none; transform: none; }
.history-slider { width: min(100%, 560px); padding: 7px 0 2px; }
.slider-row { display:grid; grid-template-columns:minmax(0,1fr) 76px; align-items:center; gap:14px; }
input[type="range"] {
--slider-progress: 33.333%; flex: 1; height: 6px; margin: 0; border-radius: 999px; appearance: none;
background: linear-gradient(90deg, var(--accent) 0 var(--slider-progress), #dddaf8 var(--slider-progress) 100%);
cursor: pointer; accent-color: var(--accent);
}
input[type="range"]::-webkit-slider-thumb {
width: 21px; height: 21px; border: 3px solid #fff; border-radius: 50%; appearance: none;
background: var(--accent); box-shadow: 0 1px 3px rgba(32,33,36,.28), 0 0 0 1px var(--accent);
}
input[type="range"]::-moz-range-thumb {
width: 15px; height: 15px; border: 3px solid #fff; border-radius: 50%;
background: var(--accent); box-shadow: 0 1px 3px rgba(32,33,36,.28), 0 0 0 1px var(--accent);
}
input[type="range"]:focus-visible { outline: 3px solid rgba(94,80,214,.22); outline-offset: 5px; }
input[type="range"]:disabled { cursor: not-allowed; opacity: .55; }
.slider-value {
width:76px; height:38px; box-sizing:border-box; border:1px solid #c8c3f4; border-radius:10px;
display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-hover);
font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 700;
}
.slider-value-hours { font-size:14px; }
.slider-value-minutes, .slider-value-months { font-size:13px; }
.range-stack { display:grid; gap:15px; width:min(100%,560px); }
.range-stack .history-slider { width:100%; }
.range-title { margin-bottom:8px; color:var(--text); font-size:12.5px; font-weight:700; }
.slider-scale { display:flex; justify-content:space-between; margin:7px 90px 0 0; color:var(--text-muted); font-size:11.5px; }
.followup-tier3-control { width:min(100%,560px); display:grid; gap:12px; padding:14px; border:1px solid #ddd8ed; border-radius:12px; background:#fbfaff; transition:opacity .2s,background .2s; }
.followup-control { display:grid; gap:10px; padding:14px; border:1px solid #ddd8ed; border-radius:12px; background:#fbfaff; transition:opacity .2s,background .2s; }
.followup-control-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.followup-control .slider-row { margin-top:2px; }
.followup-explanation { color:var(--text-muted); font-size:11.5px; line-height:1.5; padding:9px 10px; border-radius:8px; background:#f3f0fa; }
.followup-text-label { display:grid; gap:2px; color:var(--text); font-size:12.5px; font-weight:700; }
.followup-text-label span { color:var(--text-muted); font-size:11px; font-weight:500; }
.followup-control textarea, .followup-tier3-control textarea { width:100%; min-height:78px; resize:vertical; }
.followup-control-disabled { opacity:.52; background:#f5f5f7; }
.followup-control-disabled input, .followup-control-disabled textarea { cursor:not-allowed; }
.followup-tier3-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.followup-tier3-channel, .followup-tier3-toggle { display:flex; align-items:center; gap:9px; }
.followup-tier3-channel .channel-logo { flex:0 0 auto; }
.followup-tier3-toggle { color:var(--text); font-size:12.5px; font-weight:700; }
.followup-tier3-control .history-slider { width:100%; }
.followup-tier3-note { color:var(--text-muted); font-size:11.5px; line-height:1.45; }
.followup-tier3-disabled .followup-tier3-control { opacity:.52; background:#f5f5f7; }
.followup-tier3-control input:disabled { cursor:not-allowed; }
.natural-mode-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.natural-mode-option { display:flex; align-items:flex-start; gap:9px; padding:11px 12px; border:1px solid var(--border); border-radius:10px; cursor:pointer; background:#fff; }
.natural-level-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.natural-level-option { position:relative; cursor:pointer; user-select:none; }
.natural-level-option input { position:absolute; z-index:1; left:13px; top:18px; width:18px; height:18px; margin:0; accent-color:var(--accent); cursor:pointer; }
.natural-level-option > span {
min-height:70px; padding:12px 13px 12px 42px; border:1px solid var(--border); border-radius:10px;
display:flex; flex-direction:column; justify-content:center; gap:2px; background:#fff;
transition:border-color .16s, background .16s, box-shadow .16s, transform .16s;
}
.natural-level-option b { font-size:14px; color:var(--text); }
.natural-level-option small { font-size:12px; color:var(--text-muted); }
.natural-level-option:hover > span { border-color:#aaa2ed; background:#faf9ff; }
.natural-level-option input:checked + span {
border-color:var(--accent); background:var(--accent-soft);
}
.natural-level-option input:checked + span b { color:var(--accent-hover); }
.natural-level-option.recommended::after {
content:"Đề xuất"; position:absolute; top:-7px; left:12px; z-index:1; padding:1px 7px;
border-radius:999px; background:var(--accent); color:#fff; font-size:10px; font-weight:700;
}
.natural-level-option input:focus-visible + span { outline:3px solid rgba(94,80,214,.22); outline-offset:2px; }
.natural-level-option input:disabled + span { cursor:not-allowed; background:#f3f4f6; box-shadow:none; transform:none; }
.knowledge-source-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.knowledge-source-option { position:relative; cursor:pointer; user-select:none; }
.knowledge-source-option input { position:absolute; z-index:1; left:13px; top:18px; width:18px; height:18px; margin:0; accent-color:var(--accent); cursor:pointer; outline:none; }
.knowledge-source-option > span {
min-height:70px; padding:12px 12px 12px 42px; border:1px solid var(--border); border-radius:10px;
display:flex; flex-direction:column; justify-content:center; gap:2px; background:#fff;
transition:border-color .16s, background .16s;
}
.knowledge-source-option b { font-size:14px; color:var(--text); }
.knowledge-source-option small { font-size:12px; color:var(--text-muted); }
.knowledge-source-option:hover > span { border-color:#aaa2ed; background:#faf9ff; }
.knowledge-source-option input:checked + span { border-color:var(--accent); background:var(--accent-soft); }
.knowledge-source-option input:checked + span b { color:var(--accent-hover); }
.knowledge-source-option input:focus-visible + span { outline:3px solid rgba(94,80,214,.22); outline-offset:2px; }
.knowledge-source-option input:disabled + span { cursor:not-allowed; background:#f3f4f6; }
.natural-mode-option:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
.natural-mode-option input { width:auto; margin-top:3px; accent-color:var(--accent); }
.natural-mode-option b { display:block; font-size:13px; }
.natural-mode-option span { display:block; margin-top:2px; color:var(--text-muted); font-size:11.5px; line-height:1.4; }
.natural-chat-disabled { opacity:.5; }
.natural-chart-wrap { padding:16px 18px 18px; }
.natural-chart-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.natural-chart-stat { padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#fafbfc; }
.natural-chart-stat span { display:block; color:var(--text-muted); font-size:11.5px; }
.natural-chart-stat b { display:block; margin-top:2px; font-size:17px; font-variant-numeric:tabular-nums; }
.natural-chart { height:250px; display:grid; grid-template-columns:repeat(3,minmax(90px,1fr)); align-items:end; gap:34px; padding:18px 28px 0; border-bottom:1px solid var(--border); background:linear-gradient(to top,rgba(218,220,224,.28) 1px,transparent 1px); background-size:100% 25%; }
.natural-chart-column { height:100%; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; }
.natural-chart-total { text-align:center; font-size:12px; font-weight:700; margin-bottom:5px; font-variant-numeric:tabular-nums; }
.natural-chart-bar { width:min(92px,80%); min-height:2px; margin:0 auto; display:flex; flex-direction:column-reverse; border-radius:8px 8px 0 0; overflow:hidden; box-shadow:0 0 0 1px rgba(0,0,0,.05); }
.natural-chart-segment { min-height:0; transition:height .2s ease; }
.natural-chart-segment.unchanged { background:#cbd5e1; }
.natural-chart-segment.code-fixed { background:#1a73e8; }
.natural-chart-segment.ai-rewritten { background:#f9ab00; }
.natural-chart-label { text-align:center; font-size:12.5px; font-weight:600; padding:8px 2px 0; white-space:nowrap; }
.natural-chart-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:15px; color:var(--text-muted); font-size:12px; }
.natural-chart-legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.natural-chart-empty { padding:28px 18px; color:var(--text-muted); text-align:center; }
.table-toolbar { display: flex; justify-content: space-between; margin-bottom: 10px; }
.group-label { font-weight: 700; font-size: 13px; margin: 18px 0 8px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.group-label:first-child { margin-top: 0; }
.list-cards { display: flex; flex-direction: column; gap: 10px; }
.list-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; gap: 10px; align-items: flex-start; }
.list-card-fields { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.list-card-fields.faq { grid-template-columns: 1fr; }
.list-card-fields .full { grid-column: 1 / -1; }
.list-card-fields label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 3px; }
.list-card-remove { border: none; background: none; color: var(--danger); cursor: pointer; font-size: 15px; padding: 4px; flex-shrink: 0; }
.knowledge-tools { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.knowledge-tools.knowledge-toolbar {
width:100%; box-sizing:border-box; flex-wrap:nowrap; margin:0 0 12px;
overflow-x:visible; padding-bottom:0;
}
.knowledge-tools.knowledge-toolbar .btn { flex:0 0 auto; }
.knowledge-tools.knowledge-toolbar .knowledge-note {
color:var(--text-muted); font-size:12px; margin-left:auto; flex:1 1 0; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right;
}
@media (max-width:1200px) {
.knowledge-tools.knowledge-toolbar { flex-wrap:wrap; }
.knowledge-tools.knowledge-toolbar .knowledge-note { width:100%; margin-left:0; flex:1 1 100%; white-space:normal; overflow:visible; text-align:left; }
}
.knowledge-extra { border-left:3px solid var(--accent-soft); padding-left:10px; }
/* Knowledge: tách rõ nền khu vực, thẻ dữ liệu và ô nhập liệu. */
.knowledge-section { background:#f5f7fb; border-color:#dfe3ec; }
.knowledge-section > .section-body { padding:18px; }
.knowledge-section .list-cards { gap:14px; }
.knowledge-section .list-card {
position:relative; background:#fff; border-color:#dfe4ee; border-radius:14px;
padding:18px 20px; box-shadow:0 2px 8px rgba(31,41,55,.045);
transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.knowledge-section .list-card:hover {
border-color:#c8cdfa; box-shadow:0 7px 20px rgba(79,70,229,.08); transform:translateY(-1px);
}
.knowledge-section .list-card.quota-pending {
border-color:#ef4444; background:#fff8f8; box-shadow:0 2px 10px rgba(220,38,38,.08);
}
.quota-pending-note {
grid-column:1 / -1; padding:10px 12px; border:1px solid #fecaca; border-radius:9px;
background:#fff1f2; color:#b91c1c; font-size:12.5px; line-height:1.45;
}
.quota-pending-note .zalo-support-icon-link { margin-left:4px; }
.knowledge-section .list-card-fields { gap:14px 18px; }
.knowledge-section .list-card-fields label {
color:#596170; font-size:12px; font-weight:700; margin-bottom:6px;
}
.knowledge-section .list-card input,
.knowledge-section .list-card textarea {
background:#f6f8fc; border-color:#e1e5ee; box-shadow:inset 0 1px 2px rgba(17,24,39,.025);
}
.knowledge-section .list-card input:hover,
.knowledge-section .list-card textarea:hover { border-color:#cbd1df; }
.knowledge-section .list-card input:focus,
.knowledge-section .list-card textarea:focus { background:#fff; box-shadow:0 0 0 3px rgba(95,78,224,.11); }
.knowledge-section .list-card-remove {
width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
background:#fff5f4; border:1px solid #ffd8d4; color:#e7372f;
}
.knowledge-section .list-card-remove:hover { background:#ffe8e5; border-color:#ffb9b2; }
.product-list-manager { min-width:0; }
.product-list-controls {
display:grid; grid-template-columns:minmax(220px,1.6fr) repeat(4,minmax(130px,1fr));
gap:10px; margin-bottom:12px;
}
.product-list-controls label { min-width:0; }
.product-list-controls label > span {
display:block; margin-bottom:5px; color:#596170; font-size:11.5px; font-weight:700;
}
.product-list-controls input,.product-list-controls select {
width:100%; min-width:0; height:38px; padding:7px 10px; border:1px solid #dfe3eb;
border-radius:9px; background:#fff; color:var(--text); font:inherit; font-size:12.5px;
}
.product-list-controls input:focus,.product-list-controls select:focus {
outline:0; border-color:#9b8ee5; box-shadow:0 0 0 3px rgba(95,78,224,.1);
}
.product-list-summary {
display:flex; align-items:center; justify-content:space-between; gap:12px;
margin-bottom:8px; color:var(--text-muted); font-size:12.5px;
}
.product-list-summary label { display:flex; align-items:center; gap:7px; }
.product-list-summary-actions { display:flex; align-items:center; gap:10px; }
.product-list-summary-actions label { white-space:nowrap; }
.product-list-summary select { padding:5px 26px 5px 8px; border:1px solid var(--border); border-radius:8px; background:#fff; }
.product-table-wrap { width:100%; overflow:auto; border:1px solid #dfe3eb; border-radius:12px; background:#fff; }
.product-table { width:100%; min-width:1000px; border-collapse:collapse; table-layout:fixed; }
.product-table th {
position:sticky; top:0; z-index:1; padding:10px 10px; border-bottom:1px solid #dfe3eb;
background:#f7f8fb; color:#626a78; font-size:11px; text-align:left; text-transform:uppercase; letter-spacing:.025em;
}
.product-table td { height:54px; padding:7px 10px; border-bottom:1px solid #eceff4; color:#303641; font-size:12.5px; vertical-align:middle; }
.product-table tr:last-child td { border-bottom:0; }
.product-table tbody tr:hover td { background:#fbfaff; }
.product-table th:nth-child(1),.product-table td:nth-child(1) { width:11%; }
.product-table th:nth-child(2),.product-table td:nth-child(2) { width:24%; }
.product-table th:nth-child(3),.product-table td:nth-child(3) { width:12%; }
.product-table th:nth-child(4),.product-table td:nth-child(4),
.product-table th:nth-child(5),.product-table td:nth-child(5),
.product-table th:nth-child(6),.product-table td:nth-child(6) { width:8%; text-align:right; }
.product-table th:nth-child(7),.product-table td:nth-child(7) { width:13%; text-align:center; }
.product-table th:nth-child(8),.product-table td:nth-child(8) { width:16%; text-align:right; }
.product-table tr.quota-pending td { background:#fff8f8; }
.product-name-cell { display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }
.product-name-cell > b { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.product-sheet-badge { padding:2px 6px; border-radius:999px; background:#f0eaff; color:#7040a0; font-size:10px; font-weight:700; }
.product-status-button {
min-width:82px; padding:6px 9px; border:1px solid transparent; border-radius:999px;
font:inherit; font-size:11.5px; font-weight:700; white-space:nowrap; cursor:pointer;
}
.product-status-button.is-active { background:#e9f8ef; border-color:#c7ead4; color:#18743a; }
.product-status-button.is-stopped { background:#fff0ef; border-color:#ffd5d1; color:#bc3028; }
.product-status-button:disabled { cursor:not-allowed; opacity:.68; }
.product-row-actions { display:flex; align-items:center; justify-content:flex-end; gap:5px; }
.product-edit-button { min-width:48px; padding:6px 9px; }
.product-row-menu { position:relative; }
.product-row-menu > summary {
width:30px; height:30px; display:grid; place-items:center; border-radius:8px;
color:#6a4c84; font-size:20px; line-height:1; cursor:pointer; list-style:none;
}
.product-row-menu > summary::-webkit-details-marker { display:none; }
.product-row-menu[open] > summary { background:#f2eafa; }
.product-row-menu > div {
position:absolute; right:0; top:34px; z-index:8; min-width:132px; padding:5px;
border:1px solid #e2dce8; border-radius:10px; background:#fff; box-shadow:0 10px 28px rgba(35,25,45,.16);
}
.product-row-menu button { width:100%; padding:8px 10px; border:0; border-radius:7px; background:none; text-align:left; cursor:pointer; font:inherit; font-size:12px; }
.product-row-menu button:hover { background:#f7f2fa; }
.product-row-menu button.danger { color:var(--danger); }
.product-row-menu button:disabled { opacity:.45; cursor:not-allowed; }
.product-table-empty { height:auto!important; padding:34px!important; color:var(--text-muted)!important; text-align:center!important; }
.product-pagination { display:flex; justify-content:center; align-items:center; gap:12px; min-height:42px; padding-top:10px; color:var(--text-muted); font-size:12.5px; }
.modal-box.product-editor-modal-box,.modal-box.promotion-editor-modal-box { width:min(940px,calc(100vw - 40px)); max-width:940px; max-height:min(90vh,860px); overflow-y:auto; }
.product-editor-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 16px; }
.product-editor-grid label { min-width:0; }
.product-editor-grid label.wide { grid-column:span 2; }
.product-editor-grid label > span { display:block; margin-bottom:5px; color:#596170; font-size:12px; font-weight:700; }
.product-editor-grid input,.product-editor-grid textarea {
width:100%; min-width:0; box-sizing:border-box; padding:9px 10px; border:1px solid #dfe3eb;
border-radius:9px; background:#f8f9fc; color:var(--text); font:inherit; font-size:13px;
}
.product-editor-grid textarea { min-height:76px; resize:vertical; }
.product-editor-grid input:focus,.product-editor-grid textarea:focus { outline:0; background:#fff; border-color:#9b8ee5; box-shadow:0 0 0 3px rgba(95,78,224,.1); }
.product-editor-grid input:disabled,.product-editor-grid textarea:disabled { color:#606672; background:#f1f2f5; cursor:not-allowed; }
.product-images-editor { grid-column:1/-1; padding:14px; border:1px solid #e2dce8; border-radius:12px; background:#faf8fc; }
.product-images-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:10px; }
.product-images-heading b,.product-images-heading small { display:block; }
.product-images-heading b { color:#40334b; font-size:13px; }
.product-images-heading small { margin-top:3px; color:var(--text-muted); font-size:11.5px; }
.product-images-subheading { margin-top:12px; }
.product-image-source-summary { margin-bottom:12px; padding:11px 13px; border:1px solid #ddc8e7; border-radius:10px; background:#f8f0fb; }
.product-image-source-summary b,.product-image-source-summary small { display:block; }
.product-image-source-summary b { color:#40334b; font-size:12.5px; }
.product-image-source-summary small { margin-top:3px; color:var(--text-muted); font-size:11px; line-height:1.4; }
.product-image-source-footer { grid-column:1/-1; min-height:24px; margin-top:-4px; }
.product-image-source-switch { padding:2px 0; border:0; color:var(--accent); background:transparent; font:inherit; font-size:11.5px; font-weight:700; line-height:1.45; text-align:left; cursor:pointer; }
.product-image-source-switch:hover { color:#5d2375; text-decoration:underline; }
.product-drive-note { padding:12px 14px; border:1px solid #ddc8e7; border-radius:10px; background:#f8f0fb; color:#493653; font-size:12px; line-height:1.45; }
.product-drive-note ol { margin:7px 0 6px 18px; padding:0; }
.product-drive-note small { display:block; color:#7a536f; }
.product-drive-connect { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:10px; margin-top:12px; }
.product-drive-connect label { min-width:0; }
.product-drive-status { min-height:20px; padding-top:8px; color:#665b6c; font-size:11.5px; }
.product-drive-preview-grid { display:flex; max-height:320px; flex-wrap:wrap; gap:9px; overflow:auto; padding:3px 2px 2px; }
.product-drive-image-choice { position:relative; width:92px; height:78px; padding:0; overflow:hidden; border:2px solid #ded9e2; border-radius:9px; background:#fff; cursor:pointer; }
.product-drive-image-choice:hover { border-color:#aa76bd; }
.product-drive-image-choice.is-primary { border-color:var(--accent); box-shadow:0 0 0 2px rgba(113,50,143,.15); }
.product-drive-image-choice:disabled { cursor:default; opacity:1; }
.product-drive-preview-grid img { width:100%; height:100%; object-fit:cover; }
.product-drive-preview-grid span { position:absolute; right:3px; bottom:3px; max-width:58px; padding:2px 4px; overflow:hidden; border-radius:4px; background:rgba(31,24,35,.74); color:#fff; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.product-drive-image-choice.is-primary span { left:3px; right:3px; max-width:none; padding:4px 3px; background:var(--accent); font-size:10px; font-weight:800; line-height:1.25; text-align:center; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.product-drive-preview-grid > small { align-self:center; color:var(--text-muted); }
#product-images-list { display:grid; gap:9px; }
.product-image-row { display:grid; grid-template-columns:32px 68px minmax(0,1fr) auto; align-items:center; gap:10px; padding:9px; border:1px solid #e2e5ec; border-radius:10px; background:#fff; }
.product-image-drag { width:30px; height:38px; border:0; background:transparent; color:#8a7d92; cursor:grab; font-size:18px; letter-spacing:-5px; }
.product-image-drag:active { cursor:grabbing; }
.product-image-drag:disabled { cursor:default; opacity:.45; }
.product-image-thumb { width:68px; height:54px; display:grid; place-items:center; overflow:hidden; border:1px solid #e1e4ea; border-radius:8px; background:#f4f5f8; color:#8b919c; font-size:10px; text-align:center; }
.product-image-thumb img { width:100%; height:100%; object-fit:cover; }
.product-image-thumb img[hidden] { display:none; }
.product-image-row label { min-width:0; }
.product-image-row label > span { margin-bottom:4px; }
.product-image-actions { display:flex; align-items:center; gap:4px; }
.product-image-actions button { width:30px; height:30px; border:1px solid #dddfe6; border-radius:7px; background:#fff; color:#5d6370; cursor:pointer; }
.product-image-actions button:hover:not(:disabled) { border-color:#a99bd3; background:#f6f2fb; }
.product-image-actions button:disabled { opacity:.35; cursor:default; }
.product-image-actions button.danger { color:var(--danger); }
.product-images-empty { padding:18px; border:1px dashed #d8d2de; border-radius:9px; color:var(--text-muted); text-align:center; font-size:12px; }
.promotion-list-controls { grid-template-columns:minmax(260px,2fr) repeat(2,minmax(160px,1fr)); }
.promotion-table th:nth-child(1),.promotion-table td:nth-child(1) { width:9%; }
.promotion-table th:nth-child(2),.promotion-table td:nth-child(2) { width:21%; }
.promotion-table th:nth-child(3),.promotion-table td:nth-child(3) { width:13%; text-align:left; }
.promotion-table th:nth-child(4),.promotion-table td:nth-child(4) { width:17%; text-align:left; }
.promotion-table th:nth-child(5),.promotion-table td:nth-child(5) { width:8%; text-align:right; }
.promotion-table th:nth-child(6),.promotion-table td:nth-child(6) { width:10%; text-align:left; }
.promotion-table th:nth-child(7),.promotion-table td:nth-child(7) { width:10%; text-align:center; }
.promotion-table th:nth-child(8),.promotion-table td:nth-child(8) { width:12%; text-align:right; }
@media (max-width:1050px) {
.product-list-controls { grid-template-columns:repeat(3,minmax(0,1fr)); }
.product-list-controls .product-search { grid-column:span 2; }
.promotion-list-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
.product-editor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
.product-list-controls { grid-template-columns:1fr 1fr; }
.product-list-controls .product-search { grid-column:1/-1; }
.product-table-wrap { overflow:visible; border:0; background:transparent; }
.product-table { display:block; min-width:0; }
.product-table thead { display:none; }
.product-table tbody { display:grid; gap:10px; }
.product-table tr { display:grid; grid-template-columns:1fr 1fr; gap:7px 12px; padding:12px; border:1px solid #dfe3eb; border-radius:12px; background:#fff; }
.product-table td { display:flex; height:auto; min-width:0; padding:0; border:0; text-align:left!important; align-items:center; justify-content:space-between; gap:8px; }
.product-table td::before { content:attr(data-label); flex-shrink:0; color:var(--text-muted); font-size:10.5px; font-weight:700; text-transform:uppercase; }
.product-table td:nth-child(2),.product-table td:nth-child(7),.product-table td:nth-child(8),.product-table td.product-table-empty { grid-column:1/-1; }
.product-table td:nth-child(3),.product-table td:nth-child(5) { display:none; }
.promotion-table td:nth-child(3) { display:flex; }
.promotion-table td:nth-child(4) { grid-column:1/-1; }
.product-name-cell { margin-left:auto; align-items:flex-end; text-align:right; }
.product-name-cell > b { white-space:normal; }
.product-row-actions { margin-left:auto; }
.product-status-button { margin-left:auto; }
.product-table-empty { display:block!important; }
.product-editor-grid { grid-template-columns:1fr; }
.product-editor-grid label.wide { grid-column:auto; }
.product-images-heading { align-items:flex-start; }
.product-drive-connect { grid-template-columns:1fr; }
.product-image-row { grid-template-columns:28px 58px minmax(0,1fr); }
.product-image-thumb { width:58px; height:52px; }
.product-image-actions { grid-column:3; justify-content:flex-end; }
.modal-box.product-editor-modal-box,.modal-box.promotion-editor-modal-box { width:calc(100vw - 24px); max-height:calc(100dvh - 24px); }
}
.rule-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid #e8eaed; }
.rule-row:last-child { border-bottom: none; }
.rule-row textarea { flex: 1; min-height: 40px; overflow-y: hidden; resize: none; }
.empty-hint { color: var(--text-muted); font-size: 13px; text-align: center; padding: 30px; }
/* ===== Report page ===== */
.content-split { display: flex; gap: 16px; height: calc(100vh - 240px); min-height: 420px; }
/* Trang "Hội thoại": khung hội thoại + danh sách bên cạnh chiếm tối đa
chiều rộng lẫn chiều cao còn lại (bên dưới thanh tiêu đề + chọn
Fanpage), chạm sát đáy màn hình. */
#page-conversations.active {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
#page-conversations.active .content-split {
flex: 1;
width: auto;
height: auto;
min-height: 0;
gap: 0;
margin: 0 -32px;
border-top: 1px solid var(--border);
}
.conv-panel { width: 300px; flex-shrink: 0; background: var(--panel); border: 1px solid var(--border); border-right: none; border-radius: 0; overflow: hidden; display: flex; flex-direction: column; }
.conv-toolbar { padding: 10px 12px; border-bottom: 1px solid var(--border); display: flex; gap: 8px; }
.conv-toolbar select, .conv-toolbar input { flex: 1; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; font-family: inherit; }
.conv-list { overflow-y: auto; flex: 1; }
.conv-item { padding: 8px 10px; border-left: 3px solid transparent; border-bottom: 1px solid #e8eaed; cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: border-left-color .2s, background .2s; }
.conv-item.selected { background: var(--accent-soft); border-left-color: var(--accent); padding-left: 8px; }
.conv-item:hover { background: var(--bg); }
.conv-item-content { display:flex; align-items:flex-start; gap:8px; min-width:0; }
.conv-item-body { flex:1; min-width:0; }
.customer-avatar { width:44px; height:44px; flex:0 0 44px; display:inline-grid; place-items:center; overflow:hidden; border-radius:50%; background:#ede9fe; color:#5E50D6; border:1px solid #d8d0fb; font-size:12px; font-weight:800; line-height:1; }
.customer-avatar img, .customer-avatar-fallback { width:100%; height:100%; }
.customer-avatar img { display:block; object-fit:cover; }
.customer-avatar img[hidden] { display:none!important; }
.customer-avatar-fallback { display:grid; place-items:center; }
.customer-avatar-fallback[hidden] { display:none; }
.customer-avatar-person { color:#fff; background:linear-gradient(145deg,#4aa7ee,#4f6fe5); }
.customer-avatar-person svg { width:68%; height:68%; fill:currentColor; display:block; }
/* Hiệu ứng "nháy sáng" ngắn khi vừa nhảy tới đúng hội thoại từ tab Khách
hàng (xem scrollConvListToSelected_). Cố tình dùng màu HỔ PHÁCH (--warn)
thay vì xanh dương (--accent) - vì xanh dương đã trùng với màu bong bóng
tin nhắn assistant trong khung chat, dễ bị "chìm" không nổi bật. Viền +
nền vàng cam đậm mờ dần trong ~1.6s rồi êm về nền xanh nhạt bình thường
của trạng thái đang chọn (.selected). */
@keyframes conv-jump-flash {
0%, 35% { box-shadow: inset 0 0 0 3px var(--warn); background: var(--warn-soft); }
100% { box-shadow: inset 0 0 0 0 transparent; background: var(--accent-soft); }
}
.conv-item.jump-flash { animation: conv-jump-flash 1.6s ease-out; }
.conv-avatar-wrap { position:relative; display:inline-flex; flex:0 0 40px; width:40px; height:40px; }
.conv-avatar-wrap .conv-avatar { width:40px; height:40px; flex-basis:40px; }
.conv-item-top { display:flex; justify-content:space-between; align-items:center; gap:8px; min-width:0; }
.conv-name { display:inline-flex; align-items:center; gap:5px; flex:1 1 auto; min-width:0; overflow:hidden; font-weight:700; font-size:13px; line-height:1.25; white-space:nowrap; }
.conv-name-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.customer-phone-indicator { display:inline-flex; align-items:center; justify-content:center; flex:0 0 20px; width:20px; height:20px; border:2px solid #fff; border-radius:50%; background:var(--blue); color:#fff; box-shadow:0 1px 4px rgba(0,0,0,.18),0 0 0 1px var(--blue); box-sizing:border-box; }
.customer-phone-indicator svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.conv-time { flex-shrink:0; font-size:10.5px; color:var(--text-muted); white-space:nowrap; }
.conv-summary { margin-top:2px; font-size:11.5px; line-height:1.3; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-item .cust-page-badge { margin-top:3px; padding:0; font-size:10.5px; line-height:1.25; }
.tag { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.02em; }
.tag-bot { background: none; padding: 2px 0; color: var(--purple); font-weight: 700; }
.tag-bot-off { background: none; padding: 2px 0; color: var(--text-muted); font-weight: 700; }
.tag-human { background: none; padding: 2px 0; color: var(--green); font-weight: 700; }
.tag-unsure { background: none; padding: 2px 0; color: var(--danger); }
.tag-close { background: var(--danger-soft); color: var(--danger); }
.tag-wait { background: var(--blue-soft); color: var(--blue); }
.tag-progress { background: #f1f3f4; color: var(--text-muted); }
.tag-contacted { background: var(--accent-soft); color: var(--accent); }
.contact-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; white-space: nowrap; }
.contact-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.contact-toggle-track { width: 34px; height: 19px; background: #d7dbe0; border-radius: 999px; position: relative; flex-shrink: 0; transition: background .15s; }
.contact-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.contact-toggle input:checked ~ .contact-toggle-track { background: var(--accent); }
.contact-toggle input:checked ~ .contact-toggle-track .contact-toggle-thumb { transform: translateX(15px); }
.chat-panel { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--border); border-radius: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; font-family: Helvetica, Arial, "Segoe UI", Roboto, sans-serif; }
.facebook-ad-banner { display:flex; align-items:center; gap:12px; padding:10px 18px; background:#faf8fc; border-bottom:1px solid var(--border); }
.facebook-ad-banner > img { width:48px; height:48px; object-fit:cover; border-radius:7px; flex-shrink:0; }
.facebook-ad-banner-copy { flex:1; min-width:0; display:grid; gap:3px; font-size:12px; }
.facebook-ad-banner-copy span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-muted); }
.facebook-ad-banner > button { flex-shrink:0; color:var(--accent); }
#generic-modal.facebook-ad-overlay { background:rgba(20,18,26,.55); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); padding:16px; align-items:center; }
#modal-box.facebook-ad-modal { width:550px; max-width:100%; max-height:calc(100dvh - 32px); padding:0; overflow:hidden; display:flex; flex-direction:column; border-radius:12px; background:#fff; }
.facebook-ad-modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 22px; flex-shrink:0; border-bottom:1px solid var(--border); }
.facebook-ad-modal-head h3 { margin:0; font-size:20px; }
.facebook-ad-modal-head button { font-size:27px; line-height:1; }
.facebook-ad-modal-body { padding:16px 22px; overflow-y:auto; overscroll-behavior:contain; min-height:0; }
.facebook-ad-intro { font-size:14px; margin:0 0 16px; line-height:1.5; }
.facebook-ad-card { border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.facebook-ad-page { display:grid; gap:3px; padding:16px 18px 0; font-size:18px; }
.facebook-ad-page span { font-size:13px; color:var(--text-muted); }
.facebook-ad-title { padding:14px 18px; margin:0; font-size:17px; line-height:1.5; overflow-wrap:anywhere; white-space:pre-wrap; }
.facebook-ad-image { display:block; width:100%; height:auto; }
.facebook-ad-image[hidden] { display:none; }
.facebook-ad-empty { padding:20px 18px; margin:0; color:var(--text-muted); background:#f7f7fa; font-size:14px; }
.facebook-ad-note, .facebook-ad-id { font-size:12px; color:var(--text-muted); line-height:1.5; margin:12px 0 0; overflow-wrap:anywhere; }
.facebook-ad-facebook-link { display:inline-block; margin-top:12px; color:var(--accent); }
.facebook-ad-modal-foot { flex-shrink:0; padding:14px 22px; display:flex; justify-content:flex-end; border-top:1px solid var(--border); }
@media(max-width:480px) { .facebook-ad-banner { padding:8px 10px; gap:8px; } .facebook-ad-banner > button { padding:7px; font-size:12px; } .facebook-ad-modal-body { padding:12px; } }
.chat-header { padding:10px 18px; border-bottom:1px solid var(--border); display:flex; gap:12px; align-items:stretch; background:#fff; }
.chat-header-main { flex:1 1 auto; min-width:0; align-self:center; display:flex; align-items:center; gap:10px; }
.chat-header-identity { min-width:0; max-width:100%; }
.chat-header-avatar { width:48px; height:48px; flex-basis:48px; }
.chat-header-name-row { display:flex; align-items:baseline; gap:8px; min-width:0; }
.chat-header-name { font-weight: 700; font-size: 16px; color: #050505; }
.chat-header-phone { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-muted); font-size:12px; font-weight:400; }
.chat-header-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.chat-header-summary { flex:1 1 75%; min-width:320px; max-height:74px; overflow:auto; font-size:12.5px; color:var(--text-muted); margin:0; background:#f0f2f5; padding:8px 10px; border-radius:10px; }
.chat-header-summary-label { color: #dc2626; font-weight: 600; }
.chat-messages {
flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px;
background: #fff;
}
.chat-loadmore { text-align: center; font-size: 12.5px; color: var(--text-muted); padding: 6px 0 4px; flex-shrink: 0; }
.chat-loadmore.clickable { color: #5E50D6; font-weight: 500; cursor: pointer; }
.is-hidden { display: none; }
.chat-loadmore.is-hidden { display: none; }
.scroll-latest-btn {
position: absolute; bottom: 16px; right: 18px; padding: 7px 14px; border-radius: 999px;
background: #5E50D6; color: #fff; border: none; font-size: 12.5px; font-weight: 600;
cursor: pointer; box-shadow: 0 4px 12px rgba(20,30,25,0.18); transition: opacity .15s, transform .15s;
}
.scroll-latest-btn:hover { background: #3D2EC3; }
.scroll-latest-btn.is-hidden { opacity: 0; transform: translateY(6px); pointer-events: none; }
.conv-refresh-btn {
position: absolute; top: 14px; right: 18px; padding: 5px 12px; border-radius: 999px;
border: 1px solid var(--border); background: var(--bg); color: var(--text-muted);
font-size: 11.5px; font-weight: 600; cursor: not-allowed; opacity: .55; z-index: 2;
transition: opacity .15s, background .15s, color .15s, border-color .15s;
}
.conv-refresh-btn.is-hidden { display: none; }
.conv-refresh-btn.stopped { opacity: 1; cursor: pointer; background: #5E50D6; color: #fff; border-color: #5E50D6; }
.conv-refresh-btn.stopped:hover { background: #3D2EC3; }
.chat-reply-bar {
display: flex; flex-direction:column; gap: 0; align-items: stretch; padding: 10px 14px;
border-top: 1px solid var(--border); background: #fff; flex-shrink: 0;
}
.chat-reply-bar-inner { display: flex; gap: 10px; align-items: flex-end; width: 100%; }
.chat-reply-bar textarea {
flex: 1; min-height: 38px; max-height: 120px; resize: none; padding: 9px 14px;
border-radius: 20px; font-size: 14px; line-height: 1.4; border: 1px solid #dadde1; background: #f0f2f5;
}
.chat-reply-bar textarea:focus { outline: none; border-color: #5E50D6; background: #fff; }
.chat-reply-bar .btn {
flex-shrink: 0; padding: 0 20px; height: 38px; border-radius: 999px; background: #5E50D6;
border: none; color: #fff; font-weight: 600;
}
.chat-reply-bar .btn:hover { background: #3D2EC3; }
.chat-reply-bar.is-hidden { display: none; }
.chat-reply-policy { width:100%; margin-top:8px; font-size:12px; line-height:1.45; color:#5f5681; }
.chat-reply-policy.is-human-agent { color:#6242a5; font-weight:600; }
.chat-reply-policy.is-blocked { color:#a13b3b; font-weight:600; }
.msg-row { display: flex; margin: 1px 0; }
.msg-row.user { justify-content: flex-start; align-items:flex-end; gap:8px; }
.msg-row.assistant, .msg-row.admin { justify-content: flex-end; }
.msg-row.assistant, .msg-row.admin { align-items:flex-end; gap:8px; }
.msg-bubble {
max-width: 65%; padding: 8px 14px; border-radius: 18px; font-size: 13.5px; line-height: 1.38;
}
.msg-row.user .msg-bubble { background: #e4e6eb; color: #050505; border-bottom-left-radius: 4px; }
.message-avatar { width:40px; height:40px; flex-basis:40px; font-size:10px; margin-bottom:1px; }
.bot-message-avatar { display:inline-grid; place-items:center; color:#fff; border:0; background:transparent; box-shadow:none; overflow:visible; }
.bot-message-avatar img { width:32px; height:32px; object-fit:contain; border-radius:8px; }
.bot-avatar-fallback { width:32px; height:32px; border-radius:9px; color:#fff; background:linear-gradient(135deg,#933fc0,#71328f); box-shadow:0 3px 10px rgba(113,50,143,.2); }
.bot-avatar-fallback svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.page-message-avatar-fallback { width:32px; height:32px; border-radius:50%; background-color:#1877f2; background-image:url("3.jpg"); background-repeat:no-repeat; background-size:163.84px 85.76px; background-position:-8px -5.7px; box-shadow:0 3px 10px rgba(24,119,242,.18); }
.staff-message-avatar { color:#fff; border-color:hsla(var(--staff-hue),70%,38%,.4); background:hsl(var(--staff-hue),68%,48%); box-shadow:0 3px 10px hsla(var(--staff-hue),68%,35%,.2); }
.msg-row.assistant .msg-bubble {
background: linear-gradient(135deg, #8a67f5, #5E50D6); color: #fff; border-bottom-right-radius: 4px;
}
.msg-row.admin .msg-bubble {
background: linear-gradient(135deg, #33d17a, #1e8e3e); color: #fff; border-bottom-right-radius: 4px;
}
.msg-meta { display:flex; align-items:center; justify-content:flex-end; margin-bottom:2px; }
.msg-content { white-space:pre-wrap; overflow-wrap:anywhere; }
.msg-attachment-link { display:block; color:inherit; }
.msg-attachment-image { display:block; width:auto; max-width:min(280px, 65vw); max-height:360px; object-fit:contain; border-radius:12px; }
.msg-attachment-link.is-load-error::after { content:'Không tải được ảnh — bấm để mở'; display:block; padding:8px 0 2px; font-size:13px; text-decoration:underline; }
.msg-attachment-link.is-load-error .msg-attachment-image { display:none; }
.msg-attachment-sticker .msg-attachment-image { max-width:min(180px, 48vw); max-height:220px; }
.msg-reaction { display:block; width:max-content; margin:4px 0 -8px auto; padding:1px 6px; border:1px solid rgba(86,61,99,.16); border-radius:999px; background:#fff; box-shadow:0 1px 3px rgba(45,28,55,.12); font-size:16px; line-height:22px; }
.msg-time { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.msg-row.assistant .msg-time, .msg-row.admin .msg-time { color: rgba(255,255,255,.8); }
.cust-name-with-avatar { display:flex; align-items:center; gap:8px; min-width:0; }
.cust-name-body { min-width:0; flex:1; }
.cust-name-line { display:flex; align-items:center; gap:5px; min-width:0; }
.cust-name-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.customer-unanswered-flag { display:inline-flex; align-items:center; justify-content:center; flex:0 0 18px; width:18px; height:20px; color:#dc2626; }
.customer-unanswered-flag svg { width:18px; height:18px; }
.customer-unanswered-flag:focus-visible { outline:2px solid #dc2626; outline-offset:2px; border-radius:3px; }
.table-avatar { width:32px; height:32px; flex-basis:32px; }
/* ---- Thẻ số liệu tổng quan (Hội thoại / Khách hàng) ---- */
.stats-bar { max-width: 1400px; }
.summary-section-title {
font-size: 13.5px; font-weight: 700; color: var(--text); margin: 0 0 10px; max-width: 1400px;
}
.summary-section-title:not(:first-child) { margin-top: 22px; }
.stats-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.stat-card {
background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
padding: 12px 16px; min-width: 140px; flex: 1;
}
.stat-card .stat-num { font-size: 21px; font-weight: 800; line-height: 1.2; color: var(--text); }
.stat-card .stat-label { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.stat-card.accent { border-color: var(--accent); background: var(--accent-soft); }
.stat-card.accent .stat-num { color: var(--accent); }
.stat-card.warn { border-color: var(--warn); background: var(--warn-soft); }
.stat-card.warn .stat-num { color: var(--warn); }
.stat-card.danger { border-color: var(--danger); background: var(--danger-soft); }
.stat-card.danger .stat-num { color: var(--danger); }
.stat-card.blue { border-color: var(--blue); background: var(--blue-soft); }
.stat-card.blue .stat-num { color: var(--blue); }
/* ---- Thanh chọn khoảng thời gian (tab Khách hàng) ---- */
.date-range-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width:100%; max-width: none; margin-bottom: 10px; box-sizing:border-box; }
.date-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.date-tab {
padding: 7px 14px; border: 1px solid var(--border); border-radius: 100px; background: #fff;
font-size: 12.5px; font-weight: 500; color: var(--text-muted); cursor: pointer;
}
.date-tab:hover { background: var(--bg); }
.date-tab.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.date-bar-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 2px; }
.sort-toggle-btn {
display: flex; align-items: center; gap: 7px; padding: 6px 14px 6px 6px; border: 1px solid var(--border);
border-radius: 100px; background: #fff; font-size: 12.5px; font-weight: 500; color: var(--text-muted); cursor: pointer;
white-space: nowrap;
}
.sort-toggle-btn:hover { background: var(--bg); }
.sort-toggle-btn.active { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.sort-toggle-track {
position: relative; width: 30px; height: 17px; border-radius: 100px; background: var(--border);
flex-shrink: 0; transition: background .15s;
}
.sort-toggle-thumb {
position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s;
}
.sort-toggle-btn.active .sort-toggle-track { background: var(--warn); }
.sort-toggle-btn.active .sort-toggle-thumb { transform: translateX(13px); }
.date-range-custom { display: flex; align-items: center; gap: 6px; }
.date-range-custom input[type="date"] {
padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; font-family: inherit; color: var(--text);
}
.mini-breakdown-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.mini-table-card { flex: 1; min-width: 260px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.mini-table-card .mini-table-title { padding: 9px 14px; font-weight: 700; font-size: 12px; border-bottom: 1px solid var(--border); background: var(--bg); }
/* Cố định chiều cao = đúng 5 dòng dữ liệu, nhiều hơn thì cuộn (kéo) bên trong */
.mini-table-card .mini-table-scroll { max-height: 160px; overflow-y: auto; }
.mini-table-card table { width: 100%; border-collapse: collapse; }
.mini-table-card td { padding: 7px 14px; font-size: 12.5px; border-bottom: 1px solid #e8eaed; }
.mini-table-card tr:last-child td { border-bottom: none; }
.mini-table-card td.mt-count { text-align: right; font-weight: 700; color: var(--text); white-space: nowrap; }
/* ===== Executive summary dashboard ===== */
#page-summary { max-width: 1500px; }
.summary-updated { color:var(--text-muted); font-size:12px; }
.summary-header-tools { display:flex; align-items:center; gap:12px; }
.main:has(#page-summary.active) .page-header { max-width:none; margin-bottom:10px; }
.main:has(#page-summary.active) #sheet-switch-wrap { margin-bottom:12px; }
.summary-dashboard { display:grid; gap:16px; }
.summary-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.summary-kpi { background:#fff; border:1px solid var(--border); border-radius:14px; padding:17px 18px; min-height:108px; box-sizing:border-box; position:relative; overflow:hidden; }
.summary-kpi::after { content:""; position:absolute; inset:auto -25px -35px auto; width:85px; height:85px; border-radius:50%; background:var(--kpi-soft,#f1f3f4); opacity:.75; }
.summary-kpi.critical { --kpi-color:#c5221f; --kpi-soft:#fce8e6; border-color:#f3b8b4; }
.summary-kpi.primary { --kpi-color:#5E50D6; --kpi-soft:#ECEBFB; }
.summary-kpi.success { --kpi-color:#188038; --kpi-soft:#e6f4ea; }
.summary-kpi.info { --kpi-color:#1967d2; --kpi-soft:#e8f0fe; }
.summary-kpi-label { color:var(--text-muted); font-size:12px; font-weight:600; }
.summary-kpi-value { color:var(--kpi-color,var(--text)); font-size:30px; line-height:1.1; font-weight:800; margin:9px 0 5px; position:relative; z-index:1; }
.summary-kpi-note { color:var(--text-muted); font-size:11.5px; position:relative; z-index:1; }
.summary-pages-section { width:100%; max-width:100%; min-width:0; box-sizing:border-box; background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px; }
.summary-pages-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }
.summary-pages-grid { display:flex; width:100%; max-width:100%; min-width:0; box-sizing:border-box; gap:12px; overflow-x:auto; overflow-y:hidden; padding:1px 1px 9px; scroll-snap-type:x mandatory; scroll-behavior:smooth; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#cdb8d7 transparent; }
.summary-pages-grid::-webkit-scrollbar { height:7px; }
.summary-pages-grid::-webkit-scrollbar-track { background:transparent; }
.summary-pages-grid::-webkit-scrollbar-thumb { border-radius:99px; background:#cdb8d7; }
.summary-pages-slide { flex:0 0 100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,auto); gap:12px; min-width:0; scroll-snap-align:start; }
.summary-page-card { box-sizing:border-box; border:1px solid #dfe3eb; border-radius:14px; padding:14px; min-width:0; background:linear-gradient(145deg,#fff,#fbfcff); box-shadow:0 2px 8px rgba(35,50,80,.04); }
.summary-page-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.summary-page-name { display:inline-flex; align-items:center; min-width:0; max-width:75%; padding:5px 10px; border:0; border-radius:999px; background:#1877f2; color:#fff; font-family:inherit; font-size:12px; font-weight:750; line-height:normal; text-align:left; cursor:pointer; }
.summary-page-name span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.summary-page-name:hover { background:#0f66d6; box-shadow:0 4px 10px rgba(24,119,242,.2); }
.summary-page-name:focus-visible { outline:3px solid rgba(24,119,242,.28); outline-offset:3px; }
.summary-page-total { font-size:12px; color:var(--text-muted); white-space:nowrap; }
.summary-page-total strong { color:var(--text); font-size:18px; margin-right:3px; }
.summary-page-meta { color:var(--text-muted); font-size:11px; margin:10px 0 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.summary-page-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.summary-page-stat { background:#f7f8fb; border-radius:9px; padding:8px; }
.summary-page-stat strong { display:block; font-size:15px; line-height:1.1; }
.summary-page-stat span { display:block; color:var(--text-muted); font-size:9.5px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.summary-page-progress-head { display:flex; justify-content:space-between; gap:8px; margin:11px 0 5px; color:var(--text-muted); font-size:10px; }
.summary-page-progress { height:6px; border-radius:99px; overflow:hidden; background:#edf0f5; }
.summary-page-progress > i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#1877f2,#65a3f5); }
.summary-pages-count { color:var(--accent); font-size:12px; font-weight:750; white-space:nowrap; }
.summary-activity-stack { display:grid; gap:18px; min-width:0; }
.summary-activity-card { background:#fff; border:1px solid #e5e9f0; border-radius:16px; overflow:hidden; min-width:0; box-shadow:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06); }
.summary-activity-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:20px 24px 10px; }
.summary-activity-head .summary-panel-title { color:#0f172a; font-size:16px; font-weight:800; }
.summary-activity-head .summary-panel-sub { margin-top:6px; color:#64748b; font-size:12px; font-weight:500; }
.summary-activity-filters { display:flex; align-items:flex-end; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.summary-activity-range { display:grid; gap:6px; min-width:150px; color:#64748b; font-size:10.5px; font-weight:700; }
.summary-activity-range select { width:100%; height:38px; padding:0 34px 0 14px; border:1px solid #e1cbea; border-radius:999px; background:#fff; color:#5e247c; font:700 12.5px inherit; cursor:pointer; box-shadow:0 1px 2px rgba(15,23,42,.04); transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.summary-activity-range select:hover { border-color:#a96abc; box-shadow:0 4px 12px rgba(113,50,143,.12); transform:translateY(-1px); }
.summary-activity-range select:focus { outline:none; border-color:#87379f; box-shadow:0 0 0 4px rgba(135,55,159,.14); }
.summary-activity-chart-scroll { width:100%; min-width:0; overflow-x:auto; overflow-y:hidden; padding:0 20px; box-sizing:border-box; }
.summary-activity-chart { display:block; width:100%; min-width:720px; height:auto; max-height:330px; }
.ai-chat-summary-controls { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px 12px; max-width:520px; }
.ai-chat-summary-controls label { display:flex; align-items:center; gap:7px; font-weight:700; color:#5f5167; }
.ai-chat-summary-controls input { width:17px; height:17px; accent-color:#8b3aa5; }
.ai-chat-summary-controls small { flex-basis:100%; text-align:right; color:#7a7180; }
.summary-activity-grid-line { stroke:#f1f5f9; stroke-width:1; vector-effect:non-scaling-stroke; }
.summary-activity-axis-label { fill:#64748b; font:11px Inter,Arial,sans-serif; }
.summary-activity-line { fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; transform-box:fill-box; transform-origin:center bottom; animation:summary-chart-rise .52s cubic-bezier(.22,1,.36,1) both; }
.summary-activity-line.total { stroke:#10b981; }
.summary-activity-line.new { stroke:#f97316; }
.summary-activity-line.phone { stroke:#2387e8; }
.summary-activity-line.ai { stroke:#8b5cf6; }
.summary-activity-dot { fill:#fff; stroke-width:2; vector-effect:non-scaling-stroke; transform-box:fill-box; transform-origin:center; animation:summary-chart-dot-rise .48s cubic-bezier(.22,1,.36,1) both; }
.summary-activity-dot.total { stroke:#10b981; }
.summary-activity-dot.new { stroke:#f97316; }
.summary-activity-dot.phone { stroke:#2387e8; }
.summary-activity-dot.ai { stroke:#8b5cf6; }
.summary-tooltip-group { pointer-events:all; }
.summary-tooltip-target { cursor:crosshair; }
.summary-tooltip-popup { opacity:0; visibility:hidden; pointer-events:none; transition:opacity .12s ease; }
.summary-tooltip-group:hover .summary-tooltip-popup { opacity:1; visibility:visible; }
.summary-tooltip-box { fill:rgba(15,23,42,.94); stroke:rgba(255,255,255,.08); stroke-width:1; vector-effect:non-scaling-stroke; filter:drop-shadow(0 8px 16px rgba(15,23,42,.22)); }
.summary-tooltip-text { fill:#fff; font:600 11px Inter,Arial,sans-serif; }
.summary-tooltip-date { fill:#fff; font-weight:700; }
.summary-activity-totals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:5px 24px 18px; }
.summary-activity-total { position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:9px; min-width:0; padding:13px 15px; border:1px solid #e5e9f0; border-radius:13px; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.summary-activity-total.total { --metric-color:#10b981; }
.summary-activity-total.new { --metric-color:#f97316; }
.summary-activity-total.phone { --metric-color:#2387e8; }
.summary-activity-total.ai { --metric-color:#8b5cf6; }
.summary-activity-total i { grid-row:1 / 3; align-self:center; width:9px; height:9px; border-radius:50%; background:var(--metric-color); box-shadow:0 0 0 4px color-mix(in srgb,var(--metric-color) 14%,transparent); }
.summary-activity-total span { min-width:0; color:var(--text-muted); font-size:11px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.summary-activity-total strong { margin-top:2px; color:var(--text); font-size:23px; line-height:1.05; font-weight:850; }
.summary-activity-totals.single { grid-template-columns:minmax(260px,420px); justify-content:center; }
.summary-activity-legend { display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:14px; padding:3px 24px 18px; color:#64748b; font-size:12px; font-weight:500; }
.summary-activity-legend span { display:inline-flex; align-items:center; gap:7px; }
.summary-activity-legend i { width:9px; height:9px; border-radius:50%; }
.summary-activity-legend i.total { background:#10b981; }
.summary-activity-legend i.new { background:#f97316; }
.summary-activity-legend i.phone { background:#2387e8; }
.summary-activity-legend i.ai { background:#8b5cf6; }
@keyframes summary-chart-rise { from { opacity:0; transform:translateY(18px) scaleY(.08); } to { opacity:1; transform:translateY(0) scaleY(1); } }
@keyframes summary-chart-dot-rise { from { opacity:0; transform:translateY(18px) scale(.7); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (prefers-reduced-motion:reduce) { .summary-activity-line,.summary-activity-dot { animation:none; } }
.summary-grid-2 { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); gap:16px; }
.summary-panel { background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; min-width:0; }
.summary-panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); }
.summary-panel-title { font-size:13.5px; font-weight:750; }
.summary-panel-sub { color:var(--text-muted); font-size:11px; margin-top:2px; }
.summary-panel-body { padding:15px 16px; }
.summary-status-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.summary-status { border:1px solid var(--border); border-radius:11px; padding:13px; }
.summary-status-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.summary-status-value { font-size:22px; font-weight:800; }
.summary-status-label { font-size:11.5px; color:var(--text-muted); margin-top:5px; }
.summary-dot { width:8px; height:8px; border-radius:50%; background:var(--dot,#9aa0a6); box-shadow:0 0 0 4px color-mix(in srgb,var(--dot,#9aa0a6) 14%,transparent); }
.summary-progress-list { display:grid; gap:15px; }
.summary-progress-head { display:flex; justify-content:space-between; gap:10px; font-size:12px; margin-bottom:6px; }
.summary-progress-head strong { font-size:12.5px; }
.summary-progress-track { height:8px; border-radius:99px; background:#eef0f3; overflow:hidden; }
.summary-progress-fill { height:100%; border-radius:inherit; background:var(--fill,var(--accent)); }
.summary-trend { height:150px; display:grid; grid-template-columns:repeat(7,1fr); gap:8px; align-items:end; padding-top:6px; }
.summary-trend-col { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; min-width:0; }
.summary-trend-value { font-size:10.5px; font-weight:700; margin-bottom:5px; }
.summary-trend-bar { width:min(30px,70%); min-height:4px; height:var(--bar-height); border-radius:7px 7px 3px 3px; background:linear-gradient(180deg,#8a67f5,#5E50D6); }
.summary-trend-label { font-size:10px; color:var(--text-muted); margin-top:6px; white-space:nowrap; }
.summary-ranking { display:grid; gap:11px; }
.summary-rank-row { display:grid; grid-template-columns:minmax(0,1fr) 70px 28px; gap:9px; align-items:center; }
.summary-rank-name { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.summary-rank-track { height:6px; border-radius:99px; background:#eef0f3; overflow:hidden; }
.summary-rank-fill { height:100%; border-radius:inherit; background:var(--accent); }
.summary-rank-count { font-size:11.5px; font-weight:700; text-align:right; }
.summary-recent-list { display:grid; }
.summary-recent-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:10px 0; border-bottom:1px solid #edf0f2; cursor:pointer; }
.summary-recent-row:last-child { border-bottom:0; }
.summary-recent-row:hover .summary-recent-name { color:var(--accent); }
.summary-recent-name { font-size:12.5px; font-weight:700; }
.summary-recent-text { color:var(--text-muted); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:3px; }
.summary-recent-time { color:var(--text-muted); font-size:10.5px; white-space:nowrap; }
.summary-empty { color:var(--text-muted); font-size:12px; text-align:center; padding:22px 8px; }
@media (max-width:1100px) { .summary-pages-slide { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,auto); } }
@media (max-width:1000px) { .summary-kpi-grid { grid-template-columns:repeat(2,1fr); } .summary-grid-2 { grid-template-columns:1fr; } }
@media (max-width:600px) { .summary-pages-head { align-items:flex-start; } .summary-pages-slide { grid-template-columns:1fr; grid-template-rows:none; } .summary-activity-head { flex-direction:column; } .summary-activity-filters { width:100%; display:grid; grid-template-columns:1fr 1fr; } .summary-activity-range { width:100%; min-width:0; } .summary-activity-chart-scroll { padding:0 4px; } .summary-activity-legend { gap:12px 18px; justify-content:flex-start; } .summary-activity-totals,.summary-activity-totals.single { grid-template-columns:1fr; padding:4px 12px 14px; } .ai-chat-summary-controls { justify-content:flex-start; max-width:none; } .ai-chat-summary-controls small { text-align:left; } }
@media (max-width:420px) { .summary-activity-filters { grid-template-columns:1fr; } }
@media (max-width:480px) { .summary-header-tools { width:100%; justify-content:space-between; } .summary-kpi-grid { grid-template-columns:1fr 1fr; gap:8px; } .summary-kpi { min-height:100px; padding:14px; } .summary-kpi-value { font-size:25px; } .summary-status-grid { grid-template-columns:1fr 1fr; } }
.ai-usage-toolbar { display:flex; align-items:end; gap:12px; flex-wrap:wrap; margin-bottom:16px; padding:14px 16px; background:#fff; border:1px solid var(--border); border-radius:14px; }
.ai-model-settings { margin-bottom:16px; }
.ai-model-chain-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; }
.ai-model-chain-grid label,.ai-model-test-row label { display:grid; gap:6px; color:var(--text-muted); font-size:11.5px; font-weight:650; }
.ai-model-chain-grid input,.ai-model-test-row input,.ai-model-test-row select,.ai-model-price-table input { width:100%; min-width:0; }
.ai-model-test-row { display:grid; grid-template-columns:minmax(220px,1.5fr) minmax(130px,.7fr) auto auto; gap:10px; align-items:end; margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.ai-model-price-head { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:18px 0 8px; }
.ai-model-price-head div { display:grid; gap:3px; }
.ai-model-price-head span { color:var(--text-muted); font-size:11px; }
.ai-model-price-table input { min-width:110px; }
.ai-model-price-table td:first-child { min-width:230px; }
.ai-provider-switch-row { display:grid; grid-template-columns:1.2fr repeat(3,minmax(150px,.7fr)); gap:12px 16px; align-items:end; }
.ai-provider-guide { margin:0 0 18px; border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border)); border-radius:14px; background:color-mix(in srgb,var(--primary) 4%,#fff); overflow:hidden; }
.ai-provider-guide summary { padding:13px 16px; color:var(--primary); font-size:13px; font-weight:800; cursor:pointer; user-select:none; }
.ai-provider-guide[open] summary { border-bottom:1px solid var(--border); }
.ai-provider-guide-body { display:grid; gap:14px; padding:15px 16px 16px; }
.ai-provider-guide-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.ai-provider-guide-steps > div,.ai-provider-guide-grid > div { display:grid; align-content:start; gap:5px; min-width:0; padding:11px 12px; border:1px solid var(--border); border-radius:11px; background:#fff; }
.ai-provider-guide-steps b,.ai-provider-guide-grid b { color:var(--text); font-size:12px; }
.ai-provider-guide-steps span,.ai-provider-guide-grid span,.ai-provider-guide-flow { color:var(--text-muted); font-size:11.5px; line-height:1.55; }
.ai-provider-guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.ai-provider-guide code { padding:1px 4px; border-radius:5px; background:#f1edf5; color:#6f2b86; font-size:10.5px; }
.ai-provider-guide-flow { padding:11px 12px; border-left:3px solid var(--primary); border-radius:8px; background:#fff; }
.ai-provider-guide-flow b { color:var(--text); }
.ai-provider-error-guide { display:grid; gap:11px; padding-top:2px; }
.ai-provider-error-head { display:grid; gap:4px; }
.ai-provider-error-head > b { color:var(--text); font-size:13px; }
.ai-provider-error-head > span,.ai-provider-error-note { color:var(--text-muted); font-size:11.5px; line-height:1.55; }
.ai-provider-error-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.ai-provider-error-group { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:12px; background:#fff; }
.ai-provider-error-group h4 { display:flex; align-items:center; gap:7px; margin:0; padding:10px 11px; border-bottom:1px solid var(--border); color:var(--text); font-size:12px; }
.ai-provider-error-group h4 > span { padding:2px 7px; border-radius:999px; font-size:10.5px; font-weight:850; letter-spacing:.04em; }
.ai-provider-error-group.is-4xx h4 > span { color:#8a5a00; background:#fff1c7; }
.ai-provider-error-group.is-5xx h4 > span { color:#a92f2f; background:#ffe0e0; }
.ai-provider-error-list { display:grid; }
.ai-provider-error-list article { display:grid; grid-template-columns:minmax(50px,auto) 1fr; gap:9px; align-items:start; padding:9px 11px; border-bottom:1px solid color-mix(in srgb,var(--border) 72%,transparent); }
.ai-provider-error-list article:last-child { border-bottom:0; }
.ai-provider-error-list article > code { justify-self:start; min-width:42px; padding:3px 6px; text-align:center; font-weight:800; white-space:nowrap; }
.ai-provider-error-list article > div { display:grid; gap:2px; min-width:0; }
.ai-provider-error-list article b { color:var(--text); font-size:11.5px; }
.ai-provider-error-list article span { color:var(--text-muted); font-size:10.8px; line-height:1.48; }
.ai-provider-error-note { padding:9px 11px; border-radius:9px; background:#fff; }
.ai-provider-error-note b { color:var(--text); }
.ai-api-error-report .summary-panel-head { align-items:center; }
.ai-api-error-total { display:grid; justify-items:end; gap:2px; flex:0 0 auto; }
.ai-api-error-total span { color:var(--text-muted); font-size:10.5px; }
.ai-api-error-total b { color:var(--danger,#c52d2d); font-size:22px; line-height:1; }
.ai-api-error-table th:nth-child(1) { width:15%; }
.ai-api-error-table { min-width:1180px; }
.ai-api-error-table th:nth-child(2) { width:7%; }
.ai-api-error-table td { vertical-align:top; }
.ai-api-error-code { display:inline-block; min-width:48px; padding:3px 7px; border-radius:7px; text-align:center; font-weight:850; }
.ai-api-error-code.is-4xx,.ai-api-error-code[class~="4xx"] { color:#8a5a00; background:#fff1c7; }
.ai-api-error-code.is-5xx,.ai-api-error-code[class~="5xx"] { color:#a92f2f; background:#ffe0e0; }
.ai-api-error-code.other { color:#5d3a8a; background:#eee5fa; }
.ai-api-error-name { margin-top:4px; color:var(--text-muted); font-size:10px; white-space:nowrap; }
.ai-api-error-footnote { padding:0 16px 14px; color:var(--text-muted); font-size:10.8px; line-height:1.5; }
.ai-api-outcomes { display:grid; gap:5px; justify-items:start; }
.ai-api-outcome { display:inline-flex; align-items:center; padding:4px 7px; border-radius:999px; font-size:10px; font-weight:800; white-space:nowrap; }
.ai-api-outcome.recovered { color:#137333; background:#e4f4e8; }
.ai-api-outcome.unresolved { color:#b3261e; background:#fde4e2; }
.ai-api-outcome.unknown { color:#655d69; background:#efebf1; }
.ai-route-report-table { min-width:850px; }
.ai-route-report-table td { vertical-align:middle; }
.ai-route-report-table td > div { margin-top:5px; }
.ai-route-unresolved { color:#b3261e; font-weight:850; background:#fff4f3; }
.ai-error-heat-cell { height:23px; }
.ai-error-heat-cell.recovered { box-shadow:inset 0 0 0 1px rgba(19,115,51,.18); }
.ai-error-heat-cell.unresolved { box-shadow:inset 0 0 0 1px rgba(179,38,30,.2); }
.ai-error-heat-cell.mixed { box-shadow:inset 0 0 0 1px rgba(180,83,9,.2); }
.ai-route-outcome-cell.route1 { box-shadow:inset 0 0 0 1px rgba(74,54,82,.08); }
.ai-route-outcome-cell.route2 { box-shadow:inset 0 0 0 1px rgba(19,115,51,.24); }
.ai-route-outcome-cell.failed { box-shadow:inset 0 0 0 1px rgba(179,38,30,.24); }
.key-health-cell.ai-route-outcome-cell.current-hour { box-shadow:inset 0 0 0 2px #9333b8; }
.ai-route-outcome-cell.route2,
.ai-route-outcome-cell.failed { display:flex; align-items:center; justify-content:center; overflow:hidden; color:#fff; font-size:9px; font-weight:850; line-height:1; letter-spacing:-.15px; text-shadow:0 1px 2px rgba(0,0,0,.9); white-space:nowrap; }
.ai-route-outcome-legend { display:flex; align-items:center; justify-content:flex-end; gap:7px; flex-wrap:wrap; }
.ai-route-outcome-legend span { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border-radius:999px; color:var(--text-muted); background:#f0edf2; font-size:10px; font-weight:750; }
.ai-page-caption-request-report .ai-route-outcome-legend { flex-wrap:nowrap; max-width:100%; overflow-x:auto; }
.ai-page-caption-request-report .ai-route-outcome-legend span { white-space:nowrap; flex:0 0 auto; }
.ai-route-outcome-legend span::before { content:""; width:9px; height:9px; border-radius:3px; background:#ded9e2; }
.ai-route-outcome-legend .route2::before { background:#188038; }
.ai-route-outcome-legend .failed::before { background:#d32f2f; }
.ai-chat-timeline-wrap { max-height:620px; overflow:auto; }
.ai-chat-timeline-table { min-width:940px; }
.ai-chat-timeline-table th:nth-child(1) { width:18%; }
.ai-chat-timeline-table th:nth-child(2) { width:18%; }
.ai-chat-timeline-table th:nth-child(3) { width:17%; }
.ai-chat-timeline-table th:nth-child(5) { width:12%; }
.ai-chat-timeline-row { cursor:help; }
.ai-chat-outcome { display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; font-size:10.5px; font-weight:800; white-space:nowrap; }
.ai-chat-outcome.route1 { color:#5f5663; background:#f0edf2; }
.ai-chat-outcome.route2 { color:#137333; background:#e8f5ec; }
.ai-chat-outcome.failed { color:#b3261e; background:#fde4e2; }
.ai-chat-timeline-more { flex:0 0 auto; }
.ai-provider-switch-row label,.ai-provider-key-form label { display:grid; gap:6px; color:var(--text-muted); font-size:11.5px; font-weight:650; }
.ai-provider-master-toggle { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:42px; color:var(--text); font-size:13px; font-weight:750; }
.ai-provider-master-toggle .toggle,.ai-provider-route-toggle { flex:0 0 42px; }
.ai-provider-route-wrap { width:100%; max-width:100%; overflow-x:hidden; }
.ai-provider-route-table { width:100%; max-width:100%; table-layout:fixed; }
.data-table.ai-provider-route-table th,.data-table.ai-provider-route-table td { box-sizing:border-box; min-width:0; padding:4px; }
.data-table.ai-provider-route-table th,.data-table.ai-provider-route-table td { padding-left:5px; padding-right:5px; }
.data-table.ai-provider-route-table th { white-space:normal; overflow-wrap:anywhere; font-size:9.5px; line-height:1.15; }
.ai-provider-route-table th:nth-child(1) { width:4.5%; }
.ai-provider-route-table th:nth-child(2) { width:11%; }
.ai-provider-route-table th:nth-child(3) { width:18%; }
.ai-provider-route-table th:nth-child(4) { width:9%; }
.ai-provider-route-table th:nth-child(5) { width:8%; }
.ai-provider-route-table th:nth-child(6) { width:9%; }
.ai-provider-route-table th:nth-child(7),.ai-provider-route-table th:nth-child(8) { width:10%; }
.ai-provider-route-table th:nth-child(9) { width:20.5%; }
.ai-provider-route-table td:first-child { text-align:center; }
.ai-provider-route-toggle { vertical-align:middle; }
.ai-provider-route-table input,.ai-provider-route-table select { box-sizing:border-box; width:100%; min-width:0; min-height:32px; padding:5px 6px; font-size:11.5px; }
.ai-provider-route-table .btn { min-width:0; min-height:32px; padding:5px 6px; }
.ai-provider-route-actions { display:grid; grid-template-columns:32px 32px minmax(52px,1fr); gap:4px; width:100%; }
.ai-provider-route-actions .ai-provider-route-delete { width:100%; }
.ai-provider-route-move { width:100%; font-size:16px; line-height:1; }
.ai-provider-route-move:disabled { cursor:not-allowed; opacity:.35; }
.ai-provider-key-form input,.ai-provider-key-form select { width:100%; min-width:100px; }
.ai-provider-key-form { grid-template-columns:repeat(5,minmax(130px,1fr)) auto; }
.ai-provider-key-table { margin-top:12px; }
.data-table.ai-provider-key-table th { padding:6px 10px; line-height:1.15; }
.data-table.ai-provider-key-table td { padding:4px 10px; line-height:1.2; }
.data-table.ai-provider-key-table .btn { min-height:30px; padding:5px 10px; }
.ai-provider-key-actions { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ai-usage-toolbar label { display:grid; gap:6px; color:var(--text-muted); font-size:11.5px; font-weight:650; }
.ai-usage-toolbar select { min-width:180px; }
.ai-usage-content { display:grid; gap:16px; }
.ai-usage-chart { display:flex; align-items:end; width:100%; gap:clamp(2px,.4vw,7px); min-height:180px; overflow:visible; padding-top:18px; }
.ai-usage-day { min-width:0; flex:1 1 0; display:grid; grid-template-rows:130px auto; gap:7px; text-align:center; color:var(--text-muted); font-size:10px; }
.ai-usage-bar-wrap { height:130px; display:flex; align-items:end; justify-content:center; }
.ai-usage-bar { width:min(24px,75%); min-height:3px; border-radius:7px 7px 2px 2px; background:linear-gradient(180deg,#7c3aed,#2563eb); position:relative; }
.ai-usage-bar:hover::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%); white-space:nowrap; padding:5px 7px; border-radius:7px; background:#202124; color:#fff; font-size:10px; z-index:5; }
.key-health-kpis { margin-bottom:16px; }
.key-health-chart { display:flex; align-items:end; width:100%; gap:clamp(2px,.4vw,7px); min-height:206px; overflow:visible; padding:46px 2px 2px; }
.key-health-day { min-width:0; flex:1 1 0; display:grid; grid-template-rows:124px auto; gap:7px; color:var(--text-muted); font-size:10px; text-align:center; }
.key-health-bar-wrap { position:relative; height:124px; display:flex; align-items:end; justify-content:center; gap:3px; }
.key-health-bar { width:9px; max-width:calc((100% - 6px) / 3); min-width:2px; min-height:3px; border-radius:6px 6px 2px 2px; }
.key-health-bar.rpd { background:linear-gradient(180deg,#ef5350,#b3261e); }
.key-health-bar.rate { background:linear-gradient(180deg,#f6ad55,#dd6b20); }
.key-health-bar.unknown { background:linear-gradient(180deg,#a78bfa,#7c3aed); }
.key-health-bar-wrap:hover::after,
.key-health-cell:hover::after { content:attr(data-tip); position:absolute; z-index:20; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%); width:max-content; max-width:360px; padding:6px 8px; border-radius:7px; background:#202124; color:#fff; font-size:10px; line-height:1.4; white-space:normal; pointer-events:none; box-shadow:0 5px 16px rgba(0,0,0,.22); }
html.data-tip-tooltip-ready .ai-usage-bar:hover::after,
html.data-tip-tooltip-ready .key-health-bar-wrap:hover::after,
html.data-tip-tooltip-ready .key-health-cell:hover::after { display:none; }
.data-tip-tooltip { position:fixed; z-index:10000; display:none; width:max-content; max-width:min(420px,calc(100vw - 24px)); box-sizing:border-box; padding:9px 11px; border-radius:9px; background:#202124; color:#fff; font-size:11px; font-weight:600; line-height:1.55; white-space:pre-line; pointer-events:none; box-shadow:0 5px 16px rgba(0,0,0,.22); }
.data-tip-tooltip.show { display:block; }
.key-health-heat-wrap { overflow-x:auto; padding-bottom:10px; }
.key-health-heatmap { min-width:900px; display:grid; gap:4px; }
.key-health-heat-head,
.key-health-heat-row { display:grid; grid-template-columns:70px repeat(24,minmax(22px,1fr)); gap:4px; align-items:center; }
.key-health-heat-head { color:var(--text-muted); font-size:9px; text-align:center; }
.key-health-heat-head > span:first-child { text-align:left; }
.key-health-heat-row > b { color:var(--text-muted); font-size:10px; font-weight:700; }
.key-health-cell { position:relative; display:block; height:20px; border-radius:5px; background:#f0edf2; box-shadow:inset 0 0 0 1px rgba(74,54,82,.035); }
.key-health-cell.none { background:#f0edf2; }
.key-health-status { display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; font-size:10.5px; font-weight:800; }
.key-health-status.healthy { background:#e8f5ec; color:#137333; }
.key-health-status.warning { background:#fff3e0; color:#b06000; }
.key-health-status.critical { background:#fdecec; color:#b3261e; }
.key-health-status-note { margin-top:4px; color:var(--text-muted); font-size:9.5px; line-height:1.25; white-space:nowrap; }
.ai-usage-note { color:var(--text-muted); font-size:11.5px; line-height:1.6; }
.ai-usage-table-wrap { overflow:auto; }
@media (max-width:900px) {
.ai-usage-day:nth-child(even) > span,
.key-health-day:nth-child(even) > span { visibility:hidden; }
}
@media (max-width:700px) {
.ai-model-chain-grid,.ai-model-test-row,.ai-provider-switch-row,.ai-provider-guide-steps,.ai-provider-guide-grid,.ai-provider-error-columns { grid-template-columns:1fr; }
.ai-model-test-row .btn { width:100%; }
.ai-usage-toolbar > * { flex:1 1 150px; }
.ai-usage-toolbar select,.ai-usage-toolbar button { width:100%; }
}
@media (max-width:760px) {
.ai-provider-route-wrap { overflow:visible; }
.ai-provider-route-table,.ai-provider-route-table tbody { display:block; border:0; }
.ai-provider-route-table thead { display:none; }
.ai-provider-route-table tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:10px; padding:10px; border:1px solid var(--border); border-radius:12px; background:#fff; }
.data-table.ai-provider-route-table td { display:grid; gap:4px; width:auto; padding:0; border:0; text-align:left; }
.ai-provider-route-table td::before { color:var(--text-muted); font-size:10px; font-weight:750; text-transform:uppercase; }
.ai-provider-route-table td:nth-child(1)::before { content:"Bật"; }
.ai-provider-route-table td:nth-child(2)::before { content:"Provider"; }
.ai-provider-route-table td:nth-child(3)::before { content:"Model"; }
.ai-provider-route-table td:nth-child(4)::before { content:"Nhóm key"; }
.ai-provider-route-table td:nth-child(5)::before { content:"Timeout"; }
.ai-provider-route-table td:nth-child(6)::before { content:"Max output"; }
.ai-provider-route-table td:nth-child(7)::before { content:"USD/M input"; }
.ai-provider-route-table td:nth-child(8)::before { content:"USD/M output"; }
.ai-provider-route-table td:nth-child(9) { grid-column:1 / -1; }
.ai-provider-route-table td:first-child { text-align:left; }
}
@media (max-width:600px) {
.ai-usage-chart,
.key-health-chart { gap:1px; }
.ai-usage-day,
.key-health-day { font-size:9px; }
.ai-usage-day > span,
.key-health-day > span { visibility:hidden; }
.ai-usage-day:nth-child(3n+1) > span,
.key-health-day:nth-child(3n+1) > span { visibility:visible; }
.key-health-bar-wrap { gap:1px; }
.key-health-bar { max-width:calc((100% - 2px) / 3); min-width:1px; }
}
.cust-table, .data-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cust-table th, .data-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; color: var(--text-muted); padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--bg); }
/* Giảm chiều cao dòng để hiện được nhiều dữ liệu hơn trên cùng 1 màn hình */
.cust-table td, .data-table td { padding: 6px 14px; border-bottom: 1px solid #e8eaed; font-size: 12.5px; }
.cust-table tr:last-child td, .data-table tr:last-child td { border-bottom: none; }
.cust-table tr:hover td, .data-table tr:hover td { background: var(--bg); }
.cust-table tr.cust-row { cursor: pointer; }
.cust-avatar-wrap { position:relative; display:inline-flex; flex:0 0 40px; width:40px; height:40px; }
.cust-avatar-unread { position:absolute; top:-1px; right:-1px; z-index:1; width:10px; height:10px; box-sizing:content-box; border:2px solid #fff; border-radius:50%; background:var(--danger); }
.cust-avatar-unread::before, .cust-avatar-unread::after,
.channel-unread-dot::before, .channel-unread-dot::after,
#topbar-new-message-dot.is-visible::before, #topbar-new-message-dot.is-visible::after {
content:""; position:absolute; inset:-2px; pointer-events:none; border:1.5px solid rgba(217,48,37,.72); border-radius:50%;
animation:unread-dot-ripple 1.65s cubic-bezier(.2,.62,.35,1) infinite;
}
.cust-avatar-unread::after, .channel-unread-dot::after, #topbar-new-message-dot.is-visible::after { animation-delay:.78s; }
@keyframes unread-dot-ripple {
0% { opacity:.72; transform:scale(.72); }
75%, 100% { opacity:0; transform:scale(2.35); }
}
.cust-summary-cell { min-width:260px; max-width:380px; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; color:var(--text-muted); font-size:12.5px; line-height:1.45; white-space:normal; }
.cust-assignee { color:var(--text); font-weight:700; line-height:1.4; }
.cust-summary-compact { display:grid; gap:4px; min-width:0; }
.cust-summary-need { min-width:0; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.cust-summary-need.has-value { color:var(--text); font-weight:400; }
.cust-summary-new { color:var(--text-muted); font-style:italic; }
.cust-phone-call { display:inline-flex; align-items:center; gap:7px; min-width:0; max-width:100%; color:var(--text-muted); font-size:12.5px; font-weight:700; line-height:1.35; text-decoration:none; }
.cust-phone-call > span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cust-phone-call:hover, .cust-phone-call:focus-visible { color:var(--text-muted); text-decoration:underline; }
#table-users { width:100%; table-layout:fixed; }
#table-users th, #table-users td { min-width:0; overflow-wrap:anywhere; white-space:normal !important; }
#table-users th:nth-child(1) { width:12%; }
#table-users th:nth-child(2) { width:15%; }
#table-users th:nth-child(3) { width:9%; }
#table-users th:nth-child(4) { width:11%; }
#table-users th:nth-child(5) { width:11%; }
#table-users th:nth-child(6) { width:10%; }
#table-users th:nth-child(7) { width:8%; }
#table-users th:nth-child(8) { width:10%; }
#table-users th:nth-child(9) { width:7%; }
#table-users th:nth-child(10) { width:7%; }
#table-users .staff-permission-cell { text-align:center; }
#table-users .staff-permission-cell .toggle { vertical-align:middle; }
#table-users .assign-btn, #table-users select { width:100%; max-width:100%; min-width:0; }
#table-users .user-time-cell { color:var(--text-muted); font-size:11.5px; line-height:1.45; font-variant-numeric:tabular-nums; }
#table-users .user-sort-header { display:inline-flex; align-items:center; gap:5px; width:100%; padding:0; border:0; background:transparent; color:inherit; font:inherit; font-weight:inherit; text-align:left; text-transform:inherit; cursor:pointer; }
#table-users .user-sort-header:hover,
#table-users .user-sort-header:focus-visible,
#table-users .user-sort-header.is-active { color:var(--primary); }
#table-users .user-sort-header:focus-visible { outline:2px solid var(--primary); outline-offset:3px; border-radius:3px; }
#table-users .user-sort-indicator { flex:0 0 auto; font-size:12px; line-height:1; opacity:.45; }
#table-users .user-sort-header.is-active .user-sort-indicator { opacity:1; }
#users-table-wrap { width:100%; max-width:100%; overflow-x:hidden; overflow-y:auto; scrollbar-gutter:stable; }
#users-table-wrap.is-scrollable { border-bottom:1px solid var(--border); }
#users-table-wrap #table-users thead th { position:sticky; top:0; z-index:3; }
#table-users .btn-ghost, #table-users .btn-danger-ghost { white-space:normal; }
#table-users .plan-inline-btn { border:0; background:transparent; color:var(--primary); padding:2px 0; cursor:pointer; font:inherit; }
#table-users .plan-inline-btn:hover { text-decoration:underline; }
#table-users .plan-status { display:inline-block; padding:3px 7px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap; }
#table-users .plan-status-active { color:#147a45; background:#e6f7ed; }
#table-users .plan-status-soon, #table-users .plan-status-warn { color:#a35a00; background:#fff3d6; }
#table-users .plan-status-expired { color:#b42318; background:#ffebe9; }
#table-users .plan-status-none { color:var(--text-muted); background:#f1f1f3; }
#table-users .user-actions-cell { white-space:nowrap; }
#table-users .user-actions-menu { position:relative; display:inline-block; }
#table-users .user-actions-menu summary { list-style:none; cursor:pointer; color:var(--primary); font-weight:700; padding:7px 10px; border:1px solid var(--border); border-radius:999px; }
#table-users .user-actions-menu summary::-webkit-details-marker { display:none; }
#table-users .user-actions-popover { position:fixed; left:0; top:0; right:auto; z-index:2000; min-width:190px; padding:6px; background:var(--panel); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.16); }
#table-users .user-actions-popover button { display:block; width:100%; border:0; background:transparent; text-align:left; padding:8px 10px; border-radius:7px; cursor:pointer; font:inherit; color:var(--text); }
#table-users .user-actions-popover button:hover { background:var(--bg); }
#table-users .user-actions-popover button:disabled { opacity:.45; cursor:not-allowed; }
#table-users .user-actions-popover .danger-action { color:var(--danger); }
#table-users .user-action-role { display:flex; align-items:center; gap:8px; padding:6px 8px 8px; border-bottom:1px solid var(--border); margin-bottom:4px; font-size:12px; font-weight:700; }
#table-users .user-action-role select { width:auto; flex:1; }
#table-users th:last-child, #table-users td:last-child { text-align:center; padding-left:6px; padding-right:6px; }
/* Bảng người dùng gọn hơn để hiển thị nhiều tài khoản trên một màn hình. */
#table-users tbody td { padding-top:4px; padding-bottom:4px; line-height:1.25; }
#table-users tbody td .user-time-cell { line-height:1.25; }
#table-pages { width:100%; table-layout:fixed; }
#table-pages th, #table-pages td { overflow:hidden; }
#connected-pages-table-wrap { width:100%; overflow-x:hidden; overflow-y:auto; scrollbar-gutter:stable; }
#connected-pages-table-wrap.is-scrollable { border-bottom:1px solid var(--border); }
#connected-pages-table-wrap #table-pages thead th { position:sticky; top:0; z-index:3; }
#table-pages .page-sort-header { display:inline-flex; align-items:center; gap:5px; width:100%; padding:0; border:0; background:transparent; color:inherit; font:inherit; font-weight:inherit; text-align:left; text-transform:inherit; cursor:pointer; }
#table-pages .page-sort-header:hover,
#table-pages .page-sort-header:focus-visible,
#table-pages .page-sort-header.is-active { color:var(--primary); }
#table-pages .page-sort-header:focus-visible { outline:2px solid var(--primary); outline-offset:3px; border-radius:3px; }
#table-pages .page-sort-indicator { flex:0 0 auto; font-size:12px; line-height:1; opacity:.45; }
#table-pages .page-sort-header.is-active .page-sort-indicator { opacity:1; }
#table-pages input, #table-pages select { width:100%; min-width:0 !important; box-sizing:border-box; }
#table-pages input[readonly] { cursor:pointer; background:#f1f3f4; color:var(--text-muted); }
#table-pages .page-conversation-row { cursor:pointer; }
#table-pages .page-conversation-row:focus-visible { outline:3px solid var(--focus-ring); outline-offset:-3px; }
#table-pages .page-conversation-row button,
#table-pages .page-conversation-row a,
#table-pages .page-conversation-row input,
#table-pages .page-conversation-row select,
#table-pages .page-conversation-row textarea,
#table-pages .page-conversation-row label { cursor:auto; }
#table-pages .page-conversation-row button,
#table-pages .page-conversation-row a,
#table-pages .page-conversation-row label { cursor:pointer; }
#table-pages .page-name-cell { display:flex; align-items:center; gap:10px; min-width:0; }
#table-pages .page-name-cell > input { flex:1 1 auto; width:auto; min-width:0 !important; }
#table-pages .page-name-cell > strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#table-pages .page-conversation-link {
width:100%; padding:0; border:0; background:transparent; color:var(--text);
font:inherit; text-align:left; cursor:pointer; border-radius:10px;
}
#table-pages .page-conversation-link:hover > strong { color:var(--accent); text-decoration:underline; }
#table-pages .page-conversation-link:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
#table-pages .page-list-avatar {
display:inline-grid; place-items:center; flex:0 0 38px; width:38px; height:38px;
overflow:hidden; border:1px solid #ded8e5; border-radius:50%; background:#eef4ff;
box-shadow:0 2px 7px rgba(44,30,68,.08);
}
#table-pages .page-list-avatar img,
#table-pages .page-list-avatar-fallback { grid-area:1 / 1; width:100%; height:100%; }
#table-pages .page-list-avatar img { display:block; object-fit:cover; }
#table-pages .page-list-avatar img[hidden] { display:none; }
#table-pages .page-list-avatar-fallback {
display:grid; place-items:center; background:#1877f2; color:#fff;
font:800 24px/1 Arial,sans-serif; text-transform:lowercase;
}
#table-pages .page-list-avatar-fallback[hidden] { display:none; }
#table-pages .page-list-avatar-zalo { background:#0068ff; text-transform:uppercase; }
#table-pages .page-list-avatar-web { background:#4f46e5; text-transform:uppercase; }
#table-pages .page-list-avatar-facebook {
background-color:#1877f2; background-image:url("3.jpg"); background-repeat:no-repeat;
background-size:194.56px 101.84px; background-position:-9.5px -6.8px; color:transparent;
}
#table-pages.page-table-manage th:nth-child(1) { width:16%; }
#table-pages.page-table-manage th:nth-child(2) { width:12%; }
#table-pages.page-table-manage th:nth-child(3) { width:12%; }
#table-pages.page-table-manage th:nth-child(4) { width:9%; }
#table-pages.page-table-manage th:nth-child(5) { width:9%; }
#table-pages.page-table-manage th:nth-child(6) { width:12%; }
#table-pages.page-table-manage th:nth-child(7) { width:12%; }
#table-pages.page-table-manage th:nth-child(8) { width:10%; }
#table-pages.page-table-manage th:nth-child(9) { width:8%; }
#table-pages .page-creator-user { display:flex; flex-direction:column; min-width:0; line-height:1.35; }
#table-pages .page-creator-user b,
#table-pages .page-creator-user small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#table-pages .page-creator-user small { color:var(--text-muted); font-size:10.5px; }
#table-pages .page-quota-block { min-width:0; font-size:12px; line-height:1.5; }
#table-pages .page-quota-link {
display:inline-flex; align-items:center; gap:5px; max-width:100%; padding:0;
border:0; background:transparent; color:var(--accent); font-family:inherit;
font-size:13px; font-weight:700; line-height:1.5;
white-space:nowrap; cursor:pointer; text-align:left;
}
#table-pages .page-quota-link:hover { color:var(--accent-hover); text-decoration:underline; }
#table-pages .page-quota-link:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
#table-pages .page-quota-link svg { width:14px; height:14px; flex:0 0 14px; }
#table-pages.page-table-readonly th:nth-child(1) { width:30%; }
#table-pages.page-table-readonly th:nth-child(2) { width:25%; }
#table-pages.page-table-readonly th:nth-child(3) { width:30%; }
#table-pages.page-table-readonly th:nth-child(4) { width:15%; }
#table-pages.page-table-customer th:nth-child(1) { width:25%; }
#table-pages.page-table-customer th:nth-child(2) { width:24%; }
#table-pages.page-table-customer th:nth-child(3) { width:18%; }
#table-pages.page-table-customer th:nth-child(4) { width:13%; }
#table-pages.page-table-customer th:nth-child(5) { width:20%; }
.channel-platform { position:relative; display:flex; align-items:flex-start; gap:8px; min-width:0; }
.channel-unread-dot {
position:absolute; z-index:5; width:10px; height:10px; box-sizing:content-box;
border:2px solid #fff; border-radius:50%; background:var(--danger);
box-shadow:0 0 0 1px rgba(217,48,37,.12); pointer-events:none;
}
.channel-unread-dot.is-platform { top:-5px; left:-5px; }
.channel-unread-dot.is-summary { top:-5px; right:-5px; overflow:visible; }
.channel-platform > div { min-width:0; display:grid; gap:3px; }
.channel-platform b, .channel-platform small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.channel-platform small { color:var(--text-muted); font-size:10.5px; }
.channel-platform .tag { width:max-content; max-width:100%; font-size:9.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.channel-platform > .connection-platform-logo {
width:28px; height:28px; flex:0 0 28px; box-shadow:0 2px 6px rgba(39,31,54,.14);
}
.platform-mark {
display:inline-flex; align-items:center; justify-content:center; flex:0 0 28px;
width:28px; height:28px; border-radius:8px; color:#fff; font:800 18px/1 Arial,sans-serif;
}
.platform-facebook { background:#1877f2; text-transform:lowercase; }
.platform-zalo { background:#0068ff; }
.platform-mark.platform-sprite {
border-radius:50%; background-image:url("3.jpg"); background-repeat:no-repeat;
background-size:143.36px 75.04px; color:transparent;
box-shadow:0 3px 9px rgba(40,31,64,.16);
}
.platform-mark.platform-sprite.platform-facebook { background-position:-7px -5px; }
.platform-mark.platform-sprite.platform-zalo { background-position:-108px -41px; }
.page-qr-sync-btn,
.page-view-channel-btn {
display:inline-flex; align-items:center; justify-content:center; min-width:84px; min-height:36px; padding:8px 14px;
border:1px solid #c8b5e8; border-radius:10px; color:#69308a;
background:linear-gradient(135deg,#fbf8ff,#f1e8ff); box-shadow:0 3px 9px rgba(105,48,138,.08);
font:700 12px/1 inherit; text-decoration:none; cursor:pointer;
transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background-color .16s ease;
}
.page-qr-sync-btn:hover,
.page-view-channel-btn:hover {
border-color:#9161b8; background:linear-gradient(135deg,#f8f1ff,#eadcff);
box-shadow:0 6px 14px rgba(105,48,138,.15); text-decoration:none; transform:translateY(-1px);
}
.page-qr-sync-btn:focus-visible,
.page-view-channel-btn:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }
.page-qr-unavailable { color:var(--text-muted); }
#table-pages .page-unlink-btn {
display:inline-flex; align-items:center; justify-content:center; gap:6px;
min-height:34px; padding:7px 13px;
border:1px solid #e8b4b1; border-radius:9px;
background:#fff; color:#b3261e;
font:700 12px/1 inherit; letter-spacing:.1px;
cursor:pointer; transition:background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
#table-pages .page-unlink-btn:hover {
border-color:#d7635d; background:#fff5f4;
box-shadow:0 3px 10px rgba(179,38,30,.10); transform:translateY(-1px);
}
#table-pages .page-unlink-btn:focus-visible { outline:3px solid rgba(179,38,30,.18); outline-offset:2px; }
#table-pages .page-unlink-btn:active { box-shadow:none; transform:translateY(0); }
#table-pages td:last-child .btn { max-width:100%; padding-left:8px; padding-right:8px; }
.channel-connect-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.channel-connect-card {
display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px 14px; align-items:start;
padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--panel);
}
.channel-connect-card .channel-connect-icon {
display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
color:#fff; font:800 26px/1 Arial,sans-serif;
}
.channel-connect-facebook .channel-connect-icon { background:#1877f2; text-transform:lowercase; }
.channel-connect-zalo .channel-connect-icon { background:#0068ff; }
.channel-connect-copy { min-width:0; }
.channel-connect-copy > b { display:flex; align-items:center; gap:7px; }
.channel-connect-copy .field-hint { margin-top:5px; line-height:1.5; }
.channel-connect-card > .btn { grid-column:1 / -1; width:100%; min-height:40px; }
.zalo-connect-btn { background:#0068ff; border-color:#0068ff; }
.zalo-connect-btn:hover { background:#0057d9; border-color:#0057d9; }
.customer-table-wrap { overflow-y:auto; overflow-x:hidden; border:1px solid var(--border); border-radius:14px; background:#fff; box-shadow:0 1px 2px rgba(60,64,67,.06); }
.customer-table-wrap .cust-table { border:0; border-radius:0; width:100%; min-width:0; table-layout:fixed; }
.customer-table-wrap .cust-table th:nth-child(1) { width:19%; }
.customer-table-wrap .cust-table th:nth-child(2) { width:14%; }
.customer-table-wrap .cust-table th:nth-child(3) { width:12%; }
.customer-table-wrap .cust-table th:nth-child(4) { width:24%; }
.customer-table-wrap .cust-table th:nth-child(5) { width:11%; }
.customer-table-wrap .cust-table th:nth-child(6) { width:12%; }
.customer-table-wrap .cust-table th:nth-child(7) { width:8%; }
.customer-table-wrap .cust-table td { overflow-wrap:anywhere; white-space:normal; }
.customer-table-wrap .cust-table th:last-child,
.customer-table-wrap .cust-table td:last-child { text-align:center; padding-left:6px; padding-right:6px; }
.customer-table-wrap .cust-summary-cell { min-width:0; max-width:none; -webkit-line-clamp:3; }
.customer-table-wrap .cust-table th { padding:12px 14px; position:sticky; top:0; z-index:1; background:#f8f9fa; }
.customer-table-wrap .customer-sort-header { display:inline-flex; align-items:center; gap:5px; width:100%; padding:0; border:0; background:transparent; color:inherit; font:inherit; font-weight:inherit; text-align:left; text-transform:inherit; cursor:pointer; }
.customer-table-wrap .customer-sort-header:hover,
.customer-table-wrap .customer-sort-header:focus-visible,
.customer-table-wrap .customer-sort-header.is-active { color:var(--primary); }
.customer-table-wrap .customer-sort-header:focus-visible { outline:2px solid var(--primary); outline-offset:3px; border-radius:3px; }
.customer-table-wrap .customer-sort-indicator { flex:0 0 auto; font-size:12px; line-height:1; opacity:.45; }
.customer-table-wrap .customer-sort-header.is-active .customer-sort-indicator { opacity:1; }
.customer-table-wrap .cust-table td { padding:5px 10px; vertical-align:middle; }
.cust-search { min-width:110px; height:36px; padding:0 12px; border:1px solid var(--border); border-radius:999px; box-sizing:border-box; font:inherit; font-size:12.5px; background:#fff; }
.cust-search { flex:1 1 160px; max-width:240px; }
.cust-search:focus { outline:2px solid var(--accent-soft); border-color:var(--accent); }
.cust-staff-filter,
.cust-channel-filter { display:flex; align-items:center; flex:1 1 150px; min-width:125px; height:36px; padding:0; border:0; border-radius:999px; background:transparent; box-sizing:border-box; }
.cust-staff-filter select,
.cust-channel-filter select { width:100%; min-width:0; height:36px; padding:0 12px; border:1px solid var(--border); border-radius:999px; outline:0; background:#fff; box-sizing:border-box; color:var(--text); font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.cust-staff-filter select:focus,
.cust-channel-filter select:focus { outline:2px solid var(--accent-soft); border-color:var(--accent); }
.cust-excel-export-btn { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; padding:0; border:1px solid #a7d7bd; border-radius:10px; background:#f0fbf5; color:#107c41; cursor:pointer; }
.cust-excel-export-btn:hover { background:#dff5e8; border-color:#107c41; }
.cust-excel-export-btn:focus-visible { outline:2px solid #107c41; outline-offset:2px; }
.cust-excel-export-btn svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.cust-excel-export-btn .excel-badge { fill:#107c41; stroke:#107c41; }
.cust-excel-export-btn .excel-x { stroke:#fff; stroke-width:1.9; }
@media (min-width:1101px) {
#page-report .date-range-bar { flex-wrap:nowrap; }
#page-report #date-tabs { flex:0 0 auto; flex-wrap:nowrap; }
#page-report #date-tabs .date-tab { padding-inline:11px; }
#page-report .cust-staff-filter { flex:1 1 140px; max-width:none; }
#page-report .cust-channel-filter { flex:1 1 150px; }
#page-report .cust-search { flex:1.25 1 180px; max-width:none; }
}
.customer-export-summary { margin-top:10px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--text-muted); font-size:12px; line-height:1.5; }
.customer-export-custom-range { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.customer-export-custom-range[hidden] { display:none; }
.main:has(#page-report.active) { overflow:hidden; padding-bottom:16px; }
.main:has(#page-report.active) .page-header { display:none; }
.main:has(#page-report.active) #sheet-switch-wrap { margin-bottom:10px; max-width:none; }
#page-report.active { display:flex; flex:1; min-height:0; flex-direction:column; }
#page-report .customer-table-wrap { flex:1; min-height:220px; }
.cust-primary { font-weight:700; font-size:13px; color:var(--text); }
.cust-secondary { margin-top:3px; color:var(--text-muted); font-size:11.5px; }
.cust-page-badge {
display:inline-flex; align-items:center; max-width:100%; margin-top:2px; padding:0;
border-radius:0; background:transparent; color:#5f5969; font-size:11.5px; font-weight:600;
line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cust-page-badge::before {
content:"f";
display:inline-flex; align-items:center; justify-content:center; flex:0 0 14px;
width:14px; height:14px; margin-right:5px; border-radius:50%;
background:#1877f2; color:#fff; font:800 11px/14px Arial,sans-serif;
}
.cust-contact { display:grid; gap:3px; font-size:12px; }
.cust-timeline { display:grid; gap:2px; color:var(--text-muted); font-size:11.5px; white-space:nowrap; }
.cust-timeline strong { color:var(--text); font-size:12px; }
.cust-action-btn { border:1px solid var(--accent); background:var(--accent-soft); color:var(--accent); border-radius:8px; padding:6px 10px; font-weight:700; font-size:11.5px; cursor:pointer; white-space:nowrap; }
#log-table-wrap { width:100%; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:#fff; }
#log-table-wrap .log-table { width:100%; table-layout:fixed; border:0; }
#log-table-wrap .log-table th, #log-table-wrap .log-table td { white-space:normal; overflow-wrap:anywhere; vertical-align:top; padding:10px 9px; }
.log-level { display:inline-flex; padding:2px 7px; border-radius:999px; background:var(--blue-soft); color:var(--blue); font-size:10px; font-weight:800; }
.log-level.warn, .log-level.warning { background:var(--warn-soft); color:var(--warn); }
.log-level.error { background:var(--danger-soft); color:var(--danger); }
.log-action { font-weight:700; color:var(--text); font-size:11.5px; }
.log-id { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:10.5px; color:var(--text-muted); word-break:break-all; }
.log-field-chip { display:inline-block; margin:1px 3px 2px 0; padding:2px 6px; border-radius:6px; background:var(--bg); color:var(--text-muted); font-size:10.5px; }
.log-load-more { display:flex; justify-content:center; padding:14px; border-top:1px solid var(--border); background:#fafbfc; }
@media (max-width: 1100px) {
.customer-table-wrap .cust-table th:nth-child(5), .customer-table-wrap .cust-table td:nth-child(5),
.customer-table-wrap .cust-table th:nth-child(7), .customer-table-wrap .cust-table td:nth-child(7) { display:none; }
}
@media (max-width: 768px) {
#page-pages .section { overflow:visible; }
#page-pages .section-header { padding:12px; gap:10px; }
#page-pages .section-header .btn { min-height:40px; padding:8px 11px; }
#page-pages .section-body { padding:12px !important; }
#page-pages .form-grid { grid-template-columns:1fr; gap:12px; }
#page-pages .form-grid input,
#page-pages .form-grid select { min-height:42px; width:100%; box-sizing:border-box; }
#manual-page-create-wrap > div:last-child .btn { width:100%; min-height:44px; }
#facebook-page-connect-wrap .btn { width:100%; min-height:44px; }
.channel-connect-grid { grid-template-columns:1fr; }
#table-pages {
display:block; width:100%; border:0; border-radius:0; overflow:visible;
white-space:normal; table-layout:auto; background:transparent;
}
#table-pages thead { display:none; }
#table-pages tbody { display:grid; width:100%; gap:12px; }
#table-pages tr {
display:block; width:100%; box-sizing:border-box; padding:10px 12px;
border:1px solid var(--border); border-radius:13px; background:#fff;
box-shadow:0 2px 8px rgba(31,41,55,.05);
}
#table-pages td {
display:grid; grid-template-columns:minmax(92px,34%) minmax(0,1fr);
align-items:center; gap:10px; width:100%; min-height:38px; box-sizing:border-box;
padding:7px 0; border:0; border-bottom:1px solid #eef0f4;
overflow:visible; white-space:normal; overflow-wrap:anywhere;
}
#table-pages td:last-child { border-bottom:0; text-align:left; padding:7px 0; }
#table-pages td::before {
color:var(--text-muted); font-size:10.5px; line-height:1.35;
font-weight:800; text-transform:uppercase;
}
#table-pages.page-table-manage td:nth-child(1)::before { content:'Tên kênh'; }
#table-pages.page-table-manage td:nth-child(2)::before { content:'User'; }
#table-pages.page-table-manage td:nth-child(3)::before { content:'Nền tảng'; }
#table-pages.page-table-manage td:nth-child(4)::before { content:'Liên kết'; }
#table-pages.page-table-manage td:nth-child(5)::before { content:'Trạng thái'; }
#table-pages.page-table-manage td:nth-child(6)::before { content:'Knowledge'; }
#table-pages.page-table-manage td:nth-child(7)::before { content:'AIRules'; }
#table-pages.page-table-manage td:nth-child(8)::before { content:'AI tư vấn'; }
#table-pages.page-table-manage td:nth-child(9)::before { content:'Xóa'; }
#table-pages.page-table-readonly td:nth-child(1)::before { content:'Tên kênh'; }
#table-pages.page-table-readonly td:nth-child(2)::before { content:'Nền tảng'; }
#table-pages.page-table-readonly td:nth-child(3)::before { content:'Liên kết'; }
#table-pages.page-table-readonly td:nth-child(4)::before { content:'Trạng thái'; }
#table-pages.page-table-customer td:nth-child(5)::before { content:'Thao tác'; }
#table-pages input,
#table-pages select { min-height:40px; font-size:13px; }
#table-pages .page-name-cell { width:100%; }
#table-pages .page-quota-link { white-space:normal; overflow-wrap:anywhere; }
#table-pages td:last-child .btn,
#table-pages td:last-child .page-unlink-btn { width:100%; min-height:40px; }
#table-pages td[colspan] { display:block; padding:20px; text-align:center; }
#table-pages td[colspan]::before { display:none; }
#table-users { display:table; overflow:visible; white-space:normal; table-layout:auto; }
#table-users thead { display:none; }
#table-users tbody, #table-users tr, #table-users td { display:block; width:100%; }
#table-users tr { padding:12px; border-bottom:1px solid var(--border); }
#table-users td { border:0; padding:5px 0 5px 42%; position:relative; min-height:30px; }
#table-users td::before { position:absolute; left:0; top:6px; width:39%; color:var(--text-muted); font-size:10.5px; font-weight:700; text-transform:uppercase; }
#table-users td:nth-child(1)::before { content:'Họ tên'; }
#table-users td:nth-child(2)::before { content:'Username'; }
#table-users td:nth-child(3)::before { content:'Vai trò'; }
#table-users td:nth-child(4)::before { content:'Ngày tạo acc'; }
#table-users td:nth-child(5)::before { content:'Lần cuối đăng nhập'; }
#table-users td:nth-child(6)::before { content:'Gán kênh'; }
#table-users td:nth-child(7)::before { content:'Mật khẩu'; }
#table-users td:nth-child(8)::before { content:'Xóa'; }
#table-users.is-admin-users td:nth-child(7)::before { content:'Gói sử dụng'; }
#table-users.is-admin-users td:nth-child(8)::before { content:'Mật khẩu'; }
#table-users.is-admin-users td:nth-child(9)::before { content:'Xóa'; }
#table-users td[colspan] { padding:20px; text-align:center; }
#table-users td[colspan]::before { display:none; }
#page-log .conv-toolbar { padding:0; border:0; flex-wrap:wrap; gap:8px; }
#page-log .conv-toolbar input { min-width:180px; }
#page-log .conv-toolbar .btn { flex-shrink:0; }
#log-table-wrap { border:0; background:transparent; overflow:visible; }
#log-table-wrap .log-table { display:block; width:100%; overflow:visible; white-space:normal; table-layout:auto; }
#log-table-wrap .log-table colgroup { display:none; }
#log-table-wrap .log-table thead { display:none; }
#log-table-wrap .log-table tbody { display:flex; flex-direction:column; width:100%; gap:10px; }
#log-table-wrap .log-table tr {
display:block; width:100%; box-sizing:border-box; background:#fff;
border:1px solid var(--border); border-radius:13px; padding:9px 12px;
box-shadow:0 2px 8px rgba(31,41,55,.04);
}
#log-table-wrap .log-table td {
display:grid; grid-template-columns:minmax(94px,34%) minmax(0,1fr); gap:10px;
align-items:start; width:100%; box-sizing:border-box; border:0;
border-bottom:1px solid #eef0f4; padding:7px 0; min-height:0;
overflow-wrap:anywhere; word-break:break-word;
}
#log-table-wrap .log-table td:last-child { border-bottom:0; }
#log-table-wrap .log-table td::before {
content:attr(data-label); position:static; width:auto; color:var(--text-muted);
font-size:10px; line-height:1.4; font-weight:800; text-transform:uppercase;
}
#log-table-wrap .log-table td[colspan] { display:block; padding:20px; text-align:center; }
#log-table-wrap .log-table td[colspan]::before { display:none; }
#log-table-wrap .log-id { display:block; max-width:100%; word-break:break-all; }
#log-table-wrap .log-load-more { margin-top:10px; border:1px solid var(--border); border-radius:12px; background:#fff; }
}
/* ===== Admin / management pages ===== */
.kv-pill { display:inline-flex; align-items:center; gap:6px; background: var(--bg); border:1px solid var(--border); padding:4px 10px; border-radius: 20px; font-size:12px; margin: 2px 4px 2px 0; }
.kv-pill .x { cursor:pointer; color: var(--danger); font-weight:700; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid label { display:block; font-size:12px; font-weight:600; margin-bottom:4px; color: var(--text-muted); }
.checkbox-list { display:flex; flex-direction:column; gap:6px; max-height:190px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; touch-action:pan-y; border:1px solid var(--border); border-radius:8px; padding:8px 10px; }
.checkbox-list::-webkit-scrollbar { width:12px; }
.checkbox-list::-webkit-scrollbar-track { background:#f1eef3; border-radius:999px; }
.checkbox-list::-webkit-scrollbar-thumb { min-height:34px; border:3px solid #f1eef3; border-radius:999px; background:#8f8b92; }
.checkbox-list::-webkit-scrollbar-thumb:hover { background:#6f6a73; }
.checkbox-list label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; color: var(--text); }
.info-note { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 12.5px; color: var(--text-muted); margin-bottom: 16px; }
/* ===== Gán vào Page: nút mở dropdown (thay cho hàng loạt checkbox khi có nhiều Page) ===== */
.assign-btn { position:relative; display: inline-flex; align-items: center; gap: 6px; overflow:visible; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 6px 27px 6px 10px; font-size: 13px; color: var(--text); cursor: pointer; max-width: 260px; }
.assign-btn:disabled { cursor: default; opacity: .6; }
.assign-count-badge {
position:absolute; z-index:2; top:-10px; right:-9px; display:grid; place-items:center;
min-width:24px; height:24px; padding:0 6px; border:2px solid #fff; border-radius:999px;
background:linear-gradient(145deg,#1677e8,#075fc7); color:#fff; box-shadow:0 4px 10px rgba(16,103,207,.3);
font-size:11px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums;
}
.assign-btn-platforms { display:inline-flex; align-items:center; flex:0 0 auto; padding-left:2px; }
.assign-btn-platforms .assign-channel-platform-icon + .assign-channel-platform-icon { margin-left:-7px; box-shadow:0 0 0 2px #fff, 0 2px 6px rgba(39,31,54,.14); }
.assign-channel-platform-icon {
display:block; flex:0 0 26px; width:26px; height:26px; overflow:hidden; border:0; border-radius:50%;
background-image:url("3.jpg"); background-repeat:no-repeat; background-size:133.12px 69.68px;
box-shadow:0 2px 6px rgba(39,31,54,.14);
}
.assign-channel-platform-icon.connection-logo-fanpage { background-position:-6.5px -4.65px; }
.assign-channel-platform-icon.connection-logo-instagram { background-position:-37.6px -4.65px; }
.assign-channel-platform-icon.connection-logo-zalo_oa { background-position:-68.7px -4.65px; }
.assign-channel-platform-icon.connection-logo-telegram { background-position:-100.3px -4.65px; }
.assign-channel-platform-icon.connection-logo-tiktok { background-position:-6.5px -38.1px; }
.assign-channel-platform-icon.connection-logo-viber { background-position:-37.6px -38.1px; }
.assign-channel-platform-icon.connection-logo-whatsapp { background-position:-68.7px -38.1px; }
.assign-channel-platform-icon.connection-logo-zalo_personal { background-position:-100.3px -38.1px; }
.assign-channel-platform-icon.connection-logo-web_assistant { background-image:url("chatbot-avatar.png?v=20260903-web-icon1"); background-position:center; background-size:cover; }
/* Khoá khung trả lời khi hội thoại đã quá 24h kể từ tin nhắn cuối của khách
(chính sách Messenger 24h) — mờ đi + đổi con trỏ, tooltip giải thích lý do
đặt ở div cha (#chat-reply-bar-inner) vì title trên control disabled không
hiện ra ở Firefox, còn ở div cha thì hiện tốt trên mọi trình duyệt.
Dùng tooltip CSS tự vẽ (data-tooltip + ::after) thay cho title mặc định
của trình duyệt vì title có độ trễ ~1s trước khi hiện; tooltip tự vẽ
hiện ngay lập tức khi hover (không đặt transition-delay). */
#chat-reply-bar-inner.reply-locked { cursor: not-allowed; position: relative; }
#chat-reply-bar-inner.reply-locked textarea,
#chat-reply-bar-inner.reply-locked button { opacity: .5; cursor: not-allowed; pointer-events: none; }
#chat-reply-bar-inner.reply-locked { pointer-events: auto; } /* cha vẫn nhận hover để hiện tooltip dù con bị pointer-events:none */
#chat-reply-bar-inner.reply-locked::after {
content: attr(data-tooltip);
position: absolute; left: 0; bottom: 100%; margin-bottom: 8px;
background: #1c1e21; color: #fff; font-size: 12.5px; line-height: 1.4;
padding: 8px 10px; border-radius: 6px; max-width: 340px; white-space: normal;
box-shadow: 0 4px 12px rgba(0,0,0,.18); z-index: 50; pointer-events: none;
opacity: 0; visibility: hidden;
}
#chat-reply-bar-inner.reply-locked:hover::after { opacity: 1; visibility: visible; }
.assign-btn .caret { margin-left:auto; color: var(--text-muted); font-size: 11px; }
.assign-btn-label { min-width:0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* position:fixed + gắn vào (không nằm trong .section/table) để không bị overflow:hidden của bảng cắt mất */
.assign-dropdown { position:fixed; z-index:1000; width:280px; max-height:320px; overflow:visible; background:var(--panel); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.16); padding:10px; }
.assign-dropdown.hidden { display: none; }
.assign-search { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 13px; margin-bottom: 8px; }
/* ===================== GENERIC MODAL (đổi mật khẩu / reset mật khẩu / xoá) ===================== */
.modal-overlay {
position: fixed; inset: 0; background: rgba(20,25,22,0.45); z-index: 2000;
display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.hidden { display: none; }
.modal-box {
width: 100%; max-width: 380px; background: var(--panel); border-radius: 12px;
box-shadow: 0 12px 40px rgba(0,0,0,.22); padding: 20px 22px;
}
.modal-box.sales-plan-modal-box { max-width: 720px; }
.sales-plan-primary-grid, .sales-plan-renewal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sales-plan-modal-box .sales-plan-limits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.auto-renew-btn.is-on { color:#147a45; border-color:#9bd6b5; background:#effaf4; }
@media (max-width: 700px) { .sales-plan-primary-grid, .sales-plan-renewal-grid, .sales-plan-modal-box .sales-plan-limits { grid-template-columns:1fr; } }
.modal-box h3 { margin: 0 0 4px; font-size: 16px; }
.modal-box .modal-sub { color: var(--text-muted); font-size: 12.5px; margin: 0 0 16px; }
.modal-box .field-mini { margin-bottom: 12px; }
.modal-box .field-mini label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.modal-box .field-mini input {
width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
font-size: 13.5px; font-family: inherit; box-sizing: border-box;
}
.modal-box .modal-error { color: var(--danger); font-size: 12.5px; margin: 2px 0 10px; min-height: 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.modal-actions .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.modal-actions .btn-danger:hover { background: #c5221f; }
.notice-modal { max-width: 430px; }
.notice-modal-heading { display:flex; align-items:flex-start; gap:14px; }
.notice-modal-heading > div { min-width:0; }
.notice-modal-icon {
display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px;
border-radius:10px; font-size:23px; font-weight:700; line-height:1;
}
.notice-modal-icon-error { color:#a62925; background:#fff2f1; border:1px solid #f2cac7; }
.notice-modal-icon-warning { color:#805300; background:#fff8e7; border:1px solid #ecd9aa; }
.notice-modal-icon-success { color:#17643a; background:#effaf4; border:1px solid #bfe2cd; }
.notice-modal-heading h3 { margin:1px 0 7px; }
.notice-modal-message {
margin:0; color:var(--text); font-size:13.5px; line-height:1.58;
overflow-wrap:anywhere; white-space:pre-line;
}
.notice-modal .modal-actions { margin-top:20px; }
.notice-modal-field { margin:16px 0 0; }
.push-primer-heading { display:flex; align-items:flex-start; gap:13px; margin-bottom:14px; }
.push-primer-icon {
display:grid; place-items:center; width:46px; height:46px; flex:0 0 46px; border:1px solid #e5d3ec;
border-radius:14px; color:#71328f; background:linear-gradient(135deg,#fbf4fd,#f2e3f7);
box-shadow:0 7px 18px rgba(106,48,132,.11);
}
.push-primer-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.push-primer-heading h3 { margin:1px 0 4px; }
.push-primer-heading p { margin:0; color:var(--text-muted); font-size:13px; line-height:1.5; }
.push-primer-note { margin:0 0 17px; padding:11px 12px; border:1px solid #eadff0; border-radius:11px; background:#fbf8fc; color:#615968; font-size:12.5px; line-height:1.55; }
.msg-delivery { margin-left:7px; font-size:10px; color:var(--text-muted); }
.msg-delivery-uncertain, .msg-delivery-failed { color:var(--danger); font-weight:700; }
.modal-box.ai-rules-modal { max-width: 720px; max-height: min(82vh, 760px); overflow-y: auto; }
.modal-box.zalo-qr-modal { max-width:500px; max-height:min(90vh,780px); overflow-y:auto; }
.modal-box.zalo-contacts-modal { max-width:560px; max-height:min(88vh,760px); overflow:hidden; display:flex; flex-direction:column; }
.modal-box.web-assistant-modal { max-width:720px; max-height:min(90vh,820px); overflow-y:auto; }
.web-assistant-modal-heading { display:flex; align-items:flex-start; gap:13px; margin-bottom:17px; }
.web-assistant-modal-heading .connection-platform-logo { width:46px; height:46px; flex-basis:46px; }
.web-assistant-modal-heading h3 { margin:1px 0 4px; }
.web-assistant-modal-heading .modal-sub { margin:0; line-height:1.5; }
.web-assistant-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.web-assistant-field-wide { grid-column:1 / -1; }
.web-assistant-form-grid textarea,
.web-assistant-form-grid select,
.web-assistant-embed-block textarea {
width:100%; box-sizing:border-box; padding:9px 11px; border:1px solid var(--border); border-radius:8px;
color:var(--text); background:var(--panel); font:13.5px/1.45 inherit; resize:vertical;
}
.web-assistant-form-grid .field-mini small { display:block; margin-top:5px; color:var(--text-muted); font-size:11px; line-height:1.4; }
.web-assistant-color-row { min-height:38px; display:flex; align-items:center; gap:10px; }
.web-assistant-color-row input[type="color"] { width:50px; height:36px; padding:2px; cursor:pointer; }
.web-assistant-color-row span { color:var(--text-muted); font:600 12px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; }
.web-assistant-avatar-row { display:flex; align-items:center; gap:13px; padding:10px; border:1px solid var(--border); border-radius:12px; background:var(--surface-soft); }
.web-assistant-avatar-row > img { width:64px; height:64px; flex:0 0 64px; object-fit:contain; border:1px solid var(--border); border-radius:16px; background:#fff; }
.web-assistant-avatar-row > div { min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.web-assistant-avatar-row input[type="file"] { max-width:100%; font-size:12px; }
.web-assistant-avatar-row small { width:100%; }
.web-assistant-enabled-row { align-self:center; display:flex; align-items:center; gap:9px; padding:8px 0 13px; font-size:12.5px; font-weight:650; }
.web-assistant-enabled-row input { width:17px; height:17px; accent-color:var(--accent); }
.web-assistant-embed-block { margin:4px 0 14px; padding:13px; border:1px solid #ddd6fe; border-radius:12px; background:#f7f5ff; }
.web-assistant-embed-title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; font-size:12.5px; }
.web-assistant-embed-title span { color:#177245; font-size:11px; }
.web-assistant-embed-block textarea { color:#352965; background:#fff; font:11.5px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; }
.web-assistant-embed-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; }
.page-web-embed-btn, .page-web-config-btn { color:#4f35b5; border-color:#d9cff8; background:#f7f4ff; }
.new-channel-actions { margin-top:14px; display:flex; flex-wrap:wrap; gap:9px; }
.zalo-modal-heading { display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
.zalo-modal-heading .platform-mark { flex-basis:42px; width:42px; height:42px; border-radius:12px; font-size:24px; }
.zalo-modal-heading .platform-mark.platform-sprite {
border-radius:50%; background-size:215.04px 112.56px; background-position:-162px -61.5px;
}
.zalo-modal-heading h3 { margin:1px 0 3px; }
.zalo-modal-heading .modal-sub { margin:0; }
.zalo-risk-warning { font-size:12.5px; line-height:1.5; }
.zalo-risk-warning ul { margin:8px 0 0; padding-left:19px; }
.zalo-risk-warning li + li { margin-top:5px; }
.zalo-contact-entry { padding:9px 12px; border-bottom:1px solid var(--border); background:#f7fbff; }
.zalo-contact-entry.is-hidden { display:none; }
.zalo-contact-open-btn { width:100%; justify-content:flex-start; gap:9px; text-align:left; background:#fff; border-color:#cfe0ff; color:var(--text); }
.zalo-contact-open-btn .platform-mark { width:28px; height:28px; flex:0 0 28px; border-radius:8px; font-size:16px; }
.zalo-contact-open-btn span:last-child { display:grid; gap:1px; }
.zalo-contact-open-btn small { color:var(--text-muted); font-size:10.5px; font-weight:500; }
.zalo-contact-search { width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--border); border-radius:10px; font:inherit; margin:8px 0 10px; }
.zalo-contact-list { overflow-y:auto; min-height:180px; max-height:460px; border:1px solid var(--border); border-radius:12px; }
.zalo-contact-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--border); }
.zalo-contact-row:last-child { border-bottom:0; }
.zalo-contact-avatar { width:42px; height:42px; flex:0 0 42px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:#eaf1ff; color:#0866ff; font-weight:800; }
.zalo-contact-avatar img { width:100%; height:100%; object-fit:cover; }
.zalo-contact-name { flex:1; min-width:0; }
.zalo-contact-name b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zalo-contact-name small { color:var(--text-muted); }
.zalo-contact-row .btn { flex:0 0 auto; }
.zalo-contact-footer { color:var(--text-muted); font-size:11.5px; margin-top:8px; }
.zalo-qr-stage { display:grid; justify-items:center; gap:10px; padding:18px; border:1px solid var(--border); border-radius:14px; background:#f8fbff; text-align:center; }
.zalo-qr-image { display:block; width:min(280px,100%); aspect-ratio:1; object-fit:contain; border-radius:10px; background:#fff; }
.zalo-qr-placeholder { display:grid; place-items:center; width:min(280px,100%); aspect-ratio:1; border-radius:10px; background:#fff; }
.zalo-qr-stage small { color:var(--text-muted); }
.zalo-connect-success { display:grid; place-items:center; width:84px; height:84px; border-radius:50%; background:#e7f7ed; color:#188038; font-size:46px; font-weight:800; }
.zalo-scanned-account { display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; }
.zalo-scanned-account img { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.zalo-scanned-account > div { display:grid; gap:2px; min-width:0; }
.zalo-scanned-account small { color:var(--text-muted); }
.facebook-page-options { display: grid; gap: 8px; max-height: min(48vh, 360px); overflow-y: auto; margin: 10px 0 12px; }
.facebook-page-option { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; }
.facebook-page-option:hover { background: var(--surface-subtle); border-color: var(--accent); }
.facebook-page-option:has(input:checked) { border-color:#dfc9e7; background:linear-gradient(135deg,#f3e8f7,#eee8fb); color:var(--accent); }
.facebook-page-option input { flex: 0 0 auto; }
.facebook-page-option span { min-width: 0; display: grid; gap: 2px; }
.facebook-page-option b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.facebook-page-option small { color: var(--text-muted); font-size: 11.5px; }
.ai-rules-preview { display: grid; gap: 9px; margin: 12px 0; }
.ai-rule-preview-row { display: grid; grid-template-columns: 24px 1fr; gap: 9px; align-items: start; }
.ai-rule-preview-row input[type="checkbox"] { margin-top: 11px; }
.ai-rule-preview-row textarea {
width: 100%; min-height: 58px; box-sizing: border-box; resize: vertical;
border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
color: var(--text); background: var(--panel); font: inherit;
}
.ai-rules-note { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.ai-goal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0; }
.ai-goal-card { position:relative; cursor:pointer; }
.ai-goal-card input { position:absolute; opacity:0; pointer-events:none; }
.ai-goal-card-body {
display:block; height:100%; box-sizing:border-box; padding:15px; border:1px solid var(--border);
border-radius:12px; background:var(--panel); transition:border-color .15s, box-shadow .15s, background .15s;
}
.ai-goal-card:hover .ai-goal-card-body { border-color:#8b78f6; }
.ai-goal-card input:checked + .ai-goal-card-body {
border-color:var(--primary); background:#f4f1ff; box-shadow:0 0 0 2px rgba(98,72,224,.12);
}
.ai-goal-icon { display:block; font-size:22px; margin-bottom:9px; }
.ai-goal-title { display:block; font-size:13.5px; font-weight:700; margin-bottom:6px; color:var(--text); }
.ai-goal-desc { display:block; font-size:12px; line-height:1.5; color:var(--text-muted); }
@media (max-width:700px) { .ai-goal-grid { grid-template-columns:1fr; } }
.assign-page-option { min-height:42px; justify-content: space-between; padding:4px 2px; border-radius:8px; }
.assign-page-option:hover { background:var(--accent-soft); }
.assign-page-option-main { display:flex; align-items:center; gap:9px; min-width:0; flex:1 1 auto; }
.assign-page-option-copy { display:grid; gap:1px; min-width:0; }
.assign-page-option-copy strong { overflow:hidden; color:var(--text); font-size:13px; font-weight:600; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.assign-page-option-copy small { color:var(--text-muted); font-size:10px; line-height:1.2; }
.assign-page-option > input { flex:0 0 auto; width:17px; height:17px; margin:0 3px 0 8px; accent-color:#1677e8; }
.assign-empty-hint { font-size: 12.5px; color: var(--text-muted); padding: 4px 2px; }
/* ===================== HAMBURGER + DRAWER (chỉ hoạt động trên mobile qua media query bên dưới) ===================== */
.hamburger-btn {
display: none; border: none; background: none; font-size: 20px; line-height: 1; cursor: pointer;
padding: 8px; margin-right: 4px; color: var(--text); flex-shrink: 0;
}
.sidebar-overlay {
display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 30;
}
.sidebar-overlay.open { display: block; }
.chat-back-btn {
display: none; border: none; cursor: pointer;
color: #fff; background: var(--accent); flex-shrink: 0; align-self: center;
border-radius: 50%; width: 34px; height: 34px; align-items: center; justify-content: center;
box-shadow: var(--shadow-1); transition: background .15s, transform .1s;
}
.chat-back-btn svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 2.5; }
.chat-back-btn:active { background: var(--accent-hover); transform: scale(0.94); }
/* Tablet: dùng drawer như mobile để phần nội dung không bị sidebar 232px ép hẹp. */
@media (max-width: 768px) {
#app-screen { height:100dvh; min-height:0; }
.hamburger-btn { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; }
.topbar { padding:0 12px 0 6px; }
.sidebar {
position:fixed; top:0; left:0; height:100dvh; z-index:31;
width:260px; transform:translateX(-100%); transition:transform .2s ease;
box-shadow:2px 0 18px rgba(24,18,64,.24);
}
.sidebar.open { transform:translateX(0); }
.sidebar.collapsed { width:260px; padding:12px; }
.sidebar.collapsed .nav-item .nav-label { display:inline; }
.sidebar.collapsed .nav-group-label { display:block; }
.sidebar.collapsed .nav-item { justify-content:flex-start; padding:11px 16px; gap:12px; }
.sidebar-toggle-btn { display:none; }
.main { padding:20px 18px 60px; }
.page-header h1 { font-size:20px; }
.mobile-channel-picker {
display:none; align-items:center; gap:9px; margin:0 0 12px; padding:9px 11px;
border:1px solid var(--accent-border); border-radius:12px; background:var(--accent-soft);
}
.mobile-channel-picker.is-visible { display:flex; }
#sidebar .sidebar-channel-picker { display:none !important; }
.mobile-channel-picker label { flex-shrink:0; color:#625b75; font-size:12px; font-weight:600; }
.mobile-channel-picker select { min-width:0; flex:1; background:#fff; font-weight:600; }
.main.page-config-active #page-save-bar { left:18px; right:18px; bottom:14px; }
}
@media (max-width: 640px) {
.topbar-user > div:not(.avatar) { display:none; }
.topbar-right { gap:8px; }
}
/* ===================== MOBILE (điện thoại, <=480px) ===================== */
@media (max-width: 480px) {
.knowledge-source-options, .natural-level-options { grid-template-columns:1fr; }
#app-screen { height: 100dvh; min-height: 0; }
#login-screen { height: 100dvh; min-height: 100dvh; }
.login-form-panel { padding: 20px 16px; }
.login-card { max-width: 100%; }
.topbar { padding: 0 8px 0 4px; }
.topbar-brand { font-size: 14px; }
.topbar-user > div:not(.avatar) { display: none; } /* ẩn tên+role, chỉ giữ avatar cho gọn */
.account-dropdown { position:fixed; top:64px; right:8px; width:min(280px,calc(100vw - 16px)); }
.account-help-contact { grid-template-columns:1fr; }
.main.page-config-active { padding-bottom:82px; }
.main.page-config-active #page-save-bar { left:10px; right:10px; bottom:10px; justify-content:space-between; border-radius:14px; }
.sidebar, .sidebar.collapsed { width:250px; }
.sidebar.collapsed .nav-item { padding:12px 16px; }
.nav-item { padding: 12px 16px; min-height: 44px; }
.main { padding: 16px 12px 60px; }
.main:has(#page-conversations.active) { overflow: hidden; padding-bottom: 0; }
.page-header { flex-direction:column; gap:10px; }
.page-header h1 { font-size:19px; }
#config-subnav {
width: 100%;
margin-bottom: 16px;
scroll-snap-type: x proximity;
}
#config-subnav .subnav-item { min-height: 40px; padding: 0 16px; scroll-snap-align: start; }
/* Form 1 cột thay vì 2 cột label/input */
.field-row { grid-template-columns: 1fr; gap: 6px; }
.field-label { padding-top: 0; }
.global-operation-pair { grid-template-columns:1fr; gap:0; border-bottom:0; }
.global-operation-pair > .field-row { grid-template-columns:minmax(0,1fr) auto; gap:12px; border-bottom:1px solid #e8eaed; }
.list-card-fields, .list-card-fields.faq, #alias-list .list-card-fields { grid-template-columns: 1fr !important; }
.knowledge-section > .section-body { padding:12px; }
.knowledge-section .list-card { padding:14px 12px; gap:6px; }
/* Bảng dài -> cuộn ngang thay vì ép vỡ layout */
table { display: block; overflow-x: auto; white-space: nowrap; }
#table-users, .customer-table-wrap .cust-table { display:table; overflow:visible; white-space:normal; }
/* Bảng KH trên điện thoại chỉ giữ dữ liệu cần thao tác ngay; các thông
tin chi tiết vẫn xem đầy đủ khi bấm "Xem". */
.customer-table-wrap .cust-table th:nth-child(4), .customer-table-wrap .cust-table td:nth-child(4),
.customer-table-wrap .cust-table th:nth-child(5), .customer-table-wrap .cust-table td:nth-child(5),
.customer-table-wrap .cust-table th:nth-child(6), .customer-table-wrap .cust-table td:nth-child(6),
.customer-table-wrap .cust-table th:nth-child(7), .customer-table-wrap .cust-table td:nth-child(7) { display:none; }
.customer-table-wrap .cust-table th:nth-child(1) { width:25%; }
.customer-table-wrap .cust-table th:nth-child(2) { width:31%; }
.customer-table-wrap .cust-table th:nth-child(3) { width:26%; }
.customer-table-wrap .cust-table th:nth-child(8) { width:18%; }
.customer-table-wrap .cust-table th,
.customer-table-wrap .cust-table td { padding:8px 6px; font-size:11px; }
.customer-table-wrap .cust-action-btn { padding:6px; white-space:normal; font-size:10.5px; }
/* Khu vực Hội thoại: dùng dvh để né lỗi 100vh khi bàn phím mobile bật lên */
.content-split { height: auto; min-height: 0; gap: 0; position: relative; }
#page-conversations.active .content-split { margin: 0 -12px; flex: 1 1 0; min-height: 0; overflow: hidden; }
.conv-panel { width: 100%; border-radius: 0; border-right: none; }
.chat-panel { border-radius: 0; min-height: 0; height: 100%; }
/* Master-detail: mặc định chỉ hiện danh sách, ẩn chat; khi mở 1 hội
thoại (class mobile-chat-active) thì đảo lại - xem openConversation_/closeMobileChat_ */
.content-split .chat-panel { display: none; }
.content-split.mobile-chat-active .conv-panel { display: none; }
.content-split.mobile-chat-active .chat-panel { display: flex; }
/* Chỉ danh sách tin nhắn được cuộn. Thanh nhập luôn nằm trong chiều cao
nhìn thấy, kể cả khi thanh địa chỉ hoặc bàn phím điện thoại đóng/mở. */
.chat-messages { min-height: 0; overscroll-behavior: contain; }
.chat-reply-bar {
position: relative; z-index: 4; flex: 0 0 auto;
padding: 8px 10px max(8px, env(safe-area-inset-bottom));
box-shadow: 0 -2px 8px rgba(0,0,0,.06);
}
.chat-back-btn { display: flex; min-width: 40px; min-height: 40px; width: 40px; height: 40px; }
.chat-header { gap:10px; flex-wrap:nowrap; }
.chat-header-main { flex:1 1 auto; min-width:0; }
.chat-header-summary { display:none; }
.msg-bubble { font-size:16px; line-height:1.45; }
.chat-reply-bar .btn { min-height: 44px; padding: 0 16px; }
.chat-reply-bar textarea { min-height: 44px; font-size:16px; }
.scroll-latest-btn, .conv-refresh-btn { min-height: 36px; }
/* Mobile ưu tiên bộ lọc và danh sách KH; 6 thẻ KPI vẫn giữ trên desktop. */
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
.cust-avatar-unread::before, .cust-avatar-unread::after,
.channel-unread-dot::before, .channel-unread-dot::after,
#topbar-new-message-dot.is-visible::before, #topbar-new-message-dot.is-visible::after { animation-duration:1.65s !important; animation-iteration-count:infinite !important; }
}
/* =====================================================================
19BOT PRODUCT UI 2026 — Easy AI-inspired visual system
Keep all existing behavior; this layer only unifies presentation.
===================================================================== */
:root {
--bg:#f6f5ff;
--panel:#ffffff;
--border:#e8e6f0;
--text:#17151f;
--text-muted:#746f7e;
--accent:#71328f;
--accent-hover:#5e247c;
--accent-2:#933fc0;
--accent-soft:#f3eafa;
--accent-border:#e1cbea;
--surface-subtle:#faf8fd;
--focus-ring:rgba(113,50,143,.18);
--radius:16px;
--shadow-1:0 2px 8px rgba(44,30,68,.06);
--shadow-2:0 18px 45px rgba(54,36,82,.13);
--accent-gradient:linear-gradient(135deg,#783394 0%,#5f2b83 100%);
}
html,body,button,input,textarea,select { font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body { background:var(--bg); letter-spacing:-.005em; }
/* Keep the established two-column login while the signed-in product uses the new UI. */
#login-screen {
--bg:#f6f5ff; --panel:#fff; --border:#e8e6f0; --text:#17151f; --text-muted:#746f7e;
--accent:#71328f; --accent-hover:#5e247c; --accent-soft:#f3eafa;
--brand-blue:#879cf2; --brand-purple:#b36dcc; --brand-text:#71328f;
--brand-soft-start:rgba(135,156,242,.22); --brand-soft-end:rgba(179,109,204,.22);
--green:#287b55; --green-soft:#e9f6ef;
font-family:"Google Sans Text",Roboto,-apple-system,"Segoe UI",sans-serif;
}
#login-screen input,#login-screen button { font-family:inherit; }
#login-screen .login-hero {
background:
radial-gradient(620px 460px at 8% 4%,rgba(135,156,242,.30),transparent 66%),
radial-gradient(620px 500px at 94% 88%,rgba(179,109,204,.28),transparent 66%),
linear-gradient(145deg,#f5f6ff 0%,#fbf5ff 100%);
}
#login-screen .login-bubble { box-shadow:0 12px 30px rgba(75,43,99,.13); }
#login-screen .login-bubble.b1 { background:linear-gradient(135deg,#718ded,#91a8fa); }
#login-screen .login-bubble.b2 { background:linear-gradient(135deg,#9b55b8,#c487d6); }
#login-screen .login-bubble.b3 { background:linear-gradient(135deg,#31815d,#5ba87e); }
#login-screen .login-bubble.b4 { background:linear-gradient(135deg,#d99545,#edbd78); }
#login-screen .login-bubble.b6 { background:linear-gradient(135deg,#71328f,#a354bd); }
#login-screen .login-field input { background:#fbfaff; border-color:#e3dfe8; }
#login-screen .login-field input:focus { border-color:#9860ae; box-shadow:0 0 0 3px rgba(113,50,143,.14); }
#login-screen .btn-login { background:linear-gradient(135deg,#783394,#5f2b83); box-shadow:0 7px 18px rgba(113,50,143,.18); }
#login-screen .btn-login:hover { background:linear-gradient(135deg,#672681,#51206f); }
#login-screen .btn-google { border-color:#e3dfe8; }
#login-screen .btn-google:hover { border-color:#cfbdd8; background:#faf6fc; }
/* Product shell */
#app-screen { background:var(--bg); }
.topbar {
height:68px;
padding:0 24px;
border-bottom:1px solid var(--border);
background:rgba(255,255,255,.94);
box-shadow:none;
}
.topbar-brand::before { width:118px; height:36px; }
.topbar-right { gap:10px; }
.topbar-user { padding:5px 8px; border:1px solid transparent; border-radius:10px; }
.topbar-user .avatar { width:32px; height:32px; background:var(--accent-soft); color:var(--accent); }
.role-pill { background:var(--accent-soft); color:var(--accent); }
.btn-logout { min-height:34px; padding:7px 12px; border-color:var(--border); border-radius:9px; color:#5f5969; }
.btn-logout:hover { border-color:var(--accent-border); background:var(--accent-soft); color:var(--accent); }
.app { gap:0; padding:14px; padding-top:0; background:var(--bg); }
.sidebar {
width:240px;
margin-top:14px;
padding:14px 10px;
border:1px solid rgba(255,255,255,.18);
border-radius:18px;
background:linear-gradient(180deg,#783394 0%,#71328f 52%,#5e247c 100%);
box-shadow:0 10px 28px rgba(74,31,96,.20);
}
.sidebar.collapsed { width:68px; padding:14px 8px; }
.nav-group-label { padding:18px 12px 7px; color:rgba(255,255,255,.58); font-size:10px; letter-spacing:.09em; }
.nav-item { min-height:42px; margin-bottom:3px; padding:9px 12px; border-radius:10px; color:rgba(255,255,255,.82); font-size:13px; font-weight:550; }
.nav-item:hover { background:rgba(255,255,255,.12); color:#fff; }
.nav-item.active { background:rgba(255,255,255,.94); color:var(--accent); font-weight:700; box-shadow:0 5px 14px rgba(44,17,58,.16); }
.nav-item:focus-visible { background:rgba(255,255,255,.16); color:#fff; outline-color:rgba(255,255,255,.7); }
.nav-icon { width:19px; height:19px; }
.nav-icon svg { width:19px; height:19px; }
.sidebar-channel-picker { margin:auto 2px 0; padding:10px; border-color:rgba(255,255,255,.18); border-radius:11px; background:rgba(255,255,255,.10); }
.sidebar-channel-picker label { color:rgba(255,255,255,.66); }
.sidebar-channel-picker select { border-color:rgba(255,255,255,.28); background:#fff; }
.sidebar-toggle-btn { top:28px; left:241px; border-color:var(--border); box-shadow:0 4px 12px rgba(44,30,68,.10); color:var(--accent); }
.sidebar.collapsed + .sidebar-toggle-btn { left:69px; }
.nav-tooltip { background:#21172a; border-radius:8px; }
.main { padding:28px 30px 54px; background:transparent; }
.page-header { max-width:1120px; margin-bottom:22px; }
.page-header h1 { font-size:24px; font-weight:750; letter-spacing:-.035em; }
.page-header p { font-size:13px; color:#817a89; }
.section { max-width:1120px; border-color:var(--border); border-radius:16px; box-shadow:var(--shadow-1); }
.section-header { min-height:50px; padding:14px 18px; border-color:#efedf3; font-size:13.5px; }
.section-body { padding:10px 18px 18px; }
.field-row { padding:15px 0; border-color:#f0eef3; }
.field-label { font-size:13px; }
.field-hint { color:#8a8491; }
input[type="text"],input[type="email"],input[type="url"],input[type="search"],input[type="number"],input[type="time"],input[type="password"],textarea,select {
min-height:40px; padding:9px 11px; border-color:#dedbe4; border-radius:9px; background:#fff;
}
input:hover,textarea:hover,select:hover { border-color:#c9c3d0; }
input:focus,textarea:focus,select:focus { border-color:#9a62b2; box-shadow:0 0 0 3px var(--focus-ring); }
.toggle-track { background:#d8d4dc; }
.toggle input:checked + .toggle-track { background:var(--accent); }
.btn { min-height:38px; padding:8px 15px; border-color:#ded9e4; border-radius:9px; font-size:12.5px; font-weight:650; }
.btn:hover { border-color:var(--accent-border); background:var(--accent-soft); }
.btn-primary { background:var(--accent-gradient); box-shadow:0 5px 13px rgba(113,50,143,.18); }
.btn-primary:hover { background:linear-gradient(135deg,#672681,#51206f); box-shadow:0 7px 16px rgba(82,31,108,.22); }
.info-note,.warning-box { border-radius:12px; }
.info-note { border-color:#e5dded; background:#faf7fc; }
/* Secondary navigation and editor cards */
#config-subnav { padding:4px; border-radius:12px; background:#fff; box-shadow:var(--shadow-1); }
#config-subnav .subnav-item { min-height:38px; padding:0 15px; border-radius:8px; font-size:12.5px; }
#config-subnav .subnav-item.active { background:var(--accent-soft); color:var(--accent); box-shadow:none; }
#config-subnav .subnav-item.active:hover { background:#eadbf2; color:var(--accent-hover); }
.list-card { border-color:var(--border); border-radius:14px; box-shadow:0 2px 7px rgba(44,30,68,.035); }
.natural-mode-option,.natural-level-option>span,.knowledge-source-option>span,.offday-option span { border-color:var(--border); border-radius:12px; }
.natural-mode-option:has(input:checked),.natural-level-option input:checked+span,.knowledge-source-option input:checked+span,.offday-option input:checked+span { border-color:#b782ca; background:#faf3fd; }
/* Data, dashboards and reports */
.stat-card,.summary-kpi,.summary-pages-section,.summary-panel,.summary-page-card,.ai-usage-toolbar,.customer-table-wrap {
border-color:var(--border); border-radius:16px; box-shadow:var(--shadow-1);
}
.stat-card { padding:15px 17px; }
.stat-card .stat-num { font-size:23px; }
.stat-card.accent { border-color:#d9c3e4; background:#faf4fd; }
.summary-dashboard { gap:18px; }
.summary-kpi { min-height:116px; padding:18px; }
.summary-kpi::after { opacity:.42; }
.summary-kpi-value { font-size:32px; }
.summary-page-card { background:#fff; }
.summary-page-name { background:#70408b; }
.summary-page-stat { background:#faf8fc; }
.summary-panel-head { border-color:#efedf3; }
.summary-trend-bar { background:linear-gradient(180deg,#b56dcc,#71328f); }
.summary-rank-fill,.summary-progress-fill { background:var(--accent); }
.date-tab,.sort-toggle-btn { border-radius:9px; }
.date-tab.active { border-color:var(--accent-border); background:var(--accent-soft); }
.cust-table,.data-table { border-color:var(--border); border-radius:14px; }
.cust-table th,.data-table th { padding:11px 14px; border-color:#ebe8ef; background:#faf9fc; color:#87818e; font-size:10.5px; }
.cust-table td,.data-table td { padding:9px 14px; border-color:#f0eef3; }
.cust-table tr:hover td,.data-table tr:hover td { background:#fbf8fd; }
.customer-table-wrap .cust-table th { background:#faf9fc; }
/* Conversations */
#page-conversations.active .content-split {
margin:0;
border:1px solid var(--border);
border-radius:18px;
overflow:hidden;
box-shadow:var(--shadow-1);
}
.conv-panel { width:320px; border:0; border-right:1px solid var(--border); background:#fff; }
.conv-toolbar { padding:12px; border-color:#efedf3; background:#fcfbfd; }
.conv-toolbar select,.conv-toolbar input { border-radius:9px; }
.conv-item { padding:9px 11px; border-left-width:3px; border-color:#f0eef3; }
.conv-item:hover { background:#faf7fc; }
.conv-item.selected { border-left-color:var(--accent); background:#f6eef9; }
.chat-panel { border:0; background:#fff; }
.chat-header { padding:12px 16px; border-color:#efedf3; background:#fff; }
.chat-header-summary { border:1px solid #ebe6ef; border-radius:10px; background:#faf8fc; }
.chat-messages {
/* Original quiet 19bot pattern: stays anchored while messages scroll. */
background-color:#fcfbfd;
background-image:url("chat-conversation-pattern.png?v=20260821-chat-pattern40");
background-repeat:repeat;
background-size:1100px auto;
background-position:center top;
background-attachment:fixed;
}
.msg-row.user .msg-bubble { background:#f0edf3; }
.msg-row.assistant .msg-bubble { background:linear-gradient(135deg,#8a4ba7,#693185); }
.msg-row.admin .msg-bubble { background:linear-gradient(135deg,#3a9b69,#237b50); }
.chat-reply-bar { padding:12px 14px; border-color:#efedf3; }
.chat-reply-bar textarea { border-color:#e4dfe8; background:#faf8fc; }
.chat-reply-bar .btn { background:var(--accent-gradient); }
/* Align the conversation workspace with the sidebar and use more width. */
@media (min-width:881px) {
.main {
padding:14px 14px 54px;
}
.main.page-config-active {
padding-bottom:88px;
}
/* Keep the floating save action aligned with the right edge of the
1120px configuration panels, instead of the browser's right edge. */
.main.page-config-active #page-save-bar {
right:max(14px, calc(100vw - (14px + 240px + 14px + 1120px)));
}
.sidebar.collapsed ~ .main.page-config-active #page-save-bar {
right:max(14px, calc(100vw - (14px + 68px + 14px + 1120px)));
}
.main:has(#page-conversations.active) {
padding:14px 14px 0 14px;
overflow:hidden;
}
.main:has(#page-report.active) {
padding:14px;
overflow:hidden;
}
#page-users.active,
#page-pages.active,
#page-summary.active,
#page-ai-usage.active,
#page-log.active {
width:100%;
max-width:none;
}
.main:has(#page-users.active) .page-header,
.main:has(#page-pages.active) .page-header,
.main:has(#page-summary.active) .page-header,
.main:has(#page-ai-usage.active) .page-header,
.main:has(#page-log.active) .page-header,
.main:has(#page-users.active) #sheet-switch-wrap,
.main:has(#page-pages.active) #sheet-switch-wrap,
.main:has(#page-summary.active) #sheet-switch-wrap,
.main:has(#page-ai-usage.active) #sheet-switch-wrap,
.main:has(#page-log.active) #sheet-switch-wrap {
width:100%;
max-width:none;
}
}
/* Popovers and modals */
.assign-btn,.assign-dropdown { border-color:var(--border); border-radius:10px; }
.assign-dropdown { box-shadow:var(--shadow-2); }
.modal-overlay { background:rgba(27,20,33,.46); backdrop-filter:blur(4px); }
.modal-box { border:1px solid rgba(255,255,255,.8); border-radius:18px; box-shadow:var(--shadow-2); padding:24px; }
.modal-box h3 { font-size:18px; letter-spacing:-.025em; }
.main.page-config-active #page-save-bar { border-color:var(--border); border-radius:14px; box-shadow:var(--shadow-2); }
@media (max-width:880px) {
.app { padding:0; }
.sidebar,.sidebar.collapsed { margin:0; border-width:0 1px 0 0; border-radius:0; }
.main { padding:22px 18px 54px; }
#page-conversations.active .content-split { margin:0 -18px; border-width:1px 0 0; border-radius:0; }
}
@media (max-width:480px) {
.topbar { height:60px; }
.main { padding:16px 12px 54px; }
#page-conversations.active .content-split { margin:0 -12px; }
.conv-panel { width:100%; border-right:0; }
#page-report .date-bar-sep { display:none !important; }
#page-report .cust-search { flex:1 1 100%; width:100%; min-width:0; max-width:none; height:44px; font-size:16px; }
#page-report .cust-staff-filter,
#page-report .cust-channel-filter { min-width:0; max-width:none; }
#page-report .cust-staff-filter select,
#page-report .cust-channel-filter select { height:40px; font-size:16px; }
#page-report .cust-excel-export-btn { margin-left:auto; }
.customer-table-wrap .cust-table th:nth-child(2),
.customer-table-wrap .cust-table td:nth-child(2),
.customer-table-wrap .cust-table th:nth-child(4),
.customer-table-wrap .cust-table td:nth-child(4),
.customer-table-wrap .cust-table th:nth-child(5),
.customer-table-wrap .cust-table td:nth-child(5),
.customer-table-wrap .cust-table th:nth-child(6),
.customer-table-wrap .cust-table td:nth-child(6),
.customer-table-wrap .cust-table th:nth-child(7),
.customer-table-wrap .cust-table td:nth-child(7) { display:none; }
.customer-table-wrap .cust-table th:nth-child(1) { width:62%; }
.customer-table-wrap .cust-table th:nth-child(3) { width:38%; }
.summary-kpi-grid { grid-template-columns:1fr 1fr; }
}
/* Drawer responsive phải nằm sau các rule theme ở trên. Trang Hội thoại
gắn class .collapsed để thu gọn sidebar desktop; trên tablet/mobile class
đó không được làm drawer co còn 68px và cắt mất nhãn menu. */
@media (max-width:768px) {
.sidebar,
.sidebar.collapsed {
width:260px;
padding:12px;
}
.sidebar.open,
.sidebar.collapsed.open {
width:260px !important;
padding:12px !important;
}
.sidebar.open .nav-group-label,
.sidebar.collapsed.open .nav-group-label { display:block !important; }
.sidebar.open .nav-item,
.sidebar.collapsed.open .nav-item {
justify-content:flex-start !important;
gap:12px !important;
padding:11px 16px !important;
}
.sidebar.open .nav-item .nav-label,
.sidebar.collapsed.open .nav-item .nav-label { display:inline !important; }
}
@media (max-width:480px) {
.sidebar,
.sidebar.collapsed {
width:250px;
}
.sidebar.open,
.sidebar.collapsed.open {
width:min(250px, calc(100vw - 48px)) !important;
}
}
/* Conversation channel filter */
.conv-filter-stack { position:relative; flex-direction:column; align-items:stretch; }
.conversation-channel-filter { position:relative; }
.conversation-channel-trigger { width:100%; min-height:44px; display:flex; align-items:center; gap:9px; padding:6px 10px; border:1px solid var(--border); border-radius:9px; background:#fff; color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.conversation-channel-trigger:hover { border-color:var(--accent-border); background:var(--accent-soft); }
.conversation-channel-trigger-copy { min-width:0; flex:1; display:grid; gap:1px; }
.conversation-channel-trigger-copy small { color:var(--text-muted); font-size:10.5px; }
.conversation-channel-trigger-copy b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; }
.conversation-channel-chevron { width:15px; height:15px; flex:0 0 15px; color:var(--text-muted); transition:transform .15s ease; }
.conversation-channel-trigger[aria-expanded="true"] .conversation-channel-chevron { transform:rotate(180deg); }
.conversation-channel-menu { position:absolute; z-index:40; top:calc(100% + 5px); left:0; right:0; max-height:min(50vh,360px); overflow-y:auto; padding:5px; border:1px solid var(--border); border-radius:11px; background:#fff; box-shadow:0 12px 28px rgba(31,23,50,.16); }
.conversation-channel-menu.is-hidden { display:none; }
.conversation-channel-option { width:100%; display:flex; align-items:center; gap:10px; padding:8px; border:0; border-radius:8px; background:transparent; color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.conversation-channel-option:hover,.conversation-channel-option.is-selected { background:var(--accent-soft); }
.conversation-channel-option-copy { min-width:0; flex:1; display:grid; gap:1px; }
.conversation-channel-option-copy b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; }
.conversation-channel-option-copy small { color:var(--text-muted); font-size:10.5px; }
.channel-logo { width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center; overflow:hidden; border-radius:50%; font-size:9px; font-weight:800; line-height:1; }
.channel-logo svg { width:100%; height:100%; display:block; }
.channel-logo-all { color:#6750a4; background:#eee9f6; }
.channel-logo-all svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
.channel-logo-zalo { color:#0868ff; background:#fff; border:1.5px solid #0868ff; font-size:8px; letter-spacing:-.4px; }
/* Platform sprites for the Conversations channel picker */
#app-screen .conversation-channel-sprite {
border:0;
background-image:url('3.jpg');
background-repeat:no-repeat;
background-size:143.36px 75.04px;
box-shadow:0 3px 9px rgba(40,31,64,.16);
}
#app-screen .conversation-channel-sprite.connection-logo-fanpage { background-position:-7px -5px; }
#app-screen .conversation-channel-sprite.connection-logo-instagram { background-position:-40.5px -5px; }
#app-screen .conversation-channel-sprite.connection-logo-zalo_oa { background-position:-74px -5px; }
#app-screen .conversation-channel-sprite.connection-logo-telegram { background-position:-108px -5px; }
#app-screen .conversation-channel-sprite.connection-logo-tiktok { background-position:-7px -41px; }
#app-screen .conversation-channel-sprite.connection-logo-viber { background-position:-40.5px -41px; }
#app-screen .conversation-channel-sprite.connection-logo-whatsapp { background-position:-74px -41px; }
#app-screen .conversation-channel-sprite.connection-logo-zalo_personal { background-position:-108px -41px; }
#app-screen .conversation-channel-sprite.connection-logo-web_assistant {
background-image:url('chatbot-avatar.png?v=20260903-web-icon1');
background-position:center;
background-size:cover;
}
.conv-search-row { display:flex; gap:8px; min-width:0; }
.conv-search-row #filter-search { width:100%; min-width:0; min-height:38px; }
.conv-search-row .zalo-contact-entry { flex:0 0 calc(50% - 4px); min-width:0; padding:0; border:0; background:transparent; }
.conv-search-row .zalo-contact-entry.is-hidden { display:none; }
.conv-search-row .zalo-contact-open-btn { width:100%; min-height:38px; display:flex; align-items:center; justify-content:center; gap:6px; padding:5px 7px; border-radius:9px; color:#0868ff; font-size:11.5px; font-weight:700; white-space:nowrap; }
.conv-search-row .zalo-contact-open-btn .platform-mark { width:25px; height:25px; flex:0 0 25px; border-radius:50%; font-size:13px; }
.conv-search-row:has(.zalo-contact-entry:not(.is-hidden)) #filter-search { flex:0 0 calc(50% - 4px); }
/* ===================== CONNECTION HUB ===================== */
#page-connections { width:100%; }
.connection-dashboard { width:100%; max-width:none; padding-bottom:24px; }
.connection-stats {
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:22px;
}
.connection-stat-card {
--stat-color:#5e50d6; --stat-soft:#efedff;
position:relative; display:flex; align-items:center; gap:13px; min-height:92px; padding:18px;
overflow:hidden; border:1px solid color-mix(in srgb,var(--stat-color) 18%,#e4e4ec);
border-radius:18px; background:linear-gradient(145deg,#fff 42%,var(--stat-soft));
box-shadow:0 8px 24px rgba(44,32,90,.07); isolation:isolate;
}
.connection-stat-card::after {
content:""; position:absolute; width:92px; height:92px; right:-38px; top:-44px;
border-radius:50%; background:var(--stat-color); opacity:.08; z-index:-1;
}
.connection-stat-active { --stat-color:#16a05d; --stat-soft:#ecfbf3; }
.connection-stat-ai { --stat-color:#8b3ee8; --stat-soft:#f6efff; }
.connection-stat-off { --stat-color:#e15b64; --stat-soft:#fff1f2; }
.connection-stat-icon {
width:43px; height:43px; flex:0 0 43px; display:grid; place-items:center; border-radius:13px;
color:var(--stat-color); background:#fff; box-shadow:0 6px 15px color-mix(in srgb,var(--stat-color) 18%,transparent);
}
.connection-stat-icon svg { width:22px; height:22px; }
.connection-stat-copy { min-width:0; display:flex; flex:1; align-items:center; justify-content:space-between; gap:10px; }
.connection-stat-copy span { color:#686678; font-size:12.5px; font-weight:650; line-height:1.35; }
.connection-stat-copy strong { color:#191725; font-size:27px; line-height:1; font-weight:800; letter-spacing:-.04em; }
.connection-catalog {
position:relative; overflow:hidden; padding:25px; border:1px solid #e1e0ea; border-radius:22px;
background:
radial-gradient(520px 180px at 4% 0%,rgba(94,80,214,.09),transparent 70%),
radial-gradient(500px 190px at 96% 100%,rgba(155,63,245,.07),transparent 70%),
#fff;
box-shadow:0 12px 34px rgba(42,29,78,.08);
}
.connection-catalog-heading { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.connection-heading-icon {
width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; border-radius:15px;
color:#fff; background:linear-gradient(135deg,#5066f4,#8d43de); box-shadow:0 9px 22px rgba(94,80,214,.3);
}
.connection-heading-icon svg { width:24px; height:24px; }
.connection-catalog-heading h2 { margin:0 0 2px; color:#201d2a; font-size:17px; font-weight:800; letter-spacing:-.01em; }
.connection-catalog-heading p { margin:0; color:#777487; font-size:13px; }
.connection-platform-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.connection-platform-card {
position:relative; min-width:0; min-height:192px; padding:17px; display:flex; flex-direction:column;
border:1px solid #e2dfe7; border-radius:18px; background:#fff;
box-shadow:0 5px 15px rgba(45,35,56,.065);
transition:transform .18s ease-out,border-color .18s ease-out,box-shadow .18s ease-out;
}
.connection-platform-card.is-ready {
border-color:#d9c9df; box-shadow:0 6px 17px rgba(83,38,106,.085);
}
.connection-platform-card.is-ready:hover {
transform:translateY(-2px); border-color:#c5a4d1;
box-shadow:0 10px 23px rgba(83,38,106,.12);
}
.connection-platform-card.is-coming {
border-color:#e1e3e8; background:#fff; box-shadow:0 4px 13px rgba(31,38,52,.055);
}
.connection-platform-card.is-coming:hover { border-color:#d4d7de; }
.connection-platform-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.connection-platform-logo {
width:56px; height:56px; display:block; flex:0 0 56px; overflow:hidden;
border:0; border-radius:50%;
background-image:url("3.jpg"); background-repeat:no-repeat; background-size:286.72px 150.08px;
box-shadow:0 5px 13px rgba(39,31,54,.15);
}
.connection-platform-logo > svg { display:none !important; }
.connection-logo-fanpage { background-position:-14px -10px; }
.connection-logo-instagram { background-position:-81px -10px; }
.connection-logo-zalo_oa { background-position:-148px -10px; }
.connection-logo-telegram { background-position:-216px -10px; }
.connection-logo-tiktok { background-position:-14px -82px; }
.connection-logo-viber { background-position:-81px -82px; }
.connection-logo-whatsapp { background-position:-148px -82px; }
.connection-logo-zalo_personal { background-position:-216px -82px; }
.connection-platform-logo.connection-logo-web_assistant {
background-image:url("chatbot-avatar.png?v=20260903-web-icon1");
background-position:center;
background-size:cover;
}
.connection-platform-status {
max-width:88px; padding:5px 8px; border-radius:999px; color:#858293; background:#f2f1f6;
font-size:9px; font-weight:800; letter-spacing:.035em; line-height:1; text-align:center; text-transform:uppercase;
}
.connection-platform-status.is-ready { border:1px solid #ded3f8; color:#4d34b8; background:#f2eeff; }
.connection-platform-copy { margin:12px 0 14px; }
.connection-platform-copy h3 { margin:0 0 2px; color:#1f1d28; font-size:15px; font-weight:800; }
.connection-platform-copy p { margin:0; overflow:hidden; color:#858291; font-size:11.5px; white-space:nowrap; text-overflow:ellipsis; }
.connection-platform-button {
width:100%; min-height:40px; margin-top:auto; padding:8px 14px; display:flex; align-items:center; justify-content:center; gap:8px;
border:1px solid #ded9e2; border-radius:12px; color:#8a818d; background:#f7f5f8;
font:700 12px/1 inherit; letter-spacing:.01em; cursor:not-allowed;
transition:background-color .16s ease-out,border-color .16s ease-out,box-shadow .16s ease-out,color .16s ease-out;
}
.connection-platform-button:disabled { opacity:1; }
.is-ready .connection-platform-button {
border-color:#e5cce9; color:#79378f; cursor:pointer;
background:linear-gradient(135deg,#fbf4fd,#f2e3f7);
box-shadow:0 3px 9px rgba(113,50,143,.10);
}
.is-ready .connection-platform-button:hover {
border-color:#d8b9e1; color:#6f2f85;
background:linear-gradient(135deg,#f8eefb,#ecd9f2);
box-shadow:0 5px 12px rgba(113,50,143,.13);
}
.is-ready .connection-platform-button:active {
background:#ead5f0; box-shadow:0 2px 6px rgba(113,50,143,.10);
}
.connection-platform-button span {
width:19px; height:19px; display:grid; place-items:center; border-radius:50%;
background:rgba(255,255,255,.15); font-size:13px; line-height:1;
}
.is-ready .connection-platform-button span { background:#e7d2ed; }
@media (prefers-reduced-motion:reduce) {
.connection-platform-card,.connection-platform-button { transition:none; }
}
@media (max-width:1050px) {
.connection-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
.connection-platform-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
.connection-dashboard { padding-bottom:14px; }
.connection-stats { gap:10px; margin-bottom:14px; }
.connection-stat-card { min-height:84px; padding:13px; border-radius:15px; }
.connection-stat-icon { width:38px; height:38px; flex-basis:38px; }
.connection-stat-copy { align-items:flex-start; flex-direction:column; gap:3px; }
.connection-stat-copy strong { font-size:23px; }
.connection-catalog { padding:16px; border-radius:18px; }
.connection-catalog-heading { align-items:flex-start; margin-bottom:17px; }
.connection-heading-icon { width:42px; height:42px; flex-basis:42px; }
.connection-platform-grid { gap:10px; }
.connection-platform-card { min-height:178px; padding:13px; border-radius:15px; }
.connection-platform-logo { width:52px; height:52px; flex-basis:52px; background-size:266.24px 139.36px; }
.connection-logo-fanpage { background-position:-13px -9px; }
.connection-logo-instagram { background-position:-75px -9px; }
.connection-logo-zalo_oa { background-position:-138px -9px; }
.connection-logo-telegram { background-position:-200px -9px; }
.connection-logo-tiktok { background-position:-13px -76px; }
.connection-logo-viber { background-position:-75px -76px; }
.connection-logo-whatsapp { background-position:-138px -76px; }
.connection-logo-zalo_personal { background-position:-200px -76px; }
}
@media (max-width:390px) {
.connection-stats, .connection-platform-grid { grid-template-columns:1fr; }
}
/* Cosmetic polish only: preserve the compact three-column card layout. */
.connection-stat-card {
border-color:#e3e6ec;
background:#fff;
box-shadow:0 5px 16px rgba(31,38,52,.055);
}
.connection-stat-card::after { display:none; }
.connection-catalog { border-color:#e2e5eb; background:#fff; box-shadow:0 2px 10px rgba(31,38,52,.045); }
.connection-heading-icon {
box-shadow:0 3px 10px rgba(93,69,210,.18);
}
.connection-catalog-heading h2 { letter-spacing:-.025em; }
.connection-platform-copy h3 { letter-spacing:-.015em; }
.is-coming .connection-platform-copy,
.is-coming .connection-platform-button { position:relative; z-index:1; }
.connection-platform-button {
border-color:#ddd7e2;
background:#f7f8fa;
box-shadow:none;
}
/* ===================== INTEGRATION LIST TABS ===================== */
.pages-section-header { gap:14px; flex-wrap:wrap; }
.page-list-tabs {
display:inline-flex; align-items:center; gap:4px; padding:4px;
border:1px solid #e4dce8; border-radius:12px; background:#f7f2f9;
}
.page-list-tab {
min-height:34px; padding:7px 14px; border:0; border-radius:8px;
background:transparent; color:#746b78; font:700 12.5px/1 inherit;
cursor:pointer; transition:background-color .16s ease,color .16s ease,box-shadow .16s ease;
}
.page-list-tab:hover { color:var(--accent); background:#efe4f3; }
.page-list-tab.active {
color:#fff; background:var(--accent-gradient);
box-shadow:0 4px 10px rgba(113,50,143,.18);
}
.page-list-tab:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }
#table-pages.page-table-customer th:nth-child(1) { width:20%; }
#table-pages.page-table-customer th:nth-child(2) { width:17%; }
#table-pages.page-table-customer th:nth-child(3) { width:12%; }
#table-pages.page-table-customer th:nth-child(4) { width:13%; }
#table-pages.page-table-customer th:nth-child(5) { width:11%; }
#table-pages.page-table-customer th:nth-child(6) { width:12%; }
#table-pages.page-table-customer th:nth-child(7) { width:15%; }
#table-pages.page-table-customer,
#table-disconnected-pages {
border:0; border-collapse:separate; border-spacing:0 10px; background:transparent; overflow:visible;
}
#table-pages.page-table-customer thead th,
#table-disconnected-pages thead th { border-top:1px solid #ece7f1; border-bottom:1px solid #e6ddea; }
#table-pages.page-table-customer thead th:first-child,
#table-disconnected-pages thead th:first-child { border-left:1px solid #ece7f1; border-radius:12px 0 0 12px; }
#table-pages.page-table-customer thead th:last-child,
#table-disconnected-pages thead th:last-child { border-right:1px solid #ece7f1; border-radius:0 12px 12px 0; }
#table-pages.page-table-customer tbody tr,
#table-disconnected-pages tbody tr { filter:drop-shadow(0 6px 9px rgba(67,39,86,.08)); }
#table-pages.page-table-customer tbody td,
#table-disconnected-pages tbody td {
border-top:1px solid #ece6f2; border-bottom:1px solid #e8e0ef;
background:#fff; box-shadow:none;
}
#table-pages.page-table-customer tbody td:first-child,
#table-disconnected-pages tbody td:first-child {
border-left:3px solid #a65bc1; border-radius:14px 0 0 14px;
}
#table-pages.page-table-customer tbody td:last-child,
#table-disconnected-pages tbody td:last-child {
border-right:1px solid #ece6f2; border-radius:0 14px 14px 0;
}
#table-pages.page-table-customer tbody tr:hover,
#table-disconnected-pages tbody tr:hover { filter:drop-shadow(0 9px 13px rgba(87,42,112,.13)); }
#table-pages.page-table-customer tbody tr:hover td,
#table-disconnected-pages tbody tr:hover td { border-color:#d8c2e5; background:#fbf8fd; box-shadow:none; }
.page-ai-control { display:flex; align-items:center; gap:8px; min-width:0; }
.page-ai-control .toggle { flex:0 0 42px; }
.page-ai-control .page-ai-state { color:#6f6874; font-size:11px; font-weight:700; white-space:nowrap; }
.page-ai-control.is-saving { opacity:.58; }
.page-ai-control input:disabled + .toggle-track { cursor:wait; }
#table-disconnected-pages { width:100%; table-layout:fixed; }
#table-disconnected-pages th:nth-child(1) { width:29%; }
#table-disconnected-pages th:nth-child(2) { width:24%; }
#table-disconnected-pages th:nth-child(3) { width:18%; }
#table-disconnected-pages th:nth-child(4) { width:16%; }
#table-disconnected-pages th:nth-child(5) { width:13%; }
#table-disconnected-pages th,#table-disconnected-pages td { overflow:hidden; }
#table-disconnected-pages .page-name-cell { display:flex; align-items:center; gap:10px; min-width:0; }
#table-disconnected-pages .page-name-cell strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#table-disconnected-pages .page-list-avatar {
display:inline-grid; place-items:center; flex:0 0 38px; width:38px; height:38px;
overflow:hidden; border:1px solid #ded8e5; border-radius:50%; background:#eef4ff;
box-shadow:0 2px 7px rgba(44,30,68,.08);
}
#table-disconnected-pages .page-list-avatar img,
#table-disconnected-pages .page-list-avatar-fallback { grid-area:1 / 1; width:100%; height:100%; }
#table-disconnected-pages .page-list-avatar img { display:block; object-fit:cover; }
#table-disconnected-pages .page-list-avatar img[hidden] { display:none; }
#table-disconnected-pages .page-list-avatar-fallback {
display:grid; place-items:center; background:#1877f2; color:#fff;
font:800 24px/1 Arial,sans-serif; text-transform:lowercase;
}
#table-disconnected-pages .page-list-avatar-fallback[hidden] { display:none; }
#table-disconnected-pages .page-list-avatar-zalo { background:#0068ff; text-transform:uppercase; }
#table-disconnected-pages .page-list-avatar-facebook {
background-color:#1877f2; background-image:url("3.jpg"); background-repeat:no-repeat;
background-size:194.56px 101.84px; background-position:-9.5px -6.8px; color:transparent;
}
.reconnect-integration-btn { min-width:112px; }
.delete-disconnected-page-btn {
min-width:92px; border-color:#f0c9c5; background:#fff; color:var(--danger); font-weight:750;
}
.delete-disconnected-page-btn:hover { border-color:var(--danger); background:var(--danger-soft); }
@media (max-width:768px) {
.pages-section-header { align-items:stretch; }
.page-list-tabs { order:1; width:100%; }
.page-list-tab { flex:1 1 50%; }
.pages-section-header #pages-refresh-btn { margin-left:0 !important; }
#table-pages.page-table-customer td:nth-child(3)::before { content:'Đồng bộ QR'; }
#table-pages.page-table-customer td:nth-child(4)::before { content:'Xem kênh'; }
#table-pages.page-table-customer td:nth-child(5)::before { content:'Trạng thái'; }
#table-pages.page-table-customer td:nth-child(6)::before { content:'Tính năng AI'; }
#table-pages.page-table-customer td:nth-child(7)::before { content:'Thao tác'; }
#table-disconnected-pages { display:table; overflow:visible; white-space:normal; table-layout:auto; }
#table-disconnected-pages thead { display:none; }
#table-disconnected-pages tbody,#table-disconnected-pages tr,#table-disconnected-pages td { display:block; width:100%; }
#table-pages.page-table-customer tr,
#table-disconnected-pages tr {
padding:12px; border:1px solid #e7ddeb; border-left:4px solid #a65bc1;
background:linear-gradient(145deg,#fff,#faf5ff); box-shadow:0 8px 20px rgba(67,39,86,.09);
}
#table-pages.page-table-customer td,
#table-disconnected-pages td { border-left:0; border-right:0; border-top:0; border-radius:0; background:transparent; box-shadow:none; }
#table-disconnected-pages tr { padding:12px; border-bottom:1px solid #e7ddeb; }
#table-disconnected-pages tr:last-child { border-bottom:0; }
#table-disconnected-pages td {
display:grid; grid-template-columns:104px minmax(0,1fr); align-items:center; gap:10px;
padding:7px 0; border-bottom:0; text-align:left;
}
#table-disconnected-pages td::before {
color:var(--text-muted); font-size:10.5px; font-weight:800; text-transform:uppercase;
}
#table-disconnected-pages td:nth-child(1)::before { content:'Tên kênh'; }
#table-disconnected-pages td:nth-child(2)::before { content:'Nền tảng'; }
#table-disconnected-pages td:nth-child(3)::before { content:'Ngắt kết nối'; }
#table-disconnected-pages td:nth-child(4)::before { content:'Tích hợp lại'; }
#table-disconnected-pages td:nth-child(5)::before { content:'Xóa'; }
#table-disconnected-pages td:last-child .btn { width:100%; min-height:40px; }
#table-disconnected-pages td[colspan] { display:block; padding:20px; text-align:center; }
#table-disconnected-pages td[colspan]::before { display:none; }
}
/* Final mobile compatibility layer. Keep this after the product theme so
later desktop-oriented rules cannot override the narrow-screen layout. */
.assign-dropdown { max-width:calc(100vw - 16px); }
.modal-overlay {
overflow-y:auto;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
}
.modal-box {
max-height:calc(100vh - 32px);
max-height:calc(100dvh - 32px);
overflow-y:auto;
overscroll-behavior:contain;
}
@media (max-width:480px) {
.topbar { padding:0 8px; gap:4px; }
.hamburger-btn { width:40px; min-width:40px; margin-right:0; padding:6px; }
.topbar-brand { flex:0 1 clamp(72px,calc(45vw - 54px),100px); min-width:0; gap:0; }
.topbar-brand::before { width:clamp(72px,calc(45vw - 54px),100px); height:34px; }
.topbar-right { flex:0 0 auto; min-width:0; gap:4px; }
.topbar-user { display:flex; padding:0; border:0; background:transparent; }
.app-language-switcher { gap:2px; }
.app-language-switcher button { width:28px; min-width:28px; height:30px; padding:0; font-size:10px; }
.notification-toggle-btn { width:36px; height:36px; flex-basis:36px; border-radius:11px; }
.modal-overlay { align-items:flex-start; padding:16px; }
.modal-box { padding:20px 18px; }
.modal-actions { flex-wrap:wrap; }
.modal-actions .btn { flex:1 1 120px; }
.connection-stats,
.connection-platform-grid { grid-template-columns:1fr; }
.web-assistant-form-grid { grid-template-columns:1fr; }
.web-assistant-field-wide { grid-column:auto; }
#page-report .date-range-bar { gap:8px; }
#page-report #date-tabs {
width:100%; flex-wrap:nowrap; overflow-x:auto; padding-bottom:3px;
scrollbar-width:thin; overscroll-behavior-x:contain;
}
#page-report #date-tabs .date-tab { flex:0 0 auto; min-height:40px; }
#page-report #date-range-custom { width:100%; flex-wrap:wrap; }
#page-report #date-range-custom input[type="date"] { flex:1 1 130px; min-width:0; }
#page-report .cust-staff-filter,
#page-report .cust-channel-filter { flex:1 1 calc(50% - 4px); min-height:40px; }
}
/* =====================================================================
WORKSPACE GLASS THEME — scoped to the signed-in product only.
The public landing page keeps its own styles in styles.css.
===================================================================== */
#app-screen {
--bg:#fbfafc; --panel:#fff; --border:#ece8ef; --text:#17131b; --text-muted:#77717d;
--accent:#8b3aa3; --accent-hover:#742b8e; --accent-2:#a34fba;
--accent-soft:#f4edf7; --accent-border:#ddc9e4; --surface-subtle:rgba(255,255,255,.68);
--focus-ring:rgba(139,58,163,.16); --shadow-1:0 8px 28px rgba(39,26,45,.055);
--shadow-2:0 22px 60px rgba(47,29,57,.11);
--accent-gradient:linear-gradient(135deg,#963fad 0%,#7b3195 100%);
color:var(--text);
background:
radial-gradient(720px 440px at 8% -8%,rgba(185,123,204,.10),transparent 68%),
radial-gradient(820px 480px at 96% 8%,rgba(235,197,216,.13),transparent 70%),
#fbfafc;
}
#app-screen .topbar {
position:relative; z-index:50; flex:0 0 auto; height:64px; margin:10px 14px 0; padding:0 20px;
border:1px solid rgba(223,216,226,.76); border-radius:999px; background:rgba(255,255,255,.76);
box-shadow:0 10px 34px rgba(43,28,49,.075),inset 0 1px 0 rgba(255,255,255,.88);
-webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%);
}
#app-screen .topbar-brand::before { width:116px; height:35px; }
#app-screen .topbar-user { padding:5px 9px 5px 6px; border-color:rgba(225,217,229,.72); background:rgba(255,255,255,.55); }
#app-screen .topbar-user .avatar { background:#f3e9f6; color:var(--accent); }
#app-screen .role-pill { background:#f4edf7; color:#7d348f; }
#app-screen .app-language-switcher { padding:3px; border:1px solid rgba(224,216,227,.72); border-radius:999px; background:rgba(255,255,255,.48); }
#app-screen .app-language-switcher button { border:0; border-radius:999px; background:transparent; }
#app-screen .app-language-switcher button.active { background:#f0ebf2; color:#5e5463; }
#app-screen .btn-logout { border-color:rgba(218,209,222,.88); border-radius:999px; background:rgba(255,255,255,.62); color:#554d59; }
#app-screen .btn-logout:hover { border-color:#d5bedc; background:#f7f0f9; color:var(--accent); }
#app-screen .app { gap:12px; padding:12px 14px 14px; background:transparent; }
#app-screen .sidebar {
width:240px; margin-top:0; padding:14px 10px; border:1px solid rgba(226,219,229,.84); border-radius:22px;
background:rgba(255,255,255,.74); box-shadow:0 14px 42px rgba(43,28,49,.07),inset 0 1px 0 rgba(255,255,255,.9);
-webkit-backdrop-filter:blur(20px) saturate(145%); backdrop-filter:blur(20px) saturate(145%);
}
#app-screen .sidebar.collapsed { width:68px; padding:14px 8px; }
#app-screen .nav-group-label { color:#9a929e; }
#app-screen .nav-item { color:#514a55; }
#app-screen .nav-item .nav-icon { color:#8b3aa3; }
#app-screen .nav-item:hover { background:rgba(139,58,163,.075); color:#6f2d82; }
#app-screen .nav-item.active { color:#702d84; background:rgba(139,58,163,.105); box-shadow:inset 0 0 0 1px rgba(139,58,163,.07); }
#app-screen .nav-item:focus-visible { background:#f4edf7; color:#702d84; outline-color:#b77cc5; }
#app-screen .sidebar-channel-picker { border-color:rgba(222,211,226,.88); background:rgba(249,246,250,.78); }
#app-screen .sidebar-channel-picker label { color:#8d8491; }
#app-screen .sidebar-channel-picker select { border-color:#e1d8e4; background:rgba(255,255,255,.88); }
#app-screen .sidebar-toggle-btn { top:26px; left:247px; border-color:#e3dbe6; background:rgba(255,255,255,.92); box-shadow:0 7px 20px rgba(43,28,49,.10); }
#app-screen .sidebar.collapsed + .sidebar-toggle-btn { left:75px; }
#app-screen .nav-tooltip { background:rgba(33,24,36,.94); }
#app-screen .main { padding:26px 28px 54px; background:transparent; }
#app-screen #page-pages,
#app-screen #page-connections,
#app-screen #page-summary,
#app-screen #page-pages > .section,
#app-screen #page-connections > .connection-dashboard,
#app-screen #page-summary > .summary-dashboard {
width:100%; max-width:none; box-sizing:border-box;
}
#app-screen .main:has(#page-pages.active) .page-header,
#app-screen .main:has(#page-connections.active) .page-header,
#app-screen .main:has(#page-summary.active) .page-header {
width:100%; max-width:none;
margin-bottom:10px;
}
#app-screen .page-header { margin-bottom:20px; }
#app-screen .page-header h1 { color:#17131b; font-weight:760; }
#app-screen .page-header p { color:#807884; }
#app-screen .section,#app-screen .stat-card,#app-screen .summary-kpi,#app-screen .summary-pages-section,
#app-screen .summary-panel,#app-screen .summary-page-card,#app-screen .ai-usage-toolbar,
#app-screen .customer-table-wrap,#app-screen .conv-panel,#app-screen .chat-panel {
border-color:rgba(231,225,234,.92); background:rgba(255,255,255,.86);
box-shadow:0 9px 30px rgba(43,28,49,.05); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
#app-screen .section { border-radius:18px; }
#app-screen .section-header { border-color:#f0ecf2; }
#app-screen .field-row { border-color:#f2eef4; }
#app-screen .knowledge-section { background:rgba(250,248,251,.78); border-color:#e9e3ec; }
#app-screen .knowledge-section .list-card,#app-screen .list-card { border-color:#ebe5ed; box-shadow:0 5px 18px rgba(43,28,49,.035); }
#app-screen .btn { border-radius:999px; }
#app-screen .btn-primary { border-color:transparent; background:var(--accent-gradient); box-shadow:0 7px 17px rgba(124,49,149,.18); }
#app-screen .btn-primary:hover { background:linear-gradient(135deg,#87369f 0%,#6f2989 100%); box-shadow:0 9px 21px rgba(111,41,137,.22); }
#app-screen input[type="text"],#app-screen input[type="email"],#app-screen input[type="url"],
#app-screen input[type="search"],#app-screen input[type="number"],#app-screen input[type="time"],
#app-screen input[type="password"],#app-screen textarea,#app-screen select {
border-color:#e3dde6; border-radius:12px; background:rgba(255,255,255,.88);
}
#app-screen input:focus,#app-screen textarea:focus,#app-screen select:focus { border-color:#ae76bd; box-shadow:0 0 0 3px rgba(139,58,163,.13); }
#app-screen #config-subnav {
padding:5px; border-color:rgba(224,216,227,.80); border-radius:999px; background:rgba(255,255,255,.70);
box-shadow:0 9px 28px rgba(43,28,49,.055); -webkit-backdrop-filter:blur(16px) saturate(145%); backdrop-filter:blur(16px) saturate(145%);
}
#app-screen #config-subnav .subnav-item { border-radius:999px; color:#665e6b; }
#app-screen #config-subnav .subnav-item:hover { background:#f5f0f6; color:#77318b; }
#app-screen #config-subnav .subnav-item.active,#app-screen #config-subnav .subnav-item.active:hover {
color:#682878; background:rgba(139,58,163,.11); box-shadow:inset 0 0 0 1px rgba(139,58,163,.06);
}
#app-screen .cust-table th,#app-screen .data-table th { background:rgba(249,247,250,.92); color:#817984; }
#app-screen .cust-table tr:hover td,#app-screen .data-table tr:hover td { background:#fcf8fd; }
@media (max-width:768px) {
#app-screen .topbar { height:58px; margin:8px 8px 0; padding:0 10px 0 6px; border-radius:20px; }
#app-screen .app { gap:0; padding:8px; }
#app-screen .sidebar,
#app-screen .sidebar.collapsed { width:260px; }
#app-screen .sidebar { margin-top:0; border-radius:0 20px 20px 0; background:rgba(255,255,255,.93); }
#app-screen .main { padding:20px 16px 52px; }
}
@media (max-width:480px) {
#app-screen .topbar { margin:6px 6px 0; padding:0 7px; }
#app-screen .topbar-brand { flex:0 1 clamp(60px,calc(44vw - 48px),96px); min-width:0; gap:0; }
#app-screen .topbar-brand::before { width:clamp(60px,calc(44vw - 48px),96px); height:32px; }
#app-screen #topbar-new-message-dot { margin-left:8px; }
#app-screen .app { padding:6px; }
#app-screen .main { padding:16px 10px 50px; }
}
/* Portal navigation restructuring: channel context and settings tabs */
#app-screen .config-channel-context {
position:relative;
z-index:20;
display:grid;
grid-template-columns:auto minmax(150px,1fr) minmax(230px,360px);
align-items:center;
gap:14px;
margin:0 0 16px;
padding:14px 16px;
border:1px solid rgba(137,61,156,.25);
border-radius:18px;
background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(250,241,252,.82));
box-shadow:0 12px 34px rgba(83,38,96,.1);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
}
#app-screen .config-channel-icon {
display:block;
width:42px;
height:42px;
overflow:hidden;
border:1px solid rgba(137,61,156,.2);
border-radius:50%;
box-shadow:0 7px 18px rgba(105,42,121,.16);
}
/* The selected-channel icon also carries the AI badge. It must never clip the
badge: the circular crop belongs to the sprite itself, not its wrapper. */
#app-screen .config-channel-icon.channel-icon-status-wrap {
display:inline-flex;
width:42px;
height:42px;
overflow:visible;
}
#app-screen .config-channel-sprite {
display:block;
width:42px;
height:42px;
border-radius:50%;
background-image:url('3.jpg');
background-repeat:no-repeat;
background-size:215.04px 112.56px;
}
#app-screen .config-channel-sprite.connection-logo-fanpage { background-position:-10.5px -7.5px; }
#app-screen .config-channel-sprite.connection-logo-instagram { background-position:-60.75px -7.5px; }
#app-screen .config-channel-sprite.connection-logo-zalo_oa { background-position:-111px -7.5px; }
#app-screen .config-channel-sprite.connection-logo-telegram { background-position:-162px -7.5px; }
#app-screen .config-channel-sprite.connection-logo-tiktok { background-position:-10.5px -61.5px; }
#app-screen .config-channel-sprite.connection-logo-viber { background-position:-60.75px -61.5px; }
#app-screen .config-channel-sprite.connection-logo-whatsapp { background-position:-111px -61.5px; }
#app-screen .config-channel-sprite.connection-logo-zalo_personal { background-position:-162px -61.5px; }
#app-screen .config-channel-sprite.connection-logo-web_assistant {
background-image:url('chatbot-avatar.png?v=20260903-web-icon1');
background-position:center;
background-size:cover;
}
#app-screen .config-channel-copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
#app-screen .config-channel-copy span {
color:#8b7390;
font-size:11px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
#app-screen .config-channel-copy strong {
overflow:hidden;
color:#49264f;
font-size:15px;
text-overflow:ellipsis;
white-space:nowrap;
}
#app-screen .config-channel-select-wrap {
position:relative;
min-width:0;
}
#app-screen .config-sheet-switch-button > .config-channel-select-icon-wrap {
position:relative;
z-index:1;
left:auto;
top:auto;
width:30px;
height:30px;
flex:0 0 30px;
overflow:visible;
pointer-events:none;
transform:none;
}
#app-screen .config-channel-select-icon-wrap .config-channel-sprite {
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%) scale(.67);
transform-origin:center;
}
#app-screen .config-channel-select-icon-wrap .channel-ai-status {
top:-3px;
right:-4px;
transform:scale(.78);
transform-origin:top right;
}
#app-screen #config-sheet-switch {
width:100%;
min-height:44px;
padding-left:45px;
border-color:rgba(137,61,156,.28);
border-radius:13px;
color:#4c3151;
font-weight:700;
background-color:rgba(255,255,255,.9);
}
#app-screen #general-info-subnav,
#app-screen #account-settings-subnav {
position:relative;
z-index:1;
display:grid;
gap:8px;
padding:6px;
margin-bottom:16px;
border:1px solid rgba(137,61,156,.15);
border-radius:16px;
background:rgba(255,255,255,.72);
box-shadow:0 8px 24px rgba(82,39,94,.07);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
#app-screen #general-info-subnav { grid-template-columns:repeat(4,minmax(0,1fr)); }
#app-screen #account-settings-subnav { grid-template-columns:repeat(3,minmax(0,1fr)); }
#app-screen #account-settings-subnav { gap:4px; padding:3px; border-radius:12px; }
#app-screen #account-settings-subnav .subnav-item { min-height:38px; padding-top:6px; padding-bottom:6px; }
#app-screen .account-users-tools { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:6px 10px; }
#app-screen .account-users-tools input { width:210px; min-width:140px; }
@media (max-width:700px) { #app-screen .account-users-tools { grid-column:1 / -1; justify-content:stretch; } #app-screen .account-users-tools input { flex:1; width:auto; } }
#app-screen #general-info-subnav .subnav-item,
#app-screen #account-settings-subnav .subnav-item {
justify-content:center;
min-width:0;
border:0;
border-radius:11px;
background:transparent;
}
#app-screen #general-info-subnav .subnav-item.active,
#app-screen #account-settings-subnav .subnav-item.active {
color:#fff;
background:linear-gradient(135deg,#71317f,#9a43a6);
box-shadow:0 7px 18px rgba(113,49,127,.2);
}
#app-screen .settings-tab-pane { display:none; }
#app-screen .settings-tab-pane.active { display:block; }
#app-screen .account-settings-card { width:100%; max-width:none; }
#app-screen .account-settings-form {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
}
#app-screen .account-settings-form > div:first-child,
#app-screen .account-settings-form .modal-error,
#app-screen .account-settings-form .btn { grid-column:1/-1; }
#app-screen .account-settings-form label { display:block; margin-bottom:7px; }
#app-screen .account-settings-form .btn { justify-self:start; }
#app-screen .account-summary-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
#app-screen .account-summary-item {
display:flex;
flex-direction:column;
gap:6px;
min-height:86px;
padding:16px;
border:1px solid rgba(137,61,156,.14);
border-radius:14px;
background:rgba(255,255,255,.76);
}
#app-screen .account-summary-item span { color:#88778b; font-size:12px; font-weight:700; }
#app-screen .account-summary-item strong { color:#3d2941; font-size:15px; overflow-wrap:anywhere; }
#app-screen .account-summary-item .plan-free {
align-self:flex-start;
padding:5px 12px;
border-radius:999px;
color:#77318b;
background:#f2e5f5;
}
#app-screen .account-summary-item .plan-warning {
align-self:flex-start;
padding:5px 12px;
border-radius:999px;
color:#9a3412;
background:#ffedd5;
}
#app-screen .account-plan-payment-state { display:flex; align-items:center; gap:6px; margin-top:2px; font-size:12px; font-weight:650; line-height:1.4; }
#app-screen .account-plan-payment-state::before { content:'✓'; display:grid; place-items:center; flex:0 0 18px; width:18px; height:18px; border-radius:50%; background:#dff6e8; color:#18753a; font-size:11px; font-weight:800; }
#app-screen .account-plan-payment-state.is-confirmed { color:#18753a; }
#app-screen .account-plan-payment-state.is-pending { color:#9a5b00; }
#app-screen .account-plan-payment-state.is-pending::before { content:'…'; background:#fff2cf; color:#9a5b00; }
#app-screen .account-settings-summary-body { display:flex; flex-direction:column; gap:16px; }
.modal-box.invoice-profile-modal-box { width:min(920px,calc(100vw - 32px)); max-width:920px; padding:0; overflow:hidden; }
.invoice-profile-modal { max-height:calc(100dvh - 40px); overflow-y:auto; padding:28px 30px 24px; box-sizing:border-box; }
.invoice-profile-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }
.invoice-profile-heading { display:flex; align-items:center; gap:14px; min-width:0; }
.invoice-profile-heading-icon { display:grid; place-items:center; width:46px; height:46px; flex:0 0 46px; color:#77318b; border-radius:14px; background:linear-gradient(145deg,#f5e8f8,#fbf6fc); }
.invoice-profile-heading-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.invoice-profile-heading h3 { margin-bottom:5px; font-size:23px; }
.invoice-profile-heading .modal-sub { margin:0; font-size:13.5px; line-height:1.5; }
.invoice-profile-close { display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; padding:0 0 3px; color:#776b79; border:1px solid #e4dce7; border-radius:12px; background:#fff; font:400 28px/1 Arial,sans-serif; cursor:pointer; transition:.18s ease; }
.invoice-profile-close:hover { color:#61246f; border-color:#cba8d3; background:#faf4fb; transform:translateY(-1px); }
.invoice-order-summary { display:grid; grid-template-columns:minmax(130px,1.25fr) minmax(90px,.7fr) minmax(120px,.9fr) minmax(135px,1fr) auto; align-items:center; gap:18px; margin-bottom:22px; padding:15px 17px; border:1px solid rgba(119,49,139,.15); border-radius:15px; background:linear-gradient(135deg,#fbf5fc,#fff); }
.invoice-order-summary > div { min-width:0; }
.invoice-order-summary span { display:block; margin-bottom:4px; color:#89768d; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.invoice-order-summary strong { display:block; color:#3f2944; font-size:15px; overflow-wrap:anywhere; }
.invoice-order-saving strong { color:#16844b; }
.invoice-order-total strong { color:#6f2580; font-size:16px; }
.invoice-change-plan { padding:7px 11px; color:#77318b; border:0; border-radius:9px; background:#f1e3f4; font-weight:700; cursor:pointer; }
.invoice-profile-intro { display:flex; flex-direction:column; gap:4px; }
.invoice-profile-intro strong { color:#3f2944; font-size:15px; }
.invoice-profile-intro span { color:#827285; font-size:12.5px; line-height:1.5; }
.invoice-profile-types { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0 22px; }
.invoice-profile-types label { position:relative; display:flex; align-items:center; gap:11px; min-height:64px; padding:12px 15px; border:1px solid #ded5e1; border-radius:14px; background:#fff; cursor:pointer; transition:.18s ease; }
.invoice-profile-types label:hover { border-color:#c8a6d0; background:#fdfafd; }
.invoice-profile-types label.is-selected { border-color:#8b3c9d; background:#faf2fc; box-shadow:0 0 0 2px rgba(139,60,157,.08); }
.invoice-profile-types input { width:17px; height:17px; flex:0 0 17px; accent-color:#7c338d; }
.invoice-profile-types label > span:last-child { display:flex; flex-direction:column; min-width:0; gap:3px; }
.invoice-profile-types strong { color:#452c4a; font-size:14px; }
.invoice-profile-types small { color:#8b7a8f; font-size:11.5px; line-height:1.35; }
.invoice-profile-type-icon { display:grid; place-items:center; width:32px; height:32px; flex:0 0 32px; color:#7c338d; border-radius:10px; background:#f5e9f7; }
.invoice-profile-type-icon svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.invoice-profile-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px; padding-bottom:11px; border-bottom:1px solid #eee7f0; }
.invoice-profile-section-heading > div { display:flex; flex-direction:column; gap:3px; }
.invoice-profile-section-heading strong { color:#452c4a; font-size:14.5px; }
.invoice-profile-section-heading span { color:#8b7a8f; font-size:11.5px; line-height:1.4; }
.invoice-profile-section-heading .invoice-required-note { flex:0 0 auto; color:#9b3e3e; font-weight:700; }
.invoice-profile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 16px; }
.invoice-profile-grid .invoice-field-wide { grid-column:1 / -1; }
.invoice-profile-grid .field-mini label { color:#5f4a63; font-size:12.5px; }
.invoice-profile-grid .field-mini input { min-height:44px; border-color:#ded6e0; border-radius:10px; background:#fff; transition:border-color .18s ease,box-shadow .18s ease; }
.invoice-profile-grid .field-mini input:focus { outline:0; border-color:#8b3c9d; box-shadow:0 0 0 3px rgba(139,60,157,.1); }
.invoice-profile-grid .field-mini input::placeholder { color:#b1a5b4; }
.invoice-profile-privacy { display:flex; align-items:flex-start; gap:9px; margin:3px 0 2px; padding:11px 13px; color:#6f6172; border-radius:11px; background:#f7f4f8; font-size:11.5px; line-height:1.5; }
.invoice-profile-privacy-icon { display:grid; place-items:center; width:20px; height:20px; flex:0 0 20px; color:#7c338d; }
.invoice-profile-privacy-icon svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.invoice-profile-actions { align-items:center; justify-content:space-between; margin-top:8px; padding-top:17px; border-top:1px solid #eee7f0; }
.invoice-profile-actions .btn { min-height:43px; padding-left:20px; padding-right:20px; }
@media (max-width:640px) {
.modal-box.invoice-profile-modal-box { width:calc(100vw - 24px); }
.invoice-profile-modal { max-height:calc(100dvh - 24px); padding:20px 17px 17px; }
.invoice-profile-heading-icon { display:none; }
.invoice-profile-heading h3 { font-size:20px; }
.invoice-order-summary { grid-template-columns:1fr 1fr; gap:13px 11px; }
.invoice-order-summary .invoice-change-plan { grid-column:1 / -1; width:100%; }
.invoice-profile-types,.invoice-profile-grid { grid-template-columns:1fr; }
.invoice-profile-grid .invoice-field-wide { grid-column:auto; }
.invoice-profile-section-heading { align-items:flex-start; }
.invoice-profile-actions { flex-direction:column-reverse; }
.invoice-profile-actions .btn { width:100%; }
}
#app-screen .account-plan-details {
padding:18px;
border:1px solid rgba(137,61,156,.16);
border-radius:16px;
background:linear-gradient(145deg,rgba(251,247,253,.98),rgba(255,255,255,.94));
}
#app-screen .account-plan-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
#app-screen .account-plan-heading > div:first-child { display:flex; flex-direction:column; gap:4px; }
#app-screen .account-plan-heading span { color:#88778b; font-size:12px; font-weight:700; }
#app-screen .account-plan-heading strong { color:#4f245b; font-size:20px; }
#app-screen .account-plan-meta { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
#app-screen .account-plan-meta span { padding:5px 10px; border-radius:999px; color:#6f2c80; background:#f2e5f5; }
#app-screen .account-plan-period { margin:0 0 16px; padding:13px; border:1px solid rgba(137,61,156,.14); border-radius:14px; background:linear-gradient(135deg,#fff 0%,#fbf7fc 100%); }
#app-screen .account-plan-period-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
#app-screen .account-plan-period-grid > div { min-width:0; padding:10px 12px; border-radius:11px; background:#f5eaf7; }
#app-screen .account-plan-period-grid span { display:block; margin-bottom:4px; color:#806d84; font-size:11px; font-weight:700; }
#app-screen .account-plan-period-grid strong { display:block; color:#4f245b; font-size:14px; overflow-wrap:anywhere; }
#app-screen .account-plan-period > p { margin:10px 2px 0; color:#6f5d73; font-size:12px; font-weight:700; }
#app-screen .account-plan-usage-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#app-screen .account-plan-usage-row { padding:12px; border:1px solid rgba(137,61,156,.12); border-radius:12px; background:#fff; }
#app-screen .account-plan-usage-row.is-limit { border-color:rgba(220,38,38,.28); background:#fff8f8; }
#app-screen .account-plan-usage-label { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; }
#app-screen .account-plan-usage-label span { color:#665469; font-size:12px; font-weight:700; }
#app-screen .account-plan-usage-label strong { color:#3d2941; font-size:12px; text-align:right; }
#app-screen .account-plan-progress { height:7px; overflow:hidden; border-radius:999px; background:#eee5f0; }
#app-screen .account-plan-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#7d3590,#a34bb0); }
#app-screen .account-plan-usage-row.is-limit .account-plan-progress span { background:#dc2626; }
#app-screen .account-plan-progress.is-unmetered span { width:100% !important; background:repeating-linear-gradient(135deg,#d9c9dd 0 7px,#eee5f0 7px 14px); }
#app-screen .account-plan-heading-actions { display:flex; align-items:flex-end; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
#app-screen .account-upgrade-btn { white-space:nowrap; }
.upgrade-plans-modal { max-width:980px; }
.modal-box.upgrade-plans-modal-box { max-width:1040px; width:min(1040px, calc(100vw - 32px)); }
.upgrade-plans-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.upgrade-plans-heading h3 { margin:0 0 4px; }
.upgrade-term-switcher { display:flex; gap:4px; padding:4px; border-radius:12px; background:#eeeaf2; flex-shrink:0; }
.upgrade-term-btn { border:0; border-radius:9px; background:transparent; color:#42364d; cursor:pointer; padding:9px 16px; font:inherit; font-weight:700; transition:background-color .16s ease,color .16s ease,box-shadow .16s ease; }
.upgrade-term-btn.active { background:#fff; color:#712b82; box-shadow:0 1px 4px rgba(52,25,67,.16); }
.upgrade-plans-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding-top:18px; }
.upgrade-plan-card { display:flex; flex-direction:column; min-width:0; padding:18px; border:1px solid rgba(137,61,156,.18); border-radius:16px; background:linear-gradient(180deg,#fff 0%,#fcf8fd 100%); }
.upgrade-plan-card { position:relative; overflow:visible; min-height:500px; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.upgrade-plan-card:focus-visible { outline:3px solid rgba(125,50,148,.35); outline-offset:3px; }
.upgrade-plan-card::before { content:""; position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,#87369a,#c46bd4); opacity:.72; }
.upgrade-plan-card:hover { transform:translateY(-4px); box-shadow:0 14px 30px rgba(76,35,91,.14); border-color:rgba(137,61,156,.38); }
.upgrade-plan-card.is-featured { border:2px solid #d19a2a; background:linear-gradient(180deg,#fffdf3 0%,#fff8df 100%); box-shadow:0 12px 28px rgba(183,126,22,.16); }
.upgrade-plan-card.is-featured::before { height:6px; background:linear-gradient(90deg,#d49a17,#f4d36a,#d49a17); opacity:1; }
.upgrade-plan-featured-badge { position:absolute; z-index:3; top:-19px; left:18px; padding:6px 12px; border-radius:999px; background:#f6c84b; color:#5b3d00; box-shadow:0 5px 12px rgba(164,107,0,.2); font-size:12px; font-weight:800; white-space:nowrap; }
.plan-featured-badge { display:inline-flex; color:#b77900; font-size:15px; vertical-align:middle; }
.upgrade-plan-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px; }
.upgrade-plan-kicker { color:#88778b; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.upgrade-plan-card h4 { margin:3px 0 0; color:#4f245b; font-size:20px; }
.upgrade-plan-monthly-price { display:block; margin-top:7px; color:#4f245b; font-size:15px; font-weight:800; letter-spacing:-.01em; }
.upgrade-plan-duration { padding:4px 8px; border-radius:999px; background:#f2e5f5; color:#6f2c80; font-size:12px; font-weight:700; white-space:nowrap; }
.upgrade-plan-limits { display:grid; gap:7px; margin:0 0 14px; padding:0; list-style:none; }
.upgrade-plan-limits li { display:flex; justify-content:space-between; gap:10px; padding-bottom:7px; border-bottom:1px solid rgba(137,61,156,.1); color:#665469; font-size:12px; }
.upgrade-plan-limits li b { color:#3d2941; text-align:right; }
.upgrade-plan-price { display:grid; gap:2px; margin:2px 0 14px; }
.upgrade-plan-price span, .upgrade-request-total span { color:#88778b; font-size:12px; }
.upgrade-plan-price > span { font-size:14px; }
.upgrade-plan-price s { color:#d33f36; font-size:16px; font-weight:800; text-decoration-thickness:2px; }
.upgrade-plan-price strong, .upgrade-request-total strong { color:#4f245b; font-size:26px; letter-spacing:-.02em; }
.upgrade-plan-fit { flex:1; margin-bottom:16px; color:#665469; font-size:12px; }
.upgrade-plan-fit > b { color:#4f245b; }
.upgrade-plan-fit ul { display:grid; gap:5px; margin:7px 0 0; padding-left:17px; }
.upgrade-plan-fit li::marker { color:#8d3ba0; }
.upgrade-plan-card .btn { width:100%; margin-top:auto; border:0; background:linear-gradient(135deg,#7d3294,#542064); box-shadow:0 8px 16px rgba(84,32,100,.2); }
.upgrade-plan-card.is-featured .btn { background:linear-gradient(135deg,#a26a00,#704700); box-shadow:0 8px 16px rgba(164,107,0,.2); }
.upgrade-request-total { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:14px 16px; margin:12px 0; border-radius:12px; background:#f7eff9; }
.payment-settings-heading { display:flex; flex-direction:column; gap:4px; margin:24px 0 12px; padding-top:18px; border-top:1px solid #eadfed; color:#4f245b; }
.payment-settings-heading span { color:#88778b; font-size:12px; }
.payment-settings-form .invoice-field-wide { grid-column:1 / -1; }
.modal-box.payment-confirmation-modal-box { width:min(780px,calc(100vw - 32px)); max-width:780px; max-height:calc(100dvh - 40px); overflow-y:auto; overscroll-behavior:contain; }
.payment-confirmation-modal { max-height:none; overflow:visible; padding-right:0; }
.invoice-preview { margin:16px 0; overflow:hidden; border:1px solid #e2d7e5; border-radius:14px; background:#fff; }
.invoice-preview-title { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; background:#f8f2fa; }
.invoice-preview-title > div { display:flex; flex-direction:column; gap:2px; }
.invoice-preview-title strong { color:#4f245b; font-size:16px; }
.invoice-preview-title div span { color:#88778b; font-size:11.5px; }
.invoice-preview-title > span { padding:5px 8px; border:1px solid #ba91c4; border-radius:6px; color:#7a318c; font-size:10px; font-weight:800; letter-spacing:.08em; }
.invoice-parties { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid #eee7f0; border-bottom:1px solid #eee7f0; }
.invoice-parties > div { min-width:0; padding:15px 16px; }
.invoice-parties > div + div { border-left:1px solid #eee7f0; }
.invoice-parties h4 { margin:0 0 8px; color:#7a318c; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.invoice-parties strong { display:block; margin-bottom:7px; color:#302535; overflow-wrap:anywhere; }
.invoice-parties p,.invoice-parties > div > div { margin:4px 0; color:#6f6172; font-size:12px; line-height:1.45; overflow-wrap:anywhere; }
.invoice-line { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:14px 16px; border-bottom:1px solid #eee7f0; }
.invoice-line > div { display:flex; flex-direction:column; gap:4px; }
.invoice-line span,.invoice-totals span { color:#88778b; font-size:12px; }
.invoice-line > strong { white-space:nowrap; }
.invoice-totals { display:grid; gap:8px; padding:13px 16px; }
.invoice-totals > div { display:flex; justify-content:space-between; gap:16px; }
.invoice-grand-total { margin-top:3px; padding-top:10px; border-top:1px solid #e8ddeb; color:#4f245b; font-size:16px; }
.invoice-preview-note { margin:0; padding:10px 16px; color:#7c6c80; background:#faf7fb; font-size:11px; line-height:1.45; }
@media (max-width: 780px) { .upgrade-plans-heading { flex-direction:column; } .upgrade-term-switcher { width:100%; } .upgrade-term-btn { flex:1; padding-inline:8px; } .upgrade-plans-grid { grid-template-columns:1fr; } #app-screen .account-plan-heading-actions { justify-content:flex-start; align-items:flex-start; } #app-screen .account-plan-period-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .invoice-parties { grid-template-columns:1fr; } .invoice-parties > div + div { border-left:0; border-top:1px solid #eee7f0; } .payment-settings-form .invoice-field-wide { grid-column:auto; } }
@media (max-width:480px) { .modal-box.payment-confirmation-modal-box { max-height:calc(100dvh - 32px); } }
.plan-center-tabs { display:flex; gap:5px; margin:0 0 18px; padding:4px; border-radius:13px; background:#eeeaf2; }
.plan-center-tab { flex:1; border:0; border-radius:10px; padding:10px 14px; background:transparent; color:#55465b; cursor:pointer; font:inherit; font-weight:750; transition:background-color .16s ease,color .16s ease,box-shadow .16s ease; }
.plan-center-tab.active { background:#fff; color:#712b82; box-shadow:0 2px 7px rgba(52,25,67,.13); }
.plan-center-pane:not(.hidden) { animation:plan-center-pane-in .16s ease-out; }
@keyframes plan-center-pane-in { from { opacity:.82; transform:translateY(2px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .plan-center-pane:not(.hidden) { animation:none; } }
.plan-current-modal-card { position:relative; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:0 22px; overflow:hidden; width:100%; min-width:0; min-height:0; padding:22px 24px 20px; border:1px solid rgba(137,61,156,.18); border-radius:16px; background:linear-gradient(180deg,#fff 0%,#fcf8fd 100%); box-shadow:0 10px 26px rgba(76,35,91,.08); box-sizing:border-box; }
.plan-current-modal-card::before { content:""; position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,#87369a,#c46bd4); opacity:.72; }
.plan-current-modal-card .upgrade-plan-card-head { grid-column:1 / -1; }
.plan-current-modal-card h4 { margin:3px 0 0; color:#4f245b; font-size:20px; }
.plan-current-modal-card .upgrade-plan-kicker { color:#88778b; }
.plan-current-modal-card .upgrade-plan-monthly-price { color:#4f245b; }
.plan-current-modal-card .upgrade-plan-duration { background:#f2e5f5; color:#6f2c80; }
.plan-current-modal-card .account-plan-period { grid-column:1 / -1; margin:0 0 16px; padding:13px; border:1px solid rgba(137,61,156,.14); border-radius:14px; background:linear-gradient(135deg,#fff 0%,#fbf7fc 100%); }
.plan-current-modal-card .account-plan-period-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.plan-current-modal-card .account-plan-period-grid > div { min-width:0; padding:10px 12px; border-radius:11px; background:#f5eaf7; }
.plan-current-modal-card .account-plan-period-grid span { display:block; margin-bottom:4px; color:#806d84; font-size:11px; font-weight:700; }
.plan-current-modal-card .account-plan-period-grid strong { display:block; color:#4f245b; font-size:14px; overflow-wrap:anywhere; }
.plan-current-modal-card .plan-period-cycle { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:10px 0 0; padding:9px 11px; border-radius:10px; color:#6f5d73; background:#f8f2fa; font-size:12px; }
.plan-current-modal-card .plan-period-cycle span { margin:0; }
.plan-current-modal-card .plan-period-cycle strong { color:#4f245b; text-align:right; }
.plan-current-modal-card .plan-period-grant { margin:10px 0 0; color:#6f2c80; font-size:12px; }
.plan-current-usage-heading { grid-column:1; margin:4px 0 9px; color:#88778b; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.plan-current-limits { grid-column:1; margin-bottom:0; }
.plan-current-limits li { border-color:rgba(137,61,156,.1); color:#665469; }
.plan-current-limits li b { color:#59435e; font-weight:700; }
.plan-current-limits li b em { padding:0 3px; color:#b8a9bb; font-style:normal; font-weight:500; }
.plan-current-fit { grid-column:2; grid-row:3 / span 2; margin:4px 0 0; padding:13px 15px; border-radius:13px; color:#665469; background:#faf5fb; }
.plan-current-fit > b { color:#4f245b; }
.plan-current-fit ul { grid-template-columns:1fr; }
.plan-alert-list { display:grid; gap:10px; margin:14px 0; }
.plan-alert-item { display:flex; gap:10px; align-items:flex-start; padding:12px 13px; border:1px solid #f0d18e; border-radius:12px; background:#fff8e8; color:#784900; }
.plan-alert-item.is-danger,.plan-alert-item.is-critical { border-color:#f0aaa4; background:#fff1f0; color:#a12b22; }
.plan-alert-item svg { flex:0 0 20px; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; }
.plan-alert-item strong { display:block; margin-bottom:2px; }
.plan-alert-empty { padding:18px; border-radius:13px; background:#eefaf3; color:#237447; text-align:center; }
@media (max-width: 700px) { .plan-upgrade-topbar-btn { width:38px; min-height:38px; padding:0; justify-content:center; } .plan-upgrade-topbar-btn span { display:none; } .plan-warning-btn { width:38px; height:38px; } }
@media (max-width:700px) {
.plan-current-modal-card { grid-template-columns:1fr; width:100%; min-height:0; padding:18px; }
.plan-current-modal-card .account-plan-period-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.plan-current-usage-heading,.plan-current-limits,.plan-current-fit { grid-column:1; grid-row:auto; }
.plan-current-fit { margin-top:8px; }
#app-screen .config-channel-context { grid-template-columns:auto 1fr; }
#app-screen .config-channel-select-wrap { grid-column:1/-1; width:100%; }
#app-screen #general-info-subnav { grid-template-columns:repeat(2,minmax(0,1fr)); }
#app-screen .account-settings-form,
#app-screen .account-summary-grid,
#app-screen .account-plan-usage-list,
#app-screen .account-plan-period-grid { grid-template-columns:1fr; }
#app-screen .account-plan-heading { align-items:flex-start; flex-direction:column; }
#app-screen .account-plan-meta { justify-content:flex-start; }
}
@media (max-width:780px) {
.upgrade-plan-card { min-height:0; }
.upgrade-plan-card .upgrade-plan-fit ul { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px 18px; }
}
@media (max-width:480px) {
.plan-current-modal-card .account-plan-period-grid,.upgrade-plan-card .upgrade-plan-fit ul { grid-template-columns:1fr; }
.plan-current-modal-card .plan-period-cycle { align-items:flex-start; flex-direction:column; gap:4px; }
.plan-current-modal-card .plan-period-cycle strong { text-align:left; }
}
/* Purple theme for the left navigation */
#app-screen .sidebar,
#app-screen .sidebar.collapsed {
border-color:rgba(103,37,125,.7);
background:
radial-gradient(240px 220px at 8% 2%,rgba(255,255,255,.15),transparent 62%),
linear-gradient(165deg,rgba(145,58,166,.97) 0%,rgba(109,38,132,.98) 52%,rgba(79,27,102,.99) 100%);
box-shadow:0 18px 48px rgba(74,24,92,.24),inset 0 1px 0 rgba(255,255,255,.2);
-webkit-backdrop-filter:blur(20px) saturate(145%);
backdrop-filter:blur(20px) saturate(145%);
}
#app-screen .sidebar::-webkit-scrollbar { width:6px; }
#app-screen .sidebar::-webkit-scrollbar-thumb {
border-radius:999px;
background:rgba(255,255,255,.24);
}
#app-screen .sidebar .nav-group-label {
color:rgba(255,255,255,.58);
text-shadow:0 1px 1px rgba(52,18,66,.18);
}
#app-screen .sidebar .nav-item {
border:1px solid transparent;
color:rgba(255,255,255,.88);
}
#app-screen .sidebar .nav-item .nav-icon { color:rgba(255,255,255,.9); }
#app-screen .sidebar .nav-item:hover {
border-color:rgba(255,255,255,.1);
color:#fff;
background:rgba(255,255,255,.12);
}
#app-screen .sidebar .nav-item:hover .nav-icon { color:#fff; }
#app-screen .sidebar .nav-item.active {
border-color:rgba(255,255,255,.62);
color:#702d84;
background:rgba(255,255,255,.94);
box-shadow:0 9px 24px rgba(48,15,61,.2),inset 0 1px 0 #fff;
}
#app-screen .sidebar .nav-item.active .nav-icon { color:#87379d; }
#app-screen .sidebar .nav-item:focus-visible {
color:#fff;
background:rgba(255,255,255,.16);
outline:2px solid rgba(255,255,255,.72);
outline-offset:2px;
}
#app-screen .sidebar .nav-item.active:focus-visible {
color:#702d84;
background:#fff;
outline-color:#e8c7ef;
}
#app-screen .sidebar-channel-picker {
border-color:rgba(255,255,255,.2);
background:rgba(255,255,255,.1);
box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
}
#app-screen .sidebar-channel-picker label { color:rgba(255,255,255,.7); }
#app-screen .sidebar-channel-picker select {
border-color:rgba(255,255,255,.38);
color:#4b2853;
background:rgba(255,255,255,.94);
}
#app-screen .sidebar-toggle-btn {
border-color:rgba(113,43,135,.38);
color:#fff;
background:linear-gradient(135deg,#9844aa,#6f2b86);
box-shadow:0 7px 20px rgba(72,25,89,.24);
}
#app-screen .sidebar-toggle-btn:hover {
color:#fff;
background:linear-gradient(135deg,#a34bb5,#792f91);
}
@media (max-width:768px) {
#app-screen .sidebar,
#app-screen .sidebar.collapsed {
background:
radial-gradient(260px 240px at 8% 2%,rgba(255,255,255,.15),transparent 62%),
linear-gradient(165deg,rgba(145,58,166,.99),rgba(79,27,102,.99));
}
}
/* Align chatbot header panels with the 1120px content sections */
#app-screen #page-config .config-channel-context,
#app-screen #page-config #general-info-subnav {
width:100%;
max-width:1120px;
box-sizing:border-box;
}
/* Emphasized sidebar section headings */
#app-screen .sidebar .nav-group-label {
margin:13px 4px 7px;
padding:9px 10px;
border:1px solid rgba(255,255,255,.14);
border-radius:9px;
color:#fff;
font-size:11px;
font-weight:850;
letter-spacing:.08em;
line-height:1.2;
text-shadow:none;
background:rgba(45,13,58,.24);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
/* Strong all-channels label and compact platform badges */
#app-screen .conversation-channel-trigger-copy {
display:block;
}
#app-screen .conversation-channel-trigger-copy b {
display:block;
font-size:13.5px;
font-weight:800;
}
#app-screen .conversation-channel-trigger.is-all-channels {
border-color:rgba(139,58,163,.28);
background:linear-gradient(135deg,#fbf6fd,#f3e8f7);
box-shadow:inset 0 0 0 1px rgba(139,58,163,.04);
}
#app-screen .conversation-channel-trigger.is-all-channels .conversation-channel-trigger-copy b,
#app-screen .conversation-channel-option-all .conversation-channel-option-copy b {
color:#702d84;
font-size:14px;
font-weight:900;
letter-spacing:.035em;
}
#app-screen .cust-page-badge::before { display:none; content:none; }
#app-screen .cust-page-badge {
gap:5px;
}
#app-screen .channel-icon-status-wrap {
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
overflow:visible;
}
#app-screen .channel-ai-status {
position:absolute;
top:-4px;
right:-5px;
z-index:3;
min-width:20px;
height:14px;
padding:0 3px;
box-sizing:border-box;
display:inline-flex;
align-items:center;
justify-content:center;
overflow:hidden;
border:1.5px solid #fff;
border-radius:5px;
color:#fff;
font-size:9px;
font-weight:900;
line-height:1;
letter-spacing:-.02em;
white-space:nowrap;
box-shadow:0 2px 5px rgba(31,41,55,.24);
}
#app-screen .channel-ai-status.is-on { background:#16a34a; }
#app-screen .channel-ai-status.is-off { background:#8b93a1; }
#app-screen .page-list-avatar-status-wrap {
width:38px;
height:38px;
flex:0 0 38px;
}
#app-screen .channel-badge-icon-wrap {
width:24px;
height:22px;
flex:0 0 24px;
align-items:flex-end;
}
#app-screen .channel-badge-icon-wrap .channel-ai-status {
top:0;
right:0;
transform:scale(.7);
transform-origin:top right;
}
#app-screen .channel-badge-sprite {
display:inline-block;
width:14px;
height:14px;
flex:0 0 14px;
overflow:hidden;
border-radius:50%;
background-image:url('3.jpg');
background-repeat:no-repeat;
background-size:71.68px 37.52px;
box-shadow:0 1px 4px rgba(40,31,64,.16);
}
#app-screen .channel-badge-sprite.connection-logo-fanpage { background-position:-3.5px -2.5px; }
#app-screen .channel-badge-sprite.connection-logo-instagram { background-position:-20.25px -2.5px; }
#app-screen .channel-badge-sprite.connection-logo-zalo_oa { background-position:-37px -2.5px; }
#app-screen .channel-badge-sprite.connection-logo-telegram { background-position:-54px -2.5px; }
#app-screen .channel-badge-sprite.connection-logo-tiktok { background-position:-3.5px -20.5px; }
#app-screen .channel-badge-sprite.connection-logo-viber { background-position:-20.25px -20.5px; }
#app-screen .channel-badge-sprite.connection-logo-whatsapp { background-position:-37px -20.5px; }
#app-screen .channel-badge-sprite.connection-logo-zalo_personal { background-position:-54px -20.5px; }
#app-screen .channel-badge-sprite.connection-logo-web_assistant {
background-image:url('chatbot-avatar.png?v=20260903-web-icon1');
background-position:center;
background-size:cover;
}
#app-screen .summary-page-name {
position:relative;
overflow:visible;
gap:10px;
min-height:38px;
padding:8px 15px 8px 10px;
box-sizing:border-box;
border:1px solid #e5ccec;
background:linear-gradient(135deg,#fbf4fd,#f2e3f7);
color:#713184;
box-shadow:0 5px 14px rgba(124,49,149,.11);
font-size:12.5px;
}
#app-screen .summary-page-name .channel-badge-icon-wrap {
width:34px;
height:28px;
flex:0 0 34px;
align-items:center;
overflow:visible;
}
#app-screen .summary-page-name .channel-badge-icon-wrap .channel-badge-sprite {
outline:1px solid rgba(255,255,255,.72);
transform:scale(2);
margin:0;
}
#app-screen .summary-page-name .channel-badge-icon-wrap .channel-ai-status {
top:-4px;
right:-1px;
transform:none;
}
#app-screen .summary-page-name .summary-page-name-text {
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* Align inner settings tabs to Summary on the left and top only. */
#app-screen #page-config,
#app-screen #page-users,
#app-screen #page-config > .config-channel-context,
#app-screen #page-config > #general-info-subnav,
#app-screen #page-config > .tab-pane,
#app-screen #page-users > #account-settings-subnav,
#app-screen #page-users > .settings-tab-pane {
margin-left:0;
}
#app-screen #page-config > :first-child,
#app-screen #page-users > :first-child { margin-top:0; }
#app-screen .main:has(#page-config.active) .page-header,
#app-screen .main:has(#page-users.active) .page-header { margin-bottom:10px; }
/* Custom channel dropdown so every option can show its platform sprite. */
#app-screen #config-sheet-switch { display:none !important; }
#app-screen .config-sheet-switch-button {
position:relative; width:100%; min-height:50px; padding:9px 48px 9px 11px; border:1px solid #dfcbe5;
border-radius:14px; background:#fff; color:#4c3151; font:700 14px inherit;
display:flex; align-items:center; gap:11px; text-align:left; cursor:pointer; overflow:hidden; white-space:nowrap;
box-shadow:0 4px 12px rgba(91,43,109,.06); transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
#app-screen .config-sheet-switch-button > #config-sheet-switch-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#app-screen .config-sheet-switch-button:hover { border-color:#c9a7d3; background:#fdfaff; box-shadow:0 7px 17px rgba(91,43,109,.10); }
#app-screen .config-sheet-switch-button::after {
content:""; position:absolute; right:20px; top:50%; width:7px; height:7px; border-right:2px solid #87638f; border-bottom:2px solid #87638f;
transform:translateY(-70%) rotate(45deg); transition:transform .16s ease;
}
#app-screen .config-sheet-switch-button[aria-expanded="true"]::after { transform:translateY(-24%) rotate(225deg); }
#app-screen .config-sheet-switch-button:focus-visible { outline:3px solid rgba(139,58,163,.16); outline-offset:2px; }
#app-screen .config-sheet-switch-menu {
position:absolute; z-index:1000; top:calc(100% + 7px); left:0; right:0; max-height:280px; overflow-y:auto;
padding:6px; border:1px solid #ddd3e1; border-radius:14px; background:#fff; box-shadow:0 16px 36px rgba(50,29,58,.18);
}
#app-screen .config-sheet-option {
width:100%; min-height:44px; display:flex; align-items:center; gap:10px; padding:7px 10px;
border:0; border-radius:10px; background:transparent; color:#4c3151; font:650 13.5px inherit; text-align:left; cursor:pointer;
}
#app-screen .config-sheet-option:hover { background:var(--accent-soft); color:var(--accent); }
#app-screen .config-sheet-option.is-selected { background:linear-gradient(135deg,#f3e8f7,#eee8fb); color:var(--accent); }
#app-screen .config-sheet-option-name { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#app-screen .config-sheet-option-check { opacity:0; color:var(--accent); font-weight:900; }
#app-screen .config-sheet-option.is-selected .config-sheet-option-check { opacity:1; }
#app-screen .config-sheet-option-empty { padding:12px; color:var(--text-muted); text-align:center; }
/* One searchable Page-list pattern shared by every Page selector. */
#app-screen .page-picker-search { position:sticky; z-index:2; top:0; display:flex; align-items:center; gap:9px; margin:0 0 6px; padding:9px 12px; border:1px solid #e5dbe8; border-radius:10px; background:#fff; color:#8b6c92; box-sizing:border-box; transition:border-color .16s ease,box-shadow .16s ease; }
#app-screen .page-picker-search:focus-within { border-color:#ae76bd; box-shadow:0 0 0 3px rgba(139,58,163,.13); }
#app-screen .page-picker-search > span[aria-hidden="true"] { position:relative; display:block; flex:0 0 15px; width:15px; height:15px; overflow:visible; color:transparent; font-size:0; }
#app-screen .page-picker-search > span[aria-hidden="true"]::before { content:''; position:absolute; left:1px; top:1px; width:9px; height:9px; box-sizing:border-box; border:1.7px solid #8b6c92; border-radius:50%; }
#app-screen .page-picker-search > span[aria-hidden="true"]::after { content:''; position:absolute; left:10px; top:10px; width:5px; height:1.7px; border-radius:999px; background:#8b6c92; transform:rotate(45deg); transform-origin:left center; }
#app-screen .page-picker-search input,
#app-screen .page-picker-search input:focus { display:block; flex:1 1 auto; width:100%; min-width:0; min-height:0; height:auto; margin:0; padding:0; border:0; border-radius:0; outline:0; box-shadow:none; background:transparent; color:var(--text); font:inherit; font-size:13px; font-weight:600; line-height:20px; }
#app-screen .page-picker-search input::placeholder { color:#a393a8; }
#app-screen .config-sheet-switch-menu { overflow:hidden; }
#app-screen #config-sheet-switch-options { max-height:220px; overflow:auto; }
#app-screen .conversation-channel-options { max-height:280px; overflow:auto; }
#app-screen .native-page-select { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; white-space:nowrap !important; }
#app-screen .searchable-page-select { position:relative; width:100%; min-width:0; }
#app-screen .searchable-page-trigger { width:100%; min-height:40px; display:flex; align-items:center; gap:9px; padding:6px 12px; border:1px solid var(--border); border-radius:11px; background:#fff; color:var(--text); font:inherit; font-size:13px; font-weight:650; text-align:left; cursor:pointer; box-sizing:border-box; }
#app-screen .searchable-page-trigger:hover,#app-screen .searchable-page-select.is-open .searchable-page-trigger { border-color:#c9a7d3; box-shadow:0 0 0 2px rgba(139,58,163,.10); }
#app-screen .searchable-page-trigger > span:not(.channel-logo):not(.channel-icon-status-wrap) { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#app-screen .searchable-page-trigger > svg { flex:0 0 16px; width:16px; fill:none; stroke:#87638f; stroke-width:2; transition:transform .16s; }
#app-screen .searchable-page-select.is-open .searchable-page-trigger > svg { transform:rotate(180deg); }
#app-screen .searchable-page-menu { display:none; position:absolute; z-index:1200; top:calc(100% + 6px); left:0; right:0; min-width:240px; padding:6px; border:1px solid #ddd3e1; border-radius:14px; background:#fff; box-shadow:0 16px 36px rgba(50,29,58,.18); box-sizing:border-box; }
#app-screen .searchable-page-select.is-open .searchable-page-menu { display:block; }
#app-screen .searchable-page-options { max-height:min(42vh,300px); overflow:auto; }
#app-screen .searchable-page-option { width:100%; min-height:44px; display:flex; align-items:center; gap:10px; padding:7px 9px; border:0; border-radius:9px; background:transparent; color:var(--text); font:inherit; text-align:left; cursor:pointer; }
#app-screen .searchable-page-option:hover,#app-screen .searchable-page-option.is-selected { background:linear-gradient(135deg,#f3e8f7,#eee8fb); color:var(--accent); }
#app-screen .searchable-page-option-copy { min-width:0; flex:1; display:grid; gap:1px; }
#app-screen .searchable-page-option-copy b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
#app-screen .searchable-page-option-copy small { color:var(--text-muted); font-size:10.5px; }
#app-screen .searchable-page-check { opacity:0; color:var(--accent); font-weight:900; }
#app-screen .searchable-page-option.is-selected .searchable-page-check { opacity:1; }
#app-screen .searchable-page-empty { padding:14px 10px; color:var(--text-muted); text-align:center; font-size:12px; }
#app-screen .page-list-search { position:relative; display:block; flex:0 1 250px; min-width:170px; }
#app-screen .page-list-search .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }
#app-screen .page-list-search input { display:block; width:100%; min-height:38px; padding:0 13px 0 38px; border:1px solid var(--border); border-radius:999px; outline:0; background:#fff; font:inherit; font-size:12.5px; font-weight:600; box-sizing:border-box; }
#app-screen .page-list-search::before { content:''; position:absolute; z-index:1; left:14px; top:50%; width:11px; height:11px; box-sizing:border-box; border:2px solid #8b6c92; border-radius:50%; transform:translateY(-58%); pointer-events:none; }
#app-screen .page-list-search::after { content:''; position:absolute; z-index:1; left:24px; top:calc(50% + 4px); width:6px; height:2px; border-radius:999px; background:#8b6c92; transform:rotate(45deg); transform-origin:left center; pointer-events:none; }
#app-screen .facebook-page-search { position:relative; }
@media (max-width:720px) { #app-screen .page-list-search { order:3; flex:1 1 100%; } #app-screen .searchable-page-menu { position:fixed; top:auto; right:12px; bottom:12px; left:12px; } }
/* ==================== USER GUIDE LANDING PAGE ==================== */
#app-screen #page-guide { width:100%; max-width:none; }
#app-screen .main:has(#page-guide.active) .page-header { width:100%; max-width:none; margin-bottom:14px; }
.guide-hero {
position:relative; min-height:286px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
gap:36px; align-items:center; overflow:hidden; margin-bottom:22px; padding:40px 46px;
border:1px solid rgba(218,195,225,.82); border-radius:28px;
background:
radial-gradient(circle at 88% 18%,rgba(198,157,220,.42),transparent 31%),
radial-gradient(circle at 64% 88%,rgba(199,189,243,.38),transparent 34%),
linear-gradient(135deg,#fff 0%,#fbf7fc 42%,#f3e9f7 100%);
box-shadow:0 22px 58px rgba(74,40,84,.09),inset 0 1px 0 rgba(255,255,255,.92);
}
.guide-hero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.32; background-image:radial-gradient(#9d6cab 1px,transparent 1px); background-size:22px 22px; mask-image:linear-gradient(90deg,transparent 54%,#000); }
.guide-hero-copy { position:relative; z-index:2; max-width:720px; }
.guide-eyebrow { display:inline-flex; margin-bottom:13px; padding:7px 11px; border:1px solid #e7d4ec; border-radius:999px; background:rgba(255,255,255,.76); color:#7b348e; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.guide-hero h2 { max-width:690px; margin:0 0 13px; color:#221826; font-size:clamp(28px,3vw,44px); line-height:1.09; letter-spacing:-.035em; }
.guide-hero p { max-width:680px; margin:0; color:#6e6472; font-size:15px; line-height:1.7; }
.guide-hero-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.guide-hero-chips span { padding:7px 11px; border:1px solid #e5d9e8; border-radius:999px; background:rgba(255,255,255,.72); color:#5f5663; font-size:12px; font-weight:700; }
.guide-hero-art { position:relative; z-index:1; width:min(360px,100%); aspect-ratio:1.08; justify-self:end; }
.guide-orbit { position:absolute; border:1px solid rgba(135,73,156,.22); border-radius:50%; }
.guide-orbit-one { inset:5%; animation:guide-spin 28s linear infinite; }
.guide-orbit-two { inset:19%; border-style:dashed; animation:guide-spin 20s linear infinite reverse; }
@keyframes guide-spin { to { transform:rotate(360deg); } }
.guide-bot-mark { position:absolute; left:50%; top:50%; width:120px; height:120px; display:grid; place-items:center; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.82); border-radius:34px; background:linear-gradient(145deg,#8a399f,#633087); color:#fff; box-shadow:0 22px 42px rgba(91,42,108,.27),inset 0 1px 0 rgba(255,255,255,.28); font-size:30px; font-weight:900; letter-spacing:-.06em; }
.guide-bot-mark span { color:#ead9ef; }
.guide-art-card { position:absolute; min-width:104px; padding:10px 12px; border:1px solid rgba(222,205,226,.88); border-radius:14px; background:rgba(255,255,255,.88); box-shadow:0 12px 26px rgba(58,35,65,.11); color:#8a399f; font-size:11px; font-weight:900; }
.guide-art-card span { display:block; margin-top:3px; color:#5f5663; font-size:12px; font-weight:700; }
.guide-art-card-one { left:0; top:17%; transform:rotate(-5deg); }
.guide-art-card-two { right:0; top:30%; transform:rotate(4deg); }
.guide-art-card-three { left:14%; bottom:4%; transform:rotate(3deg); }
.guide-mobile-index { display:none; }
.guide-layout { display:grid; grid-template-columns:250px minmax(0,1fr); gap:26px; align-items:start; }
.guide-index { position:sticky; top:12px; max-height:calc(100vh - 42px); overflow:auto; padding:15px; border:1px solid #e9e1eb; border-radius:20px; background:rgba(255,255,255,.88); box-shadow:0 10px 30px rgba(52,35,59,.055); }
.guide-index-title { padding:5px 8px 11px; color:#938a97; font-size:10px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.guide-index a { display:flex; align-items:center; gap:10px; min-height:42px; margin:2px 0; padding:7px 9px; border:1px solid transparent; border-radius:11px; color:#625a66; text-decoration:none; transition:.16s ease; }
.guide-index a span { width:27px; height:27px; flex:0 0 27px; display:grid; place-items:center; border-radius:8px; background:#f7f2f8; color:#9a6ca7; font-size:10px; font-weight:900; }
.guide-index a b { font-size:12.5px; line-height:1.3; }
.guide-index a:hover { background:#faf6fb; color:#733087; }
.guide-index a.active { border-color:#ead7ef; background:linear-gradient(135deg,#fbf5fd,#f2e8f6); color:#702d84; }
.guide-index a.active span { background:#84399a; color:#fff; }
.guide-content { min-width:0; }
.guide-section { scroll-margin-top:20px; margin-bottom:22px; padding:30px clamp(22px,3vw,38px); border:1px solid #ebe4ed; border-radius:22px; background:rgba(255,255,255,.9); box-shadow:0 10px 34px rgba(54,34,61,.055); }
.guide-section-heading { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.guide-section-heading > span { width:46px; height:46px; flex:0 0 46px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg,#873a9c,#67308a); color:#fff; box-shadow:0 9px 19px rgba(119,49,140,.2); font-size:13px; font-weight:900; }
.guide-section-heading p { margin:0 0 3px; color:#9a6ca7; font-size:10px; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.guide-section-heading h3 { margin:0; color:#271d2a; font-size:clamp(20px,2vw,27px); letter-spacing:-.025em; }
.guide-lead { margin:0 0 20px; color:#706774; font-size:14px; line-height:1.75; }
.guide-steps { display:grid; gap:10px; margin:0; padding:0; list-style:none; counter-reset:guide-step; }
.guide-steps li { position:relative; min-height:48px; padding:13px 15px 13px 52px; border:1px solid #eee8f0; border-radius:14px; background:#fdfcfd; counter-increment:guide-step; }
.guide-steps li::before { content:counter(guide-step); position:absolute; left:14px; top:13px; width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:#f1e5f4; color:#78328d; font-size:11px; font-weight:900; }
.guide-steps b,.guide-steps span { display:block; }
.guide-steps b { margin-bottom:3px; color:#3c3340; font-size:13px; }
.guide-steps span { color:#777079; font-size:12.5px; line-height:1.55; }
.guide-tip,.guide-warning { margin-top:14px; padding:13px 15px; border-radius:13px; font-size:12.5px; line-height:1.6; }
.guide-tip { border:1px solid #dedaf3; background:#f7f6ff; color:#5d5779; }
.guide-warning { border:1px solid #eedeb5; background:#fffaf0; color:#725f37; }
.guide-choice-grid,.guide-two-column,.guide-path-grid { display:grid; gap:11px; margin:18px 0; }
.guide-choice-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.guide-two-column { grid-template-columns:repeat(2,minmax(0,1fr)); }
.guide-path-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.guide-choice-grid article,.guide-two-column article,.guide-path-grid article { min-width:0; padding:16px; border:1px solid #ebe4ed; border-radius:15px; background:#fdfcfd; }
.guide-choice-grid article { display:flex; align-items:flex-start; gap:12px; }
.guide-choice-grid .platform-mark { flex:0 0 auto; margin-top:1px; }
.guide-choice-grid b,.guide-two-column b,.guide-path-grid b { display:block; margin-bottom:6px; color:#453849; font-size:13px; }
.guide-choice-grid p,.guide-two-column p,.guide-path-grid p { margin:0; color:#776e7a; font-size:12px; line-height:1.6; }
.guide-path-grid article > span { width:27px; height:27px; display:grid; place-items:center; margin-bottom:10px; border-radius:8px; background:#f0e2f4; color:#7b338f; font-size:11px; font-weight:900; }
.guide-media { position:relative; overflow:hidden; margin:20px 0 0; border:1px solid #e5dbe8; border-radius:18px; background:#f7f3f8; box-shadow:0 12px 28px rgba(54,34,61,.07); }
.guide-media img { display:block; width:100%; height:auto; min-height:260px; max-height:560px; object-fit:cover; object-position:top center; background:#f7f3f8; }
.guide-media-placeholder { display:none; min-height:260px; place-items:center; align-content:center; gap:10px; color:#76577e; background:radial-gradient(circle at 75% 10%,rgba(184,146,201,.32),transparent 32%),linear-gradient(135deg,#faf7fb,#f1e8f4); }
.guide-media-placeholder span { width:54px; height:54px; display:grid; place-items:center; border-radius:17px; background:#fff; box-shadow:0 10px 25px rgba(77,39,89,.12); color:#843899; font-weight:900; }
.guide-media-placeholder b { font-size:13px; }
.guide-media.is-placeholder img { display:none; }
.guide-media.is-placeholder .guide-media-placeholder { display:grid; }
.guide-media figcaption { padding:11px 14px; border-top:1px solid #e8e1ea; background:#fff; color:#756d78; font-size:11.5px; line-height:1.55; }
.guide-faq-list { display:grid; gap:9px; }
.guide-faq-list details { border:1px solid #ebe4ed; border-radius:14px; background:#fdfcfd; }
.guide-faq-list summary { padding:14px 40px 14px 16px; color:#453a48; font-size:13px; font-weight:750; cursor:pointer; }
.guide-faq-list details p { margin:0; padding:0 16px 15px; color:#756c78; font-size:12.5px; line-height:1.65; }
.guide-help-card { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:17px; padding:18px; border:1px solid #e6d3ec; border-radius:16px; background:linear-gradient(135deg,#faf4fc,#f3ecf8); }
.guide-help-card b { color:#49384e; }
.guide-help-card p { margin:5px 0 0; color:#746978; font-size:12px; line-height:1.55; }
.guide-help-card a { flex:0 0 auto; padding:9px 13px; border:1px solid #d9bee1; border-radius:999px; background:#fff; color:#713184; font-size:12px; font-weight:800; text-decoration:none; }
@media (prefers-reduced-motion:reduce) { .guide-orbit { animation:none; } }
@media (max-width:1024px) {
.guide-hero { grid-template-columns:1fr 280px; padding:34px; }
.guide-layout { grid-template-columns:220px minmax(0,1fr); gap:18px; }
.guide-choice-grid,.guide-path-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
.guide-hero { min-height:0; grid-template-columns:1fr; padding:28px 24px; }
.guide-hero-art { display:none; }
.guide-mobile-index { width:100%; display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; padding:13px 15px; border:1px solid #e5dce8; border-radius:14px; background:#fff; color:#65306f; font:750 13px inherit; }
.guide-mobile-index[aria-expanded="true"] span:last-child { transform:rotate(180deg); }
.guide-layout { display:block; }
.guide-index { position:static; display:none; max-height:none; margin-bottom:14px; }
.guide-index.is-open { display:block; }
.guide-section { padding:24px 18px; border-radius:18px; }
.guide-two-column { grid-template-columns:1fr; }
}
@media (max-width:480px) {
.guide-hero { padding:24px 19px; border-radius:20px; }
.guide-hero h2 { font-size:27px; }
.guide-section-heading { align-items:flex-start; }
.guide-section-heading > span { width:40px; height:40px; flex-basis:40px; border-radius:12px; }
.guide-help-card { align-items:flex-start; flex-direction:column; }
.guide-media img,.guide-media-placeholder { min-height:190px; }
}
/* Sales plans */
#app-screen :is(#sales-admin-tabs,#payment-tracking-tabs) {
width:100%;
max-width:100%;
display:grid;
align-items:center;
gap:6px;
margin:0 0 24px;
padding:6px;
overflow-x:auto;
flex-wrap:nowrap;
border:1px solid rgba(218,207,223,.92);
border-radius:16px;
background:rgba(255,255,255,.82);
box-shadow:0 8px 26px rgba(69,42,76,.07),inset 0 1px 0 rgba(255,255,255,.92);
scrollbar-width:none;
-webkit-backdrop-filter:blur(14px) saturate(135%);
backdrop-filter:blur(14px) saturate(135%);
}
#app-screen #sales-admin-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
#app-screen #payment-tracking-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
#app-screen #payment-report-toolbar { margin:18px 0; }
#app-screen .payment-report-toolbar {
display:grid;
gap:10px;
padding:12px 14px;
border:1px solid #e8dced;
border-radius:20px;
background:#fff;
box-shadow:0 10px 30px rgba(62,24,73,.06);
}
#app-screen .payment-time-presets { display:flex; flex-wrap:nowrap; gap:6px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
#app-screen .payment-time-presets::-webkit-scrollbar { display:none; }
#app-screen .payment-time-button,
#app-screen .payment-order-group {
min-height:38px;
padding:8px 14px;
border:1px solid #dfd2e5;
border-radius:999px;
background:#fff;
color:#6d6471;
font:inherit;
font-weight:700;
cursor:pointer;
}
#app-screen .payment-time-button {
flex:0 0 auto;
min-height:32px;
padding:5px 10px;
font-size:13px;
font-weight:500;
line-height:1.2;
white-space:nowrap;
}
#app-screen .payment-time-button:hover,
#app-screen .payment-order-group:hover { border-color:#9b3db2; color:#74288a; }
#app-screen .payment-time-button.active,
#app-screen .payment-order-group.active { border-color:#8e36a5; background:#8e36a5; color:#fff; box-shadow:0 7px 18px rgba(114,40,137,.18); }
#app-screen .payment-custom-range { display:flex; flex-wrap:wrap; align-items:end; gap:10px; padding-top:2px; }
#app-screen .payment-custom-range label { display:grid; gap:5px; min-width:170px; color:#6d6471; font-weight:700; }
#app-screen .payment-custom-range input { min-height:42px; padding:8px 11px; border:1px solid #ded3e2; border-radius:10px; font:inherit; color:#2f2732; }
#app-screen .payment-range-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#756b79; font-size:13px; font-weight:400; }
#app-screen .payment-range-summary b { color:#625967; font-size:inherit; font-weight:400; }
#app-screen .payment-range-summary .btn {
flex:0 0 auto;
min-height:32px;
padding:6px 14px;
border-color:#8e36a5;
border-radius:10px;
background:#8e36a5;
color:#fff;
font-size:13px;
font-weight:650;
white-space:nowrap;
}
#app-screen .payment-range-summary .btn:hover { border-color:#76288d; background:#76288d; color:#fff; }
#app-screen .payment-orders-header { align-items:center; gap:16px; }
#app-screen .payment-order-groups { display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; }
#app-screen .payment-order-group { min-height:34px; padding:6px 12px; font-size:14px; }
#app-screen .payment-load-more { display:flex; justify-content:center; padding:18px 0 2px; }
#app-screen :is(#sales-admin-tabs,#payment-tracking-tabs)::-webkit-scrollbar { display:none; }
#app-screen :is(#sales-admin-tabs,#payment-tracking-tabs) .subnav-item {
position:relative;
min-height:44px;
width:100%;
display:inline-flex;
align-items:center;
justify-content:center;
margin:0;
padding:0 18px;
border:0;
border-radius:11px;
color:#716977;
background:transparent;
font-size:13px;
font-weight:750;
line-height:1.2;
white-space:nowrap;
transition:color .17s ease,background .17s ease,box-shadow .17s ease,transform .17s ease;
}
#app-screen :is(#sales-admin-tabs,#payment-tracking-tabs) .subnav-item:hover {
color:#77318b;
background:#f7f0f9;
}
#app-screen :is(#sales-admin-tabs,#payment-tracking-tabs) .subnav-item:active { transform:scale(.98); }
#app-screen :is(#sales-admin-tabs,#payment-tracking-tabs) .subnav-item:focus-visible {
outline:2px solid rgba(151,66,174,.58);
outline-offset:2px;
}
#app-screen :is(#sales-admin-tabs,#payment-tracking-tabs) .subnav-item.active,
#app-screen :is(#sales-admin-tabs,#payment-tracking-tabs) .subnav-item.active:hover {
color:#fff;
background:linear-gradient(135deg,#9d46b1 0%,#79318d 100%);
box-shadow:0 7px 16px rgba(108,42,126,.22),inset 0 1px 0 rgba(255,255,255,.24);
}
@media (max-width:768px) {
#app-screen :is(#sales-admin-tabs,#payment-tracking-tabs) {
width:100%;
display:flex;
margin-bottom:18px;
padding:5px;
border-radius:14px;
scroll-snap-type:x proximity;
}
#app-screen :is(#sales-admin-tabs,#payment-tracking-tabs) .subnav-item {
width:auto;
flex:1 0 max-content;
min-height:42px;
padding:0 15px;
scroll-snap-align:start;
}
#app-screen .payment-report-toolbar { padding:12px; border-radius:16px; }
#app-screen .payment-time-presets { padding-bottom:4px; }
#app-screen .payment-custom-range { align-items:stretch; }
#app-screen .payment-custom-range label { flex:1 1 140px; min-width:0; }
#app-screen .payment-custom-range .btn { width:100%; }
#app-screen .payment-range-summary { align-items:center; flex-direction:row; }
#app-screen .payment-orders-header { align-items:flex-start; flex-direction:column; }
#app-screen .payment-order-groups { margin-left:0; width:100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:3px; }
#app-screen .payment-order-group { flex:0 0 auto; }
}
.payment-review-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.payment-waiting-note{display:inline-block;max-width:220px;color:#8a5b16;font-size:12px;line-height:1.45}.payment-status{display:inline-flex;align-items:center;min-height:26px;padding:4px 9px;border-radius:999px;background:#f2f4f7;color:#475467;font-size:12px;font-weight:750;white-space:nowrap}.payment-status-pending,.payment-status-provisional{background:#fff7e6;color:#9a5b00}.payment-status-paid,.payment-status-applied{background:#e9f8ef;color:#18753a}.payment-status-rejected,.payment-status-provider_error,.payment-status-cancelled{background:#fff0ef;color:#b42318}.payment-status-review_required{background:#f4efff;color:#6941c6}.payment-status-expired{background:#f2f4f7;color:#667085}.payment-settings-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:860px}.payment-settings-form .field-group{margin:0}.payment-settings-form .checkbox-row,.payment-settings-form .modal-actions,.payment-settings-form .field-hint{grid-column:1/-1}.modal-box.manual-payment-modal-box{width:min(520px,calc(100vw - 24px));max-width:520px;max-height:calc(100dvh - 24px);overflow:hidden;padding:clamp(14px,2vh,22px);box-sizing:border-box}.manual-payment-modal{display:flex;flex-direction:column;width:100%;max-height:none;overflow:visible}.manual-payment-modal h3{margin:0 0 4px;text-align:center}.manual-payment-modal .modal-sub{margin-bottom:clamp(6px,1vh,12px);text-align:center}.manual-payment-qr{display:block;width:min(300px,38dvh,72vw);height:auto;aspect-ratio:1;object-fit:contain;margin:clamp(6px,1vh,12px) auto;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:0 8px 22px rgba(55,30,70,.09)}.manual-payment-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 clamp(7px,1vh,11px)}.manual-payment-details>div{min-width:0;padding:8px 10px;border:1px solid var(--border);border-radius:11px;background:var(--surface-soft,#faf9fc)}.manual-payment-details span,.manual-payment-details strong{display:block}.manual-payment-details span{margin-bottom:3px;color:var(--text-muted);font-size:10.5px}.manual-payment-details strong{overflow-wrap:anywhere;color:var(--text);font-size:13px}.manual-payment-details>div:nth-child(2) strong{color:var(--primary);font-size:15px;letter-spacing:.04em;white-space:nowrap}.manual-payment-modal .warning-box{margin:0 0 clamp(7px,1vh,10px);padding:9px 11px;font-size:12px;line-height:1.42}.manual-payment-modal .modal-actions{margin-top:0}.manual-payment-modal .modal-actions .btn{min-height:38px;padding:7px 14px}@media(max-width:600px){.payment-settings-form{grid-template-columns:1fr}.payment-settings-form .checkbox-row,.payment-settings-form .modal-actions,.payment-settings-form .field-hint{grid-column:auto}.modal-box.manual-payment-modal-box{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:12px}.manual-payment-qr{width:min(275px,36dvh,70vw)}}@media(max-height:700px){.modal-box.manual-payment-modal-box{padding:10px 14px}.manual-payment-modal h3{font-size:16px}.manual-payment-modal .modal-sub{margin-bottom:3px}.manual-payment-qr{width:min(230px,34dvh,64vw);margin:4px auto}.manual-payment-details{gap:6px;margin-bottom:6px}.manual-payment-details>div{padding:6px 8px}.manual-payment-modal .warning-box{margin-bottom:6px;padding:7px 9px;font-size:11px}.manual-payment-modal .modal-actions .btn{min-height:34px;padding:5px 11px}}
.manual-payment-qr{width:min(340px,42dvh,76vw)}
@media(max-width:600px){.manual-payment-qr{width:min(310px,40dvh,74vw)}}
@media(max-height:700px){.manual-payment-qr{width:min(260px,40dvh,68vw)}}
.plan-status-notice,.plan-upgrade-notice{margin-top:10px;padding:10px 12px;border-radius:10px;background:#f3efff;color:#5c3bb1;font-size:13px}.plan-status-notice.is-limit,.plan-upgrade-notice{background:#fff1f0;color:#b42318}#sales-plans-admin-list{width:100%;overflow-x:auto;border-radius:14px}.sales-plans-table{min-width:1580px}.sales-plans-table .sales-plan-actions-cell{position:sticky;right:0;z-index:1;min-width:150px;white-space:nowrap;background:var(--panel);box-shadow:-8px 0 14px rgba(55,30,70,.08)}.sales-plans-table thead .sales-plan-actions-cell{z-index:2;background:#faf9fc}.sales-plans-table tr:hover .sales-plan-actions-cell{background:#fbf8fd}.sales-plan-limits{margin-top:10px}.sales-plan-default-toggle{display:flex;align-items:center;gap:8px;margin-top:14px;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft);font-size:13px;font-weight:600;color:var(--text)}.sales-plan-default-toggle input{width:16px;height:16px;accent-color:var(--primary)}.plan-default-badge,.plan-version-badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;background:#ede9fe;color:#6d28d9;font-size:12px;font-weight:700}.plan-version-badge{background:#f2f4f7;color:#475467}.plan-warning{color:#b42318!important}.muted{color:var(--text-muted)}
.delete-progress{margin-right:auto;color:var(--text-muted);font-size:12px;line-height:1.35}
.payment-settings-form>.toggle-row,.payment-settings-form>.form-grid,.payment-settings-form>.info-note,.payment-settings-form>.modal-error,.payment-settings-form>.btn{grid-column:1/-1}.payment-settings-form>.btn{justify-self:start}
.payment-overview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.payment-overview-card{position:relative;min-width:0;padding:18px;border:1px solid #e6dce9;border-radius:16px;background:linear-gradient(145deg,#fff 0%,#fbf8fc 100%);box-shadow:0 8px 24px rgba(58,34,66,.06);overflow:hidden}.payment-overview-card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:#8f3ca4}.payment-overview-card>span,.payment-overview-card>strong,.payment-overview-card>small{display:block}.payment-overview-card>span{color:#756a79;font-size:12px;font-weight:750}.payment-overview-card>strong{margin:8px 0 5px;color:#2e2431;font-size:24px;line-height:1.15;overflow-wrap:anywhere}.payment-overview-card>small{color:#8d8490;font-size:11px;line-height:1.4}.payment-overview-card.is-pending::before{background:#d99000}.payment-overview-card.is-warning::before{background:#f79009}.payment-overview-card.is-review::before{background:#6941c6}.payment-overview-card.is-danger::before{background:#d92d20}.payment-overview-card.is-money::before{background:#16834b}.payment-overview-card.is-vat::before{background:#087e8b}.payment-overview-card.is-total{background:linear-gradient(145deg,#6d287f 0%,#913ca7 100%);border-color:#772e8a}.payment-overview-card.is-total::before{background:#e9b9f5}.payment-overview-card.is-total>span,.payment-overview-card.is-total>small{color:#f0dff4}.payment-overview-card.is-total>strong{color:#fff}
.payment-table-wrap{width:100%;overflow:auto;border:1px solid #ece5ef;border-radius:14px;background:#fff}.payment-table-wrap .data-table{margin:0}.payment-orders-admin-table{min-width:1750px}.payment-transactions-table{min-width:1260px}.customer-payment-table{min-width:840px}.payment-table-wrap th{white-space:nowrap}.payment-table-wrap td{vertical-align:top}.payment-order-code{display:block;color:#582164;font-size:14px;letter-spacing:.045em}.payment-cell-meta{display:block;max-width:230px;margin-top:4px;color:#8a808d;font-size:11px;line-height:1.4;overflow:hidden;text-overflow:ellipsis}.payment-total-money{color:#5e216d;font-size:14px;white-space:nowrap}.payment-provider-badge,.reconcile-status{display:inline-flex;align-items:center;min-height:26px;padding:4px 9px;border-radius:999px;background:#eef4ff;color:#315ca8;font-size:12px;font-weight:750;white-space:nowrap}.reconcile-status.is-matched{background:#e9f8ef;color:#18753a}.reconcile-status.needs-review{background:#fff3ed;color:#b54708}.payment-timeline{display:grid;gap:4px;min-width:160px;color:#5f5662;font-size:11px;line-height:1.35}.payment-date-cell{min-width:132px;white-space:normal}.payment-reference{display:block;max-width:170px;overflow-wrap:anywhere}.payment-orders-admin-table .payment-actions-cell{position:sticky;right:0;z-index:1;min-width:190px;background:#fff;box-shadow:-8px 0 14px rgba(55,30,70,.07)}.payment-orders-admin-table thead .payment-actions-cell{z-index:2;background:#faf9fc}.payment-orders-admin-table tr:hover .payment-actions-cell{background:#fbf8fd}
@media(max-width:1100px){.payment-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:768px){.payment-overview-grid{grid-template-columns:1fr 1fr;gap:10px}.payment-overview-card{padding:14px}.payment-overview-card>strong{font-size:19px}.payment-table-wrap{overflow:visible;border:0;background:transparent}.payment-orders-admin-table,.payment-transactions-table,.customer-payment-table{display:block;min-width:0;width:100%;border:0;background:transparent}.payment-orders-admin-table thead,.payment-transactions-table thead,.customer-payment-table thead{display:none}.payment-orders-admin-table tbody,.payment-transactions-table tbody,.customer-payment-table tbody{display:grid;gap:12px}.payment-orders-admin-table tr,.payment-transactions-table tr,.customer-payment-table tr{display:block;padding:10px 13px;border:1px solid #e7deea;border-radius:14px;background:#fff;box-shadow:0 5px 16px rgba(51,31,57,.06)}.payment-orders-admin-table td,.payment-transactions-table td,.customer-payment-table td{display:grid;grid-template-columns:minmax(105px,34%) minmax(0,1fr);align-items:start;gap:10px;width:100%;min-width:0;padding:8px 0!important;border:0;border-bottom:1px solid #f0ebf2;white-space:normal!important;overflow-wrap:anywhere}.payment-orders-admin-table td::before,.payment-transactions-table td::before,.customer-payment-table td::before{content:attr(data-label);color:#8a7d8e;font-size:10px;font-weight:800;line-height:1.4;text-transform:uppercase}.payment-orders-admin-table td:last-child,.payment-transactions-table td:last-child,.customer-payment-table td:last-child{border-bottom:0}.payment-orders-admin-table .payment-actions-cell{position:static;min-width:0;background:transparent;box-shadow:none}.payment-review-actions{align-items:stretch;flex-direction:column}.payment-review-actions .btn{width:100%}.payment-cell-meta{max-width:none}.payment-timeline{min-width:0}}
@media(max-width:520px){.payment-overview-grid{grid-template-columns:1fr}.payment-overview-card{min-height:112px}.payment-orders-admin-table td,.payment-transactions-table td,.customer-payment-table td{grid-template-columns:96px minmax(0,1fr)}}
/* Compact user rows: keep this after the portal theme overrides. */
#app-screen #table-users tbody td { padding-top:4px; padding-bottom:4px; line-height:1.25; }
#app-screen #table-users tbody td .user-time-cell { line-height:1.25; }
#app-screen #table-users .user-actions-cell { min-width:112px !important; white-space:nowrap !important; overflow:visible !important; }
#app-screen #table-users .user-actions-menu { display:inline-block !important; }
#app-screen #table-users .user-actions-menu > summary { display:inline-flex !important; align-items:center; justify-content:center; min-width:92px; white-space:nowrap !important; }
#app-screen #table-users .user-actions-menu > summary::before { content:none !important; }
#app-screen #table-users .user-actions-popover { display:block !important; visibility:hidden; }
#app-screen #table-users .user-actions-visible-btn { display:inline-flex; align-items:center; justify-content:center; min-width:92px; padding:7px 10px; border:1px solid var(--border); border-radius:999px; color:var(--primary); background:transparent; font:inherit; font-weight:700; cursor:pointer; }
#app-screen #table-users .user-actions-visible-btn:hover { background:var(--bg); }
#app-screen #table-users .user-actions-cell > .user-actions-menu > summary { display:none !important; }
/* The glass section creates a containing block for fixed descendants via
backdrop-filter, trapping the action popover inside the scrolling table. */
#app-screen .section:has(#users-table-wrap) { -webkit-backdrop-filter:none; backdrop-filter:none; }
@media (max-width:768px) {
#app-screen #users-table-wrap { overflow-x:hidden; padding:0; }
#app-screen #table-users { display:block !important; width:100%; max-width:100%; border:0; background:transparent; table-layout:auto; overflow:visible; white-space:normal; }
#app-screen #table-users thead { display:none; }
#app-screen #table-users tbody { display:grid; width:100%; gap:12px; }
#app-screen #table-users tbody tr { display:block; width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--border); border-radius:13px; background:#fff; box-shadow:0 2px 8px rgba(31,41,55,.05); }
#app-screen #table-users tbody td { display:grid; grid-template-columns:minmax(112px,38%) minmax(0,1fr); align-items:center; gap:10px; width:100%; min-width:0; min-height:38px; box-sizing:border-box; padding:7px 0 !important; border:0; border-bottom:1px solid #eef0f4; overflow:visible; white-space:normal !important; overflow-wrap:anywhere; }
#app-screen #table-users tbody td:last-child { border-bottom:0; }
#app-screen #table-users tbody td::before { content:attr(data-label) !important; position:static; width:auto; color:var(--text-muted); font-size:10.5px; line-height:1.35; font-weight:800; text-transform:uppercase; }
#app-screen #table-users tbody td[colspan] { display:block; padding:20px !important; text-align:center; }
#app-screen #table-users tbody td[colspan]::before { display:none; }
#app-screen #table-users .assign-btn,
#app-screen #table-users select,
#app-screen #table-users .plan-inline-btn { width:100%; max-width:100%; min-width:0; box-sizing:border-box; }
#app-screen #table-users .user-actions-cell { min-width:0 !important; white-space:normal !important; text-align:left; }
#app-screen #table-users .user-actions-visible-btn { width:100%; min-width:0; }
}
.manager-permissions-picker { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.customer-employees-table-wrap { width:100%; overflow-x:auto; }
.customer-employees-table { width:100%; min-width:560px; }
.customer-employees-table .assign-btn { width:100%; min-width:0; }
.manager-accounts-list { width:100%; overflow:hidden; margin-bottom:16px; }
.manager-accounts-list .data-table { width:100%; min-width:0; table-layout:fixed; }
.manager-accounts-list .data-table th, .manager-accounts-list .data-table td { padding:6px 10px; }
.manager-accounts-list .data-table th:nth-child(1) { width:15%; }
.manager-accounts-list .data-table th:nth-child(2) { width:17%; }
.manager-accounts-list .data-table th:nth-child(3) { width:11%; }
.manager-accounts-list .data-table th:nth-child(4) { width:13%; }
.manager-accounts-list .data-table th:nth-child(5) { width:13%; }
.manager-accounts-list .data-table th:nth-child(6) { width:21%; }
.manager-accounts-list .data-table th:nth-child(7) { width:10%; }
.manager-accounts-list .assign-btn { width:100%; min-width:0; }
.manager-permissions-picker label { flex:0 0 auto; font-weight:700; color:var(--text); }
.manager-permissions-picker select { max-width:520px; }
.manager-permissions-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.manager-permission-card { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface, #fff); }
.manager-permission-card strong { display:block; margin-bottom:4px; }
.manager-permission-card span { display:block; font-size:12px; color:var(--text-muted); line-height:1.45; }
.manager-permission-card .toggle { flex:0 0 42px; }
.manager-permission-card .payment-confirm-permission { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:12px; font-weight:600; color:var(--text); }
.manager-permission-card .payment-confirm-permission input { width:16px; height:16px; margin:0; accent-color:#82339a; }
.manager-permission-card .payment-confirm-permission span { color:inherit; }
.payment-contact-modal { display:grid; gap:14px; }
.payment-contact-modal .modal-sub { margin:0; }
.payment-contact-detail { display:grid; gap:4px; padding:12px; border:1px solid var(--border); border-radius:6px; }
.payment-contact-detail span { color:var(--text-muted); font-size:12px; }
.payment-contact-detail strong { overflow-wrap:anywhere; }
.rule-visibility-control { display:inline-flex; align-items:center; flex:0 0 auto; color:#1877f2; white-space:nowrap; }
.rule-visibility-control .toggle-track { background:#d8d8df; }
.rule-visibility-control input:checked + .toggle-track { background:#1877f2; }
.rule-toggle-stack { display:flex; flex-direction:column; align-items:flex-start; gap:8px; flex:0 0 auto; }
.rule-row .rule-visibility-control { margin-top:0; }
@media (max-width:900px) { .manager-permissions-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .manager-permissions-picker { align-items:stretch; flex-direction:column; gap:6px; } .manager-permissions-picker select { max-width:none; } .manager-permissions-grid { grid-template-columns:1fr; } }
/* Employee detail modal: use the available width instead of forcing a
horizontal scroller, and keep its channel flyout above the modal backdrop. */
.modal-box.customer-employees-modal-box { max-width:720px; }
.customer-employees-table-wrap { width:100%; overflow-x:hidden; }
.customer-employees-table { width:100%; min-width:0; table-layout:fixed; }
.customer-employees-table th, .customer-employees-table td { min-width:0; overflow-wrap:anywhere; }
.customer-employees-table th:nth-child(1) { width:20%; }
.customer-employees-table th:nth-child(2) { width:27%; }
.customer-employees-table th:nth-child(3) { width:37%; }
.customer-employees-table th:nth-child(4) { width:16%; }
.staff-routing-header { display:flex; align-items:center; gap:12px; padding:17px 20px; font-size:15px; }
.staff-routing-section { max-width:1120px; overflow:visible; }
.staff-routing-header > span { flex:1; }
.staff-routing-body { display:grid; gap:18px; padding:18px 20px 20px; }
.staff-routing-toolbar { display:grid; grid-template-columns:1fr; gap:18px; align-items:start; }
.staff-routing-toolbar > div { display:grid; gap:6px; }
.staff-routing-channel-field > small { color:var(--text-muted); font-size:11px; line-height:1.4; }
.staff-routing-page-picker { position:relative; }
.staff-routing-page-picker > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:50px; padding:8px 13px; border:1px solid var(--border); border-radius:12px; background:linear-gradient(180deg,#fff 0%,#fdfbfd 100%); cursor:pointer; list-style:none; position:relative; box-sizing:border-box; transition:border-color .15s,box-shadow .15s; }
.staff-routing-page-picker > summary::-webkit-details-marker { display:none; }
.staff-routing-page-picker[open] > summary { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.staff-routing-page-summary-main { display:flex; align-items:center; gap:10px; min-width:0; }
.staff-routing-page-summary-main > span:not(.staff-routing-page-avatar) { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; font-weight:700; }
.staff-routing-page-summary-main > b { flex:0 0 auto; padding:3px 7px; border-radius:999px; color:var(--accent); background:var(--accent-soft); font-size:10px; }
.staff-routing-page-chevron { flex:0 0 22px; width:22px; height:22px; fill:none; stroke:var(--text-muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s,color .18s; }
.staff-routing-page-picker[open] .staff-routing-page-chevron { transform:rotate(180deg); stroke:var(--accent); }
.staff-routing-page-options { position:absolute; z-index:30; top:calc(100% + 7px); left:0; right:0; max-height:300px; overflow:auto; padding:7px; border:1px solid #ded4e2; border-radius:13px; background:#fff; box-shadow:0 16px 38px rgba(59,31,68,.18); }
.staff-routing-page-options label { display:flex; align-items:center; gap:10px; min-height:48px; padding:7px 9px; border:1px solid transparent; border-radius:9px; cursor:pointer; box-sizing:border-box; }
.staff-routing-page-options label:hover { background:#fbf5fc; }
.staff-routing-page-options label.is-selected { border-color:#ead8ee; background:#fbf3fd; }
.staff-routing-page-options input { flex:0 0 16px; width:16px; height:16px; margin:0; accent-color:var(--accent); }
.staff-routing-page-option-copy { display:grid; min-width:0; gap:2px; }
.staff-routing-page-option-copy b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; }
.staff-routing-page-option-copy small { color:var(--text-muted); font-size:10.5px; }
.staff-routing-page-avatar { flex:0 0 30px; width:30px; height:30px; display:grid; place-items:center; overflow:visible; position:relative; border:1px solid #e1d9e4; border-radius:50%; background:#f1e9f4; color:#7d2e90; font-size:11px; font-weight:800; box-sizing:border-box; }
.staff-routing-page-avatar img,.staff-routing-page-avatar-fallback { grid-area:1 / 1; width:100%; height:100%; }
.staff-routing-page-avatar img { display:block; object-fit:cover; border-radius:inherit; }
.staff-routing-page-avatar img[hidden],.staff-routing-page-avatar-fallback[hidden] { display:none; }
.staff-routing-page-avatar-fallback { display:grid; place-items:center; }
.staff-routing-selected-pages { display:flex; flex-wrap:wrap; gap:7px; min-height:0; }
.staff-routing-selected-pages:empty { display:none; }
.staff-routing-selected-chip { display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:4px 5px 4px 4px; border:1px solid #e4d8e7; border-radius:999px; background:#fff; color:#514654; box-shadow:0 1px 3px rgba(61,34,68,.04); }
.staff-routing-selected-chip .staff-routing-page-avatar { flex-basis:24px; width:24px; height:24px; font-size:9px; }
.staff-routing-page-avatar .channel-ai-status { top:-5px; right:-7px; }
.staff-routing-selected-chip .staff-routing-page-avatar .channel-ai-status { top:-6px; right:-8px; transform:scale(.88); }
.staff-routing-selected-chip > span:not(.staff-routing-page-avatar) { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:700; }
.staff-routing-selected-chip button { width:22px; height:22px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; color:#8a778e; background:transparent; font:inherit; font-size:16px; line-height:1; cursor:pointer; }
.staff-routing-selected-chip button:hover { color:#7d2e90; background:#f3e6f6; }
.staff-routing-master { display:flex; gap:11px; align-items:center; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:linear-gradient(180deg,#fff 0%,#fdfbfd 100%); }
.staff-routing-master { min-height:50px; margin-top:0; box-sizing:border-box; }
.staff-routing-master span { display:grid; gap:2px; }
.staff-routing-master > input { width:18px; height:18px; margin:0; accent-color:var(--accent); }
.staff-routing-master small { color:var(--text-muted); font-size:11px; }
.staff-routing-actions { display:flex; gap:12px; align-items:center; }
#staff-routing-status { color:var(--text-muted); font-size:12px; }
.staff-routing-body > .info-note { margin:0; padding:12px 14px; border-color:#e9ddec; border-radius:12px; background:#fbf7fc; line-height:1.45; }
#staff-routing-rules { display:grid; gap:16px; }
.staff-routing-rule { border:1px solid #e4dce7; border-radius:16px; padding:18px; display:grid; gap:16px; background:linear-gradient(180deg,#fff 0%,#fdfbfd 100%); box-shadow:0 3px 12px rgba(68,38,76,.04); }
.staff-routing-rule.is-conflict { border-color:#dc5b63; box-shadow:0 0 0 2px rgba(220,91,99,.12),0 3px 12px rgba(68,38,76,.04); }
.staff-routing-rule.is-disabled { opacity:.64; background:#fafafa; }
.staff-routing-rule-head { display:grid; grid-template-columns:minmax(220px,1fr) auto; gap:14px; align-items:center; }
.staff-routing-rule-name { min-height:44px; padding-inline:14px!important; font-size:15px!important; font-weight:700; }
.staff-routing-rule-actions { display:flex; align-items:center; gap:10px; }
.staff-routing-rule-toggle { display:flex; align-items:center; gap:9px; min-height:42px; padding:6px 11px; border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--text-muted); font-size:12px; font-weight:700; cursor:pointer; }
.staff-routing-rule-toggle .toggle { flex:0 0 42px; }
.staff-routing-delete { min-height:42px; padding:8px 15px; border-color:#eadfeb!important; color:#8d2da0!important; background:#fff!important; }
.staff-routing-delete:hover { border-color:#cf9bd8!important; background:#fbf2fc!important; }
.staff-routing-rule-pages { display:grid; gap:9px; padding:13px 14px; border:1px solid #eee6f0; border-radius:12px; background:#fff; }
.staff-routing-rule-pages > b { font-size:13px; }
.staff-routing-rule-pages > div { display:flex; flex-wrap:wrap; gap:8px; }
.staff-routing-rule-pages label { display:flex; align-items:center; gap:8px; min-height:38px; padding:6px 10px 6px 7px; border:1px solid var(--border); border-radius:10px; background:#fff; cursor:pointer; }
.staff-routing-rule-pages label.is-selected { color:var(--accent); border-color:#c887d4; background:var(--accent-soft); }
.staff-routing-rule-pages input { width:16px; height:16px; margin:0; accent-color:var(--accent); }
.staff-routing-rule-pages .staff-routing-page-avatar { flex:0 0 26px; width:26px; height:26px; font-size:9px; }
.staff-routing-rule-pages label > span:last-child { font-size:12px; font-weight:700; }
.staff-routing-time { display:grid; grid-template-columns:minmax(140px,190px) minmax(140px,190px) minmax(420px,1fr); gap:12px; align-items:end; }
.staff-routing-time-field { display:grid; gap:6px; }
.staff-routing-time-field > label { color:var(--text-muted); font-size:12px; font-weight:700; }
.staff-routing-time-field input { min-height:46px; padding-inline:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.staff-routing-policies { display:grid; grid-template-columns:repeat(2,minmax(190px,1fr)); gap:10px; }
.staff-routing-policy { display:flex; align-items:center; gap:11px; min-height:46px; padding:9px 12px; border:1px solid var(--border); border-radius:12px; background:linear-gradient(180deg,#fff 0%,#fdfbfd 100%); box-sizing:border-box; cursor:pointer; }
.staff-routing-policy > .toggle { flex:0 0 42px; }
.staff-routing-policy-copy { display:grid; min-width:0; gap:2px; }
.staff-routing-policy-copy b { font-size:13px; line-height:1.25; }
.staff-routing-policy-copy small { color:var(--text-muted); font-size:11px; line-height:1.3; }
.staff-routing-policy:hover { border-color:#cfb7d5; background:#fcf7fd; }
.staff-routing-date-range { display:grid; grid-template-columns:minmax(180px,240px) minmax(180px,240px) minmax(390px,1fr); gap:10px 12px; align-items:end; padding:13px 14px; border:1px solid #eee6f0; border-radius:12px; background:#fff; }
.staff-routing-date-field { display:grid; gap:6px; }
.staff-routing-date-field > label { color:var(--text-muted); font-size:12px; font-weight:700; }
.staff-routing-date-field input { width:100%; min-height:42px; padding:8px 11px; border:1px solid var(--border); border-radius:9px; background:#fff; color:var(--text); font:inherit; font-size:13px; box-sizing:border-box; }
.staff-routing-date-field input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring); }
.staff-routing-date-range > small { grid-column:1 / -1; color:var(--text-muted); font-size:11px; line-height:1.45; }
.staff-routing-days { display:flex; flex-wrap:wrap; gap:8px; padding-top:1px; }
.staff-routing-date-range > .staff-routing-days { align-self:end; min-height:42px; align-items:center; }
.staff-routing-days label input { position:absolute; opacity:0; pointer-events:none; }
.staff-routing-days label span { display:grid; place-items:center; min-width:42px; height:36px; padding:0 10px; border:1px solid var(--border); border-radius:999px; background:#fff; text-align:center; cursor:pointer; box-sizing:border-box; font-size:12px; font-weight:700; }
.staff-routing-days label input:checked + span { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); font-weight:700; }
.staff-routing-employees { display:grid; gap:10px; padding:14px; border:1px solid #eee7f0; border-radius:12px; background:#fff; }
.staff-routing-employees > b { font-size:13px; }
.staff-routing-employees > div { display:flex; flex-wrap:wrap; gap:8px; }
.staff-routing-employees > div > label { display:flex; gap:8px; align-items:center; min-height:36px; padding:7px 11px; border:1px solid var(--border); border-radius:9px; background:#fff; cursor:pointer; }
.staff-routing-employees .empty-hint { width:100%; min-height:0; padding:10px 12px; border-radius:9px; background:#faf8fb; text-align:left; }
.staff-routing-employees input { width:16px; height:16px; margin:0; accent-color:var(--accent); }
.staff-routing-conflict-message { padding:11px 13px; border:1px solid #f0a5aa; border-radius:10px; background:#fff0f1; color:#a5202b; font-size:12px; font-weight:700; line-height:1.45; }
.staff-routing-rule-toggle:hover, .staff-routing-employees > div > label:hover { border-color:#cfb7d5; background:#fcf7fd; }
.conversation-badges { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.conversation-owner-badge { display:inline-flex; max-width:150px; padding:3px 7px; border-radius:999px; font-size:10px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conversation-owner-badge.is-mine { color:#176b3a; background:#e7f6ed; }
.conversation-owner-badge.is-other { color:#b42318; background:#ffebe9; }
.conversation-owner-badge.is-shared { color:#8a5700; background:#fff3d6; }
.chat-assignment { display:flex; gap:7px; align-items:center; flex-wrap:nowrap; max-width:100%; overflow-x:auto; margin-top:5px; font-size:11px; color:var(--text-muted); scrollbar-width:none; }
.chat-assignment::-webkit-scrollbar { display:none; }
.chat-assignment > span:first-child { display:inline-flex; flex:0 0 auto; padding:3px 7px; border-radius:999px; white-space:nowrap; }
.chat-assignment.is-mine > span:first-child { color:#176b3a; background:#e7f6ed; }
.chat-assignment.is-other > span:first-child { color:#b42318; background:#ffebe9; }
.chat-assignment.is-shared > span:first-child { color:#8a5700; background:#fff3d6; }
.chat-assignment-btn { flex:0 0 auto; padding:4px 7px; min-height:0; font-size:10px; white-space:nowrap; }
@media (max-width: 1180px) {
.staff-routing-time { grid-template-columns:repeat(2,minmax(140px,1fr)); }
.staff-routing-policies { grid-column:1 / -1; }
.staff-routing-date-range { grid-template-columns:repeat(2,minmax(180px,1fr)); }
.staff-routing-date-range > .staff-routing-days { grid-column:1 / -1; }
}
@media (max-width: 760px) {
.staff-routing-toolbar, .staff-routing-time { grid-template-columns:1fr; }
.staff-routing-policies { grid-column:auto; grid-template-columns:1fr; }
.staff-routing-master { margin-top:0; }
.staff-routing-date-range { grid-template-columns:1fr; }
.staff-routing-rule { padding:14px; }
.staff-routing-rule-head { grid-template-columns:1fr; }
.staff-routing-rule-actions { justify-content:space-between; }
}
#assign-page-flyout { z-index:6000; }
/* Per-customer activity and results dashboard. */
.modal-box.customer-activity-modal-box { width:min(1120px,calc(100vw - 40px)); max-width:1120px; max-height:min(92vh,900px); min-width:0; padding:0; overflow-y:auto; background:#f8f6fa; box-sizing:border-box; }
.customer-activity-modal { position:relative; display:grid; gap:16px; width:100%; min-width:0; padding:22px; color:var(--text); box-sizing:border-box; }
.customer-activity-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:2px 2px 0; }
.customer-activity-head > div { min-width:0; }
.customer-activity-head span { display:block; color:#8a3a9a; font-size:10px; font-weight:850; letter-spacing:.12em; }
.customer-activity-head h3 { margin:4px 0!important; color:#3f2745; font-size:24px!important; line-height:1.15; overflow-wrap:anywhere; }
.customer-activity-head p { margin:0; color:var(--text-muted); font-size:12.5px; overflow-wrap:anywhere; }
.customer-activity-close { flex:0 0 36px; width:36px; height:36px; display:grid; place-items:center; border:1px solid #e5dce8; border-radius:11px; color:#6f5875; background:#fff; font-size:23px; line-height:1; cursor:pointer; }
.customer-activity-close:hover { color:#7d2e90; background:#f5eaf7; }
.customer-activity-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.customer-activity-summary > div { display:grid; gap:3px; min-width:0; padding:14px 16px; border:1px solid #eadfed; border-radius:14px; background:linear-gradient(135deg,#fff 0%,#fbf6fc 100%); }
.customer-activity-summary span,.customer-activity-summary small { color:#88768c; font-size:11.5px; }
.customer-activity-summary strong { color:#54245f; font-size:15px; overflow-wrap:anywhere; }
.customer-activity-alerts { display:grid; gap:8px; }
.customer-activity-alert { display:flex; align-items:flex-start; gap:9px; padding:10px 12px; border:1px solid #e6e0e8; border-radius:11px; color:#5f5661; background:#fff; font-size:12.5px; line-height:1.45; }
.customer-activity-alert i { flex:0 0 8px; width:8px; height:8px; margin-top:5px; border-radius:50%; background:#8b7e8e; }
.customer-activity-alert.success { border-color:#cbe8d5; color:#176c3b; background:#f2fbf5; }.customer-activity-alert.success i { background:#23a15a; }
.customer-activity-alert.warning { border-color:#f2dfb5; color:#8b5b00; background:#fffaf0; }.customer-activity-alert.warning i { background:#d99516; }
.customer-activity-alert.danger { border-color:#f0c9c6; color:#a12d27; background:#fff6f5; }.customer-activity-alert.danger i { background:#d6473f; }
.customer-activity-toolbar,.customer-activity-section-title { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.customer-activity-toolbar > div:first-child,.customer-activity-section-title > div { display:grid; gap:3px; }
.customer-activity-toolbar b,.customer-activity-section-title b { color:#493d4c; font-size:14px; }
.customer-activity-toolbar span,.customer-activity-section-title span { color:var(--text-muted); font-size:11.5px; line-height:1.4; }
.customer-activity-ranges { display:inline-flex; gap:3px; max-width:100%; overflow-x:auto; padding:3px; border:1px solid #e3d8e6; border-radius:999px; background:#fff; box-sizing:border-box; }
.customer-activity-ranges button { min-height:30px; padding:5px 11px; border:0; border-radius:999px; color:#756878; background:transparent; font:inherit; font-size:11.5px; font-weight:750; white-space:nowrap; cursor:pointer; }
.customer-activity-ranges button.active { color:#fff; background:linear-gradient(135deg,#87369a,#a94fba); box-shadow:0 3px 9px rgba(126,48,145,.22); }
.customer-activity-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.customer-activity-kpis article { position:relative; min-width:0; overflow:hidden; padding:14px 15px; border:1px solid #e6e0e8; border-radius:14px; background:#fff; }
.customer-activity-kpis article::after { content:""; position:absolute; right:-18px; bottom:-24px; width:70px; height:70px; border-radius:50%; background:var(--activity-soft,#f2edf4); }
.customer-activity-kpis span,.customer-activity-kpis small { position:relative; z-index:1; display:block; color:var(--text-muted); font-size:11px; }
.customer-activity-kpis strong { position:relative; z-index:1; display:block; margin:8px 0 3px; color:var(--activity-color,#6a3a75); font-size:27px; line-height:1; }
.customer-activity-kpis .primary { --activity-color:#7d2e90; --activity-soft:#f0dff4; }.customer-activity-kpis .info { --activity-color:#1769aa; --activity-soft:#e1effa; }.customer-activity-kpis .success { --activity-color:#18864b; --activity-soft:#dff4e7; }.customer-activity-kpis .purple { --activity-color:#6f4bc4; --activity-soft:#e9e2f8; }
.customer-activity-current { display:grid; grid-template-columns:auto repeat(4,minmax(0,1fr)); align-items:center; gap:0; overflow:hidden; border:1px solid #e7dfe9; border-radius:13px; background:#fff; }
.customer-activity-current > span { align-self:stretch; display:grid; place-items:center; padding:10px 14px; color:#774383; background:#f4e9f6; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.customer-activity-current > div { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; padding:10px 13px; border-left:1px solid #eee8f0; }
.customer-activity-current small { color:var(--text-muted); font-size:10.5px; line-height:1.3; }.customer-activity-current b { color:#4c3e50; font-size:14px; }
.customer-activity-section { display:grid; gap:12px; width:100%; min-width:0; padding:16px; border:1px solid #e8e1ea; border-radius:15px; background:#fff; box-sizing:border-box; }
.customer-activity-quotas { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 18px; }
.customer-activity-quota { display:grid; gap:7px; min-width:0; }
.customer-activity-quota > div:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.customer-activity-quota span { color:#665b69; font-size:12px; }.customer-activity-quota b { color:#493d4c; font-size:11.5px; text-align:right; }
.customer-activity-progress { height:7px; overflow:hidden; border-radius:999px; background:#eee9f0; }
.customer-activity-progress i { display:block; height:100%; border-radius:inherit; background:#8f43a0; transition:width .25s ease; }
.customer-activity-quota.warning .customer-activity-progress i { background:#d99a25; }.customer-activity-quota.critical .customer-activity-progress i { background:#d6473f; }
.customer-activity-table-wrap { width:100%; max-width:100%; min-width:0; overflow:auto; border-radius:12px; }
.customer-activity-table { min-width:820px; }
.customer-activity-table th:not(:first-child),.customer-activity-table td:not(:first-child) { text-align:center; }
.customer-activity-channel { display:flex; align-items:center; gap:9px; min-width:180px; }
.customer-activity-channel > div { display:grid; gap:2px; min-width:0; }.customer-activity-channel b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.customer-activity-channel small { color:var(--text-muted); }
.customer-activity-health { display:inline-flex; padding:4px 8px; border-radius:999px; font-size:10.5px; font-weight:750; white-space:nowrap; }
.customer-activity-health.success { color:#15733f; background:#e8f7ee; }.customer-activity-health.warning { color:#986000; background:#fff3d7; }.customer-activity-health.danger { color:#ad332c; background:#fdeae8; }
.customer-activity-loading { min-height:260px; display:flex; align-items:center; justify-content:center; gap:10px; color:var(--text-muted); font-size:13px; }
.customer-activity-error { margin:20px 0; padding:14px; border:1px solid #efc7c3; border-radius:12px; color:#a12d27; background:#fff5f4; }
@media (max-width:800px) { .customer-activity-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }.customer-activity-quotas { grid-template-columns:1fr; } }
@media (max-width:620px) {
.modal-box.customer-activity-modal-box { width:calc(100vw - 20px); max-height:calc(100dvh - 20px); border-radius:14px; }
.customer-activity-modal { gap:13px; padding:16px; }.customer-activity-head { min-width:0; padding-right:46px; }.customer-activity-head h3 { font-size:20px!important; }.customer-activity-close { position:absolute; top:16px; right:16px; }
.customer-activity-summary { grid-template-columns:1fr; }.customer-activity-toolbar { align-items:stretch; flex-direction:column; }.customer-activity-ranges { align-self:stretch; }.customer-activity-ranges button { flex:1; padding-inline:7px; }
.customer-activity-kpis { gap:8px; }.customer-activity-kpis article { padding:12px; }.customer-activity-kpis strong { font-size:23px; }
.customer-activity-current { grid-template-columns:repeat(2,minmax(0,1fr)); }.customer-activity-current > span { grid-column:1/-1; min-height:28px; }.customer-activity-current > div { border-top:1px solid #eee8f0; }.customer-activity-current > div:nth-child(odd) { border-left:0; }
.customer-activity-section { padding:13px; }.customer-activity-section-title { align-items:flex-start; }
}
/* Google Sheet Knowledge sync and per-customer interval permissions. */
.modal-box.knowledge-sheet-modal-box { width:min(940px, calc(100vw - 40px)); max-width:940px; max-height:min(90vh, 860px); overflow-y:auto; }
.knowledge-sheet-modal-box .form-grid { grid-template-columns:minmax(0, 1.35fr) minmax(220px, .65fr); gap:14px 18px; }
.knowledge-sheet-modal-box .form-grid input:not([type="checkbox"]),
.knowledge-sheet-modal-box .form-grid select,
.knowledge-sheet-modal-box .sheet-sync-mapping-grid select { width:100%; min-width:0; box-sizing:border-box; }
.sheet-sync-permission-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:14px 0; }
.sheet-sync-permission-grid label { display:flex; gap:9px; align-items:center; padding:11px 12px; border:1px solid var(--border); border-radius:10px; background:#fff; }
.sheet-sync-service-note { margin:12px 0; padding:11px 12px; border-radius:10px; background:#f4f1ff; overflow-wrap:anywhere; }
.sheet-sync-service-note code { font-size:12px; }
.sheet-sync-mapping-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 16px; max-height:48vh; overflow:auto; padding:4px 6px 4px 2px; }
.sheet-sync-mapping-grid label { display:grid; gap:5px; }
.sheet-sync-mapping-grid span { font-size:12px; font-weight:700; color:var(--text-muted); }
.sheet-sync-preview-actions { justify-content:flex-start; margin-top:10px; }
@media (max-width:820px) { .sheet-sync-mapping-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) {
.modal-box.knowledge-sheet-modal-box { width:calc(100vw - 32px); max-height:calc(100dvh - 32px); }
.knowledge-sheet-modal-box .form-grid,.sheet-sync-permission-grid,.sheet-sync-mapping-grid { grid-template-columns:1fr; }
}
#page-page-post-prompts .section-body{display:grid;gap:16px}.page-post-common-prompt{display:grid;gap:8px;font-weight:700}.page-post-common-prompt textarea,.page-post-prompt-card textarea{width:100%;padding:12px 13px;border:1px solid var(--border);border-radius:12px;resize:vertical;line-height:1.5}.page-post-prompt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.page-post-prompt-card{display:grid;align-content:start;gap:8px;padding:15px;border:1px solid var(--border);border-radius:14px;background:#fff}.page-post-prompt-card>span{display:flex;align-items:center;gap:9px}.page-post-prompt-card i{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;color:var(--accent);background:var(--accent-soft);font-style:normal;font-size:12px}.page-post-prompt-card small{color:var(--text-muted);font-weight:400}.page-post-prompt-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}@media(max-width:800px){.page-post-prompt-grid{grid-template-columns:1fr}}
.page-post-prompt-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:4px}.page-post-prompt-heading b{font-size:16px}.page-post-prompt-heading span{color:var(--text-muted);font-size:13px}@media(max-width:700px){.page-post-prompt-heading{align-items:flex-start;flex-direction:column;gap:4px}}
.page-feature-settings-section .section-body{display:grid;gap:16px}.page-feature-card{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px;border:1px solid var(--border);border-radius:14px;background:#fff}.page-feature-copy{display:grid;gap:5px}.page-feature-copy b{font-size:15px}.page-feature-copy span{color:var(--text-muted);font-size:13px;line-height:1.5}.page-feature-card .toggle{flex:0 0 42px}@media(max-width:600px){.page-feature-card{align-items:flex-start}.page-feature-card .toggle{margin-top:2px}}
.inline-field-action{display:flex;align-items:stretch;gap:8px}.inline-field-action input{min-width:0;flex:1}.inline-field-action .btn{flex:0 0 auto;white-space:nowrap}@media(max-width:620px){.inline-field-action{align-items:stretch;flex-direction:column}.inline-field-action .btn{width:100%}}
/* Conversation master-detail follows the same tablet breakpoint as the
navigation drawer, so 481-768px no longer keeps two squeezed panels. */
@media (max-width:768px) {
#app-screen .main:has(#page-conversations.active) { overflow:hidden; padding-bottom:0; }
#page-conversations.active .content-split { flex:1 1 0; min-height:0; height:auto; margin:0 -16px; gap:0; overflow:hidden; position:relative; border-radius:0; }
#page-conversations.active .conv-panel { display:flex; width:100%; border-right:0; }
#page-conversations.active .chat-panel { display:none; min-height:0; height:100%; border-radius:0; }
#page-conversations.active .content-split.mobile-chat-active .conv-panel { display:none; }
#page-conversations.active .content-split.mobile-chat-active .chat-panel { display:flex; }
#page-conversations.active .chat-messages { min-height:0; overscroll-behavior:contain; }
#page-conversations.active .chat-reply-bar { position:relative; z-index:4; flex:0 0 auto; padding:8px 10px max(8px,env(safe-area-inset-bottom)); box-shadow:0 -2px 8px rgba(0,0,0,.06); }
#page-conversations.active .chat-back-btn { display:flex; min-width:40px; min-height:40px; width:40px; height:40px; }
#page-conversations.active .chat-header { gap:10px; flex-wrap:nowrap; }
#page-conversations.active .chat-header-main { flex:1 1 auto; min-width:0; }
#page-conversations.active .chat-header-summary { display:none; }
}
@media (max-width:480px) {
#page-conversations.active .content-split { margin:0 -10px; }
}
.account-page-post-usage{margin-top:14px;padding:13px 16px;border:1px solid #eee9f0;border-radius:14px;background:#fcfbfd}
.account-page-post-usage h4{margin:0 0 7px;color:#504852;font-size:13px;font-weight:700}
.account-page-post-row{display:grid;grid-template-columns:minmax(160px,1fr) minmax(180px,auto);gap:6px 18px;align-items:center;padding:10px 2px;border-top:1px solid #eee9f0;background:transparent}
.account-page-post-head{display:flex;align-items:center;gap:8px;min-width:0}.account-page-post-head b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#38313a;font-size:13px;font-weight:650}.account-page-post-value{display:flex;align-items:baseline;justify-content:flex-end;gap:7px}.account-page-post-value>span{color:#8b838e;font-size:11.5px}.account-page-post-value strong{color:#625a66;font-size:13px}.account-page-post-value em{color:#b0a9b2;font-style:normal;font-weight:400}.account-page-post-state{display:inline-flex;align-items:center;min-height:20px;padding:2px 7px;border-radius:999px;color:#956915;background:#fff6df;font-size:9.5px;font-weight:750;white-space:nowrap}.account-page-post-progress{grid-column:1/-1;height:4px;overflow:hidden;border-radius:999px;background:#eeeaf0}.account-page-post-progress>span{display:block;height:100%;border-radius:inherit;background:#a66ab4;transition:width .25s ease}.account-page-post-row.is-warning{background:#fffdfa}.account-page-post-row.is-warning .account-page-post-progress>span{background:#d69a36}.account-page-post-row.is-limit{margin:0 -6px;padding-right:8px;padding-left:8px;border-color:#f0d8da;border-radius:7px;background:#fffafa}.account-page-post-row.is-limit .account-page-post-state{color:#a8474c;background:#fdebed}.account-page-post-row.is-limit .account-page-post-value strong{color:#a8474c}.account-page-post-row.is-limit .account-page-post-progress{background:#f3e3e4}.account-page-post-row.is-limit .account-page-post-progress>span{background:#c96369}.account-page-post-row.is-unmetered .account-page-post-progress{background:repeating-linear-gradient(135deg,#ece8ee 0 8px,#f7f5f8 8px 16px)}
@media(max-width:700px){.account-page-post-row{grid-template-columns:1fr;gap:6px}.account-page-post-value{justify-content:space-between}.account-page-post-progress{grid-column:1}.account-page-post-head{justify-content:space-between}}