:root {
  --ui-primary: var(--primary, #168fd0);
  --ui-secondary: var(--primary-2, #15b8b0);
  --ui-bg: var(--bg, #f3f7fb);
  --ui-surface: var(--surface, #fff);
  --ui-surface-alt: var(--surface-2, #edf3f8);
  --ui-text: var(--text, #122333);
  --ui-muted: var(--muted, #718395);
  --ui-border: var(--line, #d9e3ec);
  --ui-danger: #e34b5f;
  --ui-radius-scale: 1;
  --ui-shadow: 0 14px 36px rgba(13,31,46,.22);
  --ui-animation-speed: 1;
  --ui-font-scale: 1;
  --ui-line-height: 1.55;
  --ui-header-height: 64px;
  --ui-header-bg: var(--surface, #fff);
  --ui-header-blur: 14px;
  --ui-header-radius: 0px;
  --ui-header-avatar-radius: 14px;
  --ui-list-row-height: 78px;
  --ui-list-row-radius: 20px;
  --ui-list-avatar-size: 52px;
  --ui-list-avatar-radius: 14px;
  --ui-list-gap: 12px;
  --ui-unread-radius: 11px;
  --ui-bubble-max: 82%;
  --ui-bubble-radius: 18px;
  --ui-bubble-px: 12px;
  --ui-bubble-py: 8px;
  --ui-bubble-sent: var(--mine, #d9f3ff);
  --ui-bubble-received: var(--bubble, #fff);
  --ui-bubble-sent-text: var(--text, #122333);
  --ui-bubble-received-text: var(--text, #122333);
  --ui-bubble-shadow: var(--shadow-sm);
  --ui-composer-height: 58px;
  --ui-composer-radius: 22px;
  --ui-composer-bg: var(--surface, #fff);
  --ui-send-size: 44px;
  --ui-send-radius: 999px;
  --ui-attach-radius: 12px;
  --ui-mic-radius: 12px;
  --ui-voice-scale: 1;
  --ui-voice-max: 320px;
  --ui-voice-height: 74px;
  --ui-voice-radius: 20px;
  --ui-voice-padding: 10px;
  --ui-voice-gap: 10px;
  --ui-voice-play-size: 46px;
  --ui-voice-play-radius: 999px;
  --ui-voice-wave-height: 28px;
  --ui-voice-wave-gap: 2px;
  --ui-voice-active: #20c997;
  --ui-voice-inactive: #748596;
  --ui-voice-sent: #35d7b2;
  --ui-voice-received: #229ed9;
  --ui-attachment-radius: 13px;
  --ui-attachment-bg: var(--surface-2, #eaf5fc);
  --ui-attachment-icon-size: 24px;
  --ui-attachment-image-radius: 13px;
  --ui-nav-height: 66px;
  --ui-nav-bg: var(--surface, #fff);
  --ui-nav-active: #168fd0;
  --ui-nav-inactive: #718395;
  --ui-nav-icon-size: 24px;
  --ui-nav-item-radius: 14px;
  --ui-nav-blur: 18px;
}

body.hamrah-ui-managed {
  --primary: var(--ui-primary);
  --primary-2: var(--ui-secondary);
  --bg: var(--ui-bg);
  --surface: var(--ui-surface);
  --surface-2: var(--ui-surface-alt);
  --text: var(--ui-text);
  --muted: var(--ui-muted);
  --line: var(--ui-border);
  font-size: calc(16px * var(--ui-font-scale));
}
body.hamrah-ui-managed .message-text,
body.hamrah-ui-managed .row-sub,
body.hamrah-ui-managed textarea { line-height: var(--ui-line-height); }

body.hamrah-ui-managed .chat-header {
  min-height: var(--ui-header-height);
  background: color-mix(in srgb, var(--ui-header-bg) 90%, transparent);
  backdrop-filter: blur(var(--ui-header-blur));
  -webkit-backdrop-filter: blur(var(--ui-header-blur));
  border-radius: 0 0 var(--ui-header-radius) var(--ui-header-radius);
}
body.hamrah-ui-managed .chat-header .avatar { border-radius: var(--ui-header-avatar-radius); }
body.hamrah-ui-managed.ui-hide-header-status .chat-title small { display: none !important; }
body.hamrah-ui-managed.ui-header-no-divider .chat-header { border-bottom-color: transparent; }

body.hamrah-ui-managed .room-list .list-row,
body.hamrah-ui-managed .contact-list .list-row,
body.hamrah-ui-managed .compact-list .list-row {
  min-height: var(--ui-list-row-height);
  border-radius: var(--ui-list-row-radius);
  gap: var(--ui-list-gap);
}
body.hamrah-ui-managed .room-list .avatar,
body.hamrah-ui-managed .contact-list .avatar,
body.hamrah-ui-managed .compact-list .avatar {
  width: var(--ui-list-avatar-size);
  height: var(--ui-list-avatar-size);
  border-radius: var(--ui-list-avatar-radius);
}
body.hamrah-ui-managed .unread-badge { border-radius: var(--ui-unread-radius); }
body.hamrah-ui-managed.ui-hide-chat-preview .room-list .row-sub { display:none !important; }
body.hamrah-ui-managed.ui-hide-chat-time .room-list .row-title time { display:none !important; }

body.hamrah-ui-managed .bubble {
  max-width: var(--ui-bubble-max);
  border-radius: calc(var(--ui-bubble-radius) * var(--ui-radius-scale));
  padding: var(--ui-bubble-py) var(--ui-bubble-px);
  background: var(--ui-bubble-received);
  color: var(--ui-bubble-received-text);
  box-shadow: var(--ui-bubble-shadow);
}
body.hamrah-ui-managed .mine .bubble {
  background: var(--ui-bubble-sent);
  color: var(--ui-bubble-sent-text);
  border-radius: calc(var(--ui-bubble-radius) * var(--ui-radius-scale));
}
body.hamrah-ui-managed:not(.ui-bubble-no-tails) .message:not(.mine) .bubble { border-bottom-right-radius: calc(6px * var(--ui-radius-scale)); }
body.hamrah-ui-managed:not(.ui-bubble-no-tails) .message.mine .bubble { border-bottom-left-radius: calc(6px * var(--ui-radius-scale)); }
body.hamrah-ui-managed.ui-bubble-no-tails .bubble { border-radius: calc(var(--ui-bubble-radius) * var(--ui-radius-scale)) !important; }
body.hamrah-ui-managed.ui-hide-message-time .message-time { display:none !important; }
body.hamrah-ui-managed.ui-hide-seen .mine .message-time::before { display:none !important; content:"" !important; }

body.hamrah-ui-managed .composer {
  min-height: var(--ui-composer-height);
  background: var(--ui-composer-bg);
  border-radius: var(--ui-composer-radius) var(--ui-composer-radius) 0 0;
}
body.hamrah-ui-managed .composer .send-btn {
  width: var(--ui-send-size);
  height: var(--ui-send-size);
  border-radius: var(--ui-send-radius);
}
body.hamrah-ui-managed #attachButton { border-radius: var(--ui-attach-radius); }
body.hamrah-ui-managed #voiceButton { border-radius: var(--ui-mic-radius); }
body.hamrah-ui-managed.ui-hide-attachment-button #attachButton { display:none !important; }
body.hamrah-ui-managed.ui-hide-emoji-button #emojiButton { display:none !important; }

body.hamrah-ui-managed .voice-player.voice-core-host,
body.hamrah-ui-managed .voice-player[data-audio-player] {
  max-width: min(var(--ui-voice-max), 100%);
  transform-origin: center;
}
body.hamrah-ui-managed .voice-core-ui {
  min-height: var(--ui-voice-height);
  padding: var(--ui-voice-padding);
  gap: var(--ui-voice-gap);
  border-radius: var(--ui-voice-radius);
  transform: scale(var(--ui-voice-scale));
  transform-origin: center;
}
body.hamrah-ui-managed .voice-core-play {
  width: var(--ui-voice-play-size);
  height: var(--ui-voice-play-size);
  border-radius: var(--ui-voice-play-radius);
  background: var(--ui-voice-received);
}
body.hamrah-ui-managed .message.mine .voice-core-ui { --voice-accent: var(--ui-voice-sent); }
body.hamrah-ui-managed .message:not(.mine) .voice-core-ui { --voice-accent: var(--ui-voice-received); }
body.hamrah-ui-managed .voice-core-wave { height: var(--ui-voice-wave-height); gap: var(--ui-voice-wave-gap); }
body.hamrah-ui-managed .voice-core-wave i { background: var(--ui-voice-inactive); }
body.hamrah-ui-managed .voice-core-wave i::after { background: var(--ui-voice-active); }
body.hamrah-ui-managed[data-ui-voice-wave="dots"] .voice-core-wave i { width:4px !important; height:4px !important; border-radius:50%; align-self:center; }
body.hamrah-ui-managed[data-ui-voice-wave="line"] .voice-core-wave { position:relative; align-items:center; }
body.hamrah-ui-managed[data-ui-voice-wave="line"] .voice-core-wave::before { content:""; position:absolute; inset:auto 0 50%; height:3px; border-radius:99px; background:var(--ui-voice-inactive); }
body.hamrah-ui-managed[data-ui-voice-wave="line"] .voice-core-wave i { opacity:0; }
body.hamrah-ui-managed[data-ui-voice-speed="text"] .voice-core-rate { background:transparent !important; box-shadow:none !important; padding-inline:3px !important; }
body.hamrah-ui-managed[data-ui-voice-speed="button"] .voice-core-rate { border:1px solid currentColor; background:transparent !important; }
body.hamrah-ui-managed[data-ui-voice-meta="inline"] .voice-core-meta { display:flex; align-items:center; gap:7px; }

body.hamrah-ui-managed .attachment-image { border-radius: var(--ui-attachment-image-radius); }
body.hamrah-ui-managed .attachment-file { border-radius: var(--ui-attachment-radius); background: var(--ui-attachment-bg); }
body.hamrah-ui-managed .attachment-file span:first-child { font-size: var(--ui-attachment-icon-size); }
body.hamrah-ui-managed.ui-hide-file-size .attachment-file small { display:none !important; }

body.hamrah-ui-managed .bottom-nav {
  height: calc(var(--ui-nav-height) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--ui-nav-bg) 94%, transparent);
  backdrop-filter: blur(var(--ui-nav-blur));
  -webkit-backdrop-filter: blur(var(--ui-nav-blur));
}
body.hamrah-ui-managed .bottom-nav button { color: var(--ui-nav-inactive); border-radius: var(--ui-nav-item-radius); }
body.hamrah-ui-managed .bottom-nav button.active { color: var(--ui-nav-active); }
body.hamrah-ui-managed .nav-icon svg { width:var(--ui-nav-icon-size); height:var(--ui-nav-icon-size); }
body.hamrah-ui-managed.ui-nav-label-active .bottom-nav button:not(.active) small { display:none; }
body.hamrah-ui-managed.ui-nav-label-hidden .bottom-nav button small { display:none; }

body.hamrah-ui-managed.ui-density-compact .message { margin-bottom: 4px; }
body.hamrah-ui-managed.ui-density-compact .composer { padding-top: 5px; padding-bottom: 5px; }
body.hamrah-ui-managed.ui-density-spacious .message { margin-bottom: 12px; }
body.hamrah-ui-managed.ui-density-spacious .composer { padding-top: 12px; padding-bottom: 12px; }
body.hamrah-ui-managed * { animation-duration: calc(var(--ui-animation-speed) * 1s); }
body.hamrah-ui-managed.ui-preview-active::after {
  content: "PREVIEW";
  position: fixed;
  left: 10px;
  top: 10px;
  z-index: 99999;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f0a400;
  color: #111;
  font: 800 10px/1 system-ui;
  letter-spacing: .08em;
  pointer-events: none;
}