/* ZEAHO 2021 brand proposal, pp. 12–15. RGB values take precedence over PDF display colors. */
:root {
  --brand-blue: #1432e1;
  --brand-red: #e63c5f;
  --brand-cyan: #3cbeff;
  --brand-pale: #bed2fa;
  --brand-blue-gradient: linear-gradient(135deg, #1432e1, #3c87ff);
  --brand-red-gradient: linear-gradient(135deg, #d21e4b, #ff5f78);
  --ink: #18213b;
  --muted: #606c85;
  --line: #e1e7f2;
  --soft: #f5f7fc;
  /* Compatibility aliases used by the existing application. */
  --green: var(--brand-blue);
  --green-dark: #1029ba;
  --green-soft: #edf2ff;
  --coral: var(--brand-red);
  --amber: var(--brand-cyan);
  --shadow: 0 24px 80px #1432e11a;
  font-family: "DM Sans", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  color: var(--ink);
}
body { background: #f5f7fc; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { transition: background-color .16s, border-color .16s, box-shadow .16s; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #3cbeff; outline-offset: 3px; }
button:disabled { cursor: default; opacity: .5; }
input, select, textarea { accent-color: var(--brand-blue); }
.app-shell { grid-template-columns: 88px 340px minmax(0, 1fr); }
.app-shell.no-conversation { grid-template-columns: 88px minmax(0, 1fr); }
.sidebar { background: var(--brand-blue); padding: 24px 12px 20px; }
.nav-item { min-height: 62px; color: #fff; border-radius: 10px; opacity: .83; }
.nav-item span { font-size: 12px; }
.nav-item:hover, .nav-item.active { opacity: 1; background: #ffffff22; }
.nav-item.active::before { content: ""; position: absolute; left: -12px; top: 18px; bottom: 18px; width: 3px; background: #fff; border-radius: 0 2px 2px 0; }
.nav-item em { background: #c51c40; border: 2px solid var(--brand-blue); line-height: 16px; }
.user-menu { box-shadow: 0 12px 40px #15294b26; width: 190px; }
.user-menu button { color: var(--ink); padding: 12px; font-size: 13px; }
.user-menu button:hover { background: var(--green-soft); }
.avatar { border-radius: 12px; color: #1432e1; background: #e3ecff; }
.avatar-me, .avatar-lucas { background: #bed2fa; color: #1432e1; }
.avatar-sofia, .avatar-daniel { background: #fde9ee; color: #a91d3b; }
.avatar-emma { background: #def3ff; color: #075586; }
.avatar.has-image { color: transparent; }
.status-dot, .online-dot { background: #3cbeff; }
.inbox-panel { background: #fff; min-height: 0; }
.panel-header { padding: 28px 22px 22px; gap: 12px; }
.panel-header h1 { font-size: 24px; letter-spacing: -.5px; }
.eyebrow { font-size: 10px; letter-spacing: 1.8px; color: var(--brand-blue); margin-bottom: 8px; }
.start-chat-button { min-height: 38px; font-size: 12px; border-radius: 8px; padding: 0 12px; }
.search-box { flex-shrink: 0; background: #f5f7fc; border-color: transparent; border-radius: 8px; margin: 0 20px 16px; }
.search-box:focus-within { border-color: var(--brand-blue); }
.search-box input { font-size: 13px; }
.search-box kbd { display: none; }
.filter-row { padding-bottom: 16px; }
.filter { font-size: 12px; border-radius: 6px; }
.conversation-list { flex: 1; min-height: 0; padding: 10px; }
.conversation-item { border-radius: 10px; padding: 15px 12px; margin-bottom: 3px; }
.conversation-item:hover { background: #f5f7fc; }
.conversation-item.active { background: #edf2ff; box-shadow: inset 3px 0 0 var(--brand-blue); }
.conversation-copy strong { font-size: 14px; color: var(--ink); }
.conversation-meta time, .message-time, .date-divider { color: #6d7890; font-size: 11px; }
.unread-count { background: #c51c40; }
.lang-code { background: #fff; color: #65728b; border-color: var(--line); }
.chat-header { height: 86px; padding-inline: 28px; }
.chat-title h2 { font-size: 18px; }
.chat-title > div { flex-wrap: wrap; }
.chat-title p { font-size: 12px; }
.chat-name-button { overflow-wrap: anywhere; }
.language-badge { font-size: 10px; padding: 4px 8px; }
.translation-strip { background: #f7f9ff; border-color: var(--line); min-height: 44px; padding-inline: 28px; }
.translation-state { font-size: 11px; }
.translation-state strong { font-size: 12px; }
.messages { background: #f5f7fc; padding-top: 26px; }
.message-row { margin-bottom: 24px; }
.message-stack { max-width: min(80%, 620px); }
.message-bubble { border-color: #e2e8f4; border-radius: 12px 12px 12px 3px; font-size: 14px; line-height: 1.7; box-shadow: 0 2px 4px #18213b03; overflow-wrap: anywhere; white-space: pre-wrap; }
.outgoing .message-bubble { background: var(--brand-blue); border-color: var(--brand-blue); border-radius: 12px 12px 3px 12px; }
.sender-identity { color: #61708c; font-size: 11px; margin-bottom: 7px; }
.translated-copy { color: #4c5a76; font-size: 12px; line-height: 1.7; padding-top: 9px; gap: 8px; }
.copy-translation { border-color: var(--line); border-radius: 6px; width: 30px; height: 30px; }
.message-attachment { border-color: var(--line); background: #fff; color: var(--ink); }
.message-attachment small { color: var(--muted); }
.composer-wrap { padding: 16px 24px 20px; }
.composer { border-color: #d7dfef; border-radius: 10px; padding: 14px; box-shadow: none; }
.composer:focus-within { border-color: var(--brand-blue); box-shadow: 0 0 0 3px #1432e10d; }
.composer textarea { background: transparent; font-size: 14px; line-height: 1.6; }
.composer textarea::placeholder { color: #7b87a0; }
.composer-actions .icon-button { color: #66738b; }
.send-button { width: 42px; height: 36px; border-radius: 7px; }
.attachment-preview, .profile-avatar-editor { background: #edf2ff; color: #3d507b; }
.emoji-panel { border-color: var(--line); box-shadow: 0 12px 30px #18213b1a; }
.emoji-panel button:hover { background: #edf2ff; }
.workspace-panel { background: #f5f7fc; }
.workspace-header { padding: 26px 32px; }
.workspace-header h1 { font-size: 26px; }
.workspace-content { max-width: 1450px; margin-inline: auto; }
.directory-intro { background: linear-gradient(110deg, #edf2ff, #fff); border-color: var(--line); border-radius: 10px; padding: 22px; }
.directory-intro h3 { color: var(--ink); font-size: 17px; }
.directory-intro p { color: var(--muted); font-size: 12px; line-height: 1.7; }
.contact-card span, .launcher-person span { color: var(--muted); font-size: 12px; }
.contact-card small { color: var(--muted); font-size: 11px; }
.settings-section { background: #fff; padding: 24px; }
.settings-section h3 { font-size: 17px; color: var(--ink); }
.settings-section p, .settings-fields label, .setting-toggle strong { font-size: 13px; color: #465571; }
.setting-toggle small { font-size: 12px; color: var(--muted); }
.settings-fields select { border-color: #d7dfef; color: var(--ink); background: #f8faff; }
.stats-row article, .contact-card, .settings-section { border-color: var(--line); border-radius: 10px; box-shadow: 0 3px 12px #18213b03; }
.stats-row strong { color: var(--brand-blue); }
.stats-row article > span, .stats-row small { color: var(--muted); font-size: 12px; }
.positive { color: var(--brand-blue) !important; }
.contact-card.selected, .launcher-person.selected { background: #edf2ff; border-color: #bed2fa; }
.contact-card:hover, .launcher-person:hover { background: #f5f7fc; }
.contact-card strong, .launcher-person strong { color: var(--ink); font-size: 14px; }
.primary-button { background: var(--brand-blue); border-color: var(--brand-blue); }
.primary-button, .secondary-button { font-size: 12px; border-radius: 7px; min-height: 40px; }
.secondary-button { color: var(--brand-blue); border-color: #d2dcf4; }
.mini-button { font-size: 12px; min-height: 32px; color: #415375; border-color: #d2dcf4; }
.mini-button.danger { color: #bd2142; }
.status-pill, .role-badge.admin { background: #edf2ff; color: var(--brand-blue); }
.status-pill.disabled { background: #fde9ee; color: #a91d3b; }
.customer-table th { background: #f5f7fc; color: #66738b; font-size: 12px; }
.customer-table td { font-size: 13px; }
.customer-cell strong { font-size: 13px; }
.customer-cell span { font-size: 11px; color: var(--muted); }
.role-badge { background: #f0f3fa; color: #556580; }
.table-wrap { border-color: var(--line); border-radius: 10px; }
.action-modal { border-radius: 14px; box-shadow: var(--shadow); max-height: calc(100dvh - 40px); overflow-y: auto; }
.action-modal > label { font-size: 12px; color: #465571; }
.action-modal input, .action-modal select, .action-modal textarea, .admin-search, .admin-toolbar select { border-color: #d7dfef; border-radius: 7px; }
.modal-backdrop { background: #101b486b; backdrop-filter: blur(3px); }
.toast { background: #142351; font-size: 13px; max-width: calc(100vw - 32px); }
.toast svg { color: #3cbeff; }

/* The supplied logo is used intact on white; angled shapes are auxiliary graphics. */
.login-overlay { background: #f3f6fc; backdrop-filter: none; overflow-y: auto; padding: 32px; align-items: safe center; }
.login-dialog { width: min(1060px, 100%); min-height: 660px; border-radius: 18px; grid-template-columns: 1fr 1fr; border: 1px solid #e1e7f2; box-shadow: 0 24px 80px #18213b14; }
.login-visual { background: var(--brand-blue-gradient); padding: 40px; display: flex; flex-direction: column; min-height: 660px; }
.login-visual::before { display: none; }
.brand-signature { align-self: flex-start; position: relative; z-index: 1; background: #fff; padding: 16px 20px; }
.brand-signature img { display: block; width: 220px; height: auto; }
.brand-geometry { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.brand-geometry span { position: absolute; width: 220px; height: 360px; transform: skewX(-35deg); background: linear-gradient(160deg,#3cbeffbd,#bed2fa00); }
.brand-geometry span:nth-child(1) { top: 180px; right: 35px; }
.brand-geometry span:nth-child(2) { width: 170px; height: 210px; top: 255px; left: -85px; opacity: .35; }
.brand-geometry span:nth-child(3) { width: 95px; height: 120px; right: -5px; top: 330px; background: var(--brand-red-gradient); }
.login-visual blockquote { position: relative; inset: auto; margin-top: auto; margin-bottom: 44px; padding-top: 220px; color: #fff; font-size: 28px; line-height: 1.65; font-weight: 600; letter-spacing: .5px; z-index: 1; }
.login-visual blockquote small { display: block; max-width: 320px; margin-top: 16px; font-size: 13px; font-weight: 400; line-height: 1.7; color: #e2ecff; letter-spacing: .2px; }
.brand-caption { font-size: 10px; letter-spacing: 3px; color: #e2ecff; z-index: 1; }
.login-form { padding: 44px 48px 32px; align-self: center; min-width: 0; }
.login-mobile-signature { display: none; }
.auth-mode-tabs { margin-bottom: 30px; background: #f1f4fb; border-radius: 8px; padding: 4px; }
.auth-mode-tabs button { height: 40px; font-size: 13px; border-radius: 6px; color: #66738b; }
.auth-mode-tabs button.active { color: var(--brand-blue); box-shadow: 0 2px 6px #1432e10d; }
.login-form h2 { font-size: 25px; margin-bottom: 28px; color: var(--ink); line-height: 1.4; }
.login-form > label:not(.remember) { color: #475570; font-size: 12px; margin-bottom: 18px; }
.login-form input:not([type="checkbox"]), .login-form select { height: 46px; border-color: #d7dfef; border-radius: 7px; font-size: 14px; }
.login-form input:focus, .login-form select:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 3px #1432e10d; }
.password-field button { bottom: 5px; color: #66738b; }
.remember { font-size: 12px; margin-block: 6px 22px; }
.remember input { accent-color: var(--brand-blue); }
.login-button { height: 46px; border-radius: 7px; font-size: 13px; background: var(--brand-blue); }
.employee-login { min-height: 46px; border-radius: 7px; margin-top: 12px; font-size: 13px; border-color: #c7d3f4; background: #fff; }
.privacy { color: #6e7b94; font-size: 10px; margin-top: 22px; }

.history-page { color: var(--ink); font: 14px/1.6 "Microsoft YaHei", system-ui, sans-serif; }
.history-page main { max-width: 1160px; padding: 32px; }
.history-page header { border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.history-page a { color: var(--brand-blue); }
.history-page input, .history-page button { border-color: #d7dfef; border-radius: 7px; color: var(--brand-blue); }
.history-page input { color: var(--ink); background: #fff; }
.history-page button:hover { background: #edf2ff; }
.history-page article { border-color: var(--line); border-radius: 10px; padding: 24px; }
.history-page small { color: var(--muted); }
.history-page .message { color: var(--ink); }
.history-page .translation { border-color: var(--brand-pale); color: #495d83; }
.history-page .message { overflow-wrap: anywhere; }

@media (max-width: 1180px) and (min-width: 801px) {
  .app-shell { grid-template-columns: 76px 300px minmax(0, 1fr); }
  .app-shell.no-conversation { grid-template-columns: 76px minmax(0, 1fr); }
  .panel-header { padding-inline: 18px; gap: 6px; }
  .panel-header h1 { font-size: 22px; }
  .start-chat-button { font-size: 11px; padding-inline: 8px; }
}
@media (max-width: 800px) {
  .app-shell, .app-shell.no-conversation { grid-template-columns: minmax(0, 1fr); }
  .sidebar { background: var(--brand-blue); padding: 5px 10px; }
  .nav-item { min-height: 52px; }
  .nav-item.active::before { display: none; }
  .chat-header { padding-inline: 16px; }
  .login-overlay { padding: 20px; place-items: start center; }
  .login-dialog { margin-block: auto; grid-template-columns: 1fr; min-height: 0; width: min(480px, 100%); border-radius: 14px; }
  .login-visual { display: none; }
  .login-form { padding: 28px; }
  .login-mobile-signature { display: block; width: 190px; max-width: 80%; height: auto; margin: 0 auto 28px; }
  .login-form h2 { font-size: 23px; }
  .workspace-header { padding: 20px 16px; }
  .workspace-header h1 { font-size: 22px; }
  .history-page main { padding: 16px; }
}
@media (max-width: 480px) {
  .login-overlay { padding: 12px; }
  .login-form { padding: 24px; }
  .login-form h2 { font-size: 21px; }
  .chat-title h2 { font-size: 16px; }
  .chat-header { height: 78px; }
  .translation-strip { padding-inline: 16px; }
  .translation-state { gap: 6px; }
  .message-stack { max-width: 84%; }
  .composer-wrap { padding: 10px 12px; }
  .composer { padding: 12px; }
  .nav-item span { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }