:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-soft: #f8faff;
  --line: #e3e8f1;
  --line-strong: #d5ddea;
  --text: #17233a;
  --muted: #728097;
  --blue: #1769ff;
  --blue-soft: #eaf2ff;
  --red: #ef3434;
  --red-soft: #fff0f0;
  --green: #15a85a;
  --green-soft: #ebfff3;
  --yellow: #f4b320;
  --shadow: 0 12px 34px rgba(31, 50, 81, 0.10);
  --radius: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(23, 105, 255, .18); outline-offset: 1px; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.mobile-only { display: none !important; }

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(23,105,255,.14), transparent 32%),
    radial-gradient(circle at 80% 70%, rgba(21,168,90,.10), transparent 30%),
    #f6f8fc;
}
.login-card {
  width: min(420px, 100%);
  padding: 38px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255,255,255,.95);
  box-shadow: var(--shadow);
}
.login-card h1 { margin: 30px 0 6px; font-size: 25px; }
.login-card > label { display: grid; gap: 8px; margin-top: 18px; font-weight: 700; font-size: 14px; }
.login-card input { height: 48px; border: 1px solid var(--line-strong); border-radius: 11px; padding: 0 14px; background: white; }
.login-button { width: 100%; margin-top: 24px; height: 48px; }
.form-error { color: var(--red); min-height: 21px; font-size: 13px; }
.demo-accounts { margin-top: 18px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.demo-accounts summary { cursor: pointer; font-weight: 700; }

.app { width: 100%; height: 100%; background: white; }
.topbar {
  height: 84px;
  display: grid;
  grid-template-columns: 290px minmax(260px, 520px) 1fr;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.98);
  padding: 0 22px;
  position: relative;
  z-index: 30;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand strong, .brand-word { font-size: 28px; letter-spacing: .35px; white-space: nowrap; font-weight: 900; line-height: 1; }
.brand-navy { color: #14213d; }
.brand-blue { color: var(--blue); }
/* 1.0.15: restore original UNICHAT speech-bubble icon, sized to match UniPic brand presence. */
.brand-mark {
  width: 52px; height: 48px; flex: 0 0 52px;
  border: 3px solid var(--blue); border-radius: 13px;
  display: grid; place-items: center; color: var(--blue); background: #fff;
  font-weight: 900; letter-spacing: 3px; font-size: 17px;
  position: relative; line-height: 1; padding-bottom: 6px;
}
.brand-mark::after {
  content: ""; width: 9px; height: 9px;
  border-left: 3px solid var(--blue); border-bottom: 3px solid var(--blue);
  transform: rotate(-18deg); position: absolute; left: 3px; bottom: -7px; background: white;
}
.brand-login strong, .brand-login .brand-word { font-size: 30px; }
.global-search-wrap { position: relative; min-width: 0; }
.global-search-wrap > input {
  width: 100%; height: 48px; border: 1px solid var(--line-strong); border-radius: 11px;
  padding: 0 16px 0 45px; background: #f9fbfe; color: var(--text);
}
.search-icon { position: absolute; left: 16px; top: 11px; font-size: 23px; color: var(--muted); z-index: 2; }
.search-dropdown {
  position: absolute; top: 54px; left: 0; width: min(600px, 80vw); max-height: 450px;
  overflow: auto; background: white; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); z-index: 80;
}
.search-result { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: white; padding: 13px 15px; text-align: left; cursor: pointer; display: grid; gap: 5px; }
.search-result:hover { background: var(--blue-soft); }
.search-result:last-child { border-bottom: 0; }
.search-result-head { display: flex; justify-content: space-between; gap: 14px; font-size: 12px; color: var(--muted); }
.search-result-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-empty { padding: 24px; color: var(--muted); text-align: center; }
.topbar-actions { justify-self: end; display: flex; align-items: center; gap: 12px; }
.icon-button, .circle-button {
  border: 1px solid var(--line-strong); background: white; cursor: pointer; display: inline-grid; place-items: center;
}
.icon-button { width: 44px; height: 44px; border-radius: 11px; font-size: 20px; }
.icon-button.small { width: 38px; height: 38px; border: 0; background: transparent; }
.icon-button:hover, .circle-button:hover, .tool-button:hover { background: var(--blue-soft); border-color: #a8c6ff; }
.circle-button { width: 31px; height: 31px; border-radius: 50%; font-size: 21px; }
.profile-button { border: 0; background: transparent; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 5px 2px; }
.profile-text { display: grid; text-align: left; min-width: 120px; }
.profile-text small { color: var(--muted); font-size: 12px; margin-top: 3px; }
.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; background: #aab4c3; }
.status-dot.online { background: #18b860; box-shadow: 0 0 0 3px rgba(24,184,96,.10); }

.workspace { height: calc(100vh - 84px); display: grid; grid-template-columns: 300px minmax(520px, 1fr) 340px; min-width: 0; }
.sidebar { background: #fbfcff; border-right: 1px solid var(--line); min-width: 0; display: flex; flex-direction: column; overflow: hidden; z-index: 20; }
.sidebar-scroll { flex: 1; overflow-y: auto; padding: 16px 14px; }
.quick-nav { display: grid; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.nav-item { width: 100%; min-height: 40px; border: 0; background: transparent; border-radius: 9px; padding: 8px 10px; display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer; font-weight: 650; }
.nav-item > span:first-child { width: 24px; text-align: center; font-size: 17px; }
.nav-item:hover, .nav-item.active-static { background: var(--blue-soft); color: #175dc9; }
.nav-item b { margin-left: auto; }
.sidebar-section { margin-top: 15px; }
.section-title { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 8px; }
.section-title strong { font-size: 16px; }
.chat-list { display: grid; gap: 3px; }
.chat-row {
  width: 100%; min-height: 48px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto;
  align-items: center; gap: 9px; padding: 5px 7px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; position: relative;
}
.chat-row:hover { background: #f0f4fa; }
.chat-row.active { background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--blue); }
.chat-row-name { min-width: 0; }
.chat-row-name strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.chat-row-name small { color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; margin-top: 3px; }
.count-badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 12px; font-weight: 800; }
.count-badge.red { background: var(--red); }
.count-badge.blue { background: var(--blue); }
.admin-section { border-top: 1px solid var(--line); padding-top: 10px; }
.sidebar-footer { flex: 0 0 auto; border-top: 1px solid var(--line); padding: 10px 14px 14px; }
.legend { display: flex; gap: 13px; flex-wrap: wrap; color: #58677c; font-size: 11px; padding: 9px 7px 0; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }
.legend-dot.red { background: var(--red); }
.legend-dot.blue { background: var(--blue); }
.sidebar.collapsed { width: 84px; }
.sidebar.collapsed .quick-nav .nav-item, .sidebar.collapsed .admin-section .nav-item { font-size: 0; justify-content: center; }
.sidebar.collapsed .section-title strong, .sidebar.collapsed .section-title .circle-button, .sidebar.collapsed .chat-row-name, .sidebar.collapsed .count-badge, .sidebar.collapsed .sidebar-footer .nav-item, .sidebar.collapsed .legend { display: none; }
.sidebar.collapsed .chat-row { grid-template-columns: 1fr; justify-items: center; }
.workspace.sidebar-collapsed { grid-template-columns: 84px minmax(520px, 1fr) 340px; }

.avatar { flex: 0 0 auto; border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden; background: #e8efff; color: #174da9; font-weight: 800; }
.avatar img, .icon-image { width: 100%; height: 100%; object-fit: cover; }
.avatar-small { width: 33px; height: 33px; font-size: 16px; }
.avatar-medium { width: 44px; height: 44px; font-size: 19px; }
.avatar-large { width: 104px; height: 104px; font-size: 46px; }
.avatar-button { border: 0; cursor: pointer; }
.room-icon { border-radius: 50%; width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; font-size: 19px; font-weight: 800; background: #eef3ff; }

.chat-panel { min-width: 0; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; background: white; position: relative; }
.chat-header { min-height: 132px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); padding: 14px 18px; transition: background-color .18s ease; }
.chat-identity { min-width: 250px; display: flex; align-items: center; gap: 13px; }
.chat-title-wrap { min-width: 0; }
.chat-title-line { display: flex; align-items: center; gap: 8px; }
.chat-title-line h2 { margin: 0; font-size: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.star-button { border: 0; background: transparent; cursor: pointer; font-size: 28px; color: #8996aa; }
.chat-members { color: #536176; font-size: 13px; margin-top: 7px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.member-add { border: 1px solid var(--line-strong); border-radius: 999px; background: white; padding: 4px 12px; cursor: pointer; font-weight: 700; }
.member-add:hover { border-color: var(--blue); color: var(--blue); }
.chat-tools { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.tool-button { min-height: 43px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 9px; background: white; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-weight: 700; white-space: nowrap; }
.tool-button.compact { width: 44px; padding: 0; justify-content: center; font-size: 21px; }
.translate-toggle { display: grid; line-height: 1.15; min-width: 122px; }
.translate-toggle small { font-size: 10px; margin-top: 3px; }
.translate-toggle.green { color: var(--green); border-color: #7bd99f; }
.translate-toggle.blue { color: var(--blue); border-color: #8eb5ff; }
.translate-toggle.active.green { background: var(--green-soft); box-shadow: inset 0 0 0 1px var(--green); }
.translate-toggle.active.blue { background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); }
.chat-subnav { min-height: 54px; display: flex; align-items: center; border-bottom: 1px solid var(--line); padding: 0 18px; gap: 8px; }
.subnav-button { border: 0; border-right: 1px solid var(--line); background: transparent; height: 36px; padding: 0 16px 0 4px; cursor: pointer; font-weight: 700; }
.subnav-button:hover { color: var(--blue); }
.subnav-button b:not(:empty) { background: var(--red); color: white; border-radius: 999px; padding: 2px 7px; margin-left: 5px; font-size: 11px; }
.subnav-spacer { flex: 1; }
.sort-label { color: var(--muted); font-size: 12px; }
.sort-label select { border: 0; color: var(--text); background: transparent; }

.empty-state { grid-row: 3 / span 2; display: grid; align-content: center; justify-items: center; color: var(--muted); gap: 10px; }
.empty-state h2 { font-size: 18px; font-weight: 600; }
.empty-illustration { width: 90px; height: 90px; border-radius: 28px; display: grid; place-items: center; background: var(--blue-soft); font-size: 42px; }
.message-area { overflow-y: auto; padding: 20px 24px 28px; scroll-behavior: smooth; background: #fff; }
.day-divider { display: flex; align-items: center; justify-content: center; margin: 4px 0 22px; }
.day-divider span { background: #f0f3f8; color: #536176; border-radius: 999px; padding: 6px 18px; font-size: 12px; }
.message { display: grid; grid-template-columns: 42px minmax(0, 720px) 120px; gap: 10px; margin: 0 0 20px; align-items: start; position: relative; }
.message.mine { grid-template-columns: 120px minmax(0, 720px) 42px; justify-content: end; }
.message.mine .message-avatar { grid-column: 3; }
.message.mine .message-main { grid-column: 2; grid-row: 1; }
.message.mine .message-actions { grid-column: 1; grid-row: 1; justify-self: end; }
.message-main { min-width: 0; }
.message-meta { display: flex; align-items: center; gap: 9px; padding: 0 4px 7px; font-size: 13px; }
.message.mine .message-meta { justify-content: flex-end; }
.message-meta time { color: var(--muted); font-size: 11px; }
.message-bubble { border: 1px solid var(--line); border-radius: 13px; padding: 13px 15px 10px; background: #f9fbfe; box-shadow: 0 2px 8px rgba(35,55,90,.03); }
.message.mine .message-bubble { background: linear-gradient(135deg, #f1fbf5, #f5fff8); border-color: #d6eadf; }
.message.highlight .message-bubble { animation: highlightPulse 2.2s ease; }
@keyframes highlightPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(23,105,255,0); } 20%,70% { box-shadow: 0 0 0 5px rgba(23,105,255,.22); } }
.message-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; font-size: 14px; }
.deleted-message { color: var(--muted); font-style: italic; }
.edited { color: var(--muted); font-size: 10px; margin-left: 8px; }
.reply-quote { border-left: 3px solid var(--blue); background: rgba(23,105,255,.06); padding: 8px 10px; margin-bottom: 10px; border-radius: 0 8px 8px 0; cursor: pointer; }
.reply-quote strong { display: block; color: #2d5faa; font-size: 11px; margin-bottom: 2px; }
.reply-quote span { font-size: 12px; color: #4c5a6d; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.translation-block { display: flex; align-items: flex-start; gap: 10px; border-top: 1px solid var(--line); margin-top: 11px; padding-top: 10px; }
.translation-label { flex: 0 0 auto; border: 1px solid #79a5ff; color: var(--blue); padding: 3px 7px; border-radius: 6px; font-size: 10px; font-weight: 800; }
.translation-label.chinese { color: var(--green); border-color: #75d39c; }
.translation-text { white-space: pre-wrap; line-height: 1.55; font-size: 13px; }
.translate-message-button { border: 1px solid #a8c6ff; background: white; color: var(--blue); padding: 4px 9px; border-radius: 7px; font-size: 11px; cursor: pointer; margin-top: 10px; }
.attachments-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 7px; margin-top: 10px; }
.attachment-image { display: block; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: white; min-height: 90px; cursor: pointer; }
.attachment-image img { display: block; width: 100%; height: 105px; object-fit: cover; }
.attachment-file { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: white; border-radius: 9px; padding: 10px; color: inherit; text-decoration: none; min-width: 0; }
.attachment-file:hover { border-color: var(--blue); }
.attachment-file-name { min-width: 0; }
.attachment-file-name strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.attachment-file-name small { color: var(--muted); font-size: 10px; }
.message-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 9px; color: #536176; font-size: 11px; }
.read-receipt { border: 0; background: transparent; cursor: pointer; color: #536176; padding: 0; display: inline-flex; align-items: center; gap: 5px; }
.read-avatars { display: inline-flex; }
.read-avatars .mini-avatar { margin-left: -3px; }
.mini-avatar { width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 50%; background: #eaf0fb; border: 2px solid white; font-size: 10px; overflow: hidden; }
.mini-avatar img { width: 100%; height: 100%; object-fit: cover; }
.message-actions { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; padding-top: 28px; }
.message.mine .message-actions { justify-content: flex-end; }
.action-button { min-height: 34px; border: 1px solid var(--line); border-radius: 9px; background: white; padding: 0 9px; cursor: pointer; color: #56657b; }
.action-button:hover { border-color: var(--blue); color: var(--blue); }
.action-button.active { color: var(--blue); border-color: #91b8ff; background: var(--blue-soft); }
.action-button.needs { color: var(--blue); border-color: #91b8ff; }
.reaction-strip { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.reaction-chip { border: 1px solid var(--line); background: white; border-radius: 999px; padding: 4px 8px; cursor: pointer; font-size: 12px; }
.reaction-chip.mine { border-color: #8bb1ff; background: var(--blue-soft); }
.reaction-picker { display: grid; grid-template-columns: repeat(8, 34px); gap: 7px; padding: 10px; width: 352px; background: white; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); position: fixed; z-index: 110; }
.reaction-picker button { border: 0; background: transparent; font-size: 22px; cursor: pointer; padding: 4px; width: 34px; height: 34px; display: grid; place-items: center; }

.composer { border-top: 1px solid var(--line); padding: 10px 16px 8px; background: white; }
.drop-zone { min-height: 38px; border: 1px dashed #7da9ff; border-radius: 8px; display: grid; place-items: center; color: #50617b; font-size: 12px; margin-bottom: 7px; transition: .15s; }
.drop-zone.dragging { background: var(--blue-soft); border-width: 2px; color: var(--blue); }
.composer-row { display: flex; align-items: flex-end; gap: 8px; }
.attach-button { min-height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; display: inline-flex; align-items: center; cursor: pointer; white-space: nowrap; }
#message-input { flex: 1; min-height: 42px; max-height: 130px; resize: none; border: 0; padding: 10px 4px; line-height: 1.5; }
.needs-reply-check { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; padding: 0 4px 10px; }
.send-button, .primary-button { border: 0; background: var(--blue); color: white; border-radius: 9px; font-weight: 800; cursor: pointer; }
.send-button { min-width: 120px; height: 46px; display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 15px; }
.send-button:hover, .primary-button:hover { background: #0956df; }
.send-button:disabled { opacity: .5; cursor: wait; }
.composer-hint { display: block; text-align: right; color: var(--muted); margin-top: 3px; font-size: 10px; }
.reply-preview { margin-bottom: 7px; border-left: 3px solid var(--blue); background: var(--blue-soft); border-radius: 0 8px 8px 0; padding: 8px 10px; font-size: 12px; display: flex; justify-content: space-between; gap: 12px; }
.reply-preview button { border: 0; background: transparent; cursor: pointer; }
.file-preview { display: flex; gap: 7px; overflow-x: auto; margin-bottom: 7px; }
.file-chip { flex: 0 0 auto; max-width: 240px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font-size: 11px; }
.file-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-chip button { border: 0; background: transparent; cursor: pointer; }

.right-panel { border-left: 1px solid var(--line); background: #fbfcfe; padding: 12px; display: grid; grid-template-rows: minmax(150px, .8fr) minmax(190px, 1fr) minmax(250px, 1.45fr); gap: 10px; overflow: hidden; }
.summary-card { border: 1px solid var(--line); border-radius: 12px; background: white; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden; }
.summary-card > header { display: flex; justify-content: space-between; align-items: center; padding: 13px 13px 10px; }
.summary-card > header strong { font-size: 13px; }
.summary-card > header button { border: 0; background: transparent; color: var(--blue); font-size: 11px; cursor: pointer; }
.summary-list { overflow-y: auto; padding: 0 8px 10px; display: grid; align-content: start; gap: 7px; }
.summary-item { width: 100%; border: 0; border-radius: 9px; background: #f9fbfe; padding: 9px; text-align: left; cursor: pointer; display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 8px; }
.summary-item:hover { background: var(--blue-soft); }
.needs-card .summary-item { background: var(--red-soft); }
.summary-item-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: white; overflow: hidden; font-size: 14px; }
.summary-item-icon img { width: 100%; height: 100%; object-fit: cover; }
.summary-item-body { min-width: 0; }
.summary-item-head { display: flex; gap: 8px; justify-content: space-between; align-items: center; }
.summary-item-head strong { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.summary-item-head time { font-size: 9px; color: var(--muted); flex: 0 0 auto; }
.summary-item-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #4f5e72; font-size: 10px; margin-top: 4px; }
.summary-empty { color: var(--muted); text-align: center; font-size: 11px; padding: 18px 5px; }

.modal-root { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(22,32,51,.46); backdrop-filter: blur(2px); }
.modal-card { position: relative; width: min(760px, 100%); max-height: min(88vh, 900px); display: grid; grid-template-rows: auto minmax(0,1fr) auto; background: white; border-radius: 18px; box-shadow: 0 24px 70px rgba(22,36,63,.24); overflow: hidden; }
.modal-card.wide { width: min(1050px, 100%); }
.modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding: 15px 18px; }
.modal-header h2 { margin: 0; font-size: 19px; }
.modal-body { min-height: 0; overflow: auto; padding: 18px; }
.modal-footer { border-top: 1px solid var(--line); padding: 12px 18px; display: flex; justify-content: flex-end; gap: 10px; }
.secondary-button { border: 1px solid var(--line-strong); background: white; border-radius: 9px; min-height: 41px; padding: 0 16px; cursor: pointer; font-weight: 700; }
.primary-button { min-height: 41px; padding: 0 18px; }
.danger-button { border: 0; background: var(--red); color: white; border-radius: 9px; min-height: 41px; padding: 0 16px; cursor: pointer; font-weight: 800; }
.form-grid { display: grid; gap: 15px; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
.form-field { display: grid; gap: 7px; font-size: 13px; font-weight: 700; }
.form-field input, .form-field select, .form-field textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 9px; min-height: 42px; padding: 9px 11px; background: white; }
.icon-editor { display: grid; grid-template-columns: 70px minmax(0,1fr); gap: 15px; align-items: center; }
.icon-preview { width: 64px; height: 64px; border-radius: 50%; background: var(--blue-soft); display: grid; place-items: center; overflow: hidden; font-size: 28px; font-weight: 800; }
.icon-preview img { width: 100%; height: 100%; object-fit: cover; }
.icon-editor-actions { display: flex; gap: 8px; margin-top: 8px; }
.member-check-list { display: grid; gap: 8px; max-height: 380px; overflow: auto; }
.member-check { display: grid; grid-template-columns: auto 38px 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 9px; }
.member-check input { width: 17px; height: 17px; }
.role-tag { font-size: 10px; padding: 3px 7px; border-radius: 999px; background: #eef2f8; color: #596a80; }
.user-list { display: grid; gap: 9px; }
.user-row { display: grid; grid-template-columns: 45px minmax(0,1fr) auto auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 11px; padding: 10px; }
.user-row-meta strong { display: block; }
.user-row-meta small { color: var(--muted); }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.media-card { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: white; }
.media-card img { display: block; width: 100%; height: 145px; object-fit: cover; background: #f5f7fb; }
.media-card-body { padding: 9px; }
.media-card-body strong { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-card-body small { color: var(--muted); font-size: 10px; }
.media-card-actions { display: flex; gap: 5px; margin-top: 8px; }
.media-card-actions button, .media-card-actions a { flex: 1; border: 1px solid var(--line); border-radius: 7px; background: white; color: inherit; text-decoration: none; padding: 6px; text-align: center; font-size: 10px; cursor: pointer; }
.file-list-modal { display: grid; gap: 9px; }
.file-list-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.file-list-row .file-type { width: 42px; height: 42px; display: grid; place-items: center; background: var(--blue-soft); border-radius: 9px; font-size: 18px; }
.read-list { display: grid; gap: 8px; }
.read-row { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; padding: 8px; border-bottom: 1px solid var(--line); }
.message-menu-list { display: grid; gap: 5px; }
.message-menu-list button { border: 0; background: white; padding: 10px 12px; border-radius: 8px; text-align: left; cursor: pointer; }
.message-menu-list button:hover { background: var(--blue-soft); }
.message-menu-list button.danger { color: var(--red); }
.flag-list-modal { display: grid; gap: 8px; }
.flag-list-row { border: 1px solid var(--line); border-radius: 10px; padding: 11px; cursor: pointer; background: white; }
.flag-list-row:hover { border-color: #9abaff; background: var(--blue-soft); }
.flag-list-head { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; gap: 12px; }
.flag-list-row p { margin: 7px 0 0; font-size: 13px; line-height: 1.45; }
.menu-popover { position: fixed; z-index: 150; min-width: 190px; background: white; border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); padding: 6px; }
.menu-popover button { width: 100%; border: 0; background: transparent; border-radius: 7px; padding: 9px 10px; text-align: left; cursor: pointer; }
.menu-popover button:hover { background: var(--blue-soft); }

.toast-container { position: fixed; right: 18px; bottom: 18px; z-index: 300; display: grid; gap: 8px; }
.toast { min-width: 260px; max-width: 430px; padding: 12px 15px; color: white; border-radius: 10px; background: #26354e; box-shadow: var(--shadow); animation: toastIn .2s ease; }
.toast.error { background: #bc2d2d; }
.toast.success { background: #16834b; }
@keyframes toastIn { from { transform: translateY(10px); opacity: 0; } }

@media (max-width: 1280px) {
  .workspace { grid-template-columns: 280px minmax(500px,1fr) 310px; }
  .topbar { grid-template-columns: 270px minmax(240px, 460px) 1fr; }
  .tool-button { padding: 0 10px; }
  .tool-button > span { display: none; }
  .message { grid-template-columns: 42px minmax(0, 1fr) 102px; }
  .message.mine { grid-template-columns: 102px minmax(0,1fr) 42px; }
}

@media (max-width: 1080px) {
  .workspace { grid-template-columns: 270px minmax(0,1fr); }
  .right-panel { display: none !important; }
  .topbar { grid-template-columns: 245px minmax(240px, 1fr) auto; }
  .profile-text { display: none; }
  .chat-header { align-items: flex-start; }
  .chat-tools { max-width: 55%; }
  .translate-toggle { min-width: 112px; }
  .workspace.sidebar-collapsed { grid-template-columns: 84px minmax(0,1fr); }
}

@media (max-width: 760px) {
  html, body { overflow: hidden; }
  .mobile-only { display: inline-grid !important; }
  .topbar { height: 64px; grid-template-columns: auto auto minmax(0,1fr) auto; gap: 8px; padding: 0 10px; }
  .brand strong, .brand-word { font-size: 21px; }
  .brand-mark { width: 38px; height: 35px; flex-basis: 38px; border-width: 2px; border-radius: 10px; font-size: 12px; padding-bottom: 4px; }
  .brand-mark::after { width: 7px; height: 7px; border-width: 0 0 2px 2px; left: 2px; bottom: -5px; }
  .global-search-wrap input { height: 40px; padding-left: 36px; font-size: 12px; }
  .search-icon { left: 12px; top: 8px; }
  #help-button { display: none; }
  .profile-button > span:last-child { display: none; }
  .avatar-medium { width: 38px; height: 38px; }
  .workspace { height: calc(100vh - 64px); display: block; }
  .sidebar { position: fixed; top: 64px; bottom: 0; left: 0; width: min(88vw, 330px); transform: translateX(-105%); box-shadow: var(--shadow); transition: transform .2s ease; }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; inset: 64px 0 0; background: rgba(22,32,51,.38); z-index: 15; }
  .chat-panel { height: 100%; grid-template-rows: auto auto minmax(0,1fr) auto; }
  .chat-header { min-height: auto; padding: 10px; display: grid; gap: 10px; }
  .chat-identity { min-width: 0; }
  .avatar-large { width: 64px; height: 64px; font-size: 28px; }
  .chat-title-line h2 { font-size: 19px; }
  .chat-members { font-size: 11px; }
  .chat-tools { max-width: 100%; width: 100%; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 2px; }
  .tool-button { min-height: 38px; font-size: 11px; flex: 0 0 auto; }
  .translate-toggle { min-width: 108px; }
  .chat-subnav { min-height: 44px; padding: 0 9px; }
  .sort-label { display: none; }
  .message-area { padding: 14px 10px 18px; }
  .message, .message.mine { grid-template-columns: 34px minmax(0,1fr); gap: 7px; }
  .message .message-avatar { grid-column: 1; }
  .message .message-main { grid-column: 2; grid-row: 1; }
  .message.mine .message-avatar { grid-column: 2; justify-self: end; }
  .message.mine .message-main { grid-column: 1 / span 2; grid-row: 2; margin-left: 35px; }
  .message-actions, .message.mine .message-actions { grid-column: 2; grid-row: 2; padding-top: 5px; justify-content: flex-start; }
  .message.mine .message-actions { grid-column: 1 / span 2; grid-row: 3; justify-content: flex-end; }
  .message-bubble { padding: 11px; }
  .composer { padding: 7px; }
  .drop-zone { display: none; }
  .composer-row { align-items: center; }
  .attach-button { width: 42px; padding: 0; justify-content: center; font-size: 0; }
  .attach-button::first-letter { font-size: 18px; }
  .needs-reply-check { position: absolute; bottom: 54px; right: 8px; background: white; border: 1px solid var(--line); border-radius: 7px; padding: 5px 7px; }
  .send-button { min-width: 62px; font-size: 0; }
  .send-button span { font-size: 20px; }
  .composer-hint { display: none; }
  .modal-root { padding: 8px; }
  .modal-card { max-height: 95vh; border-radius: 14px; }
  .form-grid.two { grid-template-columns: 1fr; }
  .media-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .search-dropdown { position: fixed; top: 60px; left: 8px; right: 8px; width: auto; }
}

/* Keep the conversation and composer inside the available viewport. */
.workspace, .chat-panel { min-height: 0; overflow: hidden; }
.message-area { min-height: 0; }
.chat-identity { min-width: 215px; }
.chat-tools .tool-button { padding-left: 9px; padding-right: 9px; font-size: 12px; }
.chat-tools .translate-toggle { min-width: 108px; }
.room-chat-row {
  background: color-mix(in srgb, var(--room-color) 7%, white);
}
.room-chat-row:hover {
  background: color-mix(in srgb, var(--room-color) 12%, white);
}
.room-chat-row.active {
  background: color-mix(in srgb, var(--room-color) 18%, white);
  box-shadow: inset 3px 0 0 var(--room-color);
}
@media (min-width: 1281px) {
  .chat-header {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 590px;
  }
  .chat-tools {
    flex-wrap: nowrap;
  }
}
@media (max-width: 760px) {
  .chat-subnav {
    overflow-x: auto;
    overflow-y: hidden;
    align-items: center;
  }
  .subnav-button {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-right: 12px;
  }
  .subnav-button b:not(:empty) {
    display: inline-flex;
    white-space: nowrap;
  }
  .attach-button::after {
    content: "📎";
    font-size: 18px;
  }
}

/* ===== UNICHAT 0.3.1 usability revisions ===== */
.status-dot.offline { background: #aab4c3; box-shadow: none; }
.presence-line { display: inline-flex !important; align-items: center; gap: 2px; }

/* Registered icon position and zoom are shared by every screen. */
.avatar img,
.room-icon img,
.icon-preview img,
.summary-item-icon img,
.mini-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  transform: translate(var(--icon-x, 0%), var(--icon-y, 0%)) scale(var(--icon-scale, 1));
  will-change: transform;
}

/* Show the full attached image without cropping it. */
.attachment-image {
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  appearance: none;
}
.attachment-image img {
  width: 100%;
  height: 105px;
  object-fit: contain;
  background: #f4f6fa;
}
.media-card > .media-preview-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #f4f6fa;
  cursor: pointer;
}
.media-card img { object-fit: contain; background: #f4f6fa; }
.attachment-file { width: 100%; text-align: left; cursor: pointer; }
button.attachment-file { font: inherit; color: inherit; }

/* Strong search result indication. */
.message.highlight .message-bubble {
  background: #fff8c9 !important;
  border: 3px solid #f29924 !important;
  box-shadow: 0 0 0 6px rgba(242, 153, 36, .22), 0 12px 30px rgba(155, 93, 7, .18) !important;
  animation: searchHighlightPulse 1s ease-in-out 0s 3;
}
.message-text mark,
.search-result-text mark {
  background: #ffcc57;
  color: #5c3100;
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 900;
}
@keyframes searchHighlightPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012); }
}

/* Two-line message box plus a separate drop target on the right. */
.composer { padding: 10px 14px 9px; }
.composer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 12px;
  align-items: stretch;
}
.composer-message-box {
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(30, 48, 78, .035);
}
#message-input {
  display: block;
  width: 100%;
  min-height: 68px;
  max-height: 150px;
  resize: none;
  border: 0;
  padding: 12px 14px 8px;
  line-height: 1.55;
  background: transparent;
}
.composer-toolbar {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-top: 1px solid #edf0f5;
  background: #fbfcff;
}
.composer-toolbar .composer-hint { margin-left: auto; text-align: right; }
.composer-toolbar .needs-reply-check { padding: 0 6px; }
.composer-toolbar .send-button { min-width: 108px; height: 40px; }
.drop-zone {
  min-height: 118px;
  margin: 0;
  padding: 14px;
  border: 2px dashed #79a8ff;
  border-radius: 12px;
  background: #edf5ff;
  color: #285aab;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  cursor: copy;
}
.drop-zone strong { font-size: 13px; }
.drop-zone small { color: #647b9d; line-height: 1.45; }
.drop-zone.dragging {
  background: #dceaff;
  border-color: var(--blue);
  box-shadow: inset 0 0 0 2px rgba(23, 105, 255, .15);
  transform: translateY(-1px);
}

/* Icon cropping editor. */
.icon-editor { grid-template-columns: 180px minmax(0, 1fr); align-items: start; }
.icon-preview-wrap { display: grid; justify-items: center; gap: 8px; }
.icon-preview {
  width: 160px;
  height: 160px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  border: 2px solid #dbe5f5;
  box-shadow: 0 8px 24px rgba(40, 65, 105, .10);
}
.icon-preview.dragging { cursor: grabbing; border-color: var(--blue); }
.icon-crop-hint { color: var(--muted); font-size: 11px; text-align: center; }
.icon-crop-controls { display: grid; gap: 9px; margin-top: 12px; }
.icon-crop-controls.hidden-crop { display: none; }
.zoom-row { display: grid; grid-template-columns: auto minmax(100px, 1fr) 52px; gap: 9px; align-items: center; font-size: 12px; }
.zoom-row input[type="range"] { min-height: auto; padding: 0; }
.icon-reset-button { justify-self: start; min-height: 34px; padding: 0 11px; }

/* Same-screen image and PDF preview. */
.attachment-preview { min-height: 62vh; display: grid; place-items: center; background: #eef1f6; border-radius: 12px; overflow: hidden; }
.attachment-preview img { display: block; max-width: 100%; max-height: 72vh; object-fit: contain; }
.attachment-preview iframe { display: block; width: 100%; height: 72vh; border: 0; background: white; }
.preview-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.preview-actions a { text-decoration: none; display: inline-flex; align-items: center; }

.reaction-user-list { display: grid; gap: 7px; }
.reaction-user-row { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 9px; border-bottom: 1px solid var(--line); }
.reaction-user-row:last-child { border-bottom: 0; }
.reaction-picker button.selected { background: var(--blue-soft); border-radius: 50%; box-shadow: inset 0 0 0 2px #7da9ff; }

.settings-card { border: 1px solid var(--line); border-radius: 12px; padding: 15px; display: grid; gap: 12px; }
.settings-card h3 { margin: 0; }
.setting-status { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; }
.setting-status.good { color: var(--green); }
.setting-status.bad { color: #a25b14; }
.setting-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.setting-note { background: #f5f8fd; border-radius: 9px; padding: 10px; color: #596a80; font-size: 12px; line-height: 1.55; }

.mobile-chat-button {
  border: 1px solid var(--line-strong);
  background: white;
  border-radius: 8px;
  min-height: 34px;
  padding: 0 9px;
  color: #42608a;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.mobile-summary-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.mobile-summary-tabs button { border: 1px solid var(--line); border-radius: 8px; background: white; min-height: 42px; font-weight: 800; font-size: 11px; }
.mobile-summary-tabs button.active { color: var(--blue); border-color: #84adff; background: var(--blue-soft); }
.mobile-search-layout { display: grid; gap: 10px; }
.mobile-search-layout input { width: 100%; min-height: 46px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 12px; }
.mobile-translation-list { display: grid; gap: 10px; }
.mobile-translation-list .translate-toggle { width: 100%; min-height: 60px; }

@media (max-width: 1180px) {
  .composer-layout { grid-template-columns: minmax(0, 1fr) 190px; }
  .drop-zone strong { font-size: 12px; }
  .drop-zone small { font-size: 10px; }
}

@media (max-width: 1080px) {
  .mobile-summary-button { display: inline-grid !important; place-items: center; }
}

@media (max-width: 760px) {
  .topbar {
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 8px;
  }
  .global-search-wrap { display: none; }
  .topbar-actions { justify-self: end; }
  .chat-header { gap: 8px; }
  .chat-identity { width: 100%; }
  .chat-title-wrap { flex: 1; }
  .chat-title-line { width: 100%; min-width: 0; }
  .chat-title-line h2 { flex: 1; min-width: 0; }
  .mobile-summary-button, .mobile-chat-menu-button { display: inline-grid !important; place-items: center; }
  .chat-tools {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    overflow: visible;
    padding: 0;
  }
  .chat-tools .tool-button {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0 5px;
    justify-content: center;
    font-size: 11px;
  }
  .chat-tools .tool-button > span { display: inline; }
  .chat-tools .desktop-label { display: none; }
  #auto-zh-ja, #auto-ja-zh, #chat-menu-button { display: none !important; }
  #mobile-translate-button { display: inline-flex !important; }
  .chat-subnav { display: none; }
  .chat-panel { grid-template-rows: auto minmax(0, 1fr) auto; }
  .message-area { grid-row: 2; }
  .composer { grid-row: 3; padding: 7px; }
  .composer-layout { display: block; }
  .drop-zone { display: none; }
  .composer-message-box { border-radius: 11px; }
  #message-input { min-height: 62px; padding: 10px 11px 7px; }
  .composer-toolbar { gap: 4px; padding: 5px; }
  .composer-toolbar .attach-button { width: 40px; padding: 0; justify-content: center; font-size: 0; }
  .composer-toolbar .attach-button > span { display: none; }
  .composer-toolbar .attach-button::before { content: "📎"; font-size: 18px; }
  .composer-toolbar .needs-reply-check { position: static; padding: 0 4px; background: transparent; border: 0; font-size: 10px; }
  .composer-toolbar .send-button { min-width: 58px; width: 58px; font-size: 0; }
  .composer-toolbar .send-button span { font-size: 19px; }
  .composer-toolbar .composer-hint { display: none; }
  .icon-editor { grid-template-columns: 1fr; }
  .icon-preview { width: 150px; height: 150px; }
  .attachment-preview { min-height: 55vh; }
  .attachment-preview iframe { height: 65vh; }
  .file-list-row { grid-template-columns: 38px minmax(0,1fr); }
  .file-list-row > span:last-child { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
}

/* Final mobile polish. */
.flag-list-identity { display: inline-flex; align-items: center; min-width: 0; }
.mobile-summary-list, .mobile-search-results { display: grid; gap: 8px; }
.mobile-translation-note { margin: -5px 4px 2px; font-size: 11px; }
@media (max-width: 760px) {
  .composer-toolbar .attach-button::after { content: none !important; }
  .mobile-search-results { max-height: 60vh; overflow: auto; }
  .mobile-summary-list { max-height: 63vh; overflow: auto; }
}
.drop-zone { min-width: 0; overflow: hidden; }
.drop-zone strong, .drop-zone small { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
/* Prevent the redesigned composer from growing underneath the right panel. */
.chat-panel, .composer, .composer-layout { min-width: 0; }
.composer { width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; }
.composer-layout { width: 100%; max-width: 100%; box-sizing: border-box; }
.chat-panel { grid-template-columns: minmax(0, 1fr); }

/* UNICHAT 0.3.3: adjustable three-column layout and 10-level per-user text size. */
:root { --ui-font-scale: 1; }
html[data-font-size="1"]  { --ui-font-scale: .90; }
html[data-font-size="2"]  { --ui-font-scale: 1.00; }
html[data-font-size="3"]  { --ui-font-scale: 1.10; }
html[data-font-size="4"]  { --ui-font-scale: 1.20; }
html[data-font-size="5"]  { --ui-font-scale: 1.30; }
html[data-font-size="6"]  { --ui-font-scale: 1.40; }
html[data-font-size="7"]  { --ui-font-scale: 1.50; }
html[data-font-size="8"]  { --ui-font-scale: 1.62; }
html[data-font-size="9"]  { --ui-font-scale: 1.75; }
html[data-font-size="10"] { --ui-font-scale: 1.90; }

@media (min-width: 1081px) {
  .workspace {
    --left-panel-width: 290px;
    --right-panel-width: 370px;
    grid-template-columns:
      var(--left-panel-width)
      6px
      minmax(480px, 1fr)
      6px
      var(--right-panel-width) !important;
  }
  .workspace.sidebar-collapsed {
    grid-template-columns: 84px 6px minmax(480px, 1fr) 6px var(--right-panel-width) !important;
  }
  .column-resizer {
    display: block;
    position: relative;
    z-index: 24;
    cursor: col-resize;
    background: #f2f5fa;
    border-left: 1px solid #e1e6ef;
    border-right: 1px solid #e1e6ef;
    touch-action: none;
    user-select: none;
  }
  .column-resizer::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 42px;
    border-left: 2px dotted #a7b3c5;
    transform: translate(-50%, -50%);
    opacity: .8;
  }
  .column-resizer:hover,
  .column-resizer.active { background: #e7f0ff; border-color: #8eb5ff; }
  .column-resizer:hover::after,
  .column-resizer.active::after { border-color: var(--blue); }
  body.resizing-columns { cursor: col-resize !important; user-select: none !important; }
  body.resizing-columns * { cursor: col-resize !important; }
}

@media (max-width: 1080px) {
  .column-resizer { display: none !important; }
}

/* Keep the right summary readable and reveal more text as the panel is widened. */
.right-panel {
  min-width: 0;
  overflow: hidden;
  container-type: inline-size;
  container-name: unichat-right-panel;
}
.summary-card, .summary-list, .summary-item, .summary-item-body { min-width: 0; max-width: 100%; }
.summary-list { overflow-x: hidden; }
.summary-item-text {
  display: -webkit-box;
  max-width: 100%;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 1.45;
}
.summary-item-head { min-width: 0; }
.summary-item-head strong { min-width: 0; }

/* A medium right column shows several lines instead of a fixed character cut-off. */
@container unichat-right-panel (min-width: 410px) {
  .summary-item-text { -webkit-line-clamp: 3; }
}

/* Once the user gives the right column enough width, show the complete message. */
@container unichat-right-panel (min-width: 520px) {
  .summary-item-text {
    display: block;
    overflow: visible;
    text-overflow: clip;
    -webkit-line-clamp: unset;
  }
}

/* User-selectable font size: menus, chat, summaries and composer. */
.nav-item { font-size: calc(14px * var(--ui-font-scale)); }
.section-title strong { font-size: calc(16px * var(--ui-font-scale)); }
.chat-row-name strong { font-size: calc(14px * var(--ui-font-scale)); }
.chat-row-name small, .presence-line { font-size: calc(11px * var(--ui-font-scale)); }
.chat-title-line h2 { font-size: calc(25px * var(--ui-font-scale)); }
.chat-members { font-size: calc(13px * var(--ui-font-scale)); }
.tool-button { font-size: calc(12px * var(--ui-font-scale)); }
.subnav-button, .sort-label { font-size: calc(12px * var(--ui-font-scale)); }
.message-meta { font-size: calc(13px * var(--ui-font-scale)); }
.message-meta time { font-size: calc(11px * var(--ui-font-scale)); }
.message-text { font-size: calc(14px * var(--ui-font-scale)); }
.translation-text { font-size: calc(13px * var(--ui-font-scale)); }
.reply-quote span { font-size: calc(12px * var(--ui-font-scale)); }
.message-footer, .reaction-chip { font-size: calc(11px * var(--ui-font-scale)); }
.summary-card > header strong { font-size: calc(13px * var(--ui-font-scale)); }
.summary-card > header button { font-size: calc(11px * var(--ui-font-scale)); }
.summary-item-head strong { font-size: calc(11px * var(--ui-font-scale)); }
.summary-item-head time { font-size: calc(9px * var(--ui-font-scale)); }
.summary-item-text { font-size: calc(10px * var(--ui-font-scale)); }
#message-input { font-size: calc(14px * var(--ui-font-scale)); }
.composer-toolbar, .needs-reply-check { font-size: calc(12px * var(--ui-font-scale)); }
.profile-display-settings { margin-top: 2px; }

@media (max-width: 760px) {
  .chat-title-line h2 { font-size: calc(19px * var(--ui-font-scale)); }
  .chat-members { font-size: calc(11px * var(--ui-font-scale)); }
  .chat-tools .tool-button { font-size: calc(11px * var(--ui-font-scale)); }
}


/* UNICHAT 1.0.0 final UI refinements. */
.topbar {
  grid-template-columns: auto minmax(260px, 1fr) auto auto;
}
.topbar-chat-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}
.topbar-chat-tools .topbar-tool {
  min-height: 38px;
  padding: 0 10px;
  border-color: #dfe5ef;
  background: #fff;
}
.topbar-chat-tools .topbar-tool:hover { background: #f6f9ff; border-color: #aec7f5; }
.collapse-sidebar-button {
  width: 44px;
  min-width: 44px;
  height: 38px;
  min-height: 38px;
  padding: 0 !important;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
  font-size: 0 !important;
}
.collapse-sidebar-button span { font-size: 25px !important; line-height: 1; }
.sidebar.collapsed #collapse-sidebar-button { display: grid !important; }

/* The final drop target is 1.5x the previous desktop width. */
.composer-layout { grid-template-columns: minmax(0, 1fr) 345px; }

/* Automatic translation controls were intentionally removed. Individual message translation remains. */
.mobile-translation-list, .mobile-translation-note { display: none !important; }

@media (max-width: 1180px) and (min-width: 761px) {
  .topbar { grid-template-columns: auto minmax(210px, 1fr) auto auto; gap: 7px; }
  .topbar-chat-tools { gap: 4px; }
  .topbar-chat-tools .topbar-tool { padding: 0 7px; font-size: 11px; }
  .composer-layout { grid-template-columns: minmax(0, 1fr) 285px; }
}

@media (max-width: 760px) {
  .topbar {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas:
      "brand menu profile"
      "tools tools tools";
    gap: 7px 8px;
    padding-bottom: 7px;
  }
  .topbar .brand { grid-area: brand; }
  #mobile-sidebar-button { grid-area: menu; }
  .topbar-actions { grid-area: profile; }
  .topbar-chat-tools {
    grid-area: tools;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .topbar-chat-tools .topbar-tool {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 0 4px;
    justify-content: center;
    font-size: 10px;
  }
  .topbar-chat-tools .topbar-tool span:first-child { font-size: 14px; }
  .chat-header { padding-top: 8px; }
  .composer-layout { display: block; }
}
@media (max-width: 760px) {
  .topbar-chat-tools #chat-menu-button { display: inline-flex !important; }
}


.admin-guard-note {
  padding: 10px 12px;
  border: 1px solid #f3c66c;
  border-radius: 10px;
  background: #fff8e8;
  color: #78550f;
  font-size: 0.92em;
  line-height: 1.5;
}


/* UNICHAT 1.0.3 - user deletion controls */
.user-management-actions { display: inline-flex; gap: 8px; align-items: center; }
.danger-button {
  border: 1px solid #efb1b1;
  background: #fff5f5;
  color: #c62828;
  border-radius: 9px;
  padding: 7px 11px;
  font: inherit;
  cursor: pointer;
}
.danger-button:hover:not(:disabled) { background: #ffe9e9; }
.danger-button:disabled { opacity: .45; cursor: not-allowed; }


/* ===== UNICHAT 1.0.7 icon fit + cache-safe revisions ===== */
/* Image icons are fitted inside the circular frame at 100%; user zoom is applied from that fitted baseline. */
.room-icon img,
#chat-icon-button img,
.icon-preview img {
  width: 86%;
  height: 86%;
  object-fit: contain !important;
  object-position: center;
}
/* Keep user avatars using their saved crop behavior; only room/category icons get the safe fitted baseline above. */
.icon-preview { background: #f5f8ff; }

/* ===== UNICHAT 1.0.9 exact icon preview parity ===== */
/* The icon editor uses the exact same frame dimensions and rendering rules as the desktop header icon. */
.icon-preview {
  width: 104px !important;
  height: 104px !important;
  box-sizing: border-box;
}
.icon-preview img,
#chat-icon-button img {
  width: 86% !important;
  height: 86% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform-origin: center center !important;
}
/* Keep the editor's coordinate system identical to the header icon frame. */
.icon-preview img {
  transform: translate(var(--icon-x, 0%), var(--icon-y, 0%)) scale(var(--icon-scale, 1)) !important;
}
#chat-icon-button img {
  transform: translate(var(--icon-x, 0%), var(--icon-y, 0%)) scale(var(--icon-scale, 1)) !important;
}
@media (max-width: 720px) {
  .icon-preview {
    width: 64px !important;
    height: 64px !important;
  }
}


/* ===== UNICHAT 1.0.10 exact room icon canvas parity ===== */
/* Preview and desktop header use the same 104px outer box and 100px image canvas. */
.icon-preview,
#chat-icon-button {
  width: 104px !important;
  height: 104px !important;
  min-width: 104px !important;
  min-height: 104px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}
.icon-preview {
  border: 2px solid #dbe5f5 !important;
}
#chat-icon-button {
  border: 2px solid transparent !important;
}
.icon-preview img,
#chat-icon-button img {
  width: 86px !important;
  height: 86px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
  transform-origin: center center !important;
  transform: translate(var(--icon-x, 0%), var(--icon-y, 0%)) scale(var(--icon-scale, 1)) !important;
}
@media (max-width: 720px) {
  .icon-preview,
  #chat-icon-button {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
  }
  .icon-preview img,
  #chat-icon-button img {
    width: 52px !important;
    height: 52px !important;
  }
}


/* ===== UNICHAT 1.0.12 smartphone-first redesign ===== */
.mobile-quickbar { display: none; }
@media (max-width: 760px) {
  :root { --mobile-topbar-h: 52px; --mobile-composer-safe: env(safe-area-inset-bottom, 0px); }
  html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
  body { background: #f6f8fb; }

  /* One compact app bar. Search/media controls live with the conversation, not in the global bar. */
  .topbar {
    height: var(--mobile-topbar-h) !important;
    min-height: var(--mobile-topbar-h) !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    grid-template-areas: "menu brand profile" !important;
    gap: 6px !important;
    padding: 0 8px !important;
    border-bottom: 1px solid #e1e6ef;
  }
  #mobile-sidebar-button { grid-area: menu; width: 44px; height: 44px; font-size: 22px; }
  .topbar .brand { grid-area: brand; justify-content: center; min-width: 0; }
  .topbar .brand strong, .topbar .brand-word { font-size: 19px; letter-spacing: .2px; }
  .topbar .brand-mark { width: 36px; height: 33px; flex-basis: 36px; font-size: 11px; padding-bottom: 4px; }
  .topbar-actions { grid-area: profile; justify-self: end; }
  .profile-button { width: 44px; height: 44px; padding: 3px; justify-content: center; }
  .profile-button .avatar-medium { width: 36px; height: 36px; }
  .profile-button .profile-text, .profile-button > span:last-child { display: none !important; }
  .global-search-wrap, .topbar-chat-tools, #help-button { display: none !important; }

  .workspace { height: calc(100dvh - var(--mobile-topbar-h)) !important; min-height: 0; display: block !important; }
  .chat-panel { height: 100%; min-height: 0; grid-template-rows: auto minmax(0,1fr) auto !important; background: #fff; }

  /* Full-height drawer with large touch targets. */
  .sidebar {
    top: var(--mobile-topbar-h) !important;
    width: min(94vw, 390px) !important;
    border-right: 0;
    z-index: 40;
  }
  .sidebar-backdrop { inset: var(--mobile-topbar-h) 0 0 !important; z-index: 35; }
  .sidebar-scroll { padding: 10px 8px 24px; }
  .sidebar .nav-item, .sidebar .chat-row { min-height: 50px; border-radius: 11px; }
  .sidebar .chat-row { padding-top: 7px; padding-bottom: 7px; }
  .sidebar .chat-row-name strong { font-size: 15px; }
  .sidebar .chat-row-name small { font-size: 12px; }
  .sidebar .section-title { min-height: 44px; }
  .sidebar .circle-button { width: 38px; height: 38px; }
  .sidebar-footer { padding-bottom: calc(8px + var(--mobile-composer-safe)); }

  /* Compact room header: icon + title + menu. */
  .chat-header {
    min-height: 0 !important;
    padding: 8px 8px 7px !important;
    gap: 7px !important;
    border-bottom: 1px solid #e6eaf1;
    background: #fff;
    box-shadow: 0 2px 8px rgba(32, 48, 76, .04);
  }
  .chat-identity { display: flex; align-items: center; gap: 8px; min-width: 0; }
  #chat-icon-button, .avatar-large {
    width: 46px !important; height: 46px !important;
    min-width: 46px !important; min-height: 46px !important;
    flex: 0 0 46px;
  }
  #chat-icon-button img { width: 38px !important; height: 38px !important; }
  .chat-title-wrap { min-width: 0; flex: 1; }
  .chat-title-line { min-width: 0; gap: 5px; }
  .chat-title-line h2 {
    font-size: clamp(17px, calc(18px * var(--ui-font-scale)), 24px) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #room-star { display: none !important; }
  #mobile-summary-button { display: none !important; }
  #mobile-chat-menu-button {
    display: inline-grid !important;
    width: 40px; height: 40px; min-width: 40px;
    place-items: center; padding: 0; border-radius: 10px;
    font-size: 18px;
  }
  .chat-members {
    max-width: 100%; height: 18px; margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 11px !important; color: #69778c;
  }
  .chat-members .member-add-button { min-height: 26px; padding: 2px 6px; }

  /* Four primary mobile actions are always visible and finger-sized. */
  .mobile-quickbar {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }
  .mobile-quickbar button {
    position: relative;
    min-width: 0; height: 43px;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    border: 1px solid #dce3ed; border-radius: 10px;
    background: #f8faff; color: #2f3c50;
    font: inherit; cursor: pointer;
  }
  .mobile-quickbar button:active { background: #eaf1ff; transform: translateY(1px); }
  .mobile-quickbar button > span { font-size: 17px; line-height: 1; }
  .mobile-quickbar button > small { font-size: 11px; font-weight: 700; }
  .mobile-quickbar button > b {
    position: absolute; top: -5px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 4px;
    display: grid; place-items: center;
    border-radius: 10px; background: #e53935; color: #fff;
    font-size: 10px; line-height: 1;
  }

  /* Desktop sub-navigation is redundant on mobile; the Confirm button opens all three lists. */
  .chat-subnav { display: none !important; }

  /* Conversation gets the screen. */
  .message-area {
    padding: 12px 8px 14px !important;
    background: linear-gradient(#f7f9fc, #fbfcfe);
    scroll-padding-bottom: 118px;
  }
  .message { margin-bottom: 14px; }
  .message, .message.mine {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    column-gap: 7px !important;
  }
  .message .message-avatar { width: 32px; height: 32px; }
  .message .message-main { min-width: 0; max-width: 92%; }
  .message:not(.mine) .message-main { grid-column: 2; justify-self: start; }
  .message.mine .message-avatar { display: none !important; }
  .message.mine .message-main {
    grid-column: 1 / -1 !important; grid-row: 1 !important;
    justify-self: end; margin-left: 34px !important;
    max-width: 88%;
  }
  .message-actions, .message.mine .message-actions {
    opacity: 1 !important;
    grid-column: 2 !important;
    padding-top: 3px !important;
  }
  .message.mine .message-actions { grid-column: 1 / -1 !important; grid-row: 2 !important; justify-content: flex-end !important; }
  .message-bubble { padding: 10px 11px !important; border-radius: 14px; }
  .message-text { font-size: max(15px, calc(14px * var(--ui-font-scale))) !important; line-height: 1.55; overflow-wrap: anywhere; }
  .translation-text { font-size: max(14px, calc(13px * var(--ui-font-scale))) !important; line-height: 1.5; }
  .message-meta { gap: 5px; flex-wrap: wrap; }
  .message-meta strong { font-size: 12px; }
  .message-meta time { font-size: 10px !important; }
  .attachment-image { max-height: 240px; object-fit: contain; }
  .reactions { gap: 5px; }
  .reaction-chip { min-height: 30px; padding: 4px 8px; border-radius: 16px; }

  /* Composer behaves like a native mobile chat composer. */
  .composer {
    padding: 7px 7px calc(7px + var(--mobile-composer-safe)) !important;
    border-top: 1px solid #dfe5ee;
    background: rgba(255,255,255,.98);
    box-shadow: 0 -4px 14px rgba(31,47,74,.06);
  }
  .composer-layout { display: block !important; }
  .composer-message-box { border-radius: 13px !important; padding: 6px 7px 5px; }
  #message-input {
    min-height: 48px !important; max-height: 118px;
    padding: 9px 8px !important;
    font-size: max(16px, calc(14px * var(--ui-font-scale))) !important;
    line-height: 1.45;
  }
  .composer-toolbar { min-height: 43px; gap: 5px; padding-top: 3px; }
  .composer-toolbar .attach-button, .composer-toolbar #composer-emoji {
    width: 42px !important; height: 40px !important; min-width: 42px !important;
    display: grid; place-items: center; border-radius: 10px;
  }
  .composer-toolbar .attach-button { font-size: 0 !important; }
  .composer-toolbar .attach-button::before { content: "📎"; font-size: 20px !important; }
  .composer-toolbar .needs-reply-check {
    position: static !important; height: 40px; margin: 0;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 0 7px !important; border: 1px solid #e1e6ee !important;
    border-radius: 10px !important; background: #fff !important;
    white-space: nowrap; font-size: 11px !important;
  }
  .composer-toolbar .send-button {
    margin-left: auto; width: 50px !important; min-width: 50px !important; height: 40px;
    border-radius: 11px; font-size: 0 !important;
  }
  .composer-toolbar .send-button span { font-size: 20px !important; }
  .composer-toolbar .composer-hint { display: none !important; }
  .drop-zone { display: none !important; }

  /* Mobile dialogs are bottom sheets and don't hide the close button. */
  .modal-root { padding: 0 !important; align-items: flex-end !important; }
  .modal-card, .modal-card.wide {
    width: 100% !important; max-width: 100% !important;
    max-height: 88dvh !important; border-radius: 18px 18px 0 0 !important;
  }
  .modal-header { min-height: 54px; padding: 10px 12px; }
  .modal-body { padding: 12px; }
  .media-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 8px; }
  .mobile-summary-tabs {
    position: sticky; top: 0; z-index: 2;
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 5px; background: white; padding-bottom: 8px;
  }
  .mobile-summary-tabs button { min-height: 42px; font-size: 11px; }
  .mobile-search-layout input { min-height: 46px; font-size: 16px; }

  /* Prevent accidental horizontal scrolling everywhere. */
  .chat-panel, .message-area, .composer, .modal-body { overflow-x: hidden; }
}

@media (max-width: 390px) {
  .topbar .brand-mark { display: grid; width: 32px; height: 29px; flex-basis: 32px; font-size: 10px; padding-bottom: 3px; }
  .topbar .brand { gap: 6px; }
  .topbar .brand-word { font-size: 17px; }
  .mobile-quickbar { gap: 4px; }
  .mobile-quickbar button > small { font-size: 10px; }
  .chat-members { display: none; }
  .message-main, .message.mine .message-main { max-width: 94%; }
}

/* ===== UNICHAT 1.0.13: restore UNI Suite navigation ===== */
.suite-nav { display:flex; align-items:center; gap:4px; }
.suite-tab {
  height: 36px; min-width: 78px; padding: 0 12px;
  border: 1px solid #d9e2ef; border-radius: 9px;
  background: #fff; color: #56657a; font-weight: 800; font-size: 12px;
  cursor: pointer; white-space: nowrap;
}
.suite-tab:hover { background:#f2f6ff; border-color:#aac5f7; color:#1769ff; }
.suite-tab.active { background:#1769ff; border-color:#1769ff; color:#fff; box-shadow:0 2px 6px rgba(23,105,255,.18); }
.mobile-suite-nav { display:none; }

@media (min-width: 761px) {
  .topbar { grid-template-columns: auto auto minmax(220px, 1fr) auto auto !important; gap: 12px !important; }
  .desktop-suite-nav { display:flex; }
}

@media (max-width: 760px) {
  :root { --mobile-suite-h: 38px; }
  .desktop-suite-nav { display:none !important; }
  .mobile-suite-nav {
    display:grid !important; grid-template-columns:repeat(3,1fr); gap:5px;
    height:var(--mobile-suite-h); padding:4px 8px;
    background:#fff; border-bottom:1px solid #e1e6ef;
    position:relative; z-index:31;
  }
  .mobile-suite-nav .suite-tab {
    width:100%; min-width:0; height:30px; padding:0 4px; border-radius:8px; font-size:11px;
  }
  .workspace { height: calc(100dvh - var(--mobile-topbar-h) - var(--mobile-suite-h)) !important; }
  .sidebar { top: calc(var(--mobile-topbar-h) + var(--mobile-suite-h)) !important; }
  .sidebar-backdrop { inset: calc(var(--mobile-topbar-h) + var(--mobile-suite-h)) 0 0 !important; }
}

/* ===== UNICHAT 1.0.17: brand text height + shorter search ===== */
@media (min-width: 1181px) {
  .topbar .brand { gap: 10px; }
  .topbar .brand strong,
  .topbar .brand-word {
    font-size: 44px !important;
    line-height: 48px !important;
    letter-spacing: .25px !important;
  }
  .topbar {
    grid-template-columns: auto auto minmax(280px, 430px) auto auto !important;
    gap: 12px !important;
  }
  .global-search-wrap {
    width: 100%;
    max-width: 430px;
    justify-self: start;
  }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .topbar .brand { gap: 9px; }
  .topbar .brand strong,
  .topbar .brand-word {
    font-size: 38px !important;
    line-height: 42px !important;
  }
  .topbar {
    grid-template-columns: auto auto minmax(220px, 340px) auto auto !important;
  }
  .global-search-wrap { max-width: 340px; justify-self: start; }
}


/* UNIPLA 1.1.12: keep approved UNIPLA lightbulb+star icon in latest UNICHAT suite tabs. */
.suite-tab-unipla{display:inline-flex;align-items:center;gap:6px}
.suite-tab-icon{width:18px;height:18px;display:block;flex:0 0 auto;border-radius:5px}
@media(max-width:720px){.suite-tab-icon{width:16px;height:16px}.suite-tab-unipla{gap:4px}}

/* UNI_SUITE_BUTTON_POSITION_V1 */
@media (min-width: 761px) {
  .topbar { position: relative !important; }
  .desktop-suite-nav {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    gap: 8px !important;
    z-index: 45 !important;
  }
  .desktop-suite-nav .suite-tab {
    width: 104px !important;
    min-width: 104px !important;
    height: 38px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    justify-content: center !important;
  }
}

/* UNI_SUITE_HEADER_FIX_V2 */
@media (min-width: 761px) {
  /* Keep the three suite buttons at the exact shared position from V1. */
  .desktop-suite-nav {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    gap: 8px !important;
    z-index: 45 !important;
  }
  .desktop-suite-nav .suite-tab {
    box-sizing: border-box !important;
    width: 104px !important;
    min-width: 104px !important;
    height: 38px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* UNICHAT logo: match the common suite scale instead of the oversized 1.0.17 logo. */
  .topbar .brand {
    gap: 9px !important;
    max-width: 245px !important;
  }
  .topbar .brand-mark {
    width: 44px !important;
    height: 40px !important;
    flex: 0 0 44px !important;
    border-width: 2px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
    padding-bottom: 5px !important;
  }
  .topbar .brand-mark::after {
    width: 8px !important;
    height: 8px !important;
    border-left-width: 2px !important;
    border-bottom-width: 2px !important;
    bottom: -6px !important;
  }
  .topbar .brand strong,
  .topbar .brand-word {
    font-size: 28px !important;
    line-height: 32px !important;
    letter-spacing: .25px !important;
  }

  /* The suite switch buttons must be text-only on every screen. */
  .desktop-suite-nav .suite-tab-icon,
  .desktop-suite-nav .app-switch-icon {
    display: none !important;
  }
  .desktop-suite-nav .suite-tab-unipla {
    gap: 0 !important;
  }
}

/* ===== Cloud header overlap fix ===== */
@media (min-width: 1181px) {
  .topbar {
    grid-template-columns:
      minmax(210px, 250px)
      270px
      minmax(260px, 1fr)
      auto
      minmax(150px, auto) !important;
    gap: 12px !important;
    padding: 0 16px !important;
  }

  .topbar .brand {
    min-width: 0 !important;
    gap: 8px !important;
  }

  .topbar .brand-mark {
    width: 44px !important;
    height: 40px !important;
    flex-basis: 44px !important;
  }

  .topbar .brand strong,
  .topbar .brand-word {
    font-size: 30px !important;
    line-height: 40px !important;
  }

  .desktop-suite-nav {
    width: 270px !important;
    min-width: 270px !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
  }

  .global-search-wrap {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .topbar-chat-tools {
    justify-self: end !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  .topbar-actions {
    justify-self: end !important;
    min-width: 150px !important;
  }

  .suite-tab-icon {
    display: none !important;
  }
}

/* ===== Cloud header final spacing fix ===== */
@media (min-width: 1181px) {
  .topbar {
    grid-template-columns:
      minmax(210px, 250px)
      330px
      minmax(250px, 1fr)
      auto
      minmax(150px, auto) !important;
  }

  .desktop-suite-nav {
    width: 330px !important;
    min-width: 330px !important;
    gap: 8px !important;
  }

  .topbar-chat-tools {
    margin-left: 12px !important;
  }
}

/* ===== Restore media lists into ... menu ===== */
@media (min-width: 761px) {
  #image-list-button,
  #file-list-button {
    display: none !important;
  }
}