/* =============================================================
   midea-app.css - the Midea Connect simulator (mc-ui.js).

   Sizes are written in "native pixels": pixels of the 1591px-wide reference
   screenshot. `--u` is one such pixel on screen (stage width / 1591), set by
   McUI.layout(), so the whole app scales with the computer screen and never
   depends on the browser window. In this file 12u means calc(12 * var(--u)).
   (Generated from a source that uses the short `Nu` form; edit values here.)
   ============================================================= */
.mc {
  --u: 1px;
  --blue: #1478f0;
  --ink: #1f2329;
  --muted: #8a94a6;
  --line: #e6ebf0;
  --rail-bg: #eef4f8;
  --panel: #fafafb;
  --main: #f5f7f9;
  --sel: #dfebfb;
  --hover: #eaf1f9;
  position: absolute; inset: 0;
  display: grid; grid-template-columns: calc(96 * var(--u)) 1fr; grid-template-rows: calc(76 * var(--u)) 1fr;
  background: var(--main); color: var(--ink);
  font-family: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(17 * var(--u)); line-height: 1.35;
  overflow: hidden;
  opacity: 0; transition: opacity 320ms ease;
  -webkit-font-smoothing: antialiased;
}
.mc.on { opacity: 1; }
.mc, .mc * { box-sizing: border-box; cursor: none; }
.mc :where(button) { font: inherit; color: inherit; background: none; border: none; padding: 0; margin: 0; }
.mc ::-webkit-scrollbar { width: calc(7 * var(--u)); height: calc(7 * var(--u)); }
.mc ::-webkit-scrollbar-thumb { background: rgba(120, 135, 155, 0.28); border-radius: calc(4 * var(--u)); }
.mc ::-webkit-scrollbar-track { background: transparent; }
.mc .ic { display: block; width: calc(var(--w) * var(--u)); height: auto; flex-shrink: 0; user-select: none; -webkit-user-drag: none; }
.mc .px { image-rendering: pixelated; object-fit: cover; }

