: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.jpg');
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 a { color: var(--accent); font-weight: 500; text-decoration: none; }
.login-forgot-note a:hover { text-decoration: underline; }
.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;
}
@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.jpg');
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; }
.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-user .avatar {
width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
}
.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; }
.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; }
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);
}
.nontext-choice { width:min(100%,460px); }
.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; }
.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; margin:0 0 12px; }
.knowledge-tools .knowledge-note { color:var(--text-muted); font-size:12px; margin-left:auto; }
.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 a { color:#991b1b; font-weight:700; text-decoration:underline; }
.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; }
#tab-product .knowledge-section .group-label {
display:inline-flex; align-items:center; margin:18px 0 10px; padding:6px 11px;
border-radius:999px; background:#e9edff; color:#4f46d8; font-size:12px; letter-spacing:.02em;
}
#tab-product .knowledge-section .group-label:first-child { margin-top:0; }
#tab-product .knowledge-section .list-cards { margin-bottom:8px; }
.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-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 { min-width:0; font-weight:700; font-size:13px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.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(--text-muted); font-weight: 700; }
.tag-human { background: var(--danger-soft); color: var(--danger); }
.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; }
.chat-header { padding:10px 18px; border-bottom:1px solid var(--border); display:flex; gap:12px; align-items:stretch; background:#fff; }
.chat-header-main { flex:0 1 25%; min-width:180px; align-self:center; display:flex; align-items:center; gap:10px; }
.chat-header-identity { min-width:0; }
.chat-header-avatar { width:48px; height:48px; flex-basis:48px; }
.chat-header-name { font-weight: 700; font-size: 16px; color: #050505; }
.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; gap: 10px; align-items: flex-end; 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; }
.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; }
.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-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:10px; min-width:0; }
.table-avatar { width:40px; height:40px; flex-basis:40px; }
/* ---- 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; margin-bottom: 10px; max-width: none; }
.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 { 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:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.summary-page-card { 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-radius:999px; background:#1877f2; color:#fff; font-size:12px; font-weight:750; }
.summary-page-name span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.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-more { border:0; background:transparent; color:var(--accent); font-weight:700; cursor:pointer; padding:5px 0; }
.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-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@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-grid { 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-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; gap:7px; min-height:180px; overflow-x:auto; padding-top:18px; }
.ai-usage-day { min-width:34px; flex:1 0 34px; 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; }
.ai-usage-note { color:var(--text-muted); font-size:11.5px; line-height:1.6; }
.ai-usage-table-wrap { overflow:auto; }
@media (max-width:700px) { .ai-usage-toolbar > * { flex:1 1 150px; } .ai-usage-toolbar select,.ai-usage-toolbar button { width:100%; } }
.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,
#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, #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; }
#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:16%; }
#table-users th:nth-child(3) { width:11%; }
#table-users th:nth-child(4) { width:15%; }
#table-users th:nth-child(5) { width:18%; }
#table-users th:nth-child(6) { width:9%; }
#table-users th:nth-child(7) { width:11%; }
#table-users th:nth-child(8) { width:8%; }
#table-users .assign-btn, #table-users select { width:100%; max-width:100%; min-width:0; }
#table-users .btn-ghost, #table-users .btn-danger-ghost { white-space:normal; }
#table-users th:last-child, #table-users td:last-child { text-align:center; padding-left:6px; padding-right:6px; }
#table-pages { width:100%; table-layout:fixed; }
#table-pages th, #table-pages td { overflow:hidden; }
#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-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-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 { width:100%; height:100%; }
#table-pages .page-list-avatar img { display:block; object-fit:cover; }
#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-table-manage th:nth-child(1) { width:15%; }
#table-pages.page-table-manage th:nth-child(2) { width:12%; }
#table-pages.page-table-manage th:nth-child(3) { width:8%; }
#table-pages.page-table-manage th:nth-child(4) { width:8%; }
#table-pages.page-table-manage th:nth-child(5) { width:10%; }
#table-pages.page-table-manage th:nth-child(6) { width:8%; }
#table-pages.page-table-manage th:nth-child(7) { width:10%; }
#table-pages.page-table-manage th:nth-child(8) { width:10%; }
#table-pages.page-table-manage th:nth-child(9) { width:11%; }
#table-pages.page-table-manage th:nth-child(10) { width:8%; }
#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 { display:flex; align-items:flex-start; gap:8px; min-width:0; }
.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; }
.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:14%; }
.customer-table-wrap .cust-table th:nth-child(2) { width:15%; }
.customer-table-wrap .cust-table th:nth-child(3) { width:13%; }
.customer-table-wrap .cust-table th:nth-child(4) { width:27%; }
.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 .cust-table td { padding:12px 14px; vertical-align:top; }
.cust-search { flex:1 1 260px; min-width:220px; height:36px; padding:0 12px; border:1px solid var(--border); border-radius:999px; font:inherit; font-size:12.5px; background:#fff; }
.cust-search:focus { outline:2px solid var(--accent-soft); border-color:var(--accent); }
.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:6px; 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:4px; 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:'Nền tảng'; }
#table-pages.page-table-manage td:nth-child(3)::before { content:'Liên kết'; }
#table-pages.page-table-manage td:nth-child(4)::before { content:'FB Access Token'; }
#table-pages.page-table-manage td:nth-child(5)::before { content:'Facebook / Zalo ID'; }
#table-pages.page-table-manage td:nth-child(6)::before { content:'Trạng thái'; }
#table-pages.page-table-manage td:nth-child(7)::before { content:'Knowledge'; }
#table-pages.page-table-manage td:nth-child(8)::before { content:'AIRules'; }
#table-pages.page-table-manage td:nth-child(9)::before { content:'AI tư vấn'; }
#table-pages.page-table-manage td:nth-child(10)::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:'Gmail'; }
#table-users td:nth-child(5)::before { content:'Gán kênh'; }
#table-users td:nth-child(6)::before { content:'Mật khẩu'; }
#table-users td:nth-child(7)::before { content:'Hạn mức'; }
#table-users td:nth-child(8)::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: 160px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.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 { display: inline-flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 13px; color: var(--text); cursor: pointer; max-width: 260px; }
.assign-btn:disabled { cursor: default; opacity: .6; }
/* 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 { color: var(--text-muted); font-size: 11px; }
.assign-btn-label { 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-y: auto; 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 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; }
.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; }
.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-risk-ack { display:flex; align-items:flex-start; gap:9px; margin:14px 0; font-size:12.5px; line-height:1.45; cursor:pointer; }
.zalo-risk-ack input { flex:0 0 auto; margin-top:2px; }
.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 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 { justify-content: space-between; }
.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; }
.btn-logout { padding:7px 10px; font-size:11.5px; }
}
/* ===================== 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 */
.btn-logout { padding: 8px 10px; font-size: 11.5px; }
.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; }
.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,
#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 { background:linear-gradient(180deg,#fff 0%,#fdfbfe 100%); }
.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; height:44px; font-size:16px; }
.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');
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 #e1e1ea; border-radius:18px; background:rgba(255,255,255,.92);
box-shadow:0 4px 14px rgba(46,39,72,.045);
transition:border-color .18s ease-out,box-shadow .18s ease-out,background-color .18s ease-out;
will-change:auto;
}
.connection-platform-card.is-ready { border-color:#d9c8e2; }
.connection-platform-card.is-ready:hover {
border-color:#b98acb; box-shadow:0 10px 24px rgba(91,37,116,.12);
}
.connection-platform-card.is-coming { background:linear-gradient(145deg,#fff,#fafafd); }
.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 7px 16px rgba(39,31,54,.14);
}
.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");
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 { color:#4d34b8; background:#eee9ff; }
.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 {
position:relative; overflow:hidden; border-color:#783394; color:#fff; cursor:pointer;
background:var(--accent-gradient); box-shadow:0 5px 13px rgba(113,50,143,.18),inset 0 1px 0 rgba(255,255,255,.18);
}
.is-ready .connection-platform-button:hover {
border-color:#672681; background:linear-gradient(135deg,#672681,#51206f);
box-shadow:0 7px 16px rgba(82,31,108,.22),inset 0 1px 0 rgba(255,255,255,.16);
}
.is-ready .connection-platform-button:active {
background:linear-gradient(135deg,#5d2475,#491d63); box-shadow:0 3px 9px rgba(82,31,108,.18);
}
.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;
}
@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-catalog {
border-color:#e4dfeb;
background:
radial-gradient(520px 190px at 3% 0%,rgba(93,78,213,.105),transparent 72%),
radial-gradient(480px 190px at 97% 100%,rgba(144,54,190,.075),transparent 72%),
linear-gradient(180deg,#fff 0%,#fefcff 100%);
box-shadow:0 14px 38px rgba(46,31,80,.085);
}
.connection-heading-icon {
box-shadow:0 10px 24px rgba(93,69,210,.32),inset 0 1px 0 rgba(255,255,255,.24);
}
.connection-catalog-heading h2 { letter-spacing:-.025em; }
.connection-platform-card {
overflow:hidden;
border-color:#e4e0e9;
background:linear-gradient(155deg,rgba(255,255,255,.98),rgba(252,250,254,.96));
box-shadow:0 7px 20px rgba(48,35,73,.055),inset 0 1px 0 rgba(255,255,255,.8);
}
.connection-platform-card::before {
content:"";
position:absolute;
inset:0 0 auto;
height:3px;
opacity:0;
background:linear-gradient(90deg,#5f5ce8,#8d39bb);
transition:opacity .18s ease-out;
}
.connection-platform-card.is-ready {
border-color:#d8c9e2;
background:
radial-gradient(180px 110px at 100% 0%,rgba(133,65,181,.08),transparent 75%),
linear-gradient(155deg,#fff,#fdfaff);
box-shadow:0 8px 23px rgba(75,43,104,.08),inset 0 1px 0 #fff;
}
.connection-platform-card.is-ready::before { opacity:1; }
.connection-platform-card.is-ready:hover {
border-color:#bd9dce;
background:
radial-gradient(190px 120px at 100% 0%,rgba(133,65,181,.12),transparent 75%),
linear-gradient(155deg,#fff,#fcf8ff);
box-shadow:0 13px 28px rgba(75,43,104,.13),inset 0 1px 0 #fff;
}
.connection-platform-card.is-coming {
border-color:#e6e3ea;
background:linear-gradient(155deg,#fff,#faf9fc);
box-shadow:0 5px 16px rgba(48,35,73,.04);
}
.connection-platform-card.is-coming::after {
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(135deg,rgba(255,255,255,0),rgba(246,244,249,.16));
}
.connection-platform-logo {
outline:3px solid rgba(255,255,255,.92);
box-shadow:0 8px 18px rgba(39,31,54,.16);
}
.connection-platform-status {
border:1px solid rgba(107,98,126,.055);
box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}
.connection-platform-status.is-ready {
color:#5532b9;
background:linear-gradient(135deg,#f0ebff,#ebe4ff);
border-color:#e6ddff;
}
.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:linear-gradient(180deg,#faf9fb,#f4f1f6);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.is-ready .connection-platform-button {
border-color:#783394;
background:linear-gradient(135deg,#823aa2,#6d2b8c);
box-shadow:0 7px 17px rgba(103,42,132,.22),inset 0 1px 0 rgba(255,255,255,.2);
}
.is-ready .connection-platform-button:hover {
border-color:#682681;
background:linear-gradient(135deg,#763193,#5e227b);
box-shadow:0 9px 20px rgba(83,31,109,.25),inset 0 1px 0 rgba(255,255,255,.18);
}
/* ===================== 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:34%; }
#table-disconnected-pages th:nth-child(2) { width:28%; }
#table-disconnected-pages th:nth-child(3) { width:20%; }
#table-disconnected-pages th:nth-child(4) { width:18%; }
#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 { width:100%; height:100%; }
#table-disconnected-pages .page-list-avatar img { display:block; object-fit:cover; }
#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; }
.reconnect-integration-btn { min-width:112px; }
@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: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:none; }
.app-language-switcher { gap:2px; }
.app-language-switcher button { width:28px; min-width:28px; height:30px; padding:0; font-size:10px; }
.topbar-right > .btn-logout {
display:inline-grid; place-items:center; width:38px; min-width:38px; height:38px; min-height:38px;
padding:0; overflow:hidden; white-space:nowrap; font-size:0;
}
.topbar-right > .btn-logout:first-of-type::before { content:"\1F511"; font-size:17px; line-height:1; }
.topbar-right > .btn-logout:last-of-type::before { content:"\21AA"; font-size:21px; line-height:1; }
.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; }
#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 #sort-waiting-toggle,
#page-report #sort-needhelp-toggle { flex:1 1 calc(50% - 4px); min-height:40px; justify-content:center; }
}
/* =====================================================================
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 .app { padding:6px; }
#app-screen .main { padding:16px 10px 50px; }
}
/* Portal navigation restructuring: channel context and settings tabs */
#app-screen .config-channel-context {
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);
}
#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');
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-channel-select-wrap .config-channel-sprite {
position:absolute;
z-index:1;
left:8px;
top:50%;
pointer-events:none;
transform:translateY(-50%) scale(.67);
transform-origin:left center;
}
#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 {
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 #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 { max-width:820px; }
#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;
}
@media (max-width:700px) {
#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 { grid-template-columns:1fr; }
}
/* 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-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');
background-position:center;
background-size:cover;
}
#app-screen .summary-page-name {
gap:5px;
min-height:38px;
padding:8px 15px 8px 10px;
box-sizing:border-box;
background:var(--accent-gradient);
box-shadow:0 7px 17px rgba(124,49,149,.18);
font-size:12.5px;
}
#app-screen .summary-page-name .channel-badge-sprite {
outline:1px solid rgba(255,255,255,.72);
transform:scale(2);
margin:0 7px;
}
#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 {
width:100%; min-height:44px; padding:9px 42px 9px 45px; border:1px solid rgba(137,61,156,.28);
border-radius:13px; background:rgba(255,255,255,.9); color:#4c3151; font:700 14px inherit;
text-align:left; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#app-screen .config-sheet-switch-button::after {
content:"⌄"; position:absolute; right:14px; top:50%; transform:translateY(-56%); color:#4c3151; font-size:18px;
}
#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:120; 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; }