/* ============================================
   HiChat Global Style Enhancement + Watch Mode
   Rounded corners, smooth animations, all themes
   ============================================ */

/* ============================================
   PART 1: Global Easing & Variables (All Devices)
   ============================================ */

:root {
  --w-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --w-ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --w-ease-decel: cubic-bezier(0, 0, 0.2, 1);
  --w-ease-accel: cubic-bezier(0.4, 0, 1, 1);
  --w-ease-bounce: cubic-bezier(0.34, 1.8, 0.64, 0.8);
  --w-ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --w-radius: 14px;
  --w-radius-sm: 10px;
  --w-radius-lg: 18px;
  --w-radius-xl: 22px;
  --w-shadow-bubble: 0 1px 4px rgba(0,0,0,0.07);
  --w-shadow-panel: 0 4px 24px rgba(0,0,0,0.08);
  --w-shadow-modal: 0 8px 32px rgba(0,0,0,0.12);
}

/* ============================================
   PART 2: Global Animations (All Devices)
   ============================================ */

/* Smooth fade in with subtle upward slide */
@keyframes gFadeInUp {
  0% { opacity: 0; transform: translateY(18px) scale(0.96); }
  60% { opacity: 1; transform: translateY(-2px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Scale elastic fade in */
@keyframes gFadeInScale {
  0% { opacity: 0; transform: scale(0.88); }
  55% { opacity: 1; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}

/* Fade out */
@keyframes gFadeOut {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.96); }
}

/* Slide up from bottom */
@keyframes gSlideUp {
  0% { opacity: 0; transform: translateY(100%); }
  40% { opacity: 0.5; }
  100% { opacity: 1; transform: translateY(0); }
}

/* Slide down to bottom */
@keyframes gSlideDown {
  0% { opacity: 1; transform: translateY(0); }
  60% { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(100%); }
}

/* Overlay fade */
@keyframes gOverlayIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes gOverlayOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Message bubble entrance from left */
@keyframes gBubbleLeft {
  0% { opacity: 0; transform: translateX(-16px) scale(0.94); }
  65% { opacity: 1; transform: translateX(2px) scale(1.01); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* Message bubble entrance from right */
@keyframes gBubbleRight {
  0% { opacity: 0; transform: translateX(16px) scale(0.94); }
  65% { opacity: 1; transform: translateX(-2px) scale(1.01); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* System message entrance */
@keyframes gSysIn {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Header entrance */
@keyframes gHeaderIn {
  0% { opacity: 0; transform: translateY(-12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Stagger list item entrance */
@keyframes gStagger {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Pulse for online indicator */
@keyframes gPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

/* Image preview entrance */
@keyframes gImgPreview {
  0% { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}

/* ============================================
   PART 3: Global Rounded & Animation Overrides
   ============================================ */

/* ---- App Container ---- */
#app {
  border-radius: 0;
  background: var(--color-bg);
}

/* ---- Loading Screen ---- */
#loading-screen {
  animation: gOverlayIn 0.4s var(--w-ease-decel) both;
}
.loading-content {
  animation: gFadeInScale 0.5s var(--w-ease-spring) both;
}

/* ---- Onboarding Modal ---- */
#onboarding-modal {
  animation: gOverlayIn 0.35s var(--w-ease-decel) both;
  background: var(--color-bg);
}

#onboarding-modal.hidden {
  display: none !important;
}

.onboarding-step {
  transition: opacity 0.45s var(--w-ease-decel), transform 0.45s var(--w-ease-spring);
}

.onboarding-step.active {
  display: flex;
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: gFadeInScale 0.55s var(--w-ease-spring) both;
}

.onboarding-step > .material-symbols-rounded:first-child {
  animation: gPulse 3s var(--w-ease-smooth) infinite;
}

.onboarding-input {
  border-radius: var(--w-radius);
  transition: border-color 0.3s var(--w-ease-smooth), box-shadow 0.3s var(--w-ease-smooth);
}

.onboarding-input:focus {
  border-color: var(--color-text);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

.onboarding-btn {
  border-radius: var(--w-radius);
  transition: transform 0.2s var(--w-ease-spring), box-shadow 0.2s var(--w-ease-smooth), opacity 0.2s;
}

.onboarding-btn:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.onboarding-dot {
  transition: all 0.4s var(--w-ease-spring);
}

.device-btn {
  border-radius: var(--w-radius);
  transition: all 0.3s var(--w-ease-spring);
}

.device-btn:active {
  transform: scale(0.96);
  border-color: var(--color-primary);
}

.device-btn.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

/* ---- Header ---- */
#header {
  animation: gHeaderIn 0.4s var(--w-ease-decel) both;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* ---- Online Badge ---- */
.online-dot {
  animation: gPulse 2s var(--w-ease-smooth) infinite;
}

/* ---- Group Tabs ---- */
#group-tabs {
  animation: gHeaderIn 0.4s var(--w-ease-decel) 0.05s both;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.tab {
  border-radius: var(--w-radius-sm) var(--w-radius-sm) 0 0;
  transition: color 0.25s var(--w-ease-smooth);
}

.tab::after {
  border-radius: 2px;
  transition: transform 0.35s var(--w-ease-spring);
}

/* ---- Notify Bar ---- */
#notify-bar {
  animation: gHeaderIn 0.35s var(--w-ease-spring);
  border-radius: 0 0 var(--w-radius-sm) var(--w-radius-sm);
}

#notify-bar.hidden {
  display: none !important;
}

/* ---- Message Area ---- */
#message-area {
  background: var(--color-bg);
}

/* ---- Messages ---- */
.msg {
  animation: gBubbleLeft 0.45s var(--w-ease-spring) both;
}
.msg.self {
  animation: gBubbleRight 0.45s var(--w-ease-spring) both;
}

.msg-avatar {
  border-radius: var(--w-radius-sm);
  transition: transform 0.2s var(--w-ease-spring);
}
.msg-avatar:active {
  transform: scale(0.9);
}

.msg-bubble {
  border-radius: var(--w-radius);
  border-top-left-radius: 4px;
  box-shadow: var(--w-shadow-bubble);
  transition: transform 0.15s var(--w-ease-spring), box-shadow 0.2s var(--w-ease-smooth);
}
.msg.self .msg-bubble {
  border-top-left-radius: var(--w-radius);
  border-top-right-radius: 4px;
}

.msg-bubble:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.msg-bubble.msg-image {
  border-radius: var(--w-radius);
  box-shadow: none;
}
.msg-bubble.msg-image img {
  border-radius: var(--w-radius-sm);
  transition: opacity 0.2s var(--w-ease-smooth), transform 0.2s var(--w-ease-spring);
}
.msg-bubble.msg-image img:active {
  opacity: 0.85;
  transform: scale(0.96);
}

.msg-system {
  animation: gSysIn 0.35s var(--w-ease-decel) both;
}

.msg-broadcast {
  animation: gSysIn 0.35s var(--w-ease-decel) both;
}

/* Mention highlight pulse */
.msg.mention-highlight .msg-bubble {
  animation: mentionPulse 1.5s var(--w-ease-smooth);
}

/* ---- Quote Block ---- */
.quote-block {
  border-radius: 4px;
  transition: background 0.15s var(--w-ease-smooth);
}

/* ---- AI Message ---- */
.ai-tag {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 4px;
  margin-left: 3px;
  vertical-align: middle;
  letter-spacing: 0.3px;
}

.msg.ai-msg .msg-avatar {
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  color: #fff !important;
}

.msg.ai-msg .msg-bubble.ai-bubble {
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-top-left-radius: var(--w-radius);
  overflow: hidden;
}

/* ---- Input Area ---- */
#input-area {
  animation: gFadeInUp 0.35s var(--w-ease-decel) both;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.input-wrapper {
  border-radius: var(--w-radius);
  border: 1.5px solid transparent;
  transition: border-color 0.3s var(--w-ease-smooth), background 0.3s var(--w-ease-smooth);
}
.input-wrapper:focus-within {
  border-color: var(--color-text);
  background: var(--color-surface);
}

.send-btn {
  border-radius: var(--w-radius-sm) !important;
  transition: transform 0.15s var(--w-ease-spring), background 0.2s var(--w-ease-smooth);
}
.send-btn:active {
  transform: scale(0.88);
}

/* Quote preview */
.quote-preview-bar {
  border-radius: 8px;
  animation: gFadeInUp 0.25s var(--w-ease-decel);
}

/* Quick replies */
#quick-replies {
  animation: gFadeInUp 0.3s var(--w-ease-decel) both;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border-light);
}
.quick-btn {
  border-radius: 14px;
  transition: all 0.2s var(--w-ease-spring);
}
.quick-btn:active {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-color: var(--color-primary);
  transform: scale(0.93);
}

/* ---- Mention Panel ---- */
#mention-panel {
  border-radius: var(--w-radius);
  box-shadow: var(--w-shadow-panel);
  background: var(--color-surface);
  animation: gFadeInScale 0.35s var(--w-ease-spring);
  border: 1px solid var(--color-border);
}

.mention-header {
  font-size: 10px;
  color: var(--color-text-tertiary);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.mention-item {
  border-radius: 8px;
  transition: background-color 0.15s var(--w-ease-smooth);
}
.mention-item:active {
  background: var(--color-bg);
}

.mention-item-avatar {
  border-radius: 8px;
}

/* ---- Settings Panel ---- */
#settings-panel {
  background: var(--color-bg);
  animation: gSlideUp 0.45s var(--w-ease-decel) both;
}

#settings-panel.slide-down {
  animation: gSlideDown 0.35s var(--w-ease-accel) both;
}

#settings-panel.hidden {
  display: none !important;
}

.settings-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  animation: gHeaderIn 0.35s var(--w-ease-decel) both;
}