/* ---------- window chrome ---------- */
.mc-lights { position: absolute; left: calc(12 * var(--u)); top: calc(22 * var(--u)); display: flex; gap: calc(12 * var(--u)); z-index: 5; pointer-events: none; }
.mc-lights i { width: calc(15 * var(--u)); height: calc(15 * var(--u)); border-radius: 50%; background: #ff5f57; }
.mc-lights i:nth-child(2) { background: #febc2e; }
.mc-lights i:nth-child(3) { background: #28c840; }

/* ---------- left rail ---------- */
.mc-rail {
  grid-row: 1 / 3; grid-column: 1;
  background: var(--rail-bg); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center;
  padding: calc(70 * var(--u)) 0 calc(53 * var(--u));
}
.mc-avatar { width: calc(58 * var(--u)); height: calc(58 * var(--u)); border-radius: calc(12 * var(--u)); overflow: hidden; margin-bottom: calc(20 * var(--u)); transition: transform 100ms ease, filter 120ms ease; }
.mc-avatar img { width: 100%; height: 100%; }
.mc-avatar:hover { filter: brightness(1.06); }
.mc-nav { position: relative; width: calc(62 * var(--u)); height: calc(62 * var(--u)); border-radius: calc(15 * var(--u)); display: grid; place-items: center; transition: background-color 120ms ease, transform 80ms ease; }
.mc-nav:hover { background: rgba(20, 90, 200, 0.09); }
.mc-nav:active, .mc-avatar:active { transform: scale(0.96); }
.mc-nav.active { background: #d9e6f8; }
.mc-badge { position: absolute; right: calc(10 * var(--u)); top: calc(9 * var(--u)); min-width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: calc(6 * var(--u)); background: #f54a45; border: calc(2 * var(--u)) solid var(--rail-bg); opacity: 0; transition: opacity 150ms ease; }
.mc-badge.on { opacity: 1; }
.mc-grow { flex: 1; }

/* ---------- top bar: search ---------- */
.mc-top { grid-row: 1; grid-column: 2; position: relative; z-index: 4; }
.mc-title { position: absolute; left: calc(20 * var(--u)); top: calc(21 * var(--u)); font-size: calc(26 * var(--u)); font-weight: 600; opacity: 0; transition: opacity 180ms ease; pointer-events: none; }
.view-contacts .mc-title { opacity: 1; }
.mc-search {
  position: absolute; top: calc(18 * var(--u)); height: calc(46 * var(--u)); left: calc(11 * var(--u)); width: calc(296 * var(--u));
  display: flex; align-items: center; gap: calc(10 * var(--u)); padding: 0 calc(16 * var(--u));
  background: #fff; border-radius: calc(23 * var(--u)); box-shadow: 0 calc(1 * var(--u)) calc(6 * var(--u)) rgba(30, 60, 100, 0.10), 0 0 0 1px rgba(30, 60, 100, 0.03);
  transition: left 200ms ease, width 200ms ease, box-shadow 150ms ease;
}
.view-contacts .mc-search { left: calc(511 * var(--u)); width: calc(390 * var(--u)); }
.mc-search:focus-within { box-shadow: 0 calc(1 * var(--u)) calc(8 * var(--u)) rgba(20, 120, 240, 0.22), 0 0 0 1.5px rgba(20, 120, 240, 0.55); }
.mc-search svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); flex-shrink: 0; stroke: #6c7686; }
.mc-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: calc(18 * var(--u)); color: var(--ink); }
.mc-search input::placeholder { color: #98a2b3; }
.mc-search .clear { width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: #c9d1db; color: #fff; font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); text-align: center; opacity: 0; pointer-events: none; transition: opacity 120ms ease; }
.mc-search.has-text .clear { opacity: 1; pointer-events: auto; }
.mc-plus { position: absolute; top: calc(18 * var(--u)); left: calc(325 * var(--u)); width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 calc(1 * var(--u)) calc(6 * var(--u)) rgba(30, 60, 100, 0.10); display: grid; place-items: center; transition: left 200ms ease, background-color 120ms ease, transform 80ms ease; }
.view-contacts .mc-plus { left: calc(923 * var(--u)); }
.mc-plus:hover { background: #f1f6fc; }
.mc-plus:active { transform: scale(0.95); }
.mc-plus svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); stroke: #1f2329; }

.mc-results {
  position: absolute; top: calc(72 * var(--u)); left: calc(11 * var(--u)); width: calc(1465 * var(--u)); max-height: calc(700 * var(--u)); display: flex; flex-direction: column;
  background: #fff; border-radius: calc(14 * var(--u)); overflow: hidden;
  box-shadow: 0 calc(8 * var(--u)) calc(32 * var(--u)) rgba(20, 40, 80, 0.20), 0 0 0 1px rgba(30, 60, 100, 0.06);
  opacity: 0; transform: translateY(calc(-4 * var(--u))); pointer-events: none; visibility: hidden;
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}
.mc-results.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.sr-tabs { display: flex; gap: calc(36 * var(--u)); padding: 0 calc(30 * var(--u)); height: calc(62 * var(--u)); flex-shrink: 0; border-bottom: 1px solid var(--line); overflow: hidden; }
.sr-tab { position: relative; font-size: calc(20 * var(--u)); color: #6b7688; white-space: nowrap; transition: color 120ms ease; }
.sr-tab:hover { color: var(--ink); }
.sr-tab.on { color: var(--blue); }
.sr-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: calc(3 * var(--u)); background: var(--blue); border-radius: calc(2 * var(--u)); }
.sr-body { overflow-y: auto; padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); min-height: 0; }
.sr-title { padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u)); font-size: calc(18 * var(--u)); }
.mc-result, .sr-row { display: flex; align-items: center; gap: calc(18 * var(--u)); height: calc(80 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: calc(11 * var(--u)); transition: background-color 100ms ease; }
.mc-result:hover, .mc-result.focus, .sr-row:hover { background: #f0f2f5; }
.mc-result .px, .sr-row .px { width: calc(52 * var(--u)); height: calc(54 * var(--u)); border-radius: calc(10 * var(--u)); flex-shrink: 0; }
.sr-row .ic { width: calc(52 * var(--u)); }
.sr-text { flex: 1; min-width: 0; }
.sr-text > b { display: block; font-weight: 400; font-size: calc(20 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-text > span { display: block; margin-top: calc(3 * var(--u)); font-size: calc(16 * var(--u)); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-text .hl { color: var(--blue); }
.sr-acts { display: flex; gap: calc(8 * var(--u)); opacity: 0; transition: opacity 120ms ease; }
.mc-result:hover .sr-acts, .mc-result.focus .sr-acts { opacity: 1; }
.sr-acts button { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(9 * var(--u)); display: grid; place-items: center; transition: background-color 110ms ease; }
.sr-acts button:hover { background: rgba(20, 90, 200, 0.10); }
.sr-acts svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.mc-no-results { padding: calc(60 * var(--u)) calc(12 * var(--u)); color: var(--muted); font-size: calc(18 * var(--u)); text-align: center; }

/* ---------- body / views ---------- */
.mc-body { grid-row: 2; grid-column: 2; position: relative; min-height: 0; }
.mc-view {
  position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr);
  opacity: 0; visibility: hidden; transform: translateY(calc(6 * var(--u))); pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}
.mc-view.active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.mc-illus { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mc-illus h3 { margin: calc(14 * var(--u)) 0 calc(8 * var(--u)); font-size: calc(27 * var(--u)); font-weight: 700; }
.mc-illus p { margin: 0; color: var(--muted); font-size: calc(18 * var(--u)); }

/* ---------- Chats view ---------- */
.v-chats { grid-template-columns: calc(408 * var(--u)) 1fr; transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms, grid-template-columns 200ms ease; }
.v-chats.has-chat { grid-template-columns: calc(408 * var(--u)) 1fr calc(332 * var(--u)); }
.chat-side { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.chat-shortcuts { display: flex; justify-content: space-around; align-items: center; height: calc(56 * var(--u)); padding: 0 calc(8 * var(--u)); margin-top: calc(2 * var(--u)); }
.chat-shortcuts button, .chat-filters button { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: calc(9 * var(--u)); font-weight: 500; font-size: calc(18 * var(--u)); transition: background-color 120ms ease; }
.chat-shortcuts button:hover, .chat-filters button:hover { background: var(--hover); }
.chat-filters { display: flex; justify-content: space-around; align-items: center; height: calc(52 * var(--u)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 calc(12 * var(--u)); }
.chat-list { flex: 1; overflow-y: auto; min-height: 0; padding: calc(8 * var(--u)) calc(10 * var(--u)); position: relative; }
.chat-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: calc(70 * var(--u)); transition: opacity 240ms ease; pointer-events: none; }
.chat-empty.gone { opacity: 0; }
.chat-empty h4 { margin: calc(18 * var(--u)) 0 calc(6 * var(--u)); font-size: calc(23 * var(--u)); font-weight: 600; color: #4a5568; }
.chat-empty p { margin: 0; color: var(--muted); font-size: calc(17 * var(--u)); line-height: 1.5; max-width: calc(240 * var(--u)); }
.chat-item { display: flex; align-items: center; gap: calc(14 * var(--u)); height: calc(82 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(11 * var(--u)); transition: background-color 120ms ease, opacity 260ms ease, transform 260ms ease; animation: item-in 260ms ease both; }
@keyframes item-in { from { opacity: 0; transform: translateY(calc(-6 * var(--u))); } to { opacity: 1; transform: none; } }
.chat-item:hover { background: var(--hover); }
.chat-item.active { background: var(--sel); }
.chat-item .px { width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: calc(10 * var(--u)); }
.chat-item .body { flex: 1; min-width: 0; }
.chat-item .name { font-size: calc(19 * var(--u)); font-weight: 600; }
.chat-item .prev { margin-top: calc(4 * var(--u)); font-size: calc(15 * var(--u)); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item .meta { align-self: flex-start; margin-top: calc(16 * var(--u)); display: flex; flex-direction: column; align-items: flex-end; gap: calc(6 * var(--u)); font-size: calc(13 * var(--u)); color: var(--muted); }
.chat-item .dot { min-width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(10 * var(--u)); padding: 0 calc(6 * var(--u)); background: #f54a45; color: #fff; font-size: calc(13 * var(--u)); line-height: calc(20 * var(--u)); text-align: center; }
.chat-foot { height: calc(72 * var(--u)); border-top: 1px solid var(--line); display: flex; align-items: center; gap: calc(14 * var(--u)); padding: 0 calc(22 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 500; transition: background-color 120ms ease; }
.chat-foot:hover { background: var(--hover); }
.chat-foot .sp { flex: 1; }

.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.chat-welcome { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: calc(40 * var(--u)); transition: opacity 200ms ease; }
.chat-pane { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms; }
.v-chats.has-chat .chat-pane { opacity: 1; visibility: visible; transition-delay: 0s; }
.v-chats.has-chat .chat-welcome { opacity: 0; pointer-events: none; }
.chat-head { height: calc(76 * var(--u)); flex-shrink: 0; display: flex; align-items: center; gap: calc(14 * var(--u)); padding: 0 calc(24 * var(--u)) 0 calc(22 * var(--u)); border-bottom: 1px solid var(--line); }
.chat-head .px { width: calc(50 * var(--u)); height: calc(54 * var(--u)); border-radius: calc(10 * var(--u)); }
.chat-head .who { flex: 1; min-width: 0; }
.chat-head .nm { font-size: calc(22 * var(--u)); font-weight: 600; }
.chat-head .sub { font-size: calc(15 * var(--u)); color: var(--muted); }
.icon-btn { width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: calc(11 * var(--u)); display: grid; place-items: center; transition: background-color 120ms ease, transform 80ms ease; }
.icon-btn:hover { background: rgba(20, 90, 200, 0.09); }
.icon-btn:active { transform: scale(0.94); }

.thread { flex: 1; min-height: 0; overflow-y: auto; padding: calc(22 * var(--u)) calc(28 * var(--u)) calc(10 * var(--u)); scroll-behavior: smooth; position: relative; }
.thread-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: calc(70 * var(--u)); transition: opacity 220ms ease; pointer-events: none; }
.thread-empty.gone { opacity: 0; }
.stamp { text-align: center; color: var(--muted); font-size: calc(14 * var(--u)); margin: calc(4 * var(--u)) 0 calc(16 * var(--u)); }
.msg { display: flex; align-items: flex-start; gap: calc(12 * var(--u)); margin-bottom: calc(24 * var(--u)); animation: msg-in 240ms ease both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(calc(8 * var(--u))); } to { opacity: 1; transform: none; } }
.msg.me { flex-direction: row-reverse; }
.msg .px { width: calc(46 * var(--u)); height: calc(50 * var(--u)); border-radius: calc(9 * var(--u)); }
.msg .col { display: flex; flex-direction: column; max-width: 62%; min-width: 0; }
.msg.me .col { align-items: flex-end; }
.msg .line { display: flex; align-items: flex-end; gap: calc(10 * var(--u)); position: relative; }
.msg.me .line { flex-direction: row-reverse; }
.bubble { position: relative; padding: calc(12 * var(--u)) calc(16 * var(--u)); border-radius: calc(12 * var(--u)); font-size: calc(19 * var(--u)); line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.them .bubble { background: #fff; border: 1px solid #e3e8ee; border-bottom-left-radius: calc(4 * var(--u)); }
.msg.me .bubble { background: var(--blue); color: #fff; border-bottom-right-radius: calc(4 * var(--u)); }
.msg .status { order: 2; font-size: calc(14 * var(--u)); color: #98a2b3; margin-bottom: calc(4 * var(--u)); transition: color 300ms ease; white-space: nowrap; }
.msg .status.read { color: var(--blue); }
.msg-actions { align-self: center; display: flex; opacity: 0; transition: opacity 130ms ease; }
.msg.me .msg-actions { order: 3; }
.line:hover .msg-actions, .msg-actions:hover { opacity: 1; }
.msg-actions button { padding: calc(2 * var(--u)) calc(8 * var(--u)); font-size: calc(13 * var(--u)); letter-spacing: 1px; border-radius: calc(6 * var(--u)); color: #8a94a6; transition: background-color 100ms ease, color 100ms ease; }
.msg-actions button:hover { background: var(--hover); color: var(--blue); }
.msg.ctx .bubble { box-shadow: 0 0 0 calc(3 * var(--u)) rgba(20, 120, 240, 0.25); }
.msg-attachment { display: flex; align-items: center; gap: calc(10 * var(--u)); width: 100%; margin-top: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(9 * var(--u)); background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); cursor: pointer; text-align: left; transition: background-color 120ms ease; }
.msg.them .msg-attachment { background: #f5f7fb; border-color: #e3e8ee; }
.msg-attachment:hover { background: rgba(255, 255, 255, 0.24); }
.msg.them .msg-attachment:hover { background: #eaeef4; }
.msg-attachment-icon { font-size: calc(20 * var(--u)); }
.msg-attachment-name { font-size: calc(16 * var(--u)); font-weight: 600; overflow-wrap: anywhere; }
.mc-menu {
  position: absolute; z-index: 65; width: calc(250 * var(--u)); padding: calc(8 * var(--u)) calc(6 * var(--u)); background: #fff; border-radius: calc(12 * var(--u));
  box-shadow: 0 calc(10 * var(--u)) calc(34 * var(--u)) rgba(20, 40, 80, 0.24), 0 0 0 1px rgba(30, 60, 100, 0.07);
  opacity: 0; transform: translateY(calc(4 * var(--u))); pointer-events: none; visibility: hidden;
  transition: opacity 130ms ease, transform 130ms ease, visibility 0s linear 130ms;
}
.mc-menu.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.mc-menu button { display: flex; align-items: center; gap: calc(16 * var(--u)); width: 100%; height: calc(42 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(19 * var(--u)); text-align: left; transition: background-color 90ms ease; }
.mc-menu button:hover { background: #f0f2f5; }
.mc-menu svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); stroke: #1f2329; flex-shrink: 0; }
.mc-menu hr { border: none; border-top: 1px solid var(--line); margin: calc(6 * var(--u)) calc(8 * var(--u)); }
.trans { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 220ms ease, opacity 220ms ease; }
.trans.open { grid-template-rows: 1fr; opacity: 1; }
.trans > div { min-height: 0; overflow: hidden; }
.trans hr { border: none; border-top: 1px solid #d9dde3; margin: calc(12 * var(--u)) 0 calc(11 * var(--u)); }
.ttxt { font-size: calc(19 * var(--u)); }
.tlang { font-size: calc(14 * var(--u)); color: #8a94a6; letter-spacing: 0.02em; margin-bottom: calc(4 * var(--u)); }
.tstat { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(8 * var(--u)); font-size: calc(16 * var(--u)); color: #b4bbc6; }
.tstat svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); color: #b4bbc6; flex-shrink: 0; }
.meeting-card { min-width: calc(250 * var(--u)); }
.meeting-card b { display: block; font-size: calc(18 * var(--u)); margin-bottom: calc(4 * var(--u)); }
.meeting-card span { display: block; font-size: calc(15 * var(--u)); opacity: 0.9; }
.typing .bubble { display: flex; gap: calc(6 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)); }
.typing i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #aab4c3; animation: blink 1.1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 0.18s; } .typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }

.composer { flex-shrink: 0; margin: 0 calc(18 * var(--u)) calc(16 * var(--u)); height: calc(150 * var(--u)); background: #fff; border: 1px solid #e3e8ee; border-radius: calc(11 * var(--u)); position: relative; transition: box-shadow 150ms ease, border-color 150ms ease; }
.composer:focus-within { border-color: #b9d3fa; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(20, 120, 240, 0.08); }
.composer textarea { display: block; width: 100%; height: calc(76 * var(--u)); border: none; outline: none; resize: none; background: transparent; padding: calc(14 * var(--u)) calc(18 * var(--u)) 0; font: inherit; font-size: calc(19 * var(--u)); line-height: 1.4; color: var(--ink); }
.composer textarea::placeholder { color: #98a2b3; }
/* The message box: looks like the real one, but is not a text field. */
.composer-input { display: block; width: 100%; height: calc(76 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)) 0; font-size: calc(19 * var(--u)); line-height: 1.4; color: #98a2b3; cursor: none; user-select: none; -webkit-user-select: none; border-radius: calc(11 * var(--u)) calc(11 * var(--u)) 0 0; }
.composer.qr-open { border-color: #b9d3fa; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(20, 120, 240, 0.08); }
/* Quick replies: a floating card above the composer, in Midea Connect's own style. */
.qr-pop { left: 0; right: 0; bottom: calc(100% + 10 * var(--u)); padding: calc(8 * var(--u)); border: 1px solid #e3e8ee; }
.qr-title { padding: calc(6 * var(--u)) calc(12 * var(--u)) calc(8 * var(--u)); font-size: calc(15 * var(--u)); color: #8a94a6; letter-spacing: 0.02em; }
.qr-item { display: block; width: 100%; text-align: left; padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(9 * var(--u)); font-size: calc(19 * var(--u)); line-height: 1.35; color: var(--ink); background: transparent; transition: background-color 120ms ease, transform 80ms ease; }
.qr-item:hover, .qr-item.kb { background: var(--hover); }
.qr-item:active { background: #dbe8f8; transform: scale(0.99); }

.tools { position: absolute; left: calc(12 * var(--u)); bottom: calc(10 * var(--u)); display: flex; align-items: center; }
.tools .icon-btn { width: calc(50 * var(--u)); height: calc(44 * var(--u)); }
.send { position: absolute; right: calc(14 * var(--u)); bottom: calc(14 * var(--u)); height: calc(52 * var(--u)); width: calc(146 * var(--u)); display: flex; border-radius: calc(7 * var(--u)); overflow: hidden; background: #82bafe; color: #fff; transition: background-color 150ms ease, transform 80ms ease, filter 120ms ease; }
.send.ready { background: #1a7cf5; }
.send.ready:hover { filter: brightness(1.08); }
.send.ready:active { transform: scale(0.98); }
.send .go { width: calc(99 * var(--u)); text-align: center; line-height: calc(52 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 500; }
.send .more { flex: 1; position: relative; border-left: 1px solid rgba(255, 255, 255, 0.4); }
.send .more::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-right: calc(2 * var(--u)) solid #fff; border-bottom: calc(2 * var(--u)) solid #fff; transform: translate(-50%, -75%) rotate(45deg); }

.pop { position: absolute; z-index: 20; background: #fff; border-radius: calc(12 * var(--u)); padding: calc(10 * var(--u)); box-shadow: 0 calc(8 * var(--u)) calc(28 * var(--u)) rgba(20, 40, 80, 0.20), 0 0 0 1px rgba(30, 60, 100, 0.06); opacity: 0; transform: translateY(calc(5 * var(--u))); pointer-events: none; visibility: hidden; transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms; }
.pop.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.emoji-pop { bottom: calc(62 * var(--u)); left: calc(10 * var(--u)); display: grid; grid-template-columns: repeat(6, calc(44 * var(--u))); gap: calc(2 * var(--u)); }
.emoji-pop button { height: calc(44 * var(--u)); font-size: calc(26 * var(--u)); border-radius: calc(8 * var(--u)); transition: background-color 100ms ease; }
.emoji-pop button:hover { background: var(--hover); }
.attach-pop { bottom: calc(62 * var(--u)); left: calc(112 * var(--u)); width: calc(210 * var(--u)); padding: calc(6 * var(--u)); }
.attach-pop button { display: flex; align-items: center; gap: calc(12 * var(--u)); width: 100%; padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(18 * var(--u)); text-align: left; transition: background-color 100ms ease; }
.attach-pop button:hover { background: var(--hover); }
.attach-pop em { font-style: normal; font-size: calc(24 * var(--u)); }

/* ---------- profile panel (used in both views) ---------- */
.profile { width: calc(332 * var(--u)); height: 100%; border-left: 1px solid var(--line); background: #f8f9fb; padding: calc(34 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)); overflow-y: auto; text-align: center; position: relative; }
.profile .close { position: absolute; right: calc(12 * var(--u)); top: calc(10 * var(--u)); width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(24 * var(--u)); color: #8a94a6; transition: background-color 120ms ease; }
.profile .close:hover { background: var(--hover); }
.pf-av { position: relative; width: calc(112 * var(--u)); height: calc(116 * var(--u)); margin: 0 auto calc(14 * var(--u)); }
.pf-av .px { width: 100%; height: 100%; border-radius: calc(16 * var(--u)); }
.pf-av .st, .row-av .st { position: absolute; right: calc(-3 * var(--u)); bottom: calc(-3 * var(--u)); width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; border: calc(3 * var(--u)) solid #f8f9fb; background: #16c15a; }
.st.busy { background: #ff9a1f !important; } .st.offline { background: #b6bdc8 !important; }
.pf-name { font-size: calc(29 * var(--u)); font-weight: 600; }
.pf-sub { margin-top: calc(6 * var(--u)); color: var(--muted); font-size: calc(17 * var(--u)); }
.pf-acts { display: flex; justify-content: space-between; padding: calc(18 * var(--u)) 0 calc(14 * var(--u)); border-bottom: 1px solid var(--line); }
.pf-acts button { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); font-size: calc(14 * var(--u)); border-radius: calc(10 * var(--u)); transition: transform 80ms ease, filter 120ms ease; }
.pf-acts button:hover { filter: brightness(0.94); } .pf-acts button:active { transform: scale(0.95); }
.pf-info { text-align: left; padding: calc(16 * var(--u)) calc(4 * var(--u)); border-bottom: 1px solid var(--line); }
.pf-info div { display: flex; align-items: flex-start; gap: calc(14 * var(--u)); margin-bottom: calc(14 * var(--u)); color: #5d6778; font-size: calc(17 * var(--u)); line-height: 1.4; }
.pf-info a { color: var(--blue); }
.pf-about { text-align: left; padding: calc(16 * var(--u)) calc(4 * var(--u)); }
.pf-about b { font-size: calc(19 * var(--u)); } .pf-about p { margin: calc(8 * var(--u)) 0 0; color: var(--muted); font-size: calc(17 * var(--u)); line-height: 1.5; }
.v-chats .profile { display: block; }

/* ---------- Contacts view ---------- */
.v-contacts { grid-template-columns: calc(240 * var(--u)) calc(400 * var(--u)) 1fr; }
.side { background: var(--panel); border-right: 1px solid var(--line); padding: calc(14 * var(--u)) calc(14 * var(--u)); }
.side button { display: flex; align-items: center; gap: calc(12 * var(--u)); width: 100%; height: calc(52 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: calc(11 * var(--u)); font-size: calc(19 * var(--u)); margin-bottom: calc(4 * var(--u)); text-align: left; transition: background-color 120ms ease; }
.side button:hover { background: var(--hover); }
.side button.active { background: var(--sel); color: var(--blue); }
.tree { background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; padding: calc(12 * var(--u)) calc(10 * var(--u)) calc(24 * var(--u)); min-height: 0; }
.tn-row { display: flex; align-items: center; min-height: calc(34 * var(--u)); padding: calc(4 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u)) 0; border-radius: calc(8 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.25; transition: background-color 110ms ease; }
.tn-row:hover { background: var(--hover); }
.tn-row.sel { background: var(--sel); color: var(--blue); }
.tn-chev { width: calc(24 * var(--u)); flex-shrink: 0; display: grid; place-items: center; }
.tn-chev i { width: 0; height: 0; border-left: calc(6 * var(--u)) solid #8a94a6; border-top: calc(5 * var(--u)) solid transparent; border-bottom: calc(5 * var(--u)) solid transparent; transition: transform 180ms ease; }
.tn.open > .tn-row .tn-chev i { transform: rotate(90deg); }
.tn.root > .tn-row { color: var(--blue); font-weight: 600; }
.tn-kids { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 200ms ease; }
.tn.open > .tn-kids { grid-template-rows: 1fr; }
.tn-kids > div { overflow: hidden; min-height: 0; padding-left: calc(20 * var(--u)); opacity: 0; transition: opacity 200ms ease; }
.tn.open > .tn-kids > div { opacity: 1; }
.tn.root > .tn-kids > div { padding-left: calc(14 * var(--u)); }

.dir { background: var(--main); display: flex; min-width: 0; min-height: 0; }
.dir-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.dir-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: calc(50 * var(--u)); opacity: 0; visibility: hidden; transition: opacity 180ms ease, visibility 0s linear 180ms; }
.dir-empty.show { opacity: 1; visibility: visible; transition-delay: 0s; }
.dir-list { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity 180ms ease, visibility 0s linear 180ms; }
.dir-list.show { opacity: 1; visibility: visible; transition-delay: 0s; }
.dir-head { height: calc(100 * var(--u)); flex-shrink: 0; display: flex; align-items: center; gap: calc(18 * var(--u)); padding: 0 calc(30 * var(--u)) 0 calc(24 * var(--u)); border-bottom: 1px solid var(--line); }
.dir-head .t { flex: 1; } .mc h2 { text-transform: none; letter-spacing: normal; color: inherit; margin: 0; padding: 0; border: none; font-family: inherit; }
.dir-head h2 { font-size: calc(26 * var(--u)); font-weight: 600; } .dir-head p { margin: calc(2 * var(--u)) 0 0; color: var(--muted); font-size: calc(17 * var(--u)); }
.dir-cols { display: grid; grid-template-columns: calc(210 * var(--u)) 1fr calc(84 * var(--u)); height: calc(46 * var(--u)); align-items: center; padding: 0 calc(18 * var(--u)); border-bottom: 1px solid var(--line); color: var(--muted); font-size: calc(17 * var(--u)); flex-shrink: 0; }
.dir-cols button { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); justify-self: start; padding: calc(4 * var(--u)) calc(8 * var(--u)); border-radius: calc(6 * var(--u)); color: var(--muted); }
.dir-cols button:hover { background: var(--hover); }
.dir-cols button.on { color: var(--ink); }
.dir-cols .arrow { border-left: calc(5 * var(--u)) solid transparent; border-right: calc(5 * var(--u)) solid transparent; border-bottom: calc(6 * var(--u)) solid currentColor; transition: transform 160ms ease; }
.dir-cols .arrow.down { transform: rotate(180deg); }
.dir-rows { flex: 1; min-height: 0; overflow-y: auto; padding: 0 calc(12 * var(--u)) calc(16 * var(--u)); }
.dir-row { display: grid; grid-template-columns: calc(210 * var(--u)) 1fr calc(84 * var(--u)); align-items: center; height: calc(60 * var(--u)); padding: 0 calc(6 * var(--u)); border-bottom: 1px solid var(--line); border-radius: 0; transition: background-color 110ms ease; }
.dir-row:hover { background: var(--hover); }
.dir-row.sel { background: var(--sel); }
.dir-row .who { display: flex; align-items: center; gap: calc(14 * var(--u)); min-width: 0; font-size: calc(18 * var(--u)); }
.row-av { position: relative; width: calc(44 * var(--u)); height: calc(46 * var(--u)); flex-shrink: 0; }
.row-av .px { width: 100%; height: 100%; border-radius: calc(9 * var(--u)); }
.row-av .st { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-width: calc(2.5 * var(--u)); border-color: var(--main); right: calc(-4 * var(--u)); bottom: calc(-3 * var(--u)); }
.dir-row .role { color: #6b7688; font-size: calc(17 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: calc(10 * var(--u)); }
.dir-row .acts { display: flex; justify-content: flex-end; gap: calc(4 * var(--u)); }
.dir-row .acts button { width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(9 * var(--u)); display: grid; place-items: center; transition: background-color 110ms ease; }
.dir-row .acts button:hover { background: rgba(20, 90, 200, 0.10); }
.dir-profile { width: 0; overflow: hidden; flex-shrink: 0; transition: width 200ms ease; }
.v-contacts.has-profile .dir-profile { width: calc(332 * var(--u)); }
.dir-profile .profile { width: calc(332 * var(--u)); }

/* ---------- overlays ---------- */
.mc-tip { position: absolute; z-index: 60; padding: calc(6 * var(--u)) calc(12 * var(--u)); background: rgba(31, 35, 41, 0.92); color: #fff; font-size: calc(14 * var(--u)); border-radius: calc(7 * var(--u)); white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(calc(3 * var(--u))); transition: opacity 120ms ease, transform 120ms ease; }
.mc-tip.on { opacity: 1; transform: none; }
.mc-toast { position: absolute; z-index: 70; left: 50%; top: calc(90 * var(--u)); transform: translate(-50%, calc(-8 * var(--u))); padding: calc(12 * var(--u)) calc(22 * var(--u)); background: rgba(31, 35, 41, 0.92); color: #fff; font-size: calc(17 * var(--u)); border-radius: calc(10 * var(--u)); pointer-events: none; opacity: 0; transition: opacity 180ms ease, transform 180ms ease; }
.mc-toast.on { opacity: 1; transform: translate(-50%, 0); }
.mc-hint { position: absolute; z-index: 50; left: 50%; bottom: calc(30 * var(--u)); transform: translate(-50%, calc(8 * var(--u))); display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(11 * var(--u)) calc(20 * var(--u)); background: #fff; color: #3b4658; font-size: calc(17 * var(--u)); border-radius: calc(22 * var(--u)); box-shadow: 0 calc(4 * var(--u)) calc(18 * var(--u)) rgba(20, 40, 80, 0.18), 0 0 0 1px rgba(20, 120, 240, 0.22); opacity: 0; pointer-events: none; transition: opacity 220ms ease, transform 220ms ease; }
.mc-hint.on { opacity: 1; transform: translate(-50%, 0); }
.mc-hint::before { content: ""; width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: var(--blue); }

.mc-modal { position: absolute; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(24, 34, 52, 0.30); opacity: 0; visibility: hidden; transition: opacity 180ms ease, visibility 0s linear 180ms; }
.mc-modal.open { opacity: 1; visibility: visible; transition-delay: 0s; }
.mc-card { width: calc(540 * var(--u)); background: #fff; border-radius: calc(14 * var(--u)); padding: calc(26 * var(--u)) calc(28 * var(--u)) calc(22 * var(--u)); box-shadow: 0 calc(16 * var(--u)) calc(48 * var(--u)) rgba(10, 20, 40, 0.28); transform: translateY(calc(8 * var(--u))); transition: transform 180ms ease; }
.mc-modal.open .mc-card { transform: none; }
.mc-card h3 { margin: 0 0 calc(18 * var(--u)); font-size: calc(24 * var(--u)); font-weight: 600; }
.mc-card label { display: block; margin: calc(14 * var(--u)) 0 calc(6 * var(--u)); font-size: calc(15 * var(--u)); color: var(--muted); }
.mc-card input, .mc-card select { width: 100%; height: calc(46 * var(--u)); border: 1px solid #d9e0e8; border-radius: calc(9 * var(--u)); padding: 0 calc(14 * var(--u)); font: inherit; font-size: calc(18 * var(--u)); background: #fff; color: var(--ink); outline: none; transition: border-color 120ms ease, box-shadow 120ms ease; }
.mc-card input:focus, .mc-card select:focus { border-color: #7fb2f6; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(20, 120, 240, 0.12); }
.mc-card .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(14 * var(--u)); }
.chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); align-items: center; }
.chip { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(4 * var(--u)) calc(6 * var(--u)) calc(4 * var(--u)) calc(5 * var(--u)); background: #eef4fc; border-radius: calc(16 * var(--u)); font-size: calc(16 * var(--u)); }
.chip .px { width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; }
.chip button { width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; color: #6b7688; font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u)); }
.chip button:hover { background: #d8e4f5; }
.chips select { width: auto; height: calc(34 * var(--u)); font-size: calc(15 * var(--u)); padding: 0 calc(8 * var(--u)); }
.mc-btns { display: flex; justify-content: flex-end; gap: calc(12 * var(--u)); margin-top: calc(24 * var(--u)); }
.btn { height: calc(46 * var(--u)); padding: 0 calc(26 * var(--u)); border-radius: calc(9 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 500; background: #eef1f5; transition: background-color 120ms ease, transform 80ms ease, opacity 150ms ease; }
.btn:hover { background: #e3e8ee; } .btn:active { transform: scale(0.97); }
.btn.primary { background: var(--blue); color: #fff; } .btn.primary:hover { background: #0f6ae0; }
.btn:disabled { opacity: 0.45; pointer-events: none; }
.call-card { text-align: center; width: calc(430 * var(--u)); }
.call-card .px { width: calc(92 * var(--u)); height: calc(96 * var(--u)); border-radius: calc(16 * var(--u)); margin: 0 auto calc(14 * var(--u)); }
.call-card p { margin: calc(6 * var(--u)) 0 0; color: var(--muted); font-size: calc(17 * var(--u)); }
.call-card .ring { display: inline-block; animation: blink 1.2s ease-in-out infinite; }

/* Header tool drawn as SVG (AI real time translation), sized like the PNG icons beside it. */
.ic-svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); stroke: var(--ink); }

/* AI real time translation settings: a light modern panel over the chat. */
.tr-layer { position: absolute; inset: 0; z-index: 75; display: flex; align-items: center; justify-content: center; background: rgba(20, 30, 50, 0); visibility: hidden; pointer-events: none; transition: background-color 180ms ease, visibility 0s linear 180ms; }
.tr-layer.open { background: rgba(20, 30, 50, 0.16); visibility: visible; pointer-events: auto; transition-delay: 0s; }
.tr-panel { width: calc(600 * var(--u)); padding: calc(28 * var(--u)) calc(30 * var(--u)) calc(32 * var(--u)); background: #f4f5f7; border-radius: calc(16 * var(--u)); box-shadow: 0 calc(16 * var(--u)) calc(48 * var(--u)) rgba(20, 30, 50, 0.24); opacity: 0; transform: translateY(calc(8 * var(--u))) scale(0.98); transition: opacity 180ms ease, transform 180ms ease; }
.tr-layer.open .tr-panel { opacity: 1; transform: none; }
.tr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(22 * var(--u)); }
.tr-head h3 { margin: 0; font-size: calc(26 * var(--u)); font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; }
.tr-x { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(10 * var(--u)); display: grid; place-items: center; transition: background-color 120ms ease; }
.tr-x:hover { background: rgba(20, 30, 50, 0.07); }
.tr-x svg { width: calc(28 * var(--u)); height: calc(28 * var(--u)); stroke: #4a5464; }
.tr-card { background: #fff; border-radius: calc(12 * var(--u)); padding: calc(22 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)); margin-bottom: calc(16 * var(--u)); }
.tr-card:last-child { margin-bottom: 0; }
.tr-row { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(20 * var(--u)); }
.tr-title { font-size: calc(21 * var(--u)); font-weight: 600; color: var(--ink); line-height: 1.3; }
.tr-card p { margin: calc(12 * var(--u)) calc(60 * var(--u)) 0 0; font-size: calc(18 * var(--u)); line-height: 1.5; color: #8a94a6; }
.tr-switch { position: relative; flex-shrink: 0; width: calc(56 * var(--u)); height: calc(32 * var(--u)); border-radius: calc(16 * var(--u)); background: #d5d9df; transition: background-color 180ms ease; }
.tr-switch i { position: absolute; top: calc(3 * var(--u)); left: calc(3 * var(--u)); width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28); transition: transform 180ms ease; }
.tr-switch.on { background: #1a7cf5; }
.tr-switch.on i { transform: translateX(calc(24 * var(--u))); }
/* Translation inside the player's own (blue) bubble: keep the divider and label readable. */
.msg.me .trans hr { border-top-color: rgba(255, 255, 255, 0.45); }
.msg.me .tlang { color: rgba(255, 255, 255, 0.78); }