/**
 * =========================================================
 * SHELL.CSS — Shared layout + component styles
 * =========================================================
 *
 * This file contains ALL shared styles for the Ethan app.
 * Page-specific styles go inside each page's <style> block.
 *
 * SECTIONS:
 *   1. Reset + Base — body, typography, colors
 *   2. Layout — app-shell, sidebar, main content area
 *   3. Sidebar — nav links, logo, active states, icons
 *   4. Login Gate — password overlay
 *   5. Mobile — hamburger menu, responsive breakpoints
 *   6. Components — panels, cards, badges, buttons
 *   7. Dashboard — billing hero, card grid, pulse strip
 *   8. Forms — inputs, selects, settings controls
 *   9. Lists — task items, pipeline items, inbox accordion
 *  10. Social — platform icons, badges
 *  11. Chat — SMS bubbles
 *
 * BRAND COLORS (canonical, do not drift):
 *   Dark Base:   #0E1319
 *   Dark Gray:   #8C8C8C
 *   Medium Gray: #B5B5B5
 *   Light Gray:  #D9D9D9
 *   Off-White:   #EDEDEE
 *   Ecto Green:  #A8F06A  (primary accent)
 *   Orange:      #F9A03F  (secondary accent)
 *   Purple:      #A155F0  (secondary accent)
 *   Cyan:        #00FFFF  (secondary accent)
 *
 * ========================================================= */


/* ---------------------------------------------------------
   1. RESET + BASE
   --------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

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

html, body {
  background: #0E1319;
  color: #F2F2F2;
  font-family: 'PP Neue Montreal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}


/* ---------------------------------------------------------
   2. LAYOUT
   --------------------------------------------------------- */

.app-shell {
  display: flex;
  height: 100vh;
}

.main {
  flex: 1;
  overflow-y: auto;
  /* Extra bottom padding so the floating chat bubble in the lower-right
     never obscures the end of a page's live content (metrics, tables, etc). */
  padding: 32px 40px 120px;
}

.page-content { }


/* ---------------------------------------------------------
   3. SIDEBAR
   --------------------------------------------------------- */