.settings-body {
  background: var(--color-bg);
}

.settings-item {
  animation: gStagger 0.35s var(--w-ease-decel) both;
}

.toggle-switch .toggle-slider {
  border-radius: 22px;
  transition: background-color 0.3s var(--w-ease-smooth);
}
.toggle-switch .toggle-slider::before {
  border-radius: 50%;
  transition: transform 0.3s var(--w-ease-spring);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.language-toggle {
  border-radius: 6px;
  overflow: hidden;
}

/* Theme sub-panel */
.settings-sub-panel {
  background: var(--color-bg);
  animation: gSlideUp 0.4s var(--w-ease-decel) both;
}
.settings-sub-panel.visible {
  display: flex !important;
}

.settings-sub-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.theme-option {
  border-radius: var(--w-radius-sm);
  transition: all 0.25s var(--w-ease-spring);
}
.theme-option:active {
  transform: scale(0.95);
}
.theme-option.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.06);
}
.theme-swatch {
  border-radius: 50%;
  border: 2px solid var(--color-border);
}

/* DPI slider */
.dpi-settings-row input[type="range"] {
  border-radius: 2px;
  background: var(--color-border);
}
.dpi-settings-row input[type="range"]::-webkit-slider-thumb {
  border-radius: 50%;
  box-shadow: var(--w-shadow-bubble);
}

