/* ---------- 사이드바 메신저 뱃지 ---------- */
.nav-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}

/* ---------- 메신저 전체 레이아웃: 3단 컬럼 ---------- */
.msg-view {
  --msg-online: #22c55e; --msg-away: #f59e0b; --msg-offline: #9ca3af;
  --msg-bubble-mine: var(--accent); --msg-bubble-mine-text: #fff;
  --msg-bubble-other: var(--surface-2); --msg-bubble-other-text: var(--text);
  display: flex; height: 100%; min-height: 0; width: 100%; border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; background: var(--surface);
}

/* ----- 좌측: 대화 목록 ----- */
.msg-rooms {
  width: 300px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--border); background: var(--surface);
}
.msg-rooms-head { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.msg-rooms-title-row { display: flex; align-items: center; justify-content: space-between; }
.msg-rooms-title { font-size: 16px; font-weight: 700; }
.msg-new-btn {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; border: none; cursor: pointer; font-size: 15px; flex-shrink: 0;
}
.msg-new-btn:hover { background: var(--accent-strong); }
.msg-search { position: relative; }
.msg-search input {
  width: 100%; height: 32px; padding: 0 10px 0 30px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font-size: 12.5px; box-sizing: border-box;
}
.msg-search i { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 14px; }
.msg-room-tabs { display: flex; gap: 4px; }
.msg-room-tab {
  flex: 1; text-align: center; padding: 6px 0; border-radius: 7px; font-size: 12px; font-weight: 600;
  color: var(--text-3); cursor: pointer; border: none; background: none;
}
.msg-room-tab.active { background: var(--accent-soft); color: var(--accent-strong); }

.msg-room-list { flex-grow: 1; overflow-y: auto; padding: 4px 6px 10px; }
.msg-room-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; cursor: pointer;
  position: relative;
}
.msg-room-item:hover { background: var(--surface-2); }
.msg-room-item.active { background: var(--accent-soft); }
.msg-room-avatar { position: relative; flex-shrink: 0; }
.msg-room-avatar .presence-dot {
  position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--surface); background: var(--msg-offline);
}
.msg-room-avatar .presence-dot.online { background: var(--msg-online); }
.msg-room-avatar .presence-dot.away { background: var(--msg-away); }
.msg-room-icon {
  width: 38px; height: 38px; border-radius: 50%; background: var(--surface-3); display: flex;
  align-items: center; justify-content: center; font-size: 17px; color: var(--text-2); flex-shrink: 0;
}
.msg-room-body { flex-grow: 1; min-width: 0; }
.msg-room-name-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.msg-room-name { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-room-time { font-size: 10.5px; color: var(--text-3); flex-shrink: 0; }
.msg-room-preview-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; }
.msg-room-preview { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-room-item.unread .msg-room-preview { color: var(--text-2); font-weight: 600; }
.msg-room-item.unread .msg-room-name { font-weight: 700; }
.msg-unread-badge {
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.msg-room-pin { color: var(--text-3); font-size: 12px; }

/* ----- 가운데: 채팅창 ----- */
.msg-chat { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.msg-chat-head {
  height: 56px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 0 16px;
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.msg-chat-head-title { font-size: 14.5px; font-weight: 700; }
.msg-chat-head-sub { font-size: 11.5px; color: var(--text-3); }
.msg-chat-head .spacer { flex-grow: 1; }
.msg-chat-head-btn {
  width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--text-2); cursor: pointer; font-size: 17px;
}
.msg-chat-head-btn:hover, .msg-chat-head-btn.active { background: var(--surface-2); }

.msg-pinned-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--accent-soft);
  border-bottom: 1px solid var(--border); font-size: 12px; color: var(--accent-strong); cursor: pointer;
}
.msg-pinned-bar i { flex-shrink: 0; }
.msg-pinned-bar .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1; }

.msg-empty { flex-grow: 1; display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 13px; }

