:root{
  --teal:#0091AC; --teal-d:#00758a; --line:#e6e9ee; --ink:#1b2733; --muted:#6b7a89;
  --bg:#f5f7f9; --card:#ffffff; --line-green:#06C755; --fb-blue:#1877F2;
  --risk:#c62828; --risk-bg:#fdecea; --warn:#b26a00; --warn-bg:#fff4e0;
  --ok:#1b7f4d;
}
*{box-sizing:border-box}
/* hidden 屬性必須勝過 .modal/.risk-banner/.demo-bar 等 display:flex 規則，
   否則隱藏的全螢幕 modal 會攔截點擊。 */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.5;
  -webkit-text-size-adjust:100%;
}
button,select,textarea,input{font-family:inherit;font-size:16px}
.view{max-width:640px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}

/* Header */
.app-header{
  position:sticky;top:0;z-index:5;background:var(--teal);color:#fff;
  display:flex;align-items:center;gap:8px;padding:12px 14px;
  padding-top:calc(12px + env(safe-area-inset-top));
}
.app-title{font-weight:700;font-size:18px;flex:1}
.app-actions{display:flex;align-items:center;gap:6px}
.user-chip{font-size:13px;background:rgba(255,255,255,.18);padding:3px 8px;border-radius:12px}
.icon-btn{background:rgba(255,255,255,.15);color:#fff;border:0;border-radius:10px;
  width:38px;height:38px;font-size:20px;display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;cursor:pointer}