.btn-danger {
  border-radius: var(--w-radius-sm);
  transition: all 0.25s var(--w-ease-smooth);
}
.btn-danger:active {
  transform: scale(0.97);
}

/* Settings nickname */
#settings-nickname {
  border-radius: 8px;
  background: var(--color-bg);
  transition: background 0.2s var(--w-ease-smooth);
}
#settings-nickname:focus {
  background: var(--color-border);
}

/* ---- DM List Panel ---- */
#dm-list-panel {
  background: var(--color-bg);
}
#dm-list-panel.slide-up {
  animation: gSlideUp 0.45s var(--w-ease-decel) both;
}
#dm-list-panel.slide-down {
  animation: gSlideDown 0.35s var(--w-ease-accel) both;
}
#dm-list-panel.hidden {
  display: none !important;
}

.dm-list-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.dm-item {
  border-radius: var(--w-radius-sm);
  transition: background-color 0.15s var(--w-ease-smooth);
  animation: gStagger 0.35s var(--w-ease-decel) both;
}
.dm-item:active {
  background: var(--color-surface-tertiary);
}

.dm-item-avatar {
  border-radius: var(--w-radius-sm);
}

/* ---- Mention List Panel ---- */
#mention-list-panel {
  background: var(--color-bg);
}
#mention-list-panel.slide-up {
  animation: gSlideUp 0.45s var(--w-ease-decel) both;
}
#mention-list-panel.slide-down {
  animation: gSlideDown 0.35s var(--w-ease-accel) both;
}
#mention-list-panel.hidden {
  display: none !important;
}

/* ---- Announcement Panel ---- */
#announcement-panel {
  background: var(--color-bg);
  animation: gSlideUp 0.45s var(--w-ease-decel) both;
}
#announcement-panel.visible {
  display: flex !important;
}

.announcement-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.announcement-card {
  border-radius: var(--w-radius);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--w-shadow-bubble);
  animation: gFadeInUp 0.4s var(--w-ease-decel) both;
  transition: transform 0.15s var(--w-ease-spring), box-shadow 0.2s var(--w-ease-smooth);
}
.announcement-card:active {
  transform: scale(0.98);
  box-shadow: var(--w-shadow-panel);
}