.msg-thread { flex-grow: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.msg-date-divider { text-align: center; margin: 14px 0; position: relative; }
.msg-date-divider span {
  background: var(--surface-3); color: var(--text-3); font-size: 11px; font-weight: 600;
  padding: 3px 12px; border-radius: 10px;
}
.msg-system-row { text-align: center; margin: 8px 0; }
.msg-system-row span { font-size: 11.5px; color: var(--text-3); background: var(--surface-2); padding: 4px 10px; border-radius: 8px; }

.msg-row { display: flex; gap: 8px; margin-top: 10px; max-width: 72%; }
.msg-row.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg-row .msg-avatar { flex-shrink: 0; margin-top: 2px; }
.msg-row.grouped .msg-avatar { visibility: hidden; }
.msg-row.mine .msg-avatar { display: none; }
.msg-content-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.msg-row.mine .msg-content-col { align-items: flex-end; }
.msg-sender-name { font-size: 12px; font-weight: 600; color: var(--text-2); }
.msg-bubble-line { display: flex; align-items: flex-end; gap: 5px; }
.msg-row.mine .msg-bubble-line { flex-direction: row-reverse; }
.msg-bubble {
  padding: 8px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap;
  word-break: break-word; background: var(--msg-bubble-other); color: var(--msg-bubble-other-text);
}
.msg-row.mine .msg-bubble { background: var(--msg-bubble-mine); color: var(--msg-bubble-mine-text); border-bottom-right-radius: 4px; }
.msg-row:not(.mine) .msg-bubble { border-bottom-left-radius: 4px; }
.msg-bubble .mention { font-weight: 700; color: var(--accent); }
.msg-row.mine .msg-bubble .mention { color: #fff; text-decoration: underline; }
.msg-meta { font-size: 10px; color: var(--text-3); white-space: nowrap; flex-shrink: 0; }
.msg-unread-count { color: var(--accent); font-weight: 700; }
.msg-file-bubble {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; max-width: 240px;
}
.msg-file-bubble i { font-size: 20px; color: var(--pdf); flex-shrink: 0; }
.msg-file-bubble .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.msg-file-bubble .size { color: var(--text-3); font-size: 11px; }
.msg-image-bubble { border-radius: 12px; overflow: hidden; max-width: 220px; cursor: pointer; line-height: 0; }
.msg-image-bubble img { width: 100%; display: block; }

.msg-typing { font-size: 11.5px; color: var(--text-3); padding: 0 18px 4px; height: 18px; }

.msg-row-actions {
  display: flex; gap: 0; opacity: 0; transition: opacity .1s; align-items: center; margin: 0 2px;
}
.msg-row:hover .msg-row-actions { opacity: 1; }
.msg-row-actions .msg-chat-head-btn { width: 24px; height: 24px; font-size: 13px; }
.msg-highlight { animation: msg-highlight-flash 1.5s ease; border-radius: 8px; }
.msg-mention-popup {
  position: absolute; bottom: 64px; left: 14px; width: 220px; max-height: 180px; overflow-y: auto; z-index: 5;
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.3); background: var(--surface); border: 1px solid var(--border);
  padding: 4px;
}
@keyframes msg-highlight-flash {
  0% { background: var(--accent-soft); }
  100% { background: transparent; }
}

.msg-composer { flex-shrink: 0; border-top: 1px solid var(--border); background: var(--surface); padding: 10px 14px; position: relative; }
.msg-composer-toolbar { display: flex; gap: 2px; margin-bottom: 4px; }
.msg-composer-toolbar button {
  width: 30px; height: 30px; border-radius: 7px; border: none; background: none; color: var(--text-2);
  cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center;
}
.msg-composer-toolbar button:hover { background: var(--surface-2); }
.msg-composer-row { display: flex; align-items: flex-end; gap: 8px; }
.msg-composer-row textarea {
  flex-grow: 1; resize: none; max-height: 120px; min-height: 38px; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 13.5px;
  font-family: inherit; line-height: 1.4;
}
.msg-composer-row textarea:focus { outline: none; border-color: var(--accent); }
.msg-send-btn {
  width: 38px; height: 38px; border-radius: 10px; background: var(--accent); color: #fff; border: none;
  cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.msg-send-btn:hover { background: var(--accent-strong); }
.msg-send-btn:disabled { opacity: .4; cursor: default; }

/* ----- 우측: 정보 패널 ----- */
.msg-info {
  width: 280px; flex-shrink: 0; border-left: 1px solid var(--border); background: var(--surface);
  display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
}
.msg-info.collapsed { display: none; }
.msg-info-head { padding: 14px; text-align: center; border-bottom: 1px solid var(--border); }
.msg-info-avatar-lg { margin: 0 auto 8px; }
.msg-info-name { font-size: 14.5px; font-weight: 700; }
.msg-info-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.msg-info-section { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.msg-info-section-title {
  font-size: 11.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase;
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.msg-info-section-title .cnt { font-weight: 500; text-transform: none; }
.msg-member-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12.5px; }
.msg-member-row .role-tag { font-size: 10px; color: var(--text-3); background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }
.msg-notice-row { font-size: 12px; color: var(--text-2); padding: 6px 0; line-height: 1.4; border-bottom: 1px dashed var(--border); }
.msg-notice-row:last-child { border-bottom: none; }
.msg-files-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.msg-files-grid .thumb {
  aspect-ratio: 1; border-radius: 8px; background: var(--surface-2); display: flex; align-items: center;
  justify-content: center; font-size: 18px; color: var(--text-3); overflow: hidden; cursor: pointer;
}
.msg-files-grid .thumb img { width: 100%; height: 100%; object-fit: cover; }
.msg-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-size: 12.5px; color: var(--text-2); }
.msg-switch { width: 34px; height: 20px; border-radius: 10px; background: var(--surface-3); position: relative; cursor: pointer; flex-shrink: 0; border: none; }
.msg-switch::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.msg-switch.on { background: var(--accent); }
.msg-switch.on::after { left: 16px; }
.msg-info-danger-btn {
  width: 100%; padding: 9px 0; border-radius: 8px; border: 1px solid var(--border); background: none;
  color: var(--danger); font-size: 12.5px; font-weight: 600; cursor: pointer; margin-top: 4px;
}
.msg-info-danger-btn:hover { background: var(--surface-2); }

@media (max-width: 1100px) {
  .msg-info { display: none; }
}

/* ---------- 알림 권한 안내 배너(9장) ---------- */
.msg-notif-banner {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--accent-soft);
  color: var(--accent-strong); font-size: 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.msg-notif-banner span { flex-grow: 1; }
.msg-notif-banner button {
  border: none; background: var(--accent); color: #fff; border-radius: 7px; padding: 5px 10px;
  font-size: 11.5px; font-weight: 600; cursor: pointer; flex-shrink: 0;
}
.msg-notif-banner button.x { background: none; color: var(--text-3); padding: 5px 6px; }
.msg-notif-banner button:hover { opacity: .85; }

/* ---------- 이모지 반응(3단계) ---------- */
.msg-reactions-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.msg-reaction-pill {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 12px; cursor: pointer;
}
.msg-reaction-pill:hover { background: var(--surface-3); }
.msg-reaction-pill.mine { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.msg-reaction-picker {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.3); z-index: 2000;
}
.msg-reaction-picker button { border: none; background: none; font-size: 17px; cursor: pointer; padding: 4px; border-radius: 6px; }
.msg-reaction-picker button:hover { background: var(--surface-2); }

/* ---------- 링크 미리보기 카드(3단계) ---------- */
.msg-link-preview-ph { display: none; }
.msg-link-preview-card {
  display: flex; gap: 0; margin-top: 6px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--surface-2); text-decoration: none; color: var(--text); max-width: 320px;
}
.msg-link-preview-card img { width: 86px; height: 86px; object-fit: cover; flex-shrink: 0; background: var(--surface-3); }
.msg-link-preview-card .body { padding: 8px 10px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.msg-link-preview-card .title { font-size: 12.5px; font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.msg-link-preview-card .url { font-size: 10.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 입력 중 표시(3단계) ---------- */
.msg-typing-indicator { font-size: 11.5px; color: var(--text-3); padding: 2px 18px 6px; min-height: 16px; font-style: italic; }

/* ---------- 작업 링크 카드(12장) ---------- */
.msg-task-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; margin: 2px 0; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text); text-decoration: none;
  font-size: 12px; max-width: 100%; vertical-align: middle;
}
.msg-task-chip:hover { background: var(--surface-3); }
.msg-task-chip i { color: var(--accent); flex-shrink: 0; }
.msg-task-chip b { font-weight: 700; flex-shrink: 0; }
.msg-task-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }

/* ---------- 내 알림 설정 모달 ---------- */
.msg-prefs-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 13px; }
.msg-prefs-row input[type="time"] {
  padding: 5px 8px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
}

