/* ============================================================
   WhatsApp Web replica — styles
   Tokens & values extracted 2026-07-20 from web.whatsapp.com (CSSOM)
   + canonical WhatsApp default green identity. Light + dark themes.
   ============================================================ */

:root {
  --brand: #00a884;
  --brand-dark: #008069;
  --brand-hover: #017561;
  --app-backdrop: #dbd8d4;
  --panel-bg: #ffffff;
  --panel-header-bg: #f0f2f5;
  --chat-header-bg: #f0f2f5;
  --search-bg: #f0f2f5;
  --search-field-bg: #f0f2f5;
  --hover-bg: #f5f6f6;
  --active-bg: #f0f2f5;
  --divider: #e9edef;
  --divider-strong: #d1d7db;
  --text-primary: #111b21;
  --text-secondary: #667781;
  --text-meta: #667781;
  --icon: #54656f;
  --icon-lighter: #8696a0;
  --bubble-in: #ffffff;
  --bubble-out: #d9fdd3;
  --bubble-out-meta: #667781;
  --bubble-in-meta: #667781;
  --wallpaper: #efeae2;
  --wallpaper-doodle: #0b141a;
  --doodle-opacity: .06;
  --tick-blue: #53bdeb;
  --tick-gray: #8696a0;
  --unread-badge: #25d366;
  --link: #027eb5;
  --enc-notice-bg: #ffeecd;
  --enc-notice-text: #7a6c3a;
  --system-bubble-bg: #ffffff;
  --nav-active-bg: #e7f3ef;
  --dropdown-bg: #ffffff;
  --dropdown-hover: #f5f6f6;
  --modal-overlay: rgba(11,20,26,.4);
  --shadow-dropdown: 0 2px 5px 0 rgba(11,20,26,.26), 0 2px 10px 0 rgba(11,20,26,.16);
  --shadow-bubble: 0 1px .5px rgba(11,20,26,.13);
  --shadow-fab: 0 1px 1px 0 rgba(0,0,0,.06), 0 2px 5px 0 rgba(0,0,0,.2);
  --font: "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Roboto, Arial, sans-serif;
  --ease-snap: cubic-bezier(0.31, 0.94, 0.34, 1);
  --ease-panel: cubic-bezier(0.1, 0.82, 0.25, 1);
}

[data-theme="dark"] {
  --brand: #00a884;
  --brand-dark: #008069;
  --brand-hover: #06cf9c;
  --app-backdrop: #0a0a0a;
  --panel-bg: #111b21;
  --panel-header-bg: #202c33;
  --chat-header-bg: #202c33;
  --search-bg: #111b21;
  --search-field-bg: #202c33;
  --hover-bg: #202c33;
  --active-bg: #2a3942;
  --divider: #222d34;
  --divider-strong: #2f3b43;
  --text-primary: #e9edef;
  --text-secondary: #8696a0;
  --text-meta: #8696a0;
  --icon: #aebac1;
  --icon-lighter: #8696a0;
  --bubble-in: #202c33;
  --bubble-out: #005c4b;
  --bubble-out-meta: #ffffff8c;
  --bubble-in-meta: #ffffff8c;
  --wallpaper: #0b141a;
  --wallpaper-doodle: #d1d7db;
  --doodle-opacity: .04;
  --tick-blue: #53bdeb;
  --tick-gray: #8696a0;
  --unread-badge: #00a884;
  --link: #53bdeb;
  --enc-notice-bg: #182229;
  --enc-notice-text: #ffd279;
  --system-bubble-bg: #182229;
  --nav-active-bg: #2a3942;
  --dropdown-bg: #233138;
  --dropdown-hover: #182229;
  --modal-overlay: rgba(0,0,0,.7);
  --shadow-dropdown: 0 2px 5px 0 rgba(0,0,0,.4), 0 2px 10px 0 rgba(0,0,0,.3);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
body {
  font-family: var(--font);
  font-size: 15px;
  color: var(--text-primary);
  background: var(--app-backdrop);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; }
::selection { background: rgba(0,168,132,.28); }

/* scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(120,120,120,.35); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(120,120,120,.55); }
.scroll-hover ::-webkit-scrollbar-thumb { background: transparent; }
.scroll-hover:hover ::-webkit-scrollbar-thumb { background: rgba(120,120,120,.35); }

svg { display: block; }
.i { display: inline-flex; width: 24px; height: 24px; color: var(--icon); }
.i.sm { width: 20px; height: 20px; }
.i.lg { width: 28px; height: 28px; }

/* ============================================================ APP SHELL */
#app {
  display: flex;
  height: 100vh;
  max-width: 1600px;
  margin: 0 auto;
  background: var(--panel-bg);
  box-shadow: 0 0 0 1px rgba(0,0,0,.03);
}
@media (min-width: 1441px) {
  body { padding: 0; }
  #app { border-left: 1px solid var(--divider); border-right: 1px solid var(--divider); }
}

#workspace { flex: 1; display: flex; min-width: 0; }

/* ---------- NAV RAIL ---------- */
.nav-rail {
  width: 68px;
  flex: 0 0 68px;
  background: var(--panel-header-bg);
  border-right: 1px solid var(--divider);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  gap: 4px;
}
.nav-rail .rail-top, .nav-rail .rail-bottom { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.nav-rail .rail-bottom { margin-top: auto; }
.rail-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative; color: var(--icon);
  transition: background-color .15s;
}
.rail-btn:hover { background: rgba(134,150,160,.14); }
.rail-btn.active { background: var(--nav-active-bg); color: var(--brand); }
.rail-btn.active .i { color: var(--brand); }
.rail-btn .i { width: 26px; height: 26px; }
.rail-btn .rail-badge {
  position: absolute; top: 4px; right: 4px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 9px; background: var(--unread-badge);
  color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.rail-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; cursor: pointer; }
