:root{--ink:#102033;--muted:#607286;--line:#d8e2ec;--blue:#1769e0;--teal:#15a4a0;--soft:#f4f7fb;--danger:#c24135}*{box-sizing:border-box}body{margin:0;background:#edf3f8;color:var(--ink);font-family:Inter,"PingFang SC","Microsoft YaHei",Arial,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.eyebrow{margin:0 0 8px;color:var(--blue);font-size:12px;font-weight:900;text-transform:uppercase}.auth-panel{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{width:min(520px,100%);padding:32px;border:1px solid var(--line);border-radius:10px;background:white;box-shadow:0 20px 50px rgba(16,32,51,.1)}h1{margin:0;font-size:34px;line-height:1.1}.auth-card p{color:var(--muted);line-height:1.7}.auth-card form,.panel form{display:grid;gap:12px}input,select,textarea{width:100%;border:1px solid #cbd8e6;border-radius:8px;padding:12px;background:white}textarea{min-height:120px;line-height:1.6}.auth-actions,.top{display:flex;gap:10px;align-items:center;justify-content:space-between}.primary,.secondary{min-height:42px;padding:0 16px;border-radius:8px;font-weight:900}.primary{border:0;background:var(--blue);color:white}.secondary{border:1px solid var(--line);background:white;color:var(--ink)}.dashboard{display:grid;grid-template-columns:250px 1fr;min-height:100vh}.side{position:sticky;top:0;height:100vh;padding:22px 18px;background:#0f2135;color:white}.brand{display:flex;gap:10px;align-items:center;color:white;text-decoration:none;margin-bottom:30px}.brand span{display:grid;width:38px;height:38px;place-items:center;border-radius:8px;background:var(--blue);font-weight:900}.side nav{display:grid;gap:8px}.side nav a{padding:12px;border-radius:8px;color:#c7d3df;text-decoration:none;font-weight:800}.side nav a:hover{background:rgba(255,255,255,.1);color:white}.logout{position:absolute;bottom:20px;left:18px;right:18px}.main{padding:28px}.top{margin-bottom:20px}.top span,.status-pill{color:var(--muted)}.status-pill{padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:white}.grid{display:grid;gap:14px}.stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:16px}.stats article,.panel{border:1px solid var(--line);border-radius:10px;background:white;box-shadow:0 10px 26px rgba(16,32,51,.04)}.stats article{padding:18px}.stats span{display:block;color:var(--muted);font-size:13px}.stats strong{display:block;margin-top:8px;font-size:30px}.panel{padding:20px;margin-bottom:16px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.panel-head h2{margin:0;font-size:21px}.panel-head span{color:var(--muted);font-size:13px}.inline-form{grid-template-columns:180px 1fr 1fr auto}.table,.cards,.logs{display:grid;gap:10px;margin-top:14px}.row,.card,.logs li{display:grid;gap:4px;padding:12px;border:1px solid var(--line);border-radius:8px;background:#fbfdff}.row{grid-template-columns:1fr 1fr 1fr}.row span,.card span,.logs span{color:var(--muted);font-size:13px}.message-layout{display:grid;grid-template-columns:320px 1fr;gap:14px}.list{display:grid;gap:10px;align-content:start}.msg-item{display:grid;gap:5px;padding:12px;border:1px solid var(--line);border-radius:8px;background:#fbfdff;text-align:left}.msg-item.active{border-color:#9fc0f3;background:#eef6ff}.msg-item em{color:var(--teal);font-style:normal;font-weight:900}.detail{min-height:320px;padding:18px;border:1px solid var(--line);border-radius:8px;background:#f7fafc}.reply{white-space:pre-wrap;padding:14px;border-radius:8px;background:white;border:1px solid var(--line);line-height:1.65}.actions{display:flex;gap:10px;margin-top:14px}.wechat-box{display:grid;grid-template-columns:280px 1fr;gap:20px;align-items:center}.qr-placeholder{display:grid;min-height:280px;place-items:center;border:1px dashed #b5c7da;border-radius:10px;background:#f7fafc;color:var(--muted);text-align:center}.qr-placeholder svg{width:240px;height:240px}.logs{padding:0;list-style:none}.toast{position:fixed;right:24px;bottom:24px;padding:13px 18px;border-radius:8px;background:#14304d;color:white;opacity:0;transform:translateY(10px);transition:.18s}.toast.show{opacity:1;transform:translateY(0)}@media(max-width:980px){.dashboard{grid-template-columns:1fr}.side{position:static;height:auto}.logout{position:static;margin-top:20px}.stats,.inline-form,.message-layout,.wechat-box{grid-template-columns:1fr}.top,.panel-head{align-items:flex-start;flex-direction:column}}

.side nav a.active {
  color: white;
  background: rgba(255,255,255,.13);
}
body[data-page="platforms"] .stats,
body[data-page="knowledge"] .stats,
body[data-page="messages"] .stats,
body[data-page="email"] .stats,
body[data-page="widget"] .stats,
body[data-page="wechat"] .stats,
body[data-page="logs"] .stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.page-section.page-hidden {
  display: none;
}
body[data-page="dashboard"] .page-section {
  display: block;
}
body:not([data-page="dashboard"]) .stats.page-hidden {
  display: none;
}
.subpage-intro {
  margin-bottom: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  color: var(--muted);
}

.roadmap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.roadmap-card { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fbfdff; }
.roadmap-card strong { display: block; margin-bottom: 6px; }
.roadmap-card span { display: inline-flex; margin-bottom: 8px; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 900; }
.roadmap-card.live span { color: #075f44; background: #dff8ec; }
.roadmap-card.not-live span { color: #8a341f; background: #fff0df; }
.roadmap-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.empty-state { padding: 24px; border: 1px dashed #b7c8da; border-radius: 10px; background: #f8fbfe; color: var(--muted); line-height: 1.7; }
.empty-state strong { display: block; color: var(--ink); font-size: 18px; margin-bottom: 6px; }
.not-live-banner { margin-bottom: 14px; padding: 14px 16px; border: 1px solid #ffc27d; border-radius: 8px; background: #fff6ea; color: #71370f; font-weight: 800; }
@media(max-width:980px){.roadmap-grid{grid-template-columns:1fr}}

.ai-route-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ai-provider-card, .route-card, .attempts { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fbfdff; }
.ai-provider-card span { display: inline-flex; margin-bottom: 8px; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 900; }
.ai-provider-card.live span { color: #075f44; background: #dff8ec; }
.ai-provider-card.not-live span { color: #8a1f1f; background: #ffe4e1; }
.ai-provider-card strong, .route-card strong { display: block; margin-bottom: 6px; }
.ai-provider-card p, .route-card p { margin: 0 0 6px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.ai-provider-card em { color: var(--muted); font-size: 12px; font-style: normal; line-height: 1.45; }
.route-card { grid-column: span 1; border-color: #b9d1ef; background: #f4f9ff; }
.message-form { margin-bottom: 14px; grid-template-columns: 150px 1fr 1fr 150px 130px; }
.message-form textarea { grid-column: 1 / -2; min-height: 86px; }
.message-form button { min-height: 86px; }
.attempts { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.55; background: #f3f7fb; }
.attempts strong { color: var(--ink); }
@media(max-width:1180px){.ai-route-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.message-form{grid-template-columns:1fr 1fr}.message-form textarea,.message-form button{grid-column:1 / -1;min-height:76px}}
@media(max-width:720px){.ai-route-grid,.message-form{grid-template-columns:1fr}}

.ai-controls { display: grid; grid-template-columns: minmax(150px, 180px) minmax(220px, 280px); gap: 10px; margin-top: 12px; }
@media(max-width:720px){.ai-controls{grid-template-columns:1fr}}

.shopify-connect { display: grid; grid-template-columns: 1fr minmax(320px, 440px); gap: 14px; align-items: start; padding: 16px; margin-bottom: 14px; border: 1px solid #b9d1ef; border-radius: 8px; background: #f4f9ff; }
.shopify-connect strong { display: block; margin-bottom: 6px; }
.shopify-connect p { margin: 0 0 8px; color: var(--muted); line-height: 1.5; }
.shopify-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.code-line { word-break: break-all; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; color: #31506f; }
@media(max-width:980px){.shopify-connect,.shopify-form{grid-template-columns:1fr}}
.shopify-help { margin-top: 8px; font-size: 13px; color: #607286; }
.shopify-help span { display: inline-block; padding: 3px 7px; border: 1px solid #d8e7f6; border-radius: 6px; background: #eef6ff; color: #6e879f; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.shopify-form input::placeholder { color: #9db2c6; opacity: 1; }

.inbox-controls { display: grid; gap: 12px; margin: 0 0 14px; }
.inbox-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.inbox-tabs button { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); font-weight: 900; }
.inbox-tabs button.active { border-color: #1769e0; background: #eaf3ff; color: #1769e0; }
.inbox-filter-row { display: grid; grid-template-columns: 1fr 180px 150px; gap: 10px; }
.msg-item small { color: var(--muted); font-size: 12px; }
.msg-item .risk-high { color: #a32121; }
.msg-item .risk-medium { color: #9a5a00; }
.msg-item .risk-normal { color: #08715b; }
.conversation-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.conversation-head h3 { margin: 0 0 8px; }
.conversation-head p { margin: 0; color: var(--muted); line-height: 1.6; }
.conversation-head > span { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; background: #eef6ff; color: #1769e0; font-size: 12px; font-weight: 900; }
.context-policy { display: grid; gap: 5px; margin-bottom: 12px; padding: 12px; border: 1px solid #d8e7f6; border-radius: 8px; background: #f4f9ff; }
.context-policy span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.buyer-message { margin-bottom: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; line-height: 1.65; }
.related-context { display: grid; gap: 6px; margin-bottom: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfdff; }
.related-context p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
@media(max-width:980px){.inbox-filter-row{grid-template-columns:1fr}.conversation-head{display:grid}}

.widget-install { display: grid; gap: 12px; }
.widget-install p { margin: 6px 0 0; color: var(--muted); line-height: 1.55; }
.widget-install code { display: block; padding: 14px; border-radius: 8px; background: #102033; color: #eaf3ff; white-space: pre-wrap; word-break: break-all; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; }
.widget-demo-link { display: inline-flex; align-items: center; justify-content: center; width: fit-content; text-decoration: none; }

.tiktok-connect, .whatsapp-connect { display: grid; grid-template-columns: 1fr minmax(320px, 440px); gap: 14px; align-items: start; padding: 16px; margin-bottom: 14px; border: 1px solid #f2c996; border-radius: 8px; background: #fff8ed; }
.tiktok-connect strong, .whatsapp-connect strong { display: block; margin-bottom: 6px; }
.tiktok-connect p, .whatsapp-connect p { margin: 0 0 8px; color: var(--muted); line-height: 1.5; }
.tiktok-steps { display: grid; gap: 10px; }
.tiktok-steps ol { margin: 0; padding-left: 20px; color: #5d4c36; line-height: 1.55; }
.approval-badge { display: inline-flex; width: fit-content; padding: 4px 8px; border-radius: 999px; background: #ffe8c7; color: #8a4b12; font-size: 12px; font-weight: 900; }
.doc-links { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-links a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid #f0c98f; border-radius: 8px; background: #fff; color: #8a4b12; text-decoration: none; font-size: 12px; font-weight: 900; }
@media(max-width:980px){.tiktok-connect,.whatsapp-connect{grid-template-columns:1fr}}
.email-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.email-card { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fbfdff; }
.email-card span { display: inline-flex; width: fit-content; margin-bottom: 8px; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 900; }
.email-card.live span { color: #075f44; background: #dff8ec; }
.email-card.not-live span { color: #8a341f; background: #fff0df; }
.email-card strong { display: block; margin-bottom: 6px; }
.email-card p, .email-card em { display: block; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; word-break: break-all; font-style: normal; }
.email-form { grid-template-columns: 150px 1fr 1fr 110px; align-items: center; margin-bottom: 14px; }
.email-form .check-line { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.email-form .check-line input { width: auto; }
.email-form button { grid-column: auto; }
.email-account { grid-template-columns: 1fr 1fr 1fr auto auto; align-items: center; }
@media(max-width:1180px){.email-grid{grid-template-columns:1fr}.email-form,.email-account{grid-template-columns:1fr}.email-form button{grid-column:1}}
.guide-link { text-decoration: none; white-space: nowrap; }
.knowledge-workflow, .message-workflow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.message-workflow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.knowledge-workflow article, .message-workflow article { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfdff; }
.knowledge-workflow strong, .message-workflow strong { display: block; margin-bottom: 5px; }
.knowledge-workflow span, .message-workflow span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.knowledge-upload { grid-template-columns: 1fr 1fr auto; align-items: center; margin-bottom: 12px; padding: 14px; border: 1px solid #b9d1ef; border-radius: 8px; background: #f4f9ff; }
.format-note { margin: 8px 0 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.knowledge-card em { display: block; margin: 4px 0 6px; color: var(--muted); font-size: 12px; font-style: normal; }
.guide-page { background: #edf3f8; }
.guide-shell { width: min(900px, calc(100% - 32px)); margin: 0 auto; padding: 36px 0 60px; }
.guide-back { display: inline-flex; align-items: center; margin-bottom: 20px; text-decoration: none; }
.guide-shell h1 { margin-bottom: 22px; }
.guide-block { margin-bottom: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.guide-block h2 { margin: 0 0 8px; font-size: 18px; }
.guide-block p { margin: 0; color: var(--muted); line-height: 1.75; }
@media(max-width:1180px){.knowledge-workflow,.message-workflow,.knowledge-upload{grid-template-columns:1fr}}
.widget-workflow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.widget-workflow article { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfdff; }
.widget-workflow strong { display: block; margin-bottom: 5px; }
.widget-workflow span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.widget-config { display: grid; grid-template-columns: 1fr 1fr 170px 72px; gap: 10px; align-items: center; padding: 14px; border: 1px solid #b9d1ef; border-radius: 8px; background: #f4f9ff; }
.widget-config input[name="greeting"] { grid-column: span 3; }
.widget-config input[type="color"] { height: 44px; padding: 4px; }
.widget-code { width: 100%; min-height: 116px; margin: 12px 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; color: #eaf3ff; background: #102033; border-color: #102033; }
.widget-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
@media(max-width:1180px){.widget-workflow,.widget-config{grid-template-columns:1fr}.widget-config input[name="greeting"]{grid-column:auto}}

.dashboard, .main, .panel, .message-layout, .list, .detail { min-width: 0; }
.main { overflow-x: hidden; }
.message-layout { grid-template-columns: minmax(280px, 330px) minmax(0, 1fr); align-items: start; max-width: 100%; }
.list { max-height: calc(100vh - 260px); overflow: auto; padding-right: 2px; }
.detail { max-width: 100%; overflow: hidden; }
.msg-item { position: relative; padding: 0; overflow: hidden; }
.msg-open { display: grid; width: 100%; gap: 5px; padding: 12px 12px 8px; border: 0; background: transparent; color: inherit; text-align: left; }
.msg-open strong, .msg-open span, .msg-open small { min-width: 0; overflow-wrap: anywhere; }
.msg-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 10px 12px; border-top: 1px solid #e4edf6; }
.msg-card-footer label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.msg-card-footer input { width: auto; }
.msg-delete, .danger-action { border-color: #f1c4bd; color: var(--danger); background: #fff8f6; }
.msg-delete { min-height: 30px; padding: 0 10px; border: 1px solid #f1c4bd; border-radius: 7px; font-size: 12px; font-weight: 900; }
.bulk-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.bulk-actions span, .select-visible { color: var(--muted); font-size: 13px; }
.select-visible { display: inline-flex; align-items: center; gap: 7px; }
.select-visible input { width: auto; }
.bulk-actions button:disabled { opacity: .45; cursor: not-allowed; }
.conversation-head > div { min-width: 0; }
.conversation-head h3, .conversation-head p, .context-policy span, .buyer-message, .reply, .related-context p, .attempts { overflow-wrap: anywhere; word-break: break-word; }
.buyer-message, .reply { max-height: 260px; overflow: auto; }
@media(max-width:980px){.message-layout{grid-template-columns:1fr}.list{max-height:none}.bulk-actions{justify-content:flex-start}}
/* Inbox layout and deletion polish - 2026-08-02 */
.dashboard { grid-template-columns: 250px minmax(0, 1fr); width: 100%; max-width: 100vw; overflow-x: hidden; }
.main { max-width: calc(100vw - 250px); overflow-x: hidden; }
.panel { max-width: 100%; overflow: hidden; }
.message-form { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: start; }
.message-form textarea { grid-column: 1 / -1; min-height: 72px; max-height: 132px; resize: vertical; }
.message-form button { justify-self: end; }
.message-layout { grid-template-columns: minmax(260px, 310px) minmax(0, 1fr); }
.detail { width: 100%; max-width: 100%; }
@media(max-width:980px){.main{max-width:100vw}.message-form{grid-template-columns:1fr}.message-form button{justify-self:stretch}}

/* Inbox compact polish - 2026-08-03 */
body { overflow-x: hidden; }
.dashboard { display: block; min-height: 100vh; width: 100%; max-width: 100%; overflow: visible; }
.side { position: fixed; inset: 0 auto 0 0; width: 250px; height: 100vh; z-index: 30; overflow-y: auto; display: flex; flex-direction: column; padding: 18px 16px; }
.side .brand { margin-bottom: 22px; }
.side nav { gap: 6px; }
.side nav a { padding: 10px 11px; }
.logout { position: static; left: auto; right: auto; bottom: auto; margin-top: auto; width: 100%; }
.main { margin-left: 250px; width: calc(100% - 250px); max-width: none; min-height: 100vh; padding: 20px 24px; overflow-x: hidden; }
.top { margin-bottom: 14px; }
.top h1 { font-size: 30px; }
.status-pill { padding: 7px 10px; font-size: 13px; }
body[data-page="messages"] .main { padding-top: 18px; }
body[data-page="messages"] #messages.panel { padding: 16px; margin-bottom: 0; }
body[data-page="messages"] #messages .panel-head { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 8px 14px; align-items: baseline; margin-bottom: 10px; }
body[data-page="messages"] #messages .panel-head h2 { font-size: 20px; }
body[data-page="messages"] #messages .panel-head span { line-height: 1.45; }
body[data-page="messages"] .message-workflow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
body[data-page="messages"] .message-workflow article { padding: 9px 10px; }
body[data-page="messages"] .message-workflow strong { margin-bottom: 3px; font-size: 14px; }
body[data-page="messages"] .message-workflow span { font-size: 12px; line-height: 1.35; }
.message-form { grid-template-columns: 138px minmax(160px, 1fr) 118px 132px 108px; gap: 8px; align-items: start; margin-bottom: 10px; padding: 10px; border: 1px solid #d8e7f6; border-radius: 8px; background: #f7fbff; }
.message-form select, .message-form input { min-height: 38px; padding: 8px 10px; }
.message-form textarea { grid-column: 1 / -1; min-height: 58px; max-height: 98px; padding: 10px 12px; resize: vertical; }
.message-form-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; min-height: 38px; }
.message-form-actions .guide-link { grid-column: 2; justify-self: center; min-height: 34px; padding: 0 14px; display: inline-flex; align-items: center; }
.message-form-actions .primary { grid-column: 3; justify-self: end; min-height: 36px; padding: 0 16px; }
.inbox-controls { gap: 8px; margin-bottom: 10px; }
.inbox-tabs { gap: 6px; }
.inbox-tabs button { min-height: 32px; padding: 0 10px; }
.inbox-filter-row { grid-template-columns: minmax(220px, 1fr) 170px 138px; gap: 8px; }
.bulk-actions { gap: 8px; }
.message-layout { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: 12px; }
.list { max-height: calc(100vh - 302px); gap: 8px; }
.detail { min-height: 300px; padding: 14px; }
.msg-open { padding: 10px 10px 7px; }
.msg-card-footer { padding: 7px 9px 9px 10px; }
@media(max-width:1180px){
  body[data-page="messages"] .message-workflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .message-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media(max-width:980px){
  .side { position: static; width: 100%; height: auto; }
  .main { margin-left: 0; width: 100%; max-width: 100vw; padding: 18px 16px; }
  body[data-page="messages"] #messages .panel-head { grid-template-columns: 1fr; }
  .message-form, .message-form-actions { grid-template-columns: 1fr; }
  .message-form-actions .guide-link, .message-form-actions .primary { grid-column: 1; justify-self: stretch; justify-content: center; }
}

/* Inbox density and widget button polish - 2026-08-03 */
body[data-page="messages"] .message-layout { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); align-items: start; gap: 12px; }
body[data-page="messages"] .list { max-height: calc(100vh - 302px); min-height: 0; gap: 8px; align-content: start; }
body[data-page="messages"] .msg-open { padding: 10px 10px 7px; gap: 5px; }
body[data-page="messages"] .msg-open span { display: block; overflow: visible; line-height: 1.45; }
body[data-page="messages"] .msg-open small { line-height: normal; }
body[data-page="messages"] .msg-open em { line-height: normal; }
body[data-page="messages"] .msg-card-footer { padding: 7px 9px 9px 10px; }
body[data-page="messages"] .msg-delete { min-height: 30px; padding: 0 10px; }
body[data-page="messages"] .detail { min-height: 300px; }
body[data-page="messages"] .message-form textarea { min-height: 88px; max-height: 150px; }
body[data-page="messages"] .message-form-actions { grid-template-columns: auto auto 1fr; justify-content: start; justify-items: start; min-height: 44px; }
body[data-page="messages"] .message-form-actions .guide-link { grid-column: 1; justify-self: start; justify-content: center; min-width: 150px; min-height: 40px; padding: 0 18px; }
body[data-page="messages"] .message-form-actions .primary { grid-column: 2; justify-self: start; min-width: 150px; min-height: 40px; padding: 0 18px; }
.widget-config { grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(150px, .8fr) 72px 168px; }
.widget-config input[name="greeting"] { grid-column: 1 / span 4; }
.widget-config [data-copy-widget-code] { grid-column: 5; min-width: 168px; white-space: nowrap; padding: 0 14px; }
@media(max-width:1280px){
  .widget-config { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .widget-config input[name="greeting"], .widget-config [data-copy-widget-code] { grid-column: auto; }
  .widget-config [data-copy-widget-code] { justify-self: start; }
}
@media(max-width:980px){
  body[data-page="messages"] .list, body[data-page="messages"] .detail { min-height: auto; max-height: none; }
  body[data-page="messages"] .message-form-actions { grid-template-columns: 1fr; }
  body[data-page="messages"] .message-form-actions .guide-link, body[data-page="messages"] .message-form-actions .primary { grid-column: 1; justify-self: stretch; }
}

/* Sent receipt polish - 2026-08-03 */
.sent-receipt { display: grid; gap: 5px; margin-bottom: 12px; padding: 12px; border: 1px solid #b9d1ef; border-radius: 8px; background: #f4f9ff; }
.sent-receipt strong { color: var(--ink); }
.sent-receipt span { color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }


/* Form control alignment and example polish - 2026-08-03 */
:where(input, select, button, .primary, .secondary, .guide-link, .widget-demo-link) {
  line-height: 1.2;
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select) {
  min-height: 42px;
  padding-top: 0;
  padding-bottom: 0;
  display: block;
}
:where(button, .primary, .secondary, .guide-link, .widget-demo-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
}
textarea {
  padding-top: 12px;
  padding-bottom: 12px;
  line-height: 1.55;
}
input[type="file"] {
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 1.4;
}
input::placeholder, textarea::placeholder {
  color: #8aa0b8;
  opacity: 1;
}


/* Form hardening: readable placeholders and email automation UI - 2026-08-05 */
input, select {
  min-height: 44px;
  line-height: 20px;
  display: block;
}
input::placeholder, textarea::placeholder {
  color: #8aa0b8;
  opacity: 1;
  text-overflow: ellipsis;
}
.email-form {
  grid-template-columns: minmax(150px, 180px) minmax(220px, 1fr) minmax(220px, 1fr) minmax(150px, .7fr);
  gap: 10px;
  align-items: center;
}
.email-form input,
.email-form select {
  min-width: 0;
}
.email-form input[name="host"],
.email-form input[name="smtpHost"],
.email-form input[name="password"] {
  min-width: 220px;
}
.email-form input[name="port"],
.email-form input[name="smtpPort"] {
  min-width: 110px;
}
.email-form .check-line {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid #d8e7f6;
  border-radius: 8px;
  background: #fff;
  white-space: nowrap;
}
.email-form button[type="submit"] {
  min-width: 150px;
  white-space: nowrap;
}
.email-account {
  grid-template-columns: minmax(180px, 1.2fr) minmax(220px, 1.2fr) minmax(260px, 1.6fr) auto auto auto;
  gap: 10px;
}
.email-account strong,
.email-account span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.email-account button {
  white-space: nowrap;
}
.message-form input[name="order"],
.inbox-filter-row input {
  min-width: 180px;
}
@media(max-width:1320px){
  .email-form { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
  .email-account { grid-template-columns: 1fr; align-items: stretch; }
  .email-account button { justify-self: start; }
}
@media(max-width:720px){
  .email-form { grid-template-columns: 1fr; }
  .email-form input[name="host"],
  .email-form input[name="smtpHost"],
  .email-form input[name="password"],
  .message-form input[name="order"],
  .inbox-filter-row input { min-width: 0; }
}

/* Form hardening: readable placeholders and email automation UI - 2026-08-05 v2 */
input, select {
  min-height: 44px;
  line-height: 20px;
  display: block;
  box-sizing: border-box;
}
input::placeholder,
textarea::placeholder {
  color: #8aa0b8;
  opacity: 1;
  text-overflow: ellipsis;
}
.email-form {
  grid-template-columns: minmax(170px, 200px) minmax(240px, 1fr) minmax(240px, 1fr) minmax(160px, .7fr);
  gap: 10px;
  align-items: center;
}
.email-form input,
.email-form select {
  min-width: 0;
}
.email-form input[name="host"],
.email-form input[name="smtpHost"],
.email-form input[name="password"] {
  min-width: 240px;
}
.email-form input[name="port"],
.email-form input[name="smtpPort"] {
  min-width: 112px;
}
.email-form .check-line {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid #d8e7f6;
  border-radius: 8px;
  background: #fff;
  white-space: nowrap;
}
.email-form button[type="submit"] {
  min-width: 150px;
  white-space: nowrap;
}
.email-account {
  grid-template-columns: minmax(180px, 1.2fr) minmax(220px, 1.2fr) minmax(260px, 1.6fr) auto auto auto;
  gap: 10px;
}
.email-account strong,
.email-account span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.email-account button {
  white-space: nowrap;
}
.message-form input[name="order"],
.inbox-filter-row input {
  min-width: 160px;
}
@media(max-width:1320px) {
  .email-form { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
  .email-account { grid-template-columns: 1fr; align-items: stretch; }
  .email-account button { justify-self: start; }
}
@media(max-width:720px) {
  .email-form { grid-template-columns: 1fr; }
  .email-form input[name="host"],
  .email-form input[name="smtpHost"],
  .email-form input[name="password"],
  .message-form input[name="order"],
  .inbox-filter-row input { min-width: 0; }
}

/* Message form overlap fix - 2026-08-05 */
body[data-page="messages"] .message-form {
  grid-template-columns: 138px minmax(180px, 1fr) minmax(170px, 180px) minmax(150px, 170px) 112px;
  overflow: hidden;
}
body[data-page="messages"] .message-form input,
body[data-page="messages"] .message-form select {
  min-width: 0;
  width: 100%;
}
body[data-page="messages"] .message-form input[name="order"] {
  min-width: 0;
}
@media(max-width:1320px) {
  body[data-page="messages"] .message-form {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}
@media(max-width:720px) {
  body[data-page="messages"] .message-form {
    grid-template-columns: 1fr;
  }
}

/* Guide page polish - 2026-08-06 */
.guide-toc { margin: 0 0 16px; padding: 14px 16px; border: 1px solid #b9d1ef; border-radius: 8px; background: #f4f9ff; }
.guide-toc strong { display: block; margin-bottom: 4px; }
.guide-toc span { color: var(--muted); line-height: 1.6; }
.guide-step { position: relative; padding-left: 70px; }
.guide-step-tag { position: absolute; left: 18px; top: 18px; width: 38px; min-height: 38px; display: grid; place-items: center; border-radius: 8px; background: #1769e0; color: white; font-size: 12px; font-weight: 900; text-align: center; line-height: 1.15; }
.guide-check { margin-top: 10px; padding: 10px 12px; border: 1px solid #cde9dc; border-radius: 8px; background: #f0fbf5; color: #075f44; line-height: 1.6; }
@media(max-width:720px){ .guide-step { padding-left: 18px; padding-top: 62px; } .guide-step-tag { top: 16px; } }


/* WhatsApp platform card - 2026-08-06 */
.whatsapp-connect { display: grid; grid-template-columns: 1fr minmax(320px, 440px); gap: 14px; align-items: start; padding: 16px; margin-bottom: 14px; border: 1px solid #b9d1ef; border-radius: 8px; background: #f4f9ff; }
.whatsapp-connect .shopify-form { display: grid; grid-template-columns: 1fr; gap: 10px; }
.whatsapp-connect .code-line { overflow-wrap: anywhere; }
@media(max-width:980px){ .whatsapp-connect { grid-template-columns: 1fr; } }


/* QR auth and trusted device - 2026-08-06 */
.trust-line { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; color: var(--muted); font-size: 13px; }
.trust-line input { width: auto; }
.qr-auth-box { display: grid; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.qr-auth-box strong { display: block; margin-bottom: 4px; }
.qr-auth-box p { margin: 0; }
.qr-auth-code { display: grid; place-items: center; padding: 12px; border: 1px dashed #b5c7da; border-radius: 8px; background: #f7fafc; }
.qr-auth-code svg { width: 220px; height: 220px; }
.qr-auth-status { min-height: 20px; color: var(--muted); font-size: 13px; }


/* Platform manual access and readiness notice - 2026-08-06 */
.manual-connect-head { margin: 18px 0 10px; }
.manual-connect-head h2 { margin: 0; font-size: 21px; line-height: 1.2; font-weight: 900; }
.platform-notice-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(16,32,51,.42); }
.platform-notice-modal.hidden { display: none !important; }
.platform-notice-card { width: min(520px, 100%); padding: 22px; border: 1px solid #d7e5f4; border-radius: 10px; background: #fff; box-shadow: 0 24px 60px rgba(16,32,51,.22); }
.platform-notice-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--blue); font-size: 12px; font-weight: 900; }
.platform-notice-close { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 22px; line-height: 1; }
.platform-notice-card h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.25; }
.platform-notice-card p { margin: 0 0 14px; color: var(--muted); line-height: 1.65; }
.platform-notice-check { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--muted); font-size: 13px; }
.platform-notice-check input { width: auto; }


/* Platform readiness colors - 2026-08-06 */
.tiktok-connect,
.whatsapp-connect {
  border-color: #f2c996;
  background: #fff8ed;
}

.shopify-connect {
  border-color: #b9d1ef;
  background: #f4f9ff;
}


/* Feedback page - 2026-08-06 */
.log-feedback-action { display: flex; justify-content: flex-start; margin-top: 14px; }
.feedback-panel { max-width: 980px; }
.feedback-hero { display: grid; gap: 8px; padding: 18px; border: 1px solid #b9d1ef; border-radius: 8px; background: #f4f9ff; margin-bottom: 14px; }
.feedback-hero strong { font-size: 20px; line-height: 1.45; }
.feedback-hero p { margin: 0; color: var(--muted); line-height: 1.65; }
.feedback-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.feedback-grid article { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fbfdff; }
.feedback-grid strong { display: block; margin-bottom: 6px; }
.feedback-grid span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.feedback-form { display: grid; grid-template-columns: minmax(160px, 220px) minmax(220px, 1fr); gap: 10px; }
.feedback-form textarea { grid-column: 1 / -1; min-height: 160px; }
.feedback-form button { justify-self: start; }
.feedback-note { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
@media(max-width:900px){.feedback-grid,.feedback-form{grid-template-columns:1fr}.feedback-form textarea{grid-column:auto}}


.app-loading-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #edf3f8;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}
.app-loading-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
}