/* ---- Announcement Popup ---- */
#announcement-popup {
  animation: gOverlayIn 0.3s var(--w-ease-decel);
}
#announcement-popup.visible {
  display: flex !important;
}

.announcement-popup-content {
  border-radius: var(--w-radius-lg);
  box-shadow: var(--w-shadow-modal);
  animation: gFadeInScale 0.45s var(--w-ease-spring) both;
}

/* ---- Image Preview ---- */
#image-preview-overlay {
  animation: gOverlayIn 0.25s var(--w-ease-decel);
}
#image-preview-img {
  border-radius: var(--w-radius);
  animation: gImgPreview 0.4s var(--w-ease-spring) forwards;
}

/* ---- Context Menu ---- */
.msg-ctx-menu {
  border-radius: var(--w-radius);
  box-shadow: var(--w-shadow-panel);
  background: var(--color-surface);
  animation: gFadeInScale 0.2s var(--w-ease-spring);
  border: 1px solid var(--color-border);
}

.msg-ctx-item {
  transition: background-color 0.12s;
}
.msg-ctx-item:active {
  background: var(--color-bg);
}

/* ---- Typing Indicator ---- */
#typing-indicator .dot {
  border-radius: 50%;
}

/* ---- Icon Buttons ---- */
.icon-btn {
  border-radius: var(--w-radius-sm);
  transition: background-color 0.25s var(--w-ease-smooth), transform 0.15s var(--w-ease-spring);
}
.icon-btn:active {
  transform: scale(0.88);
}

/* ---- Code blocks ---- */
.code-block {
  border-radius: var(--w-radius-sm);
}

/* ---- Rich boxes ---- */
.rich-box {
  border-radius: 6px;
}

/* ---- Modal / Dialog ---- */
.modal-overlay {
  animation: gOverlayIn 0.3s var(--w-ease-decel);
}

.modal-content {
  border-radius: var(--w-radius-lg);
  box-shadow: var(--w-shadow-modal);
  animation: gFadeInScale 0.45s var(--w-ease-spring);
}

/* Input group in modal */
.input-group {
  border-radius: var(--w-radius);
  border: 1.5px solid transparent;
  transition: border-color 0.3s var(--w-ease-smooth), background 0.3s var(--w-ease-smooth);
}
.input-group:focus-within {
  border-color: var(--color-text);
}

.btn-primary {
  border-radius: var(--w-radius);
  transition: transform 0.15s var(--w-ease-spring), box-shadow 0.2s var(--w-ease-smooth), opacity 0.2s;
}
.btn-primary:active {
  transform: scale(0.96);
  opacity: 0.85;
}

/* ---- Toast ---- */
.toast {
  border-radius: var(--w-radius);
  animation: gFadeInScale 0.25s var(--w-ease-spring);
  backdrop-filter: blur(4px);
}

/* ---- Connection Bar ---- */
#conn-bar {
  animation: gHeaderIn 0.3s var(--w-ease-spring);
}

/* ---- Badges ---- */
.dm-badge {
  animation: gFadeInScale 0.3s var(--w-ease-spring) both;
}

#announcement-badge.visible {
  animation: gPulse 2s var(--w-ease-smooth) infinite;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 2px;
}

/* ============================================
   PART 4: Watch Mode Size Overrides Only
   ============================================ */

/* Compact header */
.watch-mode #header {
  padding: 6px 10px;
  min-height: 40px;
  max-height: 40px;
  gap: 4px;
}

/* Compact icon buttons */
.watch-mode .icon-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
}
.watch-mode .icon-btn .material-symbols-rounded {
  font-size: 18px;
}

/* Compact logo */
.watch-mode .logo-icon {
  font-size: 18px !important;
}

/* Compact title */
.watch-mode .app-title {
  font-size: 14px;
}

/* Compact online badge */
.watch-mode .online-badge {
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
}
.watch-mode .online-dot {
  width: 5px;
  height: 5px;
}

/* Compact group tabs */
.watch-mode #group-tabs {
  padding: 0 8px;
  min-height: 32px;
}
.watch-mode .tab {
  padding: 6px 0;
  font-size: 12px;
  gap: 4px;
}
.watch-mode .tab .material-symbols-rounded {
  font-size: 14px;
}