/* =====================================================================
   플로팅 위젯 — 모든 화면(파일스테이션 포함) 우측 하단, note #695 14장 확장
   ===================================================================== */
.msg-widget-root { position: fixed; right: 22px; bottom: 22px; z-index: 900; }
.msg-widget-bubble {
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 26px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.25); position: relative; transition: transform .15s;
}
.msg-widget-bubble:hover { transform: scale(1.06); background: var(--accent-strong); }
.msg-widget-bubble.open i::before { content: "\e18d"; } /* ph-x 폴백 — 폰트 미스매치 시에도 버튼은 동작 */
.msg-widget-badge {
  position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg);
}
.msg-widget-panel {
  position: absolute; right: 0; bottom: 68px; width: 340px; height: 480px; max-height: 70vh;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 36px rgba(0,0,0,.3); display: flex; flex-direction: column;
}
.msg-widget-list-screen, .msg-widget-chat-screen, .msg-widget-new-screen { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.msg-widget-head {
  height: 48px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 10px;
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.msg-widget-title { font-size: 14px; font-weight: 700; flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-widget-head-actions { display: flex; gap: 2px; margin-left: auto; }
.msg-widget-icon-btn {
  width: 28px; height: 28px; border-radius: 7px; border: none; background: none; color: var(--text-2);
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; flex-shrink: 0;
}
.msg-widget-icon-btn:hover { background: var(--surface-2); }

.msg-widget-rooms { flex-grow: 1; overflow-y: auto; padding: 4px 6px; }
.msg-widget-empty { padding: 30px 14px; text-align: center; color: var(--text-3); font-size: 12.5px; }
.msg-widget-room-row, .msg-widget-person-row {
  display: flex; align-items: center; gap: 9px; padding: 8px 6px; border-radius: 9px; cursor: pointer;
}
.msg-widget-room-row:hover, .msg-widget-person-row:hover { background: var(--surface-2); }
.msg-widget-room-row.unread .name { font-weight: 700; }
.msg-widget-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.msg-widget-avatar.sm { width: 24px; height: 24px; font-size: 11px; }
.msg-widget-room-body { flex-grow: 1; min-width: 0; }
.msg-widget-room-top { display: flex; justify-content: space-between; gap: 6px; }
.msg-widget-room-top .name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-widget-room-top .time { font-size: 10px; color: var(--text-3); flex-shrink: 0; }
.msg-widget-room-bottom { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 1px; }
.msg-widget-room-bottom .preview { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-widget-room-bottom .badge {
  min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.msg-widget-search { padding: 8px 10px; flex-shrink: 0; }
.msg-widget-search input {
  width: 100%; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font-size: 12.5px; box-sizing: border-box;
}
.msg-widget-people { flex-grow: 1; overflow-y: auto; padding: 0 6px 8px; }

.msg-widget-thread { flex-grow: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.msg-widget-date-divider { text-align: center; margin: 8px 0; }
.msg-widget-date-divider span { background: var(--surface-3); color: var(--text-3); font-size: 10.5px; padding: 2px 10px; border-radius: 8px; }
.msg-widget-system-row { text-align: center; margin: 6px 0; }
.msg-widget-system-row span { font-size: 11px; color: var(--text-3); background: var(--surface-2); padding: 3px 9px; border-radius: 7px; }

.msg-widget-row { display: flex; gap: 6px; margin-top: 8px; max-width: 85%; }
.msg-widget-row.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg-widget-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.msg-widget-row.mine .msg-widget-col { align-items: flex-end; }
.msg-widget-sender { font-size: 11px; font-weight: 600; color: var(--text-2); }
/* 이름을 msg-widget-text-bubble로 둔다 — 플로팅 버튼의 클래스가 이미 msg-widget-bubble이라
   같은 이름을 썼더니 버튼의 width:56px;height:56px;display:flex 규칙이 메시지 말풍선에도
   적용돼(버튼 전용 규칙은 뒤에 오는 텍스트 전용 규칙이 덮어쓰지 않는 속성은 그대로 남는다)
   텍스트가 56x56 네모 안에 한 글자씩 갇혀 보이는 문제가 있었다. */
.msg-widget-text-bubble, .msg-widget-bubble-deleted {
  padding: 7px 10px; border-radius: 12px; font-size: 12.5px; line-height: 1.4; white-space: pre-wrap;
  word-break: break-word; background: var(--surface-2); color: var(--text); max-width: 230px;
}
.msg-widget-bubble-deleted { color: var(--text-3); font-style: italic; }
.msg-widget-row.mine .msg-widget-text-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 3px; }
.msg-widget-row:not(.mine) .msg-widget-text-bubble { border-bottom-left-radius: 3px; }
.msg-widget-text-bubble .mention { font-weight: 700; color: var(--accent); }
.msg-widget-row.mine .msg-widget-text-bubble .mention { color: #fff; text-decoration: underline; }
.msg-widget-meta { font-size: 9.5px; color: var(--text-3); }
.msg-widget-reply-quote {
  font-size: 10.5px; color: var(--text-3); border-left: 2px solid var(--border); padding: 2px 0 2px 6px; max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg-widget-file-bubble {
  display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 10px; max-width: 200px;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 11.5px; text-decoration: none; color: var(--text);
}
.msg-widget-file-bubble .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.msg-widget-file-bubble .size { color: var(--text-3); font-size: 10px; flex-shrink: 0; }

.msg-widget-reply-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px;
  background: var(--accent-soft); border-top: 1px solid var(--border); font-size: 11px; color: var(--accent-strong);
}
.msg-widget-reply-bar .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1; }

.msg-widget-composer { flex-shrink: 0; border-top: 1px solid var(--border); display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px; }
.msg-widget-composer textarea {
  flex-grow: 1; resize: none; max-height: 90px; min-height: 32px; padding: 7px 10px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 12.5px;
  font-family: inherit; line-height: 1.35;
}
.msg-widget-composer textarea:focus { outline: none; border-color: var(--accent); }
.msg-widget-send-btn {
  width: 32px; height: 32px; border-radius: 9px; background: var(--accent); color: #fff; border: none;
  cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.msg-widget-send-btn:hover { background: var(--accent-strong); }
.msg-widget-readonly { padding: 10px; text-align: center; color: var(--text-3); font-size: 11.5px; width: 100%; }

@media (max-width: 480px) {
  .msg-widget-root { right: 14px; bottom: 14px; }
  .msg-widget-panel { width: calc(100vw - 28px); height: 70vh; right: -8px; }
}