.sidebar {
  width: 170px;
  background: #0A0E14;
  border-right: 1px solid rgba(255,255,255,0.06);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-logo {
  display: block;
  width: 100px;
  height: 37px;
  margin-top: 14px;
  margin-bottom: 12px;
  margin-left: 12px;
  background-color: #D9D8D6;
  -webkit-mask-image: url(branding/ghost_logo.svg);
  mask-image: url(branding/ghost_logo.svg);
  font-size: 0;
  overflow: hidden;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  color: #D9D8D6;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.15s;
}

.sidebar-nav a:hover { background: rgba(255,255,255,0.04); }
.sidebar-nav a.active { background: rgba(255,255,255,0.08); color: #F2F2F2; }

/* Nav icon masks — each link uses an SVG mask for its icon */
.sidebar-nav .nav-icon {
  width: 19px;
  height: 19px;
  background-color: #9F9FA0;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
  opacity: 0.85;
}

.sidebar-nav a[data-page="social"] .nav-icon { position: relative; top: -1px; }
.sidebar-nav a.active .nav-icon { opacity: 1; }

/* Active icon colors — one per tab */
.sidebar-nav a.active[data-page="dashboard"] .nav-icon { background-color: #A8F06A; }
.sidebar-nav a.active[data-page="chat"] .nav-icon      { background-color: #00FFFF; }
.sidebar-nav a.active[data-page="inbox"] .nav-icon     { background-color: #A155F0; }
.sidebar-nav a.active[data-page="calendar"] .nav-icon  { background-color: #F9A03F; }
.sidebar-nav a.active[data-page="pipeline"] .nav-icon  { background-color: #A8F06A; }
.sidebar-nav a.active[data-page="tasks"] .nav-icon     { background-color: #00FFFF; }
.sidebar-nav a.active[data-page="social"] .nav-icon    { background-color: #A155F0; }
.sidebar-nav a.active[data-page="traffic"] .nav-icon   { background-color: #F9A03F; }
.sidebar-nav a.active[data-page="googleads"] .nav-icon { background-color: #00FFFF; }
.sidebar-nav a.active[data-page="sms"] .nav-icon       { background-color: #A8F06A; }
.sidebar-nav a.active[data-page="guide"] .nav-icon     { background-color: #00FFFF; }
.sidebar-nav a.active[data-page="settings"] .nav-icon  { background-color: #A155F0; }


/* ---------------------------------------------------------
   4. LOGIN GATE
   --------------------------------------------------------- */

.login-gate {
  position: fixed;
  inset: 0;
  background: #0A0E14;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.login-gate.hidden { display: none; }

.login-gate h2 {
  font-size: 24px;
  font-weight: 300;
  color: #D9D8D6;
  margin-bottom: 24px;
  letter-spacing: 1px;
}

.login-gate input {
  width: 260px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #F2F2F2;
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.login-gate input:focus {
  border-color: rgba(168,240,106,0.3);
}

.login-error {
  color: #f87171;
  font-size: 13px;
  margin-top: 12px;
  min-height: 20px;
}


/* ---------------------------------------------------------
   5. MOBILE
   --------------------------------------------------------- */

.hamburger {
  display: none;
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 1001;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #D9D8D6;
  font-size: 22px;
  padding: 8px 12px;
  cursor: pointer;
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  background: #0A0E14;
  border-right: 1px solid rgba(255,255,255,0.06);
  padding: 70px 20px 20px;
  z-index: 1000;
  flex-direction: column;
  gap: 4px;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
}

.mobile-menu.open {
  transform: translateX(0);
}

.mobile-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: #D9D8D6;
  text-decoration: none;
  font-size: 14px;
}

.mobile-menu a.active { background: rgba(255,255,255,0.08); color: #F2F2F2; }

.menu-logo {
  font-size: 18px;
  font-weight: 300;
  color: #D9D8D6;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

@media (max-width: 1080px) {
  .sidebar { display: none; }
  .hamburger { display: block; }
  .mobile-menu { display: flex; }
  .main { padding: 20px 16px 110px; padding-top: 60px; }

  /* Header — stack greeting + date vertically */
  .header { flex-direction: column; gap: 4px; }
  .header h1 { font-size: 24px; }
  .header-meta { white-space: normal; font-size: 10px; }
  .header-affirmation { font-size: 22px !important; }

  /* Billing hero — stack amount + bar vertically */
  .billing-hero { flex-direction: column; gap: 16px; padding: 20px; }
  .billing-hero .amount { font-size: 32px; }
  .billing-bar-container { width: 100%; }

  /* Card grid — single column */
  .card-grid { grid-template-columns: 1fr; }
  .stats-left { grid-template-columns: 1fr; }

  /* Two-column layout — single column */
  .two-col { grid-template-columns: 1fr !important; }

  /* Card values — smaller on mobile */
  .card-value { font-size: 28px; }

  /* Panels — tighter padding */
  .panel { padding: 16px; }

  /* Pulse strip — wrap tighter */
  .pulse-strip { padding: 14px 16px; gap: 10px; }
  .pulse-systems { justify-content: flex-start; }

  /* Page labels and headers — allow wrapping */
  .page-label { flex-wrap: wrap; gap: 8px; }
  .page-label h2 { font-size: 18px; }

  /* Pipeline items — stack on small screens */
  .pipeline-item { flex-wrap: wrap; gap: 4px; font-size: 13px; }

  /* Task items — tighter */
  .task-date { font-size: 13px; }
}

@media (max-width: 480px) {
  .main { padding: 12px 10px 100px; padding-top: 52px; }
  .header h1 { font-size: 20px; }
  .header-affirmation { font-size: 18px !important; }
  .billing-hero .amount { font-size: 26px; }
  .card-value { font-size: 22px; }
  .panel { padding: 12px 10px; }
  .card { padding: 12px 14px; }
  .page-label h2 { font-size: 16px; }
}


/* ---------------------------------------------------------
   6. COMPONENTS — Panels, cards, badges, buttons
   --------------------------------------------------------- */

.panel {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 20px 24px;
}

/* =============================================================================
 * Take tile (Ethan's / Agent's Take)
 * -----------------------------------------------------------------------------
 * Used on Traffic, Google Ads, Social (per-account), and Tasks. The tile is:
 *   1. Visually emphasized with a 3px border in the host tab's accent color.
 *      The accent comes from --take-accent set inline on the element so each
 *      surface picks its own color (orange / cyan / purple).
 *   2. Collapsible. The header toggles is-collapsed on the wrapper. The body
 *      hides via display:none, the tile keeps its rendered take in the DOM
 *      so the API is NEVER re-hit on collapse/expand. Per-surface localStorage
 *      key persists the user's choice across sessions.
 * Added 2026-04-28 (Brian asked for both treatments). Border thickness was
 * 6px on first pass, dialed to 3px same evening per Brian.
 * =============================================================================*/
.take-tile {
  border: 3px solid var(--take-accent, rgba(255,255,255,0.06)) !important;
}
.take-tile-header {
  cursor: pointer;
  user-select: none;
}
.take-tile-toggle {
  margin-left: auto;
  font-size: 16px;
  line-height: 1;
  color: #9F9FA0;
  transition: transform 0.2s ease;
  display: inline-block;
}
.take-tile.is-collapsed .take-tile-toggle {
  transform: rotate(-90deg);
}
.take-tile.is-collapsed .take-body {
  display: none;
}
.take-tile.is-collapsed {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.panel-title {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 2.24px;
  text-transform: uppercase;
  color: #9F9FA0;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-family: 'Space Mono', monospace;
  letter-spacing: 1px;
}

.panel-title .badge {
  background: rgba(248,113,113,0.15);
  color: #f87171;
}

.card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 16px 20px;
}

.card-label {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 2.24px;
  text-transform: uppercase;
  color: #9F9FA0;
  margin-bottom: 12px;
}

.card-value {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #F2F2F2;
}

.card-sub {
  font-size: 12px;
  color: #9F9FA0;
  margin-top: 4px;
}

.card-value.green { color: #4ade80; }
.card-value.amber { color: #fbbf24; }
.card-value.red   { color: #f87171; }

/* Shared delta indicators (used by Traffic + Google Ads + future tabs) */
.delta-up   { color: #4ade80; }
.delta-down { color: #f87171; }
.delta-flat { color: #9F9FA0; }

/* Canonical send button — used by Chat tab and the chat bubble modal.
   Border + glyph color + tinted fill all driven by a single CSS var so
   the bubble can flex it per-tab while the Chat tab uses the cyan default. */
.send-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--bubble-accent, #00E5FF);
  background: rgba(var(--bubble-accent-rgb, 0,229,255), 0.18);
  color: var(--bubble-accent, #00E5FF);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: inherit;
  transition: background 0.15s, transform 0.15s, opacity 0.15s;
}
.send-btn:hover:not(:disabled) {
  background: rgba(var(--bubble-accent-rgb, 0,229,255), 0.12);
  transform: translateY(-1px);
}
.send-btn:disabled {
  opacity: 0.70;
  cursor: default;
}
.send-btn .send-icon {
  display: block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-image: url(icons/send-brand.svg);
  mask-image: url(icons/send-brand.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  position: relative;
  z-index: 1;
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 24px;
  /* default grid behavior stretches both tiles to row height — paired
     tiles always match (e.g. top pages + traffic sources, donut + line
     chart). The shorter tile fills its panel; render functions are
     responsible for not leaving awkward gaps inside. */
}
.two-col > * { min-width: 0; overflow: hidden; }
.two-col .panel-title,
.two-col .panel { min-width: 0; }
.two-col .panel-title > span:not(.badge) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ---------------------------------------------------------
   7. DASHBOARD — Billing hero, pulse strip, card grid
   --------------------------------------------------------- */

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
}

.header h1 {
  font-size: 36px;
  font-weight: 300;
  color: #D9D8D6;
  letter-spacing: -0.3px;
}

.header-affirmation {
  font-size: 36px;
  font-weight: 300;
  color: #D9D8D6;
  margin-top: 4px;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

.header-meta {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 2.24px;
  text-transform: uppercase;
  color: #9F9FA0;
  padding-top: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Pulse strip — system health bar at top of dashboard */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168,240,106,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(168,240,106,0); }
}

.pulse-dot {
  width: 10px; height: 10px; border-radius: 50%; background: #A8F06A;
  animation: pulse-glow 2s ease-in-out infinite; flex-shrink: 0;
}
.pulse-dot.warn  { background: #F9A03F; animation-name: none; }
.pulse-dot.error { background: #E74C3C; animation-name: none; }

.pulse-strip {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 24px; flex-wrap: wrap;
}

.pulse-label {
  font-family: 'Space Mono', monospace; font-size: 10px;
  letter-spacing: 2.24px; text-transform: uppercase; color: #A8F06A;
}

.pulse-systems { display: flex; gap: 12px; flex: 1; justify-content: flex-end; flex-wrap: wrap; }
.pulse-sys { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #9F9FA0; }
.pulse-sys-dot { width: 6px; height: 6px; border-radius: 50%; background: #A8F06A; }
.pulse-sys-dot.off  { background: #666; }
.pulse-sys-dot.warn { background: #F9A03F; }

.pulse-activity { width: 100%; font-size: 12px; color: #9F9FA0; }
.pulse-activity-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.pulse-activity-item { display: flex; align-items: center; gap: 6px; }
.pulse-activity-item::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #9F9FA0; flex-shrink: 0; }

/* Billing hero card */
.billing-hero {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 28px 32px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.billing-hero .amount { font-size: 42px; font-weight: 600; letter-spacing: -1px; }
.billing-hero .target { color: #9F9FA0; font-size: 14px; margin-top: 4px; }
.billing-hero .target span { color: #F2F2F2; }

.billing-bar-container { width: 280px; }
.billing-bar-label { display: flex; justify-content: space-between; font-size: 12px; color: #9F9FA0; margin-bottom: 8px; }
.billing-bar { height: 10px; background: rgba(255,255,255,0.08); border-radius: 5px; overflow: hidden; }
.billing-bar-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #00FFFF, #A155F0); width: 68%; transition: width 0.6s ease; }
.billing-bar-gap { font-size: 13px; color: #D9D8D6; margin-top: 8px; text-align: right; }

/* Card grid — dashboard top section */
.card-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px; margin-bottom: 24px; align-items: stretch; }
.card-grid .card-recap { grid-column: span 2; }
.stats-left { display: contents; }

.card-recap {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 16px 20px;
  max-height: 160px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card-recap .recap-list { flex: 1; overflow-y: auto; font-size: 12px; line-height: 1.6; color: #b0b0b0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent; }
.card-recap .recap-item { padding: 3px 0; border-bottom: 2px solid rgba(255,255,255,0.25); }
.card-recap .recap-item:last-child { border-bottom: none; }
.recap-status-ok   { color: #4ade80; }
.recap-status-fail { color: #f87171; }

/* Page label — icon + title at top of each page */
.page-label { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.page-label-icon {
  width: 28px; height: 28px;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  flex-shrink: 0;
}
.page-label h2 { font-size: 20px; font-weight: 400; margin: 0; }


/* ---------------------------------------------------------
   8. FORMS
   --------------------------------------------------------- */

.settings-select {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: #A155F0;
  font-size: 13px;
  font-family: inherit;
  padding: 4px 10px;
  cursor: pointer;
  appearance: auto;
}
.settings-select:focus { outline: none; border-color: #A155F0; }

.settings-input {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: #A155F0;
  font-size: 13px;
  font-family: inherit;
  padding: 4px 10px;
}
.settings-input:focus { outline: none; border-color: #A155F0; }


/* ---------------------------------------------------------
   9. LISTS — Tasks, pipeline, inbox
   --------------------------------------------------------- */

.task-list { list-style: none; }

.task-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; font-size: 14px;
}
.task-item:last-child { border-bottom: none; }
.task-item[draggable="true"] { cursor: grab; }
.task-item.dragging {
  opacity: 0.7; background: rgba(0,229,255,0.04) !important;
  border: 1px solid rgba(0,229,255,0.5); border-radius: 6px;
}
.task-item.drag-over-top { box-shadow: inset 0 2px 0 0 #00E5FF; }
.task-item.drag-over-bottom { box-shadow: inset 0 -2px 0 0 #00E5FF; }
.drag-handle {
  width: 16px; height: 16px; opacity: 0; cursor: grab;
  transition: opacity 0.15s;
  background-image: radial-gradient(circle, rgba(255,255,255,0.4) 1.5px, transparent 1.5px);
  background-size: 6px 5px;
  background-position: 1px 1px;
  flex-shrink: 0;
}
.task-item:hover .drag-handle { opacity: 0.6; }
.task-item.dragging .drag-handle { opacity: 1; cursor: grabbing; }

.task-check {
  width: 16px; height: 16px; border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 4px; flex-shrink: 0; margin-top: 2px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.task-check:hover { border-color: #00E5FF; }
.task-check.done  { background: #00E5FF; border-color: #00E5FF; }

.task-meta { font-size: 12px; color: #9F9FA0; margin-top: 2px; }
.task-meta .overdue { color: #f87171; }
.task-meta .job-id  { color: #A155F0; font-weight: 500; }

.task-date {
  font-size: 18px; font-weight: 400; color: #9F9FA0;
  white-space: nowrap; flex-shrink: 0; align-self: center;
}
.task-date.overdue { color: #f87171; }

.pipeline-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; font-size: 14px;
}
.pipeline-item:last-child { border-bottom: none; }

.pipeline-stage {
  font-size: 11px; padding: 3px 10px; border-radius: 10px;
  font-family: 'Space Mono', monospace; letter-spacing: 0.5px;
}

/* Inbox accordion */
.inbox-accordion-item.open .inbox-accordion-body { display: block !important; }
.inbox-accordion-item.open .inbox-accordion-header > div:last-child { transform: rotate(180deg); }


/* ---------------------------------------------------------
   10. SOCIAL — Platform icons + badges
   --------------------------------------------------------- */

/* Platform icon masks — colored via background-color */
.plat-icon {
  display: inline-block; width: 14px; height: 14px;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.plat-icon-fb { background-color: #00FFFF; -webkit-mask-image: url(icons/facebook.svg); mask-image: url(icons/facebook.svg); }
.plat-icon-ig { background-color: #F9A03F; -webkit-mask-image: url(icons/instagram.svg); mask-image: url(icons/instagram.svg); }
.plat-icon-li { background-color: #A155F0; -webkit-mask-image: url(icons/linkedin.svg); mask-image: url(icons/linkedin.svg); }
.plat-icon-yt { background-color: #A8F06A; -webkit-mask-image: url(icons/youtube.svg); mask-image: url(icons/youtube.svg); }

.plat-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px;
}
.plat-badge-fb { background: rgba(0,255,255,0.15); }
.plat-badge-ig { background: rgba(249,160,63,0.15); }
.plat-badge-li { background: rgba(161,85,240,0.15); }
.plat-badge-yt { background: rgba(168,240,106,0.15); }

/* Post-type icons — mask-based, colored via background-color */
.post-type-icon {
  display: inline-block; width: 12px; height: 12px;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  vertical-align: middle;
}
.post-type-image { -webkit-mask-image: url(icons/post-image.svg); mask-image: url(icons/post-image.svg); }
.post-type-story { -webkit-mask-image: url(icons/post-story.svg); mask-image: url(icons/post-story.svg); }
.post-type-reel  { -webkit-mask-image: url(icons/post-reel.svg);  mask-image: url(icons/post-reel.svg); }
.post-type-feed  { -webkit-mask-image: url(icons/post-feed.svg);  mask-image: url(icons/post-feed.svg); }


/* ---------------------------------------------------------
   11. CHAT — SMS bubbles
   --------------------------------------------------------- */

.sms-bubble { max-width: 75%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; }
.sms-bubble.outgoing { background: rgba(168,240,106,0.06); color: #F2F2F2; border-bottom-right-radius: 4px; margin-left: auto; }
.sms-bubble.incoming { background: rgba(255,255,255,0.08); color: #F2F2F2; border-bottom-left-radius: 4px; }