/* Compact messages */
.watch-mode #message-area {
  padding: 8px 10px;
}
.watch-mode #messages {
  gap: 4px;
}
.watch-mode .msg {
  gap: 6px;
  max-width: 88%;
}
.watch-mode .msg-avatar {
  width: 26px;
  height: 26px;
  font-size: 10px;
  margin-top: 2px;
}
.watch-mode .msg-name {
  font-size: 10px;
  padding: 0 4px;
  max-width: 120px;
}
.watch-mode .msg-bubble {
  padding: 7px 11px;
  font-size: 13px;
}
.watch-mode .msg-time {
  font-size: 9px;
  padding: 0 4px;
}

/* Compact image messages */
.watch-mode .msg-bubble.msg-image img {
  max-width: 120px;
  max-height: 120px;
}

/* Compact system messages */
.watch-mode .msg-system {
  font-size: 10px;
  padding: 4px 0;
}

/* Compact broadcast */
.watch-mode .msg-broadcast {
  font-size: 11px;
  padding: 6px 10px;
  max-width: 92%;
  margin: 3px auto;
}

/* Compact input area */
.watch-mode .input-row {
  padding: 4px 6px;
  gap: 4px;
}
.watch-mode #message-input {
  padding: 7px 0;
  font-size: 13px;
  max-height: 80px;
}
.watch-mode .send-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
}
.watch-mode .send-btn .material-symbols-rounded {
  font-size: 16px;
}
.watch-mode #image-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 3px;
}

/* Compact quote preview */
.watch-mode #quote-preview {
  padding: 2px 8px;
}
.watch-mode .quote-preview-bar {
  padding: 4px 8px;
  font-size: 10px;
}

/* Compact quick replies */
.watch-mode #quick-replies {
  padding: 5px 8px;
  gap: 5px;
}
.watch-mode .quick-btn {
  padding: 5px 12px;
  font-size: 12px;
  min-height: 30px;
}

/* Compact mention panel */
.watch-mode #mention-panel {
  bottom: 56px;
  left: 8px;
  right: 8px;
  max-height: 180px;
}
.watch-mode .mention-header {
  padding: 6px 10px;
}
.watch-mode .mention-header .material-symbols-rounded {
  font-size: 13px;
}
.watch-mode .mention-item {
  padding: 7px 10px;
  margin: 1px 4px;
}
.watch-mode .mention-item-avatar {
  width: 24px;
  height: 24px;
  font-size: 10px;
}
.watch-mode .mention-item-name {
  font-size: 12px;
}

/* Watch panels full-screen overlay */
.watch-mode #settings-panel,
.watch-mode #dm-list-panel,
.watch-mode #mention-list-panel,
.watch-mode #announcement-panel {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 700;
}

/* Compact settings */
.watch-mode .settings-header,
.watch-mode .settings-sub-header,
.watch-mode .announcement-header,
.watch-mode .dm-list-header {
  padding: 8px 12px;
  min-height: 42px;
}
.watch-mode .settings-header h2,
.watch-mode .settings-sub-header h2,
.watch-mode .announcement-header h2,
.watch-mode .dm-list-header h2 {
  font-size: 15px;
}
.watch-mode .settings-body,
.watch-mode .settings-sub-body {
  padding: 12px;
}
.watch-mode .settings-item {
  padding: 10px 0;
  font-size: 13px;
}
.watch-mode .settings-value {
  font-size: 12px;
  max-width: 120px;
}
.watch-mode .toggle-switch {
  width: 40px;
  height: 22px;
}
.watch-mode .toggle-slider::before {
  height: 16px;
  width: 16px;
}
.watch-mode .toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
}

/* Compact announcement cards */
.watch-mode .announcement-body {
  padding: 12px;
}
.watch-mode .announcement-card {
  padding: 14px;
  margin-bottom: 10px;
}
.watch-mode .announcement-card h3 {
  font-size: 14px;
}
.watch-mode .announcement-card .announcement-date {
  font-size: 10px;
}
.watch-mode .announcement-card .announcement-content {
  font-size: 12px;
}
.watch-mode .announcement-popup-content {
  padding: 24px 20px;
  max-width: 280px;
  max-height: 70vh;
}