.rail-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rail-sep { width: 28px; height: 1px; background: var(--divider-strong); margin: 6px 0; }

/* ---------- SIDEBAR (chat list) ---------- */
.sidebar {
  width: clamp(360px, 30%, 460px);
  flex: 0 0 clamp(360px, 30%, 460px);
  border-right: 1px solid var(--divider);
  background: var(--panel-bg);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.sidebar-header {
  height: 59px; flex: 0 0 59px;
  padding: 0 16px 0 20px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--panel-bg);
}
.sidebar-header .side-title { font-size: 22px; font-weight: 700; color: var(--brand); letter-spacing: .1px; }
.sidebar-header .side-actions { display: flex; align-items: center; gap: 4px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--icon); transition: background-color .15s;
}
.icon-btn:hover { background: rgba(134,150,160,.16); }
.icon-btn .i { width: 24px; height: 24px; }
.icon-btn.sm { width: 34px; height: 34px; }

/* search + chips */
.side-search-wrap { padding: 8px 12px 0; background: var(--panel-bg); }
.side-search {
  display: flex; align-items: center; gap: 0;
  height: 35px; background: var(--search-field-bg); border-radius: 8px;
  padding: 0 12px; position: relative; transition: box-shadow .12s;
}
.side-search .i { width: 18px; height: 18px; color: var(--icon-lighter); flex: 0 0 auto; }
.side-search .back-search { display: none; }
.side-search input {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: 14px; color: var(--text-primary); padding: 0 8px 0 26px; height: 100%;
}
.side-search input::placeholder { color: var(--text-secondary); }
.side-search.focused { box-shadow: inset 0 0 0 0 transparent; }

