@phuetz/code-buddy 1.6.1 → 2.0.0

package/dist/server/mobile/assets/styles.css

@@ -0,0 +1,831 @@
+:root {
+  --deep: #0a0a0f;
+  --surface: #12121a;
+  --panel: #1a1a26;
+  --border: #2d2d44;
+  --accent: #f5a623;
+  --accent-hover: #e6951a;
+  --cyan: #06b6d4;
+  --text: #e8e8f0;
+  --muted: #9898b0;
+  --danger: #ef4444;
+  --ok: #22c55e;
+  --read: #60a5fa;
+  --radius: 14px;
+  --nav-h: 56px;
+  --touch: 44px;
+  --kb: 0px;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+html, body, #app { height: 100%; }
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background: var(--deep);
+  color: var(--text);
+}
+
+.screen { min-height: 100%; display: none; flex-direction: column; }
+.screen.active { display: flex; }
+.hidden { display: none !important; }
+
+.brand { padding: 48px 24px 16px; text-align: center; }
+.brand h1 { color: var(--accent); letter-spacing: -0.4px; }
+.subtitle { color: var(--muted); }
+
+.login-form, .composer, .modal-card, .panel {
+  padding: 16px 20px;
+}
+.login-form { display: flex; flex-direction: column; gap: 10px; max-width: 420px; margin: 0 auto; width: 100%; }
+label { font-size: 13px; color: var(--muted); }
+textarea, input {
+  width: 100%;
+  background: var(--surface);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px 12px;
+  font: inherit;
+}
+.hint { font-size: 12px; color: var(--muted); }
+.button-row { display: flex; gap: 8px; }
+.btn {
+  border: 0;
+  border-radius: 10px;
+  padding: 10px 14px;
+  font: inherit;
+  cursor: pointer;
+  background: var(--panel);
+  color: var(--text);
+}
+.btn.primary { background: var(--accent); color: #1a1204; font-weight: 600; }
+.btn.secondary { background: var(--panel); color: var(--cyan); }
+.btn.danger { background: var(--danger); color: #fff; }
+.btn.ghost, .btn.icon { background: transparent; color: var(--text); }
+.btn.icon { font-size: 18px; padding: 8px 10px; }
+.btn.touch {
+  min-width: var(--touch);
+  min-height: var(--touch);
+}
+.btn.primary.pulse {
+  animation: send-pulse 280ms ease;
+}
+@keyframes send-pulse {
+  0% { transform: scale(1); }
+  40% { transform: scale(1.12); }
+  100% { transform: scale(1); }
+}
+.error-message { color: var(--danger); font-size: 13px; }
+
+.app-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  padding-top: max(8px, env(safe-area-inset-top, 0px));
+  padding-left: max(12px, env(safe-area-inset-left, 0px));
+  padding-right: max(12px, env(safe-area-inset-right, 0px));
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+}
+.header-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+  background: var(--panel);
+  border: 2px solid var(--border);
+  flex-shrink: 0;
+}
+.header-meta { flex: 1; min-width: 0; }
+.header-name {
+  display: block;
+  text-align: left;
+  font-weight: 600;
+  color: var(--accent);
+  padding: 0;
+  min-height: auto;
+}
+.presence-line {
+  font-size: 12px;
+  color: var(--muted);
+  margin-top: 1px;
+}
+.presence-line.online { color: var(--ok); }
+.presence-line.typing { color: var(--accent); }
+.mood-chip {
+  font-size: 12px;
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: #2a1f0a;
+  color: var(--accent);
+  white-space: nowrap;
+}
+.status-dot { color: var(--muted); }
+.status-dot.ok { color: var(--ok); }
+.status-dot.busy { color: var(--accent); }
+
+.main-content {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + var(--kb));
+}
+.panel { display: none; height: 100%; overflow: auto; }
+.panel.active { display: flex; flex-direction: column; }
+#chat-section.panel.active { overflow: hidden; position: relative; padding: 0; }
+
+.messages {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 12px 12px 8px;
+  touch-action: pan-y;
+}
+.day-sep {
+  align-self: center;
+  font-size: 12px;
+  color: var(--muted);
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 4px 10px;
+  margin: 8px 0;
+}
+.msg-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  max-width: 92%;
+}
+.msg-row.user { align-self: flex-end; flex-direction: row-reverse; }
+.msg-row.assistant { align-self: flex-start; }
+.msg-row.system { align-self: center; max-width: 100%; }
+.msg-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+  background: var(--panel);
+}
+.msg-row.group-mid .msg-avatar,
+.msg-row.group-start .msg-avatar { visibility: hidden; }
+.bubble {
+  max-width: 100%;
+  padding: 10px 12px;
+  border-radius: 16px;
+  line-height: 1.45;
+  font-size: 15px;
+  word-break: break-word;
+}
+.bubble.user { background: var(--accent); color: #1a1204; }
+.bubble.assistant { background: var(--panel); border: 1px solid var(--border); }
+.bubble.system { color: var(--muted); font-size: 13px; background: transparent; border: 0; }
+.msg-row.user .bubble.group-start { border-radius: 16px 16px 4px 16px; }
+.msg-row.user .bubble.group-mid { border-radius: 16px 4px 4px 16px; }
+.msg-row.user .bubble.group-end { border-radius: 16px 4px 16px 16px; }
+.msg-row.assistant .bubble.group-start { border-radius: 16px 16px 16px 4px; }
+.msg-row.assistant .bubble.group-mid { border-radius: 4px 16px 16px 4px; }
+.msg-row.assistant .bubble.group-end { border-radius: 4px 16px 16px 16px; }
+.bubble pre { overflow: auto; font-size: 12px; margin-top: 6px; }
+.bubble code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
+.bubble img.selfie,
+.bubble img.bubble-img {
+  display: block;
+  max-width: 100%;
+  border-radius: 12px;
+  margin-top: 8px;
+  cursor: pointer;
+}
+.bubble a { color: var(--cyan); }
+.bubble.user a { color: #143a44; }
+.bubble-meta {
+  display: none;
+  font-size: 11px;
+  color: var(--muted);
+  margin-top: 4px;
+  text-align: right;
+}
+.bubble.user .bubble-meta { color: #5a3d0a; }
+.msg-row.meta-on .bubble-meta { display: block; }
+.bubble-reactions {
+  font-size: 16px;
+  margin-top: 4px;
+}
+.ack { margin-left: 6px; letter-spacing: -2px; }
+.ack.read { color: var(--read); }
+.msg-row.user .ack.read { color: #1d4ed8; }
+.msg-row.selected { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 12px; }
+.msg-row.flash { animation: msg-flash 700ms ease; }
+@keyframes msg-flash {
+  0% { background: rgba(245, 166, 35, 0.28); }
+  100% { background: transparent; }
+}
+.quote-ref {
+  display: block;
+  width: 100%;
+  text-align: left;
+  border: 0;
+  border-left: 3px solid var(--cyan);
+  background: rgba(6, 182, 212, 0.12);
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  padding: 6px 8px;
+  margin-bottom: 6px;
+  border-radius: 0 8px 8px 0;
+  cursor: pointer;
+  min-height: var(--touch);
+}
+.bubble.user .quote-ref { border-left-color: #5a3d0a; background: rgba(26, 18, 4, 0.12); }
+.edited-mark { font-style: italic; margin-left: 4px; opacity: 0.75; }
+.new-sep {
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--danger);
+  font-size: 12px;
+  margin: 8px 0;
+}
+.new-sep::before, .new-sep::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--danger);
+}
+.search-bar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+}
+.search-bar.hidden { display: none !important; }
+.search-bar input { min-height: var(--touch); }
+.search-count { font-size: 12px; color: var(--muted); min-width: 3em; text-align: center; }
+mark.search-hit {
+  background: #f5a623;
+  color: #1a1204;
+  border-radius: 2px;
+  padding: 0 1px;
+}
+.pinned-bar {
+  border-bottom: 1px solid var(--border);
+  background: var(--panel);
+}
+.pinned-bar.hidden { display: none !important; }
+.pinned-toggle {
+  width: 100%;
+  min-height: var(--touch);
+  border: 0;
+  background: transparent;
+  color: var(--accent);
+  font: inherit;
+  text-align: left;
+  padding: 8px 12px;
+  cursor: pointer;
+}
+.pinned-list { padding: 0 12px 8px; display: flex; flex-direction: column; gap: 4px; }
+.pinned-item {
+  min-height: var(--touch);
+  border: 0;
+  background: var(--surface);
+  color: var(--text);
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  padding: 8px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+.reply-quote {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-top: 1px solid var(--border);
+  background: var(--panel);
+}
+.reply-quote.hidden { display: none !important; }
+.reply-quote-body {
+  flex: 1;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  min-height: var(--touch);
+  cursor: pointer;
+}
+.reply-quote-kicker { display: block; font-size: 11px; color: var(--accent); }
+.select-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-top: 1px solid var(--border);
+  background: var(--surface);
+}
+.select-bar.hidden { display: none !important; }
+.select-bar .btn { min-height: var(--touch); }
+
+.typing-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 16px 8px;
+  color: var(--muted);
+  font-size: 13px;
+}
+.typing-dots { display: inline-flex; gap: 4px; }
+.typing-dots i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+  animation: typing-bounce 1s infinite;
+}
+.typing-dots i:nth-child(2) { animation-delay: 0.15s; }
+.typing-dots i:nth-child(3) { animation-delay: 0.3s; }
+@keyframes typing-bounce {
+  0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
+  40% { transform: translateY(-4px); opacity: 1; }
+}
+
+.suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 6px 12px;
+}
+.suggest-chip {
+  min-height: var(--touch);
+  padding: 8px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--panel);
+  color: var(--text);
+  font: inherit;
+  font-size: 14px;
+  cursor: pointer;
+}
+.suggest-hide {
+  min-height: var(--touch);
+  min-width: var(--touch);
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  font: inherit;
+  cursor: pointer;
+}
+
+.composer {
+  display: flex;
+  gap: 6px;
+  align-items: flex-end;
+  border-top: 1px solid var(--border);
+  background: var(--surface);
+  padding: 8px 10px 10px;
+  padding-left: max(10px, env(safe-area-inset-left, 0px));
+  padding-right: max(10px, env(safe-area-inset-right, 0px));
+}
+.composer textarea {
+  min-height: var(--touch);
+  max-height: 132px;
+  resize: none;
+  line-height: 22px;
+  padding: 10px 12px;
+}
+
+.emoji-picker {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 58px;
+  height: 42vh;
+  max-height: 360px;
+  background: var(--surface);
+  border-top: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  z-index: 20;
+  padding: 8px 10px 10px;
+  overflow: hidden;
+}
+.emoji-picker.hidden { display: none !important; }
+.emoji-cats {
+  display: flex;
+  gap: 4px;
+  overflow-x: auto;
+  padding: 6px 0;
+}
+.emoji-cat {
+  min-width: var(--touch);
+  min-height: var(--touch);
+  border: 0;
+  background: transparent;
+  font-size: 20px;
+  border-radius: 10px;
+  cursor: pointer;
+}
+.emoji-cat.active { background: var(--panel); }
+.emoji-grid {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 2px;
+  overflow: auto;
+  flex: 1;
+  min-height: 0;
+}
+.emoji-cell {
+  min-width: var(--touch);
+  min-height: var(--touch);
+  border: 0;
+  background: transparent;
+  font-size: 22px;
+  cursor: pointer;
+  border-radius: 8px;
+}
+.emoji-cell:active { background: var(--panel); }
+#emoji-search { margin-bottom: 4px; min-height: var(--touch); }
+
+.jump-bottom {
+  position: absolute;
+  right: 16px;
+  bottom: 72px;
+  min-width: var(--touch);
+  min-height: var(--touch);
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+  font-size: 18px;
+  z-index: 15;
+  cursor: pointer;
+}
+.unread-count {
+  font-size: 11px;
+  background: var(--danger);
+  color: #fff;
+  border-radius: 8px;
+  padding: 0 5px;
+  margin-left: 2px;
+}
+
+.lightbox {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.88);
+  z-index: 80;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+}
+.lightbox.hidden { display: none !important; }
+.lightbox img {
+  max-width: 96vw;
+  max-height: 92vh;
+  min-width: 48vw;
+  border-radius: 8px;
+  background: var(--panel);
+}
+
+.reaction-bar {
+  position: fixed;
+  z-index: 70;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 6px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  max-width: min(360px, calc(100vw - 16px));
+}
+.react-emojis, .react-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  justify-content: center;
+}
+.react-btn {
+  min-width: var(--touch);
+  min-height: var(--touch);
+  border: 0;
+  background: transparent;
+  font-size: 20px;
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+.bottom-nav {
+  position: fixed;
+  left: 0; right: 0;
+  bottom: var(--kb);
+  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  background: var(--surface);
+  border-top: 1px solid var(--border);
+}
+.nav-item {
+  background: transparent;
+  border: 0;
+  color: var(--muted);
+  font: inherit;
+  position: relative;
+  min-height: var(--nav-h);
+}
+.nav-item.active { color: var(--accent); }
+.badge {
+  position: absolute;
+  top: 6px;
+  right: 18%;
+  background: var(--danger);
+  color: #fff;
+  border-radius: 8px;
+  font-size: 10px;
+  padding: 1px 5px;
+}
+
+.list { display: flex; flex-direction: column; gap: 8px; }
+.list-item {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 12px;
+  text-align: left;
+  color: inherit;
+  width: 100%;
+  font: inherit;
+  min-height: var(--touch);
+}
+.list-item small { display: block; color: var(--muted); margin-top: 4px; }
+.status-grid { display: grid; gap: 10px; }
+.status-card {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 12px;
+}
+.status-card h3 { font-size: 13px; color: var(--cyan); margin-bottom: 6px; }
+.trajectory {
+  white-space: pre-wrap;
+  font-size: 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px;
+  margin-top: 10px;
+}
+
+.modal { border: 0; background: transparent; padding: 0; }
+.modal::backdrop { background: rgba(0, 0, 0, 0.6); }
+.modal-card {
+  background: var(--surface);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  width: min(92vw, 420px);
+}
+.modal-card header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
+.modal-body { color: var(--muted); font-size: 14px; margin-bottom: 12px; }
+.clear-confirm { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; color: var(--text); }
+.risk-high, .risk-critical { color: var(--danger); }
+.risk-medium { color: var(--accent); }
+.risk-low { color: var(--ok); }
+
+.empty { color: var(--muted); padding: 24px 8px; text-align: center; }
+
+/* --- Photos partagées : composer, prévisualisation, album ------------------ */
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.attach-preview {
+  display: flex;
+  gap: 8px;
+  padding: 8px 12px 0;
+  overflow-x: auto;
+}
+
+.attach-thumb {
+  position: relative;
+  flex: 0 0 auto;
+}
+
+.attach-thumb img {
+  width: 64px;
+  height: 64px;
+  object-fit: cover;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+}
+
+.attach-remove {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(0, 0, 0, 0.75);
+  color: #fff;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.bubble-photos {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.bubble-img.sent {
+  max-width: 46%;
+  border-radius: 10px;
+}
+
+/* `.section-header` carried no rule at all: the refresh button wrapped onto its
+   own line in Runs as well as in Album. One rule fixes both. */
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.album-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+  gap: 6px;
+  /* The panel already pads horizontally; only the bottom needs breathing room. */
+  padding: 8px 0 24px;
+}
+
+.album-tile {
+  position: relative;
+  padding: 0;
+  border: none;
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 10px;
+  overflow: hidden;
+  aspect-ratio: 1 / 1;
+  cursor: pointer;
+}
+
+.album-tile img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.album-tile.selfie {
+  outline: 1px solid rgba(255, 138, 190, 0.5);
+  outline-offset: -1px;
+}
+
+.album-meta {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 2px 4px;
+  font-size: 10px;
+  color: #fff;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
+  text-align: right;
+}
+
+.album-empty {
+  padding: 24px 16px;
+  text-align: center;
+  opacity: 0.7;
+}
+
+.lightbox-actions {
+  position: absolute;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 12px;
+}
+
+.record-overlay {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  background: var(--panel);
+  border-top: 1px solid var(--border);
+}
+.record-overlay.hidden { display: none !important; }
+.record-overlay.cancel { background: #3a1212; }
+.record-wave { flex: 1; height: 44px; }
+.record-timer { min-width: 3em; font-variant-numeric: tabular-nums; color: var(--danger); }
+.record-hint { font-size: 12px; color: var(--muted); }
+.voice-card {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+.voice-card .btn.touch { min-width: var(--touch); min-height: var(--touch); }
+.voice-dur { font-size: 13px; color: inherit; opacity: 0.8; }
+.voice-transcript {
+  width: 100%;
+  font-size: 13px;
+  margin-top: 4px;
+}
+.setting-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: var(--touch);
+  margin: 10px 0;
+  color: var(--text);
+}
+html[data-theme="light"] {
+  --deep: #f3efe6;
+  --surface: #fffaf3;
+  --panel: #efe7d8;
+  --border: #d7cbb6;
+  --text: #1a1204;
+  --muted: #6b5d4a;
+}
+html[data-font="1"] { font-size: 14px; }
+html[data-font="2"] { font-size: 16px; }
+html[data-font="3"] { font-size: 18px; }
+.messages.wp-1 {
+  background-image: repeating-linear-gradient(45deg, rgba(245,166,35,0.06) 0 12px, transparent 12px 24px);
+}
+.messages.wp-2 {
+  background-image: repeating-linear-gradient(0deg, rgba(6,182,212,0.08) 0 8px, transparent 8px 16px);
+}
+.messages.wp-3 {
+  background-image: radial-gradient(rgba(245,166,35,0.18) 1px, transparent 1px);
+  background-size: 14px 14px;
+}
+.bubble.emoji-only {
+  background: transparent;
+  border: 0;
+  font-size: 3em;
+  line-height: 1.1;
+  padding: 0;
+}
+.emoji-tones { display: flex; gap: 4px; padding: 6px 0; }
+.setting-fieldset {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 8px;
+  margin: 10px 0;
+}
+.setting-fieldset legend { color: var(--muted); font-size: 12px; padding: 0 6px; }
+.link-preview {
+  display: block;
+  margin-top: 8px;
+  padding: 8px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--surface);
+  text-align: left;
+  color: inherit;
+  text-decoration: none;
+}
+.link-preview strong { display: block; }
+.link-preview span { font-size: 12px; color: var(--muted); }
+.album-del-confirm {
+  position: absolute;
+  bottom: 80px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-radius: 12px;
+  background: rgba(20, 20, 26, 0.94);
+  color: #fff;
+}