.badge-demo{background:#ffcf33;color:#3a2c00;font-size:11px;font-weight:800;padding:2px 6px;border-radius:6px;vertical-align:middle}
.badge-demo-sm{background:#ffcf33;color:#3a2c00;font-size:10px;font-weight:800;padding:1px 5px;border-radius:5px}

/* Filters */
.filters{background:var(--card);border-bottom:1px solid var(--line);padding:10px 12px;position:sticky;top:62px;z-index:4}
.seg{display:flex;gap:6px;margin-bottom:8px}
.seg button{flex:1;padding:8px 4px;border:1px solid var(--line);background:#fff;border-radius:10px;color:var(--muted);cursor:pointer}
.seg button.on{background:var(--teal);color:#fff;border-color:var(--teal);font-weight:600}
.filter-row{display:flex;gap:6px}
.filter-row select,.filter-row input{flex:1;min-width:0;padding:8px;border:1px solid var(--line);border-radius:10px;background:#fff}
.filter-row input{flex:1.4}

/* demo bar */
.demo-bar{display:flex;gap:8px;padding:10px 12px;background:#fffbe9;border-bottom:1px solid #f0e4b8}
.demo-bar select{flex:1;padding:8px;border:1px solid #e2d48a;border-radius:10px;background:#fff}

/* conv list */
.conv-list{list-style:none;margin:0;padding:0;flex:1}
.conv-item{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:#fff;cursor:pointer;align-items:flex-start}
.conv-item:active{background:#eef6f8}
.conv-item.pinned{background:#fff8f7}
.avatar{width:42px;height:42px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;background:var(--muted)}
.plat-line{background:var(--line-green)} .plat-facebook{background:var(--fb-blue)}
.conv-main{flex:1;min-width:0}
.conv-top{display:flex;align-items:center;gap:6px}
.conv-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-time{margin-left:auto;font-size:12px;color:var(--muted);flex:0 0 auto}
.conv-preview{color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.conv-tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap;align-items:center}
.tag{font-size:11px;padding:2px 7px;border-radius:10px;background:#eef1f4;color:var(--muted)}
.tag.assignee{background:#e4f2f5;color:var(--teal-d)}
.tag.status-open{background:#fdecea;color:#b3261e}
.tag.status-in_progress{background:#e8f0fe;color:#1a56c4}
.tag.status-done{background:#e6f4ea;color:var(--ok)}
.risk-pill{font-size:11px;padding:2px 7px;border-radius:10px;background:var(--risk-bg);color:var(--risk);font-weight:700}
.unread{background:var(--risk);color:#fff;border-radius:10px;font-size:11px;min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.plat-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}

/* chat */
.chat-header{gap:10px}
.chat-who{flex:1;min-width:0}
.chat-name{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-meta{font-size:12px;opacity:.95;display:flex;gap:8px;align-items:center;margin-top:2px}
.plat-tag{padding:1px 7px;border-radius:8px;font-weight:700;font-size:11px}
.plat-tag.line{background:var(--line-green);color:#fff}
.plat-tag.facebook{background:#fff;color:var(--fb-blue)}
.window-status{opacity:.95}
.chat-status-sel{border:0;border-radius:8px;padding:6px 8px;background:rgba(255,255,255,.9);color:var(--ink)}

.presence-bar{background:#fff4e0;color:var(--warn);padding:8px 14px;font-size:13px;border-bottom:1px solid #f0e0bd}
.risk-banner{background:var(--risk-bg);color:var(--risk);padding:12px 14px;font-size:14px;font-weight:600;border-bottom:2px solid #f3b4ae;display:flex;flex-direction:column;gap:8px}
.risk-banner .risk-actions{display:flex;gap:8px}
.risk-banner button{border:1px solid var(--risk);background:#fff;color:var(--risk);border-radius:8px;padding:5px 10px;font-size:13px;cursor:pointer}

.messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:#eef1f4}
.msg{max-width:80%;padding:9px 12px;border-radius:14px;font-size:15px;position:relative;white-space:pre-wrap;word-break:break-word}
.msg.in{align-self:flex-start;background:#fff;border-bottom-left-radius:4px}
.msg.out{align-self:flex-end;background:#d6f3d0;border-bottom-right-radius:4px}
.msg.system{align-self:center;background:#e3e7ec;color:var(--muted);font-size:13px;max-width:90%}
.msg-meta{font-size:11px;color:var(--muted);margin-top:4px;display:flex;gap:6px;justify-content:flex-end}
.msg.in .msg-meta{justify-content:flex-start}

/* draft */
.draft-panel{background:#eaf6f9;border-top:2px solid var(--teal);padding:12px 14px}
.draft-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--teal-d);margin-bottom:6px}
.draft-body{background:#fff;border:1px solid #cfe6ec;border-radius:10px;padding:10px;white-space:pre-wrap;font-size:15px}
.draft-body.nokb{background:#fff4e0;color:var(--warn);border-color:#f0e0bd;font-weight:600}
.draft-kb{font-size:12px;color:var(--muted);margin-top:8px}
.draft-kb a{color:var(--teal-d);text-decoration:underline;cursor:pointer}
.draft-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

/* composer */
.composer{background:var(--card);border-top:1px solid var(--line);padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.composer-tools{display:flex;gap:8px;margin-bottom:8px}
.composer-row{display:flex;gap:8px;align-items:flex-end}
.composer textarea{flex:1;border:1px solid var(--line);border-radius:12px;padding:10px;resize:none;max-height:120px}
.send-hint{font-size:12px;color:var(--muted);margin-top:6px;min-height:16px}

/* buttons */
.btn-primary{background:var(--teal);color:#fff;border:0;border-radius:10px;padding:9px 16px;font-weight:600;cursor:pointer}
.btn-secondary{background:#fff;color:var(--teal-d);border:1px solid var(--teal);border-radius:10px;padding:8px 12px;cursor:pointer;font-size:14px}
.btn-chip{background:#fff;color:var(--teal-d);border:1px solid #bcdfe7;border-radius:16px;padding:6px 14px;cursor:pointer;font-size:14px}
.btn-send{background:var(--teal);color:#fff;border:0;border-radius:12px;padding:12px 18px;font-weight:700;cursor:pointer}
.btn-send:disabled{opacity:.5}
.link-btn{background:none;border:0;color:var(--muted);cursor:pointer;font-size:14px;text-decoration:underline}

/* login */
.login-body{background:linear-gradient(160deg,#0091AC,#00637a);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:#fff;border-radius:18px;padding:28px 24px;width:100%;max-width:360px;box-shadow:0 12px 40px rgba(0,0,0,.2);text-align:center}
.login-logo{font-size:44px}
.login-card h1{font-size:20px;margin:8px 0 2px}
.login-sub{color:var(--muted);margin:0 0 18px}
.login-card label{display:block;text-align:left;font-size:13px;color:var(--muted);margin-bottom:12px}
.login-card input{width:100%;padding:11px;border:1px solid var(--line);border-radius:10px;margin-top:4px}
.login-card button{width:100%;background:var(--teal);color:#fff;border:0;border-radius:10px;padding:12px;font-weight:700;font-size:16px;cursor:pointer;margin-top:4px}
.login-error{color:var(--risk);font-size:14px;margin-top:10px}
.login-demo{color:var(--muted);font-size:12px;margin-top:16px}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.modal-card{background:#fff;border-radius:16px 16px 0 0;width:100%;max-width:640px;max-height:85vh;overflow-y:auto;padding:16px}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:17px}
.outage-banner{position:sticky;top:0;z-index:9;background:var(--warn-bg);color:var(--warn);padding:10px 14px;font-size:14px;font-weight:600;text-align:center;border-bottom:1px solid #f0e0bd}
.recon-item{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px}
.recon-item .ri-actions{display:flex;gap:8px;margin-top:8px}
.recon-item.done{background:#e6f4ea}
.kb-entry{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:10px}
.kb-entry .kb-intent{font-weight:700;color:var(--teal-d)}
.kb-entry .kb-status{font-size:12px;color:var(--warn);margin-top:4px}

.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#222;color:#fff;padding:10px 18px;border-radius:20px;font-size:14px;z-index:30;max-width:90%}