/* ── Reset ── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html, body {
    height: 100%; width: 100%;
    background: #000;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
  }

  /* ── Full-screen chat shell ── */
  #shell {
    display: flex; flex-direction: column;
    height: 100dvh; max-width: 480px;
    margin: 0 auto;
    position: relative;
  }

  /* ── Header (IG style) ── */
  #header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px;
    background: #000;
    border-bottom: 1px solid #262626;
    position: sticky; top: 0; z-index: 10;
    flex-shrink: 0;
  }
  #header .back-icon { font-size: 22px; color: #fff; cursor: pointer; user-select: none; }
  #header .center { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
  #header .avatar-wrap { position: relative; display: inline-block; }
  #header .avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #333;
  }
  #header .online-dot {
    position: absolute; bottom: 0; right: 0;
    width: 10px; height: 10px;
    background: #31c45f;
    border-radius: 50%;
    border: 2px solid #000;
  }
  #header .name-row {
    display: flex; align-items: center; gap: 4px;
    font-size: 14px; font-weight: 600;
  }
  #header .verified { color: #0095f6; font-size: 13px; }
  #header .chevron { color: #888; font-size: 12px; }
  #header .icons { display: flex; gap: 18px; }
  #header .icons svg { width: 24px; height: 24px; fill: #fff; cursor: pointer; }

  /* ── Messages area ── */
  #messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0 8px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  #messages::-webkit-scrollbar { display: none; }

  /* ── Time divider ── */
  .time-divider {
    text-align: center;
    font-size: 11px;
    color: #888;
    margin: 8px 0 12px;
  }

  /* ── Bubble rows ── */
  .row {
    display: flex;
    align-items: flex-end;
    margin: 2px 12px;
    gap: 8px;
  }
  .row.left { justify-content: flex-start; }
  .row.right { justify-content: flex-end; }

  .row.left .mini-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-bottom: 2px;
  }
  .row.left .mini-avatar.hidden { visibility: hidden; }

  .bubble {
    max-width: 70%;
    padding: 9px 13px;
    border-radius: 22px;
    font-size: 14.5px;
    line-height: 1.4;
    word-break: break-word;
  }
  .bubble.left {
    background: #262626;
    color: #fff;
    border-bottom-left-radius: 4px;
  }
  .bubble.right {
    background: #0095f6;
    color: #fff;
    border-bottom-right-radius: 4px;
  }

  /* ── Expired media bubble ── */
  .expired-wrap {
    margin: 4px 12px 4px 46px;
  }
  .expired-card {
    width: 110px; height: 130px;
    background: #1a1a1a;
    border-radius: 12px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 6px;
    color: #888;
    font-size: 12px;
    border: 1px solid #333;
  }
  .expired-card svg { opacity: 0.5; }
  .expired-label { font-size: 11px; color: #666; }

  /* ── CTA link card ── */
  .cta-wrap {
    margin: 8px 12px 8px 46px;
  }
  .cta-card {
    display: flex; align-items: center; gap: 10px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 10px 14px;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
  }
  .cta-card:hover { background: #222; }
  .cta-card .cta-icon {
    width: 38px; height: 38px;
    background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .cta-card .cta-icon svg { width: 22px; height: 22px; fill: #fff; }
  .cta-card .cta-text { display: flex; flex-direction: column; gap: 1px; }
  .cta-card .cta-site { font-size: 13px; font-weight: 600; }
  .cta-card .cta-url { font-size: 11px; color: #888; }
  .cta-card .cta-arrow { margin-left: auto; color: #555; font-size: 16px; }

  /* ── Typing indicator ── */
  #typing {
    display: flex;
    align-items: center; gap: 8px;
    margin: 4px 12px;
    padding-left: 34px;
  }
  #typing .mini-avatar {
    width: 26px; height: 26px;
    border-radius: 50%; object-fit: cover;
  }
  .typing-dots {
    background: #262626;
    border-radius: 22px;
    padding: 10px 14px;
    display: flex; gap: 4px; align-items: center;
  }
  .typing-dots span {
    width: 7px; height: 7px;
    background: #888;
    border-radius: 50%;
    animation: bounce 1.2s infinite;
  }
  .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
  .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
  @keyframes bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
    40% { transform: translateY(-5px); opacity: 1; }
  }

  /* ── Input bar ── */
  #inputbar {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 8px 12px 12px;
    background: #000;
    border-top: 1px solid #1a1a1a;
    flex-shrink: 0;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  #msg-input {
    flex: 1;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 22px;
    padding: 10px 16px;
    font-size: 15px;
    color: #fff;
    resize: none;
    outline: none;
    font-family: inherit;
    max-height: 100px;
    min-height: 40px;
    line-height: 1.4;
    caret-color: #fff;
  }
  #msg-input::placeholder { color: #666; }
  #send-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: #0095f6;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
    margin-bottom: 2px;
  }
  #send-btn:disabled { background: #333; cursor: default; }
  #send-btn svg { width: 18px; height: 18px; fill: #fff; }

#typing.hidden { display: none !important; }