/* Compact DM items */
.watch-mode #dm-list-body,
.watch-mode #mention-list-body {
  padding: 8px;
}
.watch-mode .dm-item {
  padding: 10px;
  margin-bottom: 2px;
}
.watch-mode .dm-item-avatar {
  width: 36px;
  height: 36px;
  font-size: 14px;
}
.watch-mode .dm-item-name {
  font-size: 13px;
}
.watch-mode .dm-item-preview {
  font-size: 11px;
}
.watch-mode .dm-item-time {
  font-size: 9px;
}

/* Compact loading */
.watch-mode .loading-content {
  width: min(180px, 70vw);
}
.watch-mode .loading-title {
  font-size: 16px;
}
.watch-mode .loading-tip {
  font-size: 11px;
}
.watch-mode .loading-version {
  font-size: 10px;
}

/* Compact onboarding */
.watch-mode .onboarding-step {
  max-width: 280px;
  padding: 8px 0;
}
.watch-mode .onboarding-step > .material-symbols-rounded:first-child {
  font-size: 36px !important;
  margin-bottom: 12px !important;
}
.watch-mode .onboarding-step h2 {
  font-size: 17px;
  margin-bottom: 6px;
}
.watch-mode .onboarding-step p {
  font-size: 12px;
  margin-bottom: 16px;
}
.watch-mode .onboarding-input {
  max-width: 220px;
  padding: 10px 14px;
  font-size: 14px;
}
.watch-mode .onboarding-btn {
  max-width: 220px;
  padding: 11px;
  font-size: 14px;
  margin-top: 14px;
}
.watch-mode .device-buttons {
  max-width: 220px;
  gap: 10px;
  margin-bottom: 16px;
}
.watch-mode .device-btn {
  padding: 16px 8px;
  font-size: 12px;
  min-height: 80px;
}
.watch-mode .device-hint {
  font-size: 11px;
  max-width: 220px;
  padding: 6px 10px;
}
.watch-mode #onboarding-modal .theme-grid {
  max-width: 220px;
  gap: 6px;
}
.watch-mode #onboarding-modal .theme-option {
  padding: 8px 4px;
}
.watch-mode #onboarding-modal .theme-swatch {
  width: 28px;
  height: 28px;
}
.watch-mode #onboarding-modal .theme-option span {
  font-size: 10px;
}
.watch-mode .tutorial-list {
  max-width: 220px;
}
.watch-mode .tutorial-item {
  padding: 8px 0;
}
.watch-mode .tutorial-icon {
  font-size: 20px;
}
.watch-mode .tutorial-text {
  font-size: 12px;
}

/* Compact code blocks */
.watch-mode .code-block {
  font-size: 11px;
  max-width: 200px;
  margin: 4px 0;
}
.watch-mode .code-header {
  padding: 4px 8px;
}
.watch-mode .code-lang {
  font-size: 9px;
}
.watch-mode .code-copy {
  font-size: 9px;
  padding: 2px 8px;
}
.watch-mode .code-content {
  padding: 6px 8px;
  max-height: 120px;
}
.watch-mode .code-content code {
  font-size: 10px;
}
.watch-mode .inline-code {
  font-size: 10px;
  padding: 1px 4px;
}

/* Compact rich boxes */
.watch-mode .rich-box {
  padding: 6px 8px;
  font-size: 11px;
}

/* Compact modals */
.watch-mode .modal-content {
  max-width: 280px;
  padding: 24px 18px;
  max-height: 75vh;
}
.watch-mode .modal-header h2 {
  font-size: 17px;
}
.watch-mode .modal-desc {
  font-size: 12px;
}
.watch-mode .input-group {
  margin-bottom: 14px;
}
.watch-mode .input-group input {
  padding: 12px 0;
  font-size: 14px;
}
.watch-mode .btn-primary {
  padding: 12px;
  font-size: 14px;
}

/* Watch hide elements that don't fit */
.watch-mode .watch-settings-btn,
.watch-mode #watch-settings-popup,
.watch-mode #watch-settings-overlay {
  display: none !important;
}

/* Watch safe area padding */
.watch-mode #chat-container {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.watch-mode .input-row {
  padding-bottom: max(4px, env(safe-area-inset-bottom));
}
.watch-mode #onboarding-modal {
  padding: max(env(safe-area-inset-top), 16px) max(env(safe-area-inset-right), 16px) max(env(safe-area-inset-bottom), 16px) max(env(safe-area-inset-left), 16px);
}


/* ===== 手表 onboarding 强制覆盖（确保只显示 active） ===== */
.watch-mode .onboarding-step {
  display: none !important;
}
.watch-mode .onboarding-step.active {
  display: flex !important;
}