.chips { display: flex; gap: 8px; padding: 8px 12px; flex-wrap: wrap; background: var(--panel-bg); }
.chip {
  height: 32px; padding: 0 12px; border-radius: 16px;
  background: var(--search-bg); color: var(--text-secondary);
  font-size: 14px; display: flex; align-items: center;
  transition: background-color .15s, color .15s;
}
.chip:hover { background: var(--divider); }
.chip.active { background: var(--nav-active-bg); color: var(--brand-dark); }
[data-theme="dark"] .chip.active { color: #a7f3d0; }

.side-divider { height: 1px; background: var(--divider); margin: 0; }

/* archived row */
.archived-row {
  display: flex; align-items: center; gap: 20px; padding: 13px 24px 13px 26px;
  color: var(--text-primary); transition: background-color .15s;
}
.archived-row:hover { background: var(--hover-bg); }
.archived-row .i { color: var(--brand); width: 22px; height: 22px; }
.archived-row .arch-label { font-size: 15px; flex: 1; }
.archived-row .arch-count { color: var(--brand); font-size: 13px; font-weight: 600; }

/* chat list */
.chat-list { flex: 1; overflow-y: auto; }
.chat-item {
  display: flex; align-items: center; gap: 13px;
  height: 72px; padding: 0 15px 0 13px; cursor: pointer;
  transition: background-color .15s; position: relative;
}
.chat-item:hover { background: var(--hover-bg); }
.chat-item.active { background: var(--active-bg); }
.chat-item .avatar { flex: 0 0 49px; }
.avatar {
  width: 49px; height: 49px; border-radius: 50%; overflow: hidden;
  background: #dfe5e7; display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
[data-theme="dark"] .avatar { background: #6a7175; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar .avatar-fallback { color: #fff; width: 60%; height: 60%; }
.avatar.sm { width: 40px; height: 40px; }
.avatar.lg { width: 200px; height: 200px; }
.avatar.xl { width: 120px; height: 120px; }

.chat-item .ci-body {
  flex: 1; min-width: 0; border-top: 1px solid var(--divider);
  height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding-right: 4px;
}
.chat-item:first-child .ci-body, .chat-item.active .ci-body { border-top-color: transparent; }
.chat-item .ci-row1, .chat-item .ci-row2 { display: flex; align-items: center; gap: 6px; }
.chat-item .ci-name {
  flex: 1; min-width: 0; font-size: 17px; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-item.unread .ci-name { font-weight: 500; }
.chat-item .ci-time { font-size: 12px; color: var(--text-secondary); flex: 0 0 auto; }
.chat-item.unread .ci-time { color: var(--brand); font-weight: 500; }
.chat-item .ci-preview {
  flex: 1; min-width: 0; font-size: 14px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 3px;
}
.chat-item.unread .ci-preview { color: var(--text-primary); }
.chat-item .ci-preview .tick { flex: 0 0 auto; width: 16px; height: 16px; }
.chat-item .ci-meta { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.ci-badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--unread-badge); color: #fff; font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.ci-icon { color: var(--icon-lighter); width: 18px; height: 18px; }
.ci-icon.pinned { transform: rotate(0deg); }
.ci-chevron {
  opacity: 0; color: var(--icon-lighter); width: 20px; height: 20px;
  transition: opacity .12s; flex: 0 0 auto;
}
.chat-item:hover .ci-chevron { opacity: 1; }
.chat-item.unread .ci-chevron { opacity: 0; }
.chat-item:hover.unread .ci-chevron { opacity: 1; }

.tick { display: inline-flex; }
.tick svg { width: 16px; height: 16px; }
.tick.read { color: var(--tick-blue); }
.tick.gray { color: var(--tick-gray); }

.list-empty { padding: 40px 30px; text-align: center; color: var(--text-secondary); font-size: 14px; }

/* section label in lists */
.list-section { padding: 20px 24px 6px; color: var(--brand); font-size: 14px; }

/* ---------- CONVERSATION PANE ---------- */
.conversation {
  flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative;
  background: var(--wallpaper);
}
/* intro / empty state */
.intro {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--panel-header-bg);
  border-bottom: 6px solid var(--brand); padding: 0 40px;
}
.intro .intro-illus { width: 320px; max-width: 70%; margin-bottom: 30px; opacity: .9; }
.intro h1 { font-size: 32px; font-weight: 300; color: var(--text-primary); margin-bottom: 14px; }
.intro p { font-size: 14px; color: var(--text-secondary); max-width: 460px; line-height: 20px; }
.intro .intro-lock { margin-top: 40px; display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 13px; }
.intro .intro-lock .i { width: 14px; height: 14px; }

/* chat header */
.chat-header {
  height: 59px; flex: 0 0 59px; background: var(--chat-header-bg);
  display: flex; align-items: center; padding: 0 16px; gap: 12px;
  border-left: 1px solid var(--divider); z-index: 5;
}
.chat-header .ch-info { flex: 1; min-width: 0; cursor: pointer; }
.chat-header .ch-name { font-size: 16px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-header .ch-status { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-header .ch-status.typing { color: var(--brand); }
.chat-header .ch-actions { display: flex; align-items: center; gap: 2px; }

/* messages area */
.messages {
  flex: 1; overflow-y: auto; position: relative;
  padding: 12px 6% 8px; display: flex; flex-direction: column; gap: 2px;
  background-color: var(--wallpaper);
}
.messages::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-color: var(--wallpaper-doodle); opacity: var(--doodle-opacity);
  -webkit-mask-image: var(--doodle-url); mask-image: var(--doodle-url);
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  -webkit-mask-size: 366px 366px; mask-size: 366px 366px;
  z-index: 0;
}
.messages > * { position: relative; z-index: 1; }

.date-sep { align-self: center; margin: 12px 0; }
.date-sep span {
  background: var(--system-bubble-bg); color: var(--text-secondary);
  font-size: 12.5px; text-transform: uppercase; padding: 6px 12px; border-radius: 8px;
  box-shadow: var(--shadow-bubble); font-weight: 500; letter-spacing: .2px;
}
.enc-notice { align-self: center; margin: 8px 0 14px; max-width: 90%; }
.enc-notice span {
  background: var(--enc-notice-bg); color: var(--enc-notice-text);
  font-size: 12.5px; padding: 7px 14px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px;
  line-height: 18px; text-align: center;
}
.enc-notice .i { width: 13px; height: 13px; }

.msg-row { display: flex; width: 100%; margin-top: 2px; }
.msg-row.out { justify-content: flex-end; }
.msg-row.in { justify-content: flex-start; }
.msg-row.grouped { margin-top: 1px; }

.bubble {
  max-width: 65%; min-width: 68px; position: relative;
  padding: 6px 7px 8px 9px; border-radius: 7.5px;
  box-shadow: var(--shadow-bubble); font-size: 14.2px; line-height: 19px;
  color: var(--text-primary); word-wrap: break-word;
}
.msg-row.in .bubble { background: var(--bubble-in); border-top-left-radius: 0; }
.msg-row.out .bubble { background: var(--bubble-out); border-top-right-radius: 0; }
.msg-row.grouped .bubble { border-radius: 7.5px; }
/* tails */
.msg-row:not(.grouped).in .bubble::before {
  content: ""; position: absolute; top: 0; left: -8px; width: 8px; height: 13px;
  background: var(--bubble-in);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13'%3E%3Cpath d='M8 0H0c1 4 3 8 8 10V0z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13'%3E%3Cpath d='M8 0H0c1 4 3 8 8 10V0z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.msg-row:not(.grouped).out .bubble::before {
  content: ""; position: absolute; top: 0; right: -8px; width: 8px; height: 13px;
  background: var(--bubble-out);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13'%3E%3Cpath d='M0 0h8c-1 4-3 8-8 10V0z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13'%3E%3Cpath d='M0 0h8c-1 4-3 8-8 10V0z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.bubble .b-author { font-size: 12.8px; font-weight: 500; margin-bottom: 2px; }
.bubble .b-text { white-space: pre-wrap; }
.bubble .b-text a { color: var(--link); text-decoration: underline; }
.bubble .b-meta {
  float: right; margin: -2px -3px -4px 8px; padding-top: 6px;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; color: var(--bubble-in-meta); user-select: none;
}
.msg-row.out .bubble .b-meta { color: var(--bubble-out-meta); }
.bubble .b-meta .tick svg { width: 15px; height: 15px; }
.bubble.deleted .b-text { font-style: italic; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 5px; }
.bubble.deleted .i { width: 14px; height: 14px; }

/* image message */
.bubble.img-bubble { padding: 3px 3px 3px 3px; width: 330px; max-width: 65%; }
.bubble.img-bubble img { width: 100%; border-radius: 6px; display: block; }
.bubble.img-bubble .b-meta { position: absolute; right: 10px; bottom: 8px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.bubble.img-bubble .img-caption { padding: 6px 6px 2px; }

/* voice message */
.bubble.voice-bubble { width: 260px; max-width: 70%; }
.voice-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.voice-row .vplay { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--icon); }
.voice-wave { flex: 1; height: 24px; display: flex; align-items: center; gap: 2px; }
.voice-wave i { display: block; width: 3px; border-radius: 2px; background: var(--icon-lighter); }
.voice-dur { font-size: 11px; color: var(--text-meta); margin-left: 42px; margin-top: 2px; }

/* contact card message */
.bubble.contact-bubble { width: 300px; max-width: 70%; padding: 8px 8px 4px; }
.contact-card-msg { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--divider); }
.contact-card-msg .avatar { width: 44px; height: 44px; }
.contact-card-msg .cc-name { font-size: 15px; color: var(--text-primary); }
.bubble.contact-bubble .cc-action { text-align: center; padding: 8px; color: var(--link); font-size: 14px; }

/* reactions */
.reactions { display: flex; gap: 2px; margin-top: -6px; margin-bottom: 4px; z-index: 2; position: relative; }
.msg-row.out .reactions { justify-content: flex-end; padding-right: 10px; }
.msg-row.in .reactions { justify-content: flex-start; padding-left: 10px; }
.reaction-chip {
  background: var(--panel-header-bg); border: 1px solid var(--wallpaper);
  border-radius: 12px; padding: 1px 5px; font-size: 12px; display: inline-flex; align-items: center; gap: 2px;
  box-shadow: var(--shadow-bubble); cursor: pointer;
}
.reaction-chip .rc-count { font-size: 11px; color: var(--text-secondary); }

/* bubble hover actions (chevron + quick react) */
.bubble .b-chevron {
  position: absolute; top: 2px; right: 2px; width: 26px; height: 22px;
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
  opacity: 0; color: var(--icon); transition: opacity .1s;
  background: linear-gradient(to left, var(--bubble-out) 60%, transparent);
}
.msg-row.in .bubble .b-chevron { background: linear-gradient(to left, var(--bubble-in) 60%, transparent); }
.bubble:hover .b-chevron { opacity: 1; }
.bubble .b-chevron .i { width: 18px; height: 18px; }
.quick-react {
  position: absolute; top: -44px; display: flex; gap: 2px; padding: 4px 8px;
  background: var(--dropdown-bg); border-radius: 24px; box-shadow: var(--shadow-dropdown);
  z-index: 20;
}
.msg-row.out .quick-react { right: 0; }
.msg-row.in .quick-react { left: 0; }
.quick-react button { font-size: 22px; width: 34px; height: 34px; border-radius: 50%; transition: transform .12s var(--ease-snap); }
.quick-react button:hover { transform: scale(1.3); }

/* quoted reply preview inside bubble */
.b-quote {
  background: rgba(0,0,0,.05); border-left: 4px solid var(--brand); border-radius: 4px;
  padding: 4px 8px; margin-bottom: 4px; font-size: 13px; overflow: hidden;
}
[data-theme="dark"] .b-quote { background: rgba(255,255,255,.06); }
.b-quote .bq-name { color: var(--brand); font-weight: 500; font-size: 12.5px; }
.b-quote .bq-text { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- COMPOSER ---------- */
.composer {
  min-height: 62px; background: var(--panel-header-bg); padding: 5px 16px;
  display: flex; align-items: flex-end; gap: 8px; z-index: 5;
}
.composer .comp-btn { color: var(--icon); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: background-color .15s; margin-bottom: 6px; }
.composer .comp-btn:hover { background: rgba(134,150,160,.16); }
.comp-input-wrap { flex: 1; background: var(--panel-bg); border-radius: 8px; min-height: 42px; display: flex; align-items: center; padding: 0 12px; }
.comp-input {
  flex: 1; border: none; outline: none; background: transparent; resize: none;
  font-size: 15px; line-height: 20px; color: var(--text-primary); padding: 9px 0; max-height: 100px; overflow-y: auto;
}
.comp-input:empty::before { content: attr(data-ph); color: var(--text-secondary); }
.composer .send-mic { margin-bottom: 6px; }

/* reply bar above composer */
.reply-bar { background: var(--panel-bg); padding: 8px 16px; display: none; align-items: center; gap: 12px; box-shadow: 0 -1px 0 rgba(0,0,0,.06); }
.reply-bar.show { display: flex; }
.reply-bar .rb-content { flex: 1; border-left: 4px solid var(--brand); background: rgba(0,0,0,.03); border-radius: 4px; padding: 6px 10px; min-width: 0; }
[data-theme="dark"] .reply-bar .rb-content { background: rgba(255,255,255,.04); }
.reply-bar .rb-name { color: var(--brand); font-size: 13px; font-weight: 500; }
.reply-bar .rb-text { color: var(--text-secondary); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* emoji panel */
.emoji-panel {
  position: absolute; left: 0; right: 0; bottom: 62px; height: 320px;
  background: var(--panel-bg); border-top: 1px solid var(--divider);
  display: none; flex-direction: column; z-index: 8;
}
.emoji-panel.show { display: flex; }
.emoji-tabs { display: flex; gap: 4px; padding: 6px 14px; border-bottom: 1px solid var(--divider); }
.emoji-tabs button { padding: 6px 8px; font-size: 20px; border-radius: 6px; opacity: .6; }
.emoji-tabs button.active { opacity: 1; border-bottom: 3px solid var(--brand); border-radius: 0; }
.emoji-grid { flex: 1; overflow-y: auto; padding: 8px 14px; display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 2px; align-content: start; }
.emoji-grid button { font-size: 26px; width: 40px; height: 40px; border-radius: 6px; transition: background-color .12s; }
.emoji-grid button:hover { background: var(--hover-bg); }

/* attach menu */
.attach-menu {
  position: absolute; left: 14px; bottom: 70px; background: var(--dropdown-bg);
  border-radius: 12px; box-shadow: var(--shadow-dropdown); padding: 8px; display: none; z-index: 20; min-width: 210px;
  animation: pop .12s var(--ease-snap);
}
.attach-menu.show { display: block; }
.attach-item { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 8px; transition: background-color .12s; }
.attach-item:hover { background: var(--dropdown-hover); }
.attach-item .ai-ico { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; }
.attach-item .ai-ico .i { width: 22px; height: 22px; color: #fff; }
.attach-item .ai-label { font-size: 15px; color: var(--text-primary); }

/* recording bar */
.rec-bar { flex: 1; display: none; align-items: center; gap: 14px; }
.rec-bar.show { display: flex; }
.rec-bar .rec-dot { width: 12px; height: 12px; border-radius: 50%; background: #f15c6d; animation: blink 1s infinite; }
.rec-bar .rec-time { font-size: 15px; color: var(--text-secondary); min-width: 48px; }
.rec-bar .rec-hint { flex: 1; text-align: center; color: var(--text-secondary); font-size: 14px; }
@keyframes blink { 50% { opacity: .3; } }

/* ============================================================ SLIDE-OVER PANELS (over sidebar) */
.slideover {
  position: absolute; inset: 0; background: var(--panel-bg); z-index: 30;
  display: flex; flex-direction: column; transform: translateX(-100%);
  transition: transform .3s var(--ease-panel); visibility: hidden;
}
.slideover.show { transform: translateX(0); visibility: visible; }
.so-header { background: var(--panel-header-bg); padding: 22px 16px 14px; display: flex; align-items: center; gap: 22px; flex: 0 0 auto; }
.so-header .so-title { font-size: 17px; color: var(--text-primary); }
.so-body { flex: 1; overflow-y: auto; }
.so-search { padding: 8px 12px; }
.so-search .side-search { background: var(--search-field-bg); }

/* new-chat quick actions */
.nc-action { display: flex; align-items: center; gap: 22px; padding: 14px 24px; transition: background-color .15s; }
.nc-action:hover { background: var(--hover-bg); }
.nc-action .nc-ico { width: 49px; height: 49px; border-radius: 50%; background: var(--brand); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.nc-action .nc-ico .i { color: #fff; width: 24px; height: 24px; }
.nc-action .nc-label { font-size: 16px; color: var(--text-primary); }

.contact-row { display: flex; align-items: center; gap: 15px; padding: 10px 20px 10px 15px; transition: background-color .15s; cursor: pointer; }
.contact-row:hover { background: var(--hover-bg); }
.contact-row .cr-body { flex: 1; min-width: 0; border-top: 1px solid var(--divider); padding: 8px 0; }
.contact-row:first-of-type .cr-body { border-top: none; }
.contact-row .cr-name { font-size: 16px; color: var(--text-primary); }
.contact-row .cr-about { font-size: 14px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-row .cr-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--divider-strong); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #fff; }
.contact-row.selected .cr-check { background: var(--brand); border-color: var(--brand); }
.contact-row.selected .cr-check .i { width: 16px; height: 16px; }

/* selected members strip (new group) */
.members-strip { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 16px; background: var(--panel-bg); border-bottom: 1px solid var(--divider); }
.member-pill { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 60px; }
.member-pill .avatar { width: 48px; height: 48px; position: relative; }
.member-pill .mp-x { position: absolute; top: -2px; right: -2px; width: 18px; height: 18px; background: #667781; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; }
.member-pill .mp-x .i { width: 12px; height: 12px; color: #fff; }
.member-pill .mp-name { font-size: 12px; color: var(--text-secondary); max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* profile / settings panel rows */
.profile-photo-wrap { padding: 28px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--panel-bg); }
.field-block { background: var(--panel-bg); padding: 14px 30px 20px; margin-top: 10px; }
.field-block .fb-label { color: var(--brand); font-size: 14px; margin-bottom: 8px; }
.field-block .fb-value { display: flex; align-items: center; justify-content: space-between; font-size: 16px; color: var(--text-primary); border-bottom: 1px solid var(--divider); padding-bottom: 8px; }
.field-block .fb-value input { border: none; outline: none; background: transparent; font-size: 16px; color: var(--text-primary); flex: 1; }
.field-block .fb-hint { color: var(--text-secondary); font-size: 13px; margin-top: 8px; }

.settings-me { display: flex; align-items: center; gap: 20px; padding: 20px 30px; transition: background-color .15s; }
.settings-me:hover { background: var(--hover-bg); }
.settings-me .sm-name { font-size: 20px; color: var(--text-primary); }
.settings-me .sm-about { font-size: 14px; color: var(--text-secondary); }
.settings-row { display: flex; align-items: center; gap: 26px; padding: 16px 30px; transition: background-color .15s; border-top: 1px solid var(--divider); }
.settings-row:hover { background: var(--hover-bg); }
.settings-row .i { color: var(--icon); width: 22px; height: 22px; flex: 0 0 auto; }
.settings-row .sr-body { flex: 1; }
.settings-row .sr-title { font-size: 16px; color: var(--text-primary); }
.settings-row .sr-sub { font-size: 14px; color: var(--text-secondary); }
.settings-row.danger .sr-title, .settings-row.danger .i { color: #ea4c4c; }

.radio-row { display: flex; align-items: center; gap: 18px; padding: 14px 30px; transition: background-color .15s; }
.radio-row:hover { background: var(--hover-bg); }
.radio-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--divider-strong); flex: 0 0 auto; position: relative; }
.radio-row.active .radio-dot { border-color: var(--brand); }
.radio-row.active .radio-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand); }
.radio-row .rr-label { font-size: 15px; color: var(--text-primary); }

/* ============================================================ MAIN-AREA PAGES (status/channels/communities) */
.page {
  flex: 1; min-width: 0; display: flex; background: var(--panel-header-bg);
  border-left: 1px solid var(--divider);
}
.page-list { width: clamp(360px, 30%, 460px); flex: 0 0 clamp(360px, 30%, 460px); background: var(--panel-bg); border-right: 1px solid var(--divider); display: flex; flex-direction: column; overflow: hidden; }
.page-list .pl-header { height: 59px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 22px; }
.page-list .pl-header .pl-title { font-size: 20px; color: var(--text-primary); font-weight: 600; }
.page-list .pl-body { flex: 1; overflow-y: auto; }
.page-detail { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; color: var(--text-secondary); }
.page-detail .pd-illus { width: 260px; max-width: 60%; opacity: .85; margin-bottom: 24px; }
.page-detail h2 { font-size: 26px; font-weight: 300; color: var(--text-primary); margin-bottom: 10px; }
.page-detail p { font-size: 14px; max-width: 420px; line-height: 20px; }

/* status list */
.status-add { display: flex; align-items: center; gap: 16px; padding: 12px 16px; transition: background-color .15s; }
.status-add:hover { background: var(--hover-bg); }
.status-add .sa-ico { position: relative; }
.status-add .sa-plus { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); border: 2px solid var(--panel-bg); display: flex; align-items: center; justify-content: center; }
.status-add .sa-plus .i { width: 12px; height: 12px; color: #fff; }
.status-item { display: flex; align-items: center; gap: 16px; padding: 10px 16px; transition: background-color .15s; cursor: pointer; }
.status-item:hover { background: var(--hover-bg); }
.status-ring { padding: 2px; border-radius: 50%; background: conic-gradient(var(--brand) 0 75%, var(--divider-strong) 75% 100%); }
.status-ring.seen { background: var(--divider-strong); }
.status-ring .avatar { width: 45px; height: 45px; border: 2px solid var(--panel-bg); }
.status-item .st-name { font-size: 16px; color: var(--text-primary); }
.status-item .st-time { font-size: 13px; color: var(--text-secondary); }

/* status viewer overlay */
.story-viewer { position: fixed; inset: 0; background: #0b141a; z-index: 200; display: none; flex-direction: column; align-items: center; }
.story-viewer.show { display: flex; }
.story-bars { display: flex; gap: 4px; width: min(500px, 92%); padding: 14px 0 8px; }
.story-bars .sb { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.story-bars .sb i { display: block; height: 100%; width: 0; background: #fff; }
.story-bars .sb.done i { width: 100%; }
.story-bars .sb.active i { animation: storyfill 5s linear forwards; }
@keyframes storyfill { to { width: 100%; } }
.story-top { display: flex; align-items: center; gap: 12px; width: min(500px, 92%); padding: 6px 0 10px; color: #fff; }
.story-top .avatar { width: 38px; height: 38px; }
.story-top .stt-name { font-size: 15px; }
.story-top .stt-time { font-size: 12px; color: rgba(255,255,255,.7); }
.story-top .story-close { margin-left: auto; color: #fff; }
.story-stage { flex: 1; width: min(500px, 92%); display: flex; align-items: center; justify-content: center; padding: 20px 0; }
.story-card { width: 100%; aspect-ratio: 9/16; max-height: 78vh; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; text-align: center; padding: 30px; }
.story-nav { position: absolute; top: 0; bottom: 0; width: 40%; z-index: 3; }
.story-nav.prev { left: 0; } .story-nav.next { right: 0; }

/* channels */
.channel-item { display: flex; align-items: center; gap: 15px; padding: 10px 16px; transition: background-color .15s; cursor: pointer; }
.channel-item:hover { background: var(--hover-bg); }
.channel-item .avatar { width: 49px; height: 49px; }
.channel-item .cn-name { font-size: 17px; color: var(--text-primary); display: flex; align-items: center; gap: 4px; }
.channel-item .cn-verify { width: 16px; height: 16px; color: var(--link); }
.channel-item .cn-last { font-size: 14px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.discover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 12px 16px; }
.discover-card { background: var(--panel-bg); border: 1px solid var(--divider); border-radius: 10px; padding: 16px; text-align: center; }
.discover-card .avatar { width: 60px; height: 60px; margin: 0 auto 10px; }
.discover-card .dc-name { font-size: 15px; color: var(--text-primary); margin-bottom: 2px; }
.discover-card .dc-followers { font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; }
.btn-follow { background: var(--brand); color: #fff; border-radius: 20px; padding: 6px 20px; font-size: 14px; font-weight: 500; transition: filter .12s; }
.btn-follow:hover { filter: brightness(.95); }
.btn-follow.following { background: transparent; color: var(--brand); border: 1px solid var(--brand); }

/* communities */
.community-block { padding: 8px 0; }
.community-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.community-head .avatar { width: 54px; height: 54px; border-radius: 14px; }
.community-head .comm-name { font-size: 17px; color: var(--text-primary); font-weight: 500; }
.community-head .comm-sub { font-size: 13px; color: var(--text-secondary); }
.community-group { display: flex; align-items: center; gap: 14px; padding: 8px 16px 8px 24px; transition: background-color .15s; cursor: pointer; }
.community-group:hover { background: var(--hover-bg); }
.community-group .avatar { width: 44px; height: 44px; border-radius: 12px; }
.community-group .cg-name { font-size: 16px; color: var(--text-primary); }
.community-group .cg-last { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================ DROPDOWN MENUS */
.dropdown {
  position: fixed; background: var(--dropdown-bg); border-radius: 8px;
  box-shadow: var(--shadow-dropdown); padding: 8px 0; min-width: 200px; z-index: 100;
  animation: pop .11s var(--ease-snap); overflow: hidden;
}
@keyframes pop { from { opacity: .3; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
.dropdown-item { padding: 11px 24px; font-size: 15px; color: var(--text-primary); transition: background-color .12s; white-space: nowrap; display: flex; align-items: center; gap: 14px; }
.dropdown-item:hover { background: var(--dropdown-hover); }
.dropdown-item.danger { color: #ea4c4c; }
.dropdown-item .i { width: 20px; height: 20px; color: var(--icon); }
.dropdown-item.danger .i { color: #ea4c4c; }
.dropdown-sep { height: 1px; background: var(--divider); margin: 4px 0; }

/* ============================================================ MODAL */
.modal-overlay {
  position: fixed; inset: 0; background: var(--modal-overlay); z-index: 150;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.show { display: flex; animation: fade .12s; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--panel-bg); border-radius: 3px; max-width: 400px; width: 100%;
  box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; animation: pop .14s var(--ease-snap);
}
.modal.wide { max-width: 500px; }
.modal-body { padding: 22px 24px 12px; }
.modal-title { font-size: 18px; color: var(--text-primary); margin-bottom: 14px; }
.modal-text { font-size: 14px; color: var(--text-secondary); line-height: 20px; }
.modal-check { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 14px; color: var(--text-primary); }
.cm-input { width: 100%; border: none; border-bottom: 2px solid var(--brand); background: transparent; outline: none; font-size: 15px; color: var(--text-primary); padding: 8px 2px; }
.cm-input::placeholder { color: var(--text-secondary); }
.cm-body .contact-row { padding: 8px 24px; }
.modal-actions { padding: 12px 20px 20px; display: flex; justify-content: flex-end; gap: 8px; }
.btn { padding: 8px 24px; border-radius: 24px; font-size: 15px; font-weight: 500; transition: background-color .12s, filter .12s; }
.btn-text { color: var(--brand); background: transparent; }
.btn-text:hover { background: rgba(0,168,132,.1); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { filter: brightness(.96); }
.btn-danger { background: #ea4c4c; color: #fff; }
.btn-danger:hover { filter: brightness(.96); }
.btn-outline { border: 1px solid var(--divider-strong); color: var(--text-primary); }

/* ============================================================ TOAST */
.toast-root { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: #202c33; color: #e9edef; padding: 12px 20px; border-radius: 8px; font-size: 14px; box-shadow: var(--shadow-dropdown); animation: toastin .2s var(--ease-snap); display: flex; align-items: center; gap: 16px; }
.toast .toast-action { color: var(--brand); font-weight: 500; text-transform: uppercase; font-size: 13px; pointer-events: auto; cursor: pointer; }
@keyframes toastin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================ CONTACT INFO drawer (right side) */
.info-drawer { width: 380px; flex: 0 0 380px; background: var(--panel-bg); border-left: 1px solid var(--divider); display: none; flex-direction: column; overflow: hidden; }
.info-drawer.show { display: flex; }
.info-header { height: 59px; display: flex; align-items: center; gap: 24px; padding: 0 20px; background: var(--panel-header-bg); flex: 0 0 auto; }
.info-header .ih-title { font-size: 16px; }
.info-body { flex: 1; overflow-y: auto; background: var(--search-bg); }
.info-hero { background: var(--panel-bg); padding: 28px 0 24px; text-align: center; }
.info-hero .avatar { margin: 0 auto 14px; }
.info-hero .ih-name { font-size: 22px; color: var(--text-primary); }
.info-hero .ih-phone { font-size: 16px; color: var(--text-secondary); margin-top: 2px; }
.info-section { background: var(--panel-bg); padding: 14px 30px; margin-top: 10px; }
.info-section .is-label { color: var(--brand); font-size: 14px; margin-bottom: 6px; }
.info-section .is-text { color: var(--text-primary); font-size: 15px; }
.info-action { display: flex; align-items: center; gap: 20px; padding: 16px 30px; background: var(--panel-bg); color: #ea4c4c; transition: background-color .15s; }
.info-action:hover { background: var(--hover-bg); }
.info-action .i { color: #ea4c4c; width: 22px; height: 22px; }

/* ============================================================ AUTH / LOGIN */
.auth-screen {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--app-backdrop);
  border-top: 6px solid var(--brand);
}
.auth-card {
  width: 100%; max-width: 400px; background: var(--panel-bg); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(11,20,26,.18); padding: 36px 34px 26px;
  display: flex; flex-direction: column; gap: 6px; text-align: center;
}
.auth-logo { width: 84px; height: 84px; border-radius: 50%; background: var(--brand); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; box-shadow: 0 6px 18px rgba(0,168,132,.35); }
.auth-card h1 { font-size: 22px; font-weight: 600; color: var(--text-primary); }
.auth-sub { font-size: 14px; color: var(--text-secondary); line-height: 19px; margin-bottom: 14px; }
.auth-err { background: #fdecea; color: #c0392b; font-size: 13.5px; border-radius: 8px; padding: 9px 12px; margin-bottom: 6px; text-align: left; }
[data-theme="dark"] .auth-err { background: #3a1d1d; color: #f3a9a2; }
.auth-field { display: flex; flex-direction: column; gap: 5px; text-align: left; margin-bottom: 12px; }
.auth-field span { font-size: 12.5px; color: var(--brand-dark); font-weight: 500; letter-spacing: .2px; }
[data-theme="dark"] .auth-field span { color: #7fd4bd; }
.auth-field input { height: 44px; border: 1.5px solid var(--divider-strong); border-radius: 9px; background: var(--panel-bg); color: var(--text-primary); font-size: 15px; padding: 0 13px; outline: none; transition: border-color .15s; }
.auth-field input:focus { border-color: var(--brand); }
.auth-btn { height: 46px; border-radius: 24px; background: var(--brand); color: #fff; font-size: 15.5px; font-weight: 600; margin-top: 8px; transition: filter .12s; }
.auth-btn:hover { filter: brightness(.96); }
.auth-btn:disabled { opacity: .7; cursor: default; }
.auth-foot { font-size: 12px; color: var(--text-secondary); margin-top: 16px; }

/* utility */
.hidden { display: none !important; }
.online-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); border: 2px solid var(--panel-bg); position: absolute; right: 0; bottom: 0; }
.avatar-wrap { position: relative; }

/* responsive: hide nav-rail labels etc on small */
@media (max-width: 900px) {
  .sidebar { width: 100%; flex-basis: 100%; }
  .conversation.no-chat { display: none; }
}

:root { --doodle-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='366' height='366' viewBox='0 0 366 366' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(77 202) rotate(37) scale(0.79)'%3E%3Cpath d='M8 3l5 5-3 3a16 16 0 0 0 8 8l3-3 5 5-3 4a24 24 0 0 1-19-19z'/%3E%3C/g%3E%3Cg transform='translate(48 187) rotate(259) scale(0.76)'%3E%3Cpath d='M16 3l4 9 10 1-7.5 6.5L25 30l-9-5-9 5 2.5-10.5L2 13l10-1z'/%3E%3C/g%3E%3Cg transform='translate(19 44) rotate(35) scale(0.70)'%3E%3Cpath d='M16 2a14 14 0 1 0 0 28 14 14 0 0 0 0-28zM10 12a2 2 0 1 1 0 .01zM22 12a2 2 0 1 1 0 .01zM9 19a9 9 0 0 0 14 0'/%3E%3C/g%3E%3Cg transform='translate(46 282) rotate(289) scale(0.69)'%3E%3Cpath d='M16 2a14 14 0 1 0 0 28 14 14 0 0 0 0-28zM10 12a2 2 0 1 1 0 .01zM22 12a2 2 0 1 1 0 .01zM9 19a9 9 0 0 0 14 0'/%3E%3C/g%3E%3Cg transform='translate(114 322) rotate(31) scale(0.78)'%3E%3Cpath d='M16 30S3 22 3 12a7 7 0 0 1 13-3 7 7 0 0 1 13 3c0 10-13 18-13 18z'/%3E%3C/g%3E%3Cg transform='translate(299 203) rotate(113) scale(0.52)'%3E%3Cpath d='M2 18l28-12-8 24-5-9-9-3z'/%3E%3C/g%3E%3Cg transform='translate(285 68) rotate(73) scale(0.63)'%3E%3Cpath d='M2 4h28a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H14l-7 6v-6H2a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3z'/%3E%3C/g%3E%3Cg transform='translate(60 292) rotate(349) scale(0.64)'%3E%3Cpath d='M16 3l4 9 10 1-7.5 6.5L25 30l-9-5-9 5 2.5-10.5L2 13l10-1z'/%3E%3C/g%3E%3Cg transform='translate(52 297) rotate(96) scale(0.76)'%3E%3Cpath d='M12 4v18a5 4 0 1 1-3-3.7V8l14-3v14a5 4 0 1 1-3-3.7V4z'/%3E%3C/g%3E%3Cg transform='translate(49 280) rotate(288) scale(0.82)'%3E%3Cpath d='M8 3l5 5-3 3a16 16 0 0 0 8 8l3-3 5 5-3 4a24 24 0 0 1-19-19z'/%3E%3C/g%3E%3Cg transform='translate(316 105) rotate(272) scale(0.72)'%3E%3Cpath d='M2 4h28a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H14l-7 6v-6H2a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3z'/%3E%3C/g%3E%3Cg transform='translate(160 238) rotate(232) scale(0.76)'%3E%3Cpath d='M16 10a6 6 0 1 0 0 12 6 6 0 0 0 0-12zM16 2v5M16 25v5M2 16h5M25 16h5M6 6l3.5 3.5M22.5 22.5 26 26M26 6l-3.5 3.5M9.5 22.5 6 26'/%3E%3C/g%3E%3Cg transform='translate(153 127) rotate(357) scale(0.86)'%3E%3Cpath d='M8 3l5 5-3 3a16 16 0 0 0 8 8l3-3 5 5-3 4a24 24 0 0 1-19-19z'/%3E%3C/g%3E%3Cg transform='translate(41 294) rotate(253) scale(0.64)'%3E%3Cpath d='M16 2a14 14 0 1 0 0 28 14 14 0 0 0 0-28zM10 12a2 2 0 1 1 0 .01zM22 12a2 2 0 1 1 0 .01zM9 19a9 9 0 0 0 14 0'/%3E%3C/g%3E%3Cg transform='translate(229 147) rotate(37) scale(0.77)'%3E%3Cpath d='M8 3l5 5-3 3a16 16 0 0 0 8 8l3-3 5 5-3 4a24 24 0 0 1-19-19z'/%3E%3C/g%3E%3Cg transform='translate(262 214) rotate(175) scale(0.57)'%3E%3Cpath d='M16 30S3 22 3 12a7 7 0 0 1 13-3 7 7 0 0 1 13 3c0 10-13 18-13 18z'/%3E%3C/g%3E%3Cg transform='translate(250 215) rotate(342) scale(0.52)'%3E%3Cpath d='M12 4v18a5 4 0 1 1-3-3.7V8l14-3v14a5 4 0 1 1-3-3.7V4z'/%3E%3C/g%3E%3Cg transform='translate(285 293) rotate(160) scale(0.86)'%3E%3Cpath d='M16 30S3 22 3 12a7 7 0 0 1 13-3 7 7 0 0 1 13 3c0 10-13 18-13 18z'/%3E%3C/g%3E%3Cg transform='translate(179 304) rotate(233) scale(0.72)'%3E%3Cpath d='M8 3l5 5-3 3a16 16 0 0 0 8 8l3-3 5 5-3 4a24 24 0 0 1-19-19z'/%3E%3C/g%3E%3Cg transform='translate(47 138) rotate(340) scale(0.71)'%3E%3Cpath d='M16 30S3 22 3 12a7 7 0 0 1 13-3 7 7 0 0 1 13 3c0 10-13 18-13 18z'/%3E%3C/g%3E%3Cg transform='translate(31 158) rotate(348) scale(0.79)'%3E%3Cpath d='M16 30S3 22 3 12a7 7 0 0 1 13-3 7 7 0 0 1 13 3c0 10-13 18-13 18z'/%3E%3C/g%3E%3Cg transform='translate(145 197) rotate(177) scale(0.90)'%3E%3Cpath d='M5 8h18v10a8 8 0 0 1-8 8h-2a8 8 0 0 1-8-8zM23 10h4a3 3 0 0 1 0 8h-4'/%3E%3C/g%3E%3Cg transform='translate(236 181) rotate(59) scale(0.58)'%3E%3Cpath d='M2 4h28a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H14l-7 6v-6H2a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3z'/%3E%3C/g%3E%3Cg transform='translate(30 111) rotate(66) scale(0.85)'%3E%3Cpath d='M5 8h18v10a8 8 0 0 1-8 8h-2a8 8 0 0 1-8-8zM23 10h4a3 3 0 0 1 0 8h-4'/%3E%3C/g%3E%3C/svg%3E"); }