:root{
  --bg: #0f0f10;
  --card-bg: #0f1315;
  --muted: #9aa0a6;
  --accent: #ff6b63; /* warm coral */
  --accent-2: #a6a6a6;
  --glass: rgba(255,255,255,0.04);
  --radius: 16px;
  --gap: 14px;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

/* Page title shown at top of app */
.video-frame{
  width:100%;
  display:flex;
  justify-content:center;
  padding:8px 0 0 0;
  box-sizing:border-box;
}

/* Conversation-specific framed video placed below chat */
.conversation-video{
  width:100%;
  display:flex;
  justify-content:center;
  padding:10px 0 0 0;
  box-sizing:border-box;
  grid-column: 1 / -1;
}
.conversation-video-inner{
  width:100%;
  max-width:920px;
  aspect-ratio:16/9;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.25));
  border-radius:12px;
  overflow:hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  border:1px solid rgba(255,255,255,0.04);
}
.conversation-video-inner iframe{
  width:100%;
  height:100%;
  display:block;
  border:0;
  background:#000;
}
.video-inner{
  width:100%;
  max-width:1100px;
  aspect-ratio:16/9;
  background:linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.25));
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  border:1px solid rgba(255,255,255,0.04);
}
.video-inner iframe{
  width:100%;
  height:100%;
  display:block;
  border:0;
  background:#000;
}

/* Page title shown at top of app */
.page-title{
  font-size:44px;
  font-weight:900;
  letter-spacing:2px;
  color: #fff;
  text-transform:uppercase;
  margin:12px 0 6px;
  text-align:center;
  line-height:1;
  text-shadow: 0 8px 30px rgba(0,0,0,0.7);
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  padding:8px 18px;
  border-radius:12px;
  align-self:stretch;
}

/* Slightly larger title on wide viewports */
@media(min-width:880px){
  .page-title{ font-size:52px; margin-top:6px; margin-bottom:8px; }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  /* Tinder-like warm coral/pink background with soft vignette */
  background:
    radial-gradient(900px 320px at 10% 15%, rgba(255,140,120,0.14), transparent 12%),
    radial-gradient(900px 320px at 85% 85%, rgba(255,200,215,0.10), transparent 12%),
    linear-gradient(180deg, #ff6b63 0%, #ff867e 30%, #ff9faa 60%, #ffeef1 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  height:100vh;
  padding:20px;
  transition: background 600ms ease;
}

/* App container */
#app{
  width:100%;
  height:100%;
  max-width:1200px;
  max-height:880px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:16px;
  padding:14px;
}

/* Cards row */
.cards{
  width:100%;
  display:flex;
  gap:var(--gap);
  align-items:flex-start;
  justify-content:center;
  padding:8px;
  flex: 0 0 auto;
  min-width:360px;
}

/* Single card */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04));
  width:46%;
  min-width:280px;
  height:52vh;
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow: 0 12px 40px rgba(2,6,10,0.6);
  position:relative;
  transition: transform 300ms cubic-bezier(.2,.9,.25,1), box-shadow 300ms, border-color 300ms;
  border: 1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
}

/* Active card scale and glow */
.card.active{
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 28px 80px rgba(0,0,0,0.75), 0 0 30px rgba(255,107,99,0.04);
  border-color: rgba(255,107,99,0.08);
}

/* subtle hover for pointer devices */
.card:hover{
  transform: translateY(-4px) scale(1.01);
}

/* Photo area */
.photo-wrap{
  position:relative;
  flex: 0 0 56%;
  background:linear-gradient(180deg, rgba(0,0,0,0.06), rgba(255,255,255,0.01));
  overflow:hidden;
}

.photo-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: grayscale(0.02) contrast(1.04) saturate(0.95);
  transition: transform 400ms ease;
}

/* subtle parallax on hover */
.card:hover .photo-wrap img{
  transform: scale(1.03);
}

/* subtle stamp */
.stamp{
  position:absolute;
  top:14px;
  right:14px;
  background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.45));
  color: #fff;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  letter-spacing:0.3px;
  backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,0.03);
}

.stamp-left{ left:14px; right:auto; }

/* Meta */
.meta{
  padding:16px;
  color:#e9ecef;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1 1 auto;
}

.row{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.name{
  font-weight:800;
  font-size:22px;
  letter-spacing:0.2px;
}

.distance{
  font-size:13px;
  color:var(--muted);
}

/* Bio and tags */
.bio{
  margin:0;
  color:#e9ecef;
  font-size:15px;
  line-height:1.45;
  max-height:6.2em;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* small action icons inside the bio area (cross / heart) */
.bio-actions{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:8px;
  margin-bottom:6px;
}

.bio-icon{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  font-size:16px;
  line-height:1;
  box-shadow:0 8px 20px rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.03);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04));
  cursor:default;
  user-select:none;
}

/* red/heart styling */
.bio-like{
  background: linear-gradient(180deg, #ff8b84, var(--accent));
  color:white;
  border-color: rgba(255,107,99,0.12);
  box-shadow:0 10px 28px rgba(255,107,99,0.08);
}

/* gray/cross styling */
.bio-dislike{
  background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.08));
  color:#eee;
  border-color: rgba(255,255,255,0.02);
}

/* ensure a bit of breathing on small screens */
@media (max-width:720px){
  .bio-actions{ gap:8px; margin-top:6px; margin-bottom:4px }
  .bio-icon{ width:32px; height:32px; font-size:14px }
}

.tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}

.tags span{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  padding:7px 10px;
  border-radius:999px;
  font-size:13px;
  color:var(--accent-2);
  border:1px solid rgba(255,255,255,0.02);
  box-shadow: 0 6px 16px rgba(0,0,0,0.28);
}

/* Controls */
.controls{
  display:flex;
  gap:14px;
  padding:14px;
  justify-content:center;
  align-items:center;
  background:linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.06));
  border-top:1px solid rgba(255,255,255,0.02);
}

.btn{
  width:56px;
  height:56px;
  border-radius:50%;
  border:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  cursor:pointer;
  transition:transform 180ms ease, box-shadow 180ms, filter 180ms;
  box-shadow:0 8px 28px rgba(0,0,0,0.45);
}

.btn:hover{ transform:translateY(-4px) scale(1.03); filter:brightness(1.02) }

.btn:active{ transform:scale(.98) }

.like{
  background: linear-gradient(180deg, #ff8b84, var(--accent));
  color:white;
  box-shadow:0 12px 30px rgba(255,107,99,0.12);
}

.dislike{
  background:#17191a;
  color:#ddd;
  border:1px solid rgba(255,255,255,0.02);
}

.super{
  background: linear-gradient(180deg, #ffdb86, #f2b01e);
  color:#222;
  width:50px;
  height:50px;
  font-size:18px;
  box-shadow:0 12px 28px rgba(242,176,30,0.12);
}

/* Overlays for like/dislike animations */
.overlay{
  position:absolute;
  top:20%;
  left:50%;
  transform:translate(-50%,-50%) scale(0.8);
  font-size:72px;
  font-weight:900;
  pointer-events:none;
  opacity:0;
  transition:opacity 260ms ease, transform 260ms ease;
  text-shadow:0 12px 36px rgba(0,0,0,0.7);
}

.overlay-like{
  color:rgba(255,120,110,0.98);
  text-shadow: 0 10px 28px rgba(255,100,90,0.08);
}

.overlay-dislike{
  color:rgba(220,220,220,0.95);
}

/* visible overlay state */
.card.show-like .overlay-like,
.card.show-dislike .overlay-dislike{
  opacity:1;
  transform:translate(-50%,-72%) scale(1.08);
}

/* Pager */
.pager{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 6px 0 6px;
  flex: 0 0 auto;
}

.pager-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,0.04);
  color:#ddd;
  width:46px;
  height:38px;
  border-radius:10px;
  font-size:18px;
  cursor:pointer;
  transition:background 160ms, transform 160ms;
}

.pager-btn:hover{ transform:translateY(-3px); background: rgba(255,255,255,0.02) }

/* dots */
.dots{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  flex:1 1 auto;
}

.dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  transition: transform 160ms, background 160ms;
  box-shadow:0 6px 14px rgba(0,0,0,0.4) inset;
}

.dot.active{
  background:var(--accent);
  transform:scale(1.45);
  box-shadow:0 8px 28px rgba(255,107,99,0.16);
}

/* Responsive: stack on narrow viewports */
@media (max-width:720px){
  .cards{
    flex-direction:column;
    gap:12px;
    padding:0;
  }
  .card{
    width:100%;
    height:46vh; /* ensures two cards fit in one screen height */
  }
  .photo-wrap{ flex:0 0 52% }
  .controls .btn{ width:48px; height:48px }
  .overlay{ top:18% }
  .meta{ padding:12px }
  .bio{ font-size:14px }
}

/* Conversation panel styles — social-media restyle */
.chat{
  /* let the grid control sizing; full width within its grid cell */
  width:100%;
  max-width:none;
  min-width:0;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.04);
  box-shadow: 0 28px 70px rgba(0,0,0,0.55);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  margin-top:0;
  transition: transform 220ms ease, box-shadow 220ms;
  align-self:stretch;
  padding:0;
  z-index:6;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* header */
.chat-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  background:linear-gradient(90deg, rgba(0,0,0,0.03), rgba(255,255,255,0.01));
  border-bottom:1px solid rgba(255,255,255,0.03);
}

.chat-avatar{
  width:52px;
  height:52px;
  border-radius:12px;
  object-fit:cover;
  flex:0 0 52px;
  box-shadow:0 8px 20px rgba(0,0,0,0.35);
  border:2px solid rgba(255,255,255,0.03);
}

.chat-title .chat-name{
  font-weight:800;
  color:#fff;
  font-size:16px;
  letter-spacing:0.1px;
}

.chat-title .chat-sub{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

/* messages area: compact, with username labels and reaction row */
.messages{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:none;
  overflow:visible;
  background: linear-gradient(180deg, rgba(0,0,0,0.01), transparent 40%);
  scroll-behavior:auto;
}

/* message wrapper with small username and timestamp inline */
.msg{
  display:flex;
  flex-direction:column;
  max-width:100%;
  gap:6px;
}

.msg-row{
  display:flex;
  align-items:flex-end;
  gap:10px;
}

/* left/right alignment helpers */
.msg-left .msg-row{ justify-content:flex-start; }
.msg-right .msg-row{ justify-content:flex-end; }

/* compact username label above messages */
.msg .username{
  font-size:11px;
  color:var(--muted);
  margin-left:4px;
}

/* bubble visual: softer, pill-like, subtle inner shadow */
.bubble{
  padding:14px 18px;
  border-radius:22px;
  font-size:18px;
  line-height:1.45;
  max-width:78%;
  word-break:break-word;
  box-shadow: inset 0 -6px 18px rgba(0,0,0,0.08), 0 8px 22px rgba(0,0,0,0.28);
}

/* left = Helen (light bubble) */
.msg-left .bubble{
  background: linear-gradient(180deg,#ffffff,#f6f6f6);
  color:#0b0b0b;
  border-bottom-left-radius:12px;
}

/* right = Sam (accent bubble) */
.msg-right .bubble{
  background: linear-gradient(180deg,#ff8b84,#d84539);
  color:white;
  border-bottom-right-radius:12px;
}

/* meta / system bubble: smaller, centered */
.bubble.meta{
  background:transparent;
  color:var(--muted);
  box-shadow:none;
  padding:6px 0;
  font-size:13px;
  text-align:center;
}

/* timestamp placed inline, subtle */
.msg .time{
  font-size:11px;
  color:var(--muted);
  margin-top:2px;
  align-self:flex-end;
  opacity:0.9;
}

/* tiny reaction chips under messages */
.reactions{
  display:flex;
  gap:6px;
  margin-top:6px;
  align-items:center;
}

.reaction{
  background:rgba(255,255,255,0.06);
  color:#fff;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  box-shadow:0 8px 18px rgba(0,0,0,0.28);
}

/* mobile tweaks */
@media (max-width:720px){
  .chat{ width:100%; margin-top:12px; border-radius:14px; }
  .chat-avatar{ width:40px; height:40px; }
  .messages{ padding:10px; gap:8px; max-height:420px }
  .bubble{ font-size:13px; padding:10px 12px }
  .username{ font-size:10px }
}

/* Conversations container placed under profiles — switch to a two-column responsive grid */
.conversations{
  width:100%;
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(240px, auto);
  gap:18px;
  align-items:start;
  /* center items horizontally so single large panel can sit in middle */
  justify-items:center;
  padding:6px 0 0 0;
}

/* Stack into single column on narrow screens */
@media (max-width:960px){
  .conversations{
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(220px, auto);
  }
}

/* WhatsApp-style panel (now sits inside .conversations) */
.whatsapp{
  /* make the main WhatsApp panel span full grid width and sit centered with a comfortable max width */
  grid-column: 1 / -1;
  width:100%;
  /* increased max width to make the conversation box wider on larger viewports */
  max-width:920px;
  min-width:0;
  margin: 0 auto;
  background: #0b3420; /* deep muted green background like WhatsApp */
  border-radius:14px;
  border:1px solid rgba(0,0,0,0.35);
  box-shadow: 0 30px 80px rgba(3,38,22,0.6);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:0;
  z-index:5;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Inter, system-ui, -apple-system;
}

/* header: flatter, WhatsApp-like */
.wa-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04));
  border-bottom:1px solid rgba(255,255,255,0.02);
}

.wa-avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 6px 16px rgba(0,0,0,0.45);
  border:2px solid rgba(255,255,255,0.02);
}

.wa-title .wa-name{
  font-weight:700;
  color:#f5fff8;
  font-size:15px;
  letter-spacing:0.2px;
}

.wa-title .wa-sub{
  font-size:12px;
  color:#cfe8c9;
  margin-top:2px;
}

/* messages */
.wa-messages{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:none;
  overflow:auto;
  background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent 40%);
  scroll-behavior:auto;
}

/* message row structure */
.wa-msg{
  display:flex;
  align-items:flex-end;
  max-width:100%;
  gap:8px;
  position:relative;
}

/* alignment helpers */
.wa-left{ justify-content:flex-start; }
.wa-right{ justify-content:flex-end; }

/* bubble base style tuned to WhatsApp */
.wa-bubble{
  padding:12px 16px;
  border-radius:18px;
  font-size:18px;
  line-height:1.45;
  max-width:78%;
  word-break:break-word;
  box-shadow:none;
  position:relative;
  display:inline-block;
}

/* left = Helen (white bubble with subtle border) */
.wa-left .wa-bubble{
  background:#ffffff;
  color:#0b2e1a;
  border:1px solid rgba(0,0,0,0.06);
  border-bottom-left-radius:6px;
  border-bottom-right-radius:18px;
  border-top-right-radius:18px;
  border-top-left-radius:18px;
}

/* right = Sam (WhatsApp signature green bubble) */
.wa-right .wa-bubble{
  background: linear-gradient(180deg,#25d366,#12a84a);
  color:white;
  border-bottom-right-radius:6px;
  border-bottom-left-radius:18px;
  border-top-left-radius:18px;
  border-top-right-radius:18px;
}

/* add small "tail" to bubbles using pseudo-elements */
.wa-left .wa-bubble::after,
.wa-right .wa-bubble::after{
  content: "";
  position: absolute;
  width:10px;
  height:10px;
  bottom:2px;
  transform: rotate(45deg);
  box-shadow: none;
  border-radius:1px;
}

.wa-left .wa-bubble::after{
  left:-5px;
  background: #ffffff;
  border-left:1px solid rgba(0,0,0,0.04);
  border-bottom:1px solid rgba(0,0,0,0.04);
}

.wa-right .wa-bubble::after{
  right:-5px;
  background: linear-gradient(180deg,#25d366,#12a84a);
  border-right:1px solid rgba(0,0,0,0.02);
  border-bottom:1px solid rgba(0,0,0,0.02);
}

/* compact meta / system bubble */
.wa-bubble.meta{
  background:transparent;
  color:#cfe8c9;
  padding:6px 0;
  font-size:13px;
  text-align:center;
  align-self:center;
}

/* timestamp styling: smaller and inline near the bubble */
.wa-msg time{
  display:block;
  font-size:11px;
  color:#a7d6b0;
  margin-top:6px;
  margin-left:6px;
  opacity:0.95;
}

/* make timestamps appear next to bubbles on wide screens */
.wa-right time{ margin-left:8px; align-self:flex-end; }
.wa-left time{ margin-left:6px; align-self:flex-start; }

/* subtle read ticks for right messages (visual only) */
.wa-right .wa-bubble .ticks{
  font-size:11px;
  color: rgba(255,255,255,0.92);
  margin-left:8px;
  display:inline-block;
  vertical-align:middle;
}

/* center separator */
.wa-msg.time-sep{ justify-content:center; }

/* responsive tweaks */
@media (max-width:720px){
  .whatsapp{ width:100%; margin-top:12px; border-radius:12px; min-width:0; }
  .wa-avatar{ width:36px; height:36px; }
  .wa-messages{ padding:10px; gap:8px; max-height:420px }
  .wa-bubble{ font-size:13px; padding:8px 10px }
  .wa-bubble::after{ width:8px; height:8px; bottom:1px; }
}

/* Instagram DMs panel (simple DM styling) */
.instagram{
  width:100%;
  max-width:760px;
  min-width:0;
  background: linear-gradient(180deg, #fff, #fbfbff);
  border-radius:14px;
  border:1px solid rgba(0,0,0,0.05);
  box-shadow: 0 20px 48px rgba(20,16,60,0.06);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:0;
  z-index:6;
  color:#0b1220;
  font-family: "Segoe UI", Roboto, Inter, system-ui, -apple-system;
}

.ig-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  background: linear-gradient(90deg, rgba(245,240,255,0.6), rgba(255,255,255,0.9));
  border-bottom:1px solid rgba(0,0,0,0.04);
}

.ig-avatar{
  width:44px;
  height:44px;
  border-radius:10px;
  object-fit:cover;
  box-shadow:0 6px 16px rgba(0,0,0,0.06);
  border:1px solid rgba(0,0,0,0.04);
}

.ig-title .ig-name{
  font-weight:700;
  color:#1b1430;
  font-size:15px;
}

.ig-title .ig-sub{
  font-size:12px;
  color:#6b5b7a;
  margin-top:2px;
}

.ig-messages{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:320px;
  overflow:auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), transparent 30%);
}

/* DM rows */
.ig-msg{ display:flex; align-items:flex-end; max-width:100%; gap:8px; position:relative; }

/* align helpers */
.ig-left{ justify-content:flex-start; }
.ig-right{ justify-content:flex-end; }

/* bubble base */
.ig-bubble{
  padding:10px 14px;
  border-radius:14px;
  font-size:15px;
  line-height:1.35;
  max-width:78%;
  word-break:break-word;
  box-shadow: 0 6px 18px rgba(30,20,60,0.04);
  background: #fff;
  color: #1b1430;
  border:1px solid rgba(30,20,60,0.04);
}

/* right = alex (accent lilac) */
.ig-right .ig-bubble{
  background: linear-gradient(180deg,#f3e8ff,#e7d7ff);
  color:#2b114f;
  border-color: rgba(120,80,160,0.08);
}

/* left = luna (soft pink) */
.ig-left .ig-bubble{
  background: linear-gradient(180deg,#fff7f8,#fff0f2);
  color:#3b1b22;
  border-color: rgba(200,130,140,0.05);
}

/* responsive tweaks */
@media (max-width:720px){
  .instagram{ width:100%; border-radius:12px; }
  .ig-avatar{ width:36px; height:36px; }
  .ig-messages{ padding:8px; max-height:260px; gap:8px; }
  .ig-bubble{ font-size:13px; padding:8px 10px; }
}

/* TikTok-style panel */
.tiktok{
  /* full width inside grid column */
  width:100%;
  max-width:none;
  min-width:0;
  background: linear-gradient(180deg, rgba(5,5,5,0.55), rgba(12,12,12,0.7));
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 34px 92px rgba(0,0,0,0.72);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:0;
  z-index:6;
}

/* header */
.tk-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
  border-bottom:1px solid rgba(255,255,255,0.02);
}

.tk-thumb{
  width:56px;
  height:56px;
  object-fit:cover;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,0.6);
  display:block;
}

.tk-avatar-wrap{
  position:relative;
  flex:0 0 56px;
}

.tk-badge{
  position:absolute;
  left:6px;
  bottom:2px;
  background:rgba(255,255,255,0.95);
  color:#111;
  padding:4px 8px;
  font-size:11px;
  border-radius:999px;
  font-weight:700;
}

/* title */
.tk-name{
  font-weight:800;
  color:#fff;
  font-size:15px;
}

.tk-sub{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

/* clip area (static visual representing clip) */
.tk-clip{
  position:relative;
  height:180px;
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.45)), url('/sam.png') center/cover no-repeat;
  display:flex;
  align-items:end;
  justify-content:flex-start;
  padding:16px;
  transition: background-position 700ms ease, transform 600ms ease;
}

/* subtle animated parallax */
.tk-clip:hover{ transform: translateY(-6px); background-position: 48% center; }

.tk-overlay{
  background:linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.6));
  color:white;
  padding:12px 14px;
  border-radius:12px;
  font-weight:800;
  max-width:88%;
  font-size:15px;
  box-shadow:0 12px 36px rgba(0,0,0,0.7);
}

/* comments area */
.tk-comments{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:none;
  overflow:visible;
  background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent 20%);
}

/* comment bubbles */
.tk-comment{ display:flex; max-width:100%; gap:10px; align-items:flex-start; }
.tk-left{ justify-content:flex-start; }
.tk-right{ justify-content:flex-end; flex-direction:column; align-items:flex-end; }

.tk-bubble{
  padding:12px 14px;
  border-radius:16px;
  font-size:18px;
  line-height:1.45;
  max-width:86%;
  word-break:break-word;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
}

/* left = creator / Helen (light) */
.tk-left .tk-bubble{
  background: linear-gradient(180deg,#fbfbfb,#efefef);
  color:#0b0b0b;
  border-bottom-left-radius:8px;
}

/* right = Sam / viewer (dark accent) */
.tk-right .tk-bubble{
  background: linear-gradient(180deg,#222222,#0f0f0f);
  color:#fff;
  border-bottom-right-radius:8px;
}

/* small meta labels for comments/DMs */
.tk-meta{
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}

/* DM styling slightly emphasized */
.tk-comment.dm .tk-bubble{
  box-shadow: 0 12px 32px rgba(0,0,0,0.7);
  transform: translateY(-2px);
}

/* gap input styling and responsive for narrow screens */
.gap-input{
  display:inline-block;
  min-width:72px;
  max-width:46%;
  padding:4px 8px;
  border-radius:8px;
  border:1px dashed rgba(30,30,30,0.12);
  background:linear-gradient(180deg,#fff,#fff);
  font-size:15px;
  color:#1b1430;
  vertical-align:middle;
}
.gap-input.correct{
  border-color: #2ecc71;
  box-shadow:0 6px 18px rgba(46,204,113,0.06);
}
.gap-input.incorrect{
  border-color: #e84e4e;
  box-shadow:0 6px 18px rgba(232,78,78,0.06);
}

/* small hint reveal button inside bubble */
.gap-reveal{
  display:inline-block;
  margin-left:8px;
  padding:4px 8px;
  border-radius:8px;
  background:rgba(0,0,0,0.06);
  font-size:12px;
  cursor:pointer;
}

/* responsive for narrow screens */
@media (max-width:720px){
  .tiktok{ width:100%; min-width:0; margin-top:12px; border-radius:14px; }
  .tk-clip{ height:140px }
  .tk-thumb{ width:48px; height:48px }
  .tk-overlay{ font-size:13px }
  .tk-bubble{ font-size:12px; padding:8px 10px }
  .gap-input{ min-width:52px; font-size:13px }
}

/* Phone mockup for Instagram DM — larger, centered, and scrollable like a mobile screen */
.phone{
  width:560px;
  max-width:98%;
  background: linear-gradient(180deg,#0b0b0b,#0f0f10);
  position:relative;
}

/* Word bank box placed to the right of the phone; responsive and touch-friendly */
.word-bank{
  position:absolute;
  left: calc(100% + 16px); /* place to the right of the phone */
  bottom: 12px;
  transform: none;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:flex-start;
  width:320px;
  max-width:40vw;
  padding:12px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), #f3f3f6);
  border-radius:12px;
  box-shadow: 0 22px 60px rgba(2,6,10,0.38);
  border:1px solid rgba(20,20,30,0.06);
  z-index:12;
}

/* Slightly larger, more tappable word pills for the expanded bank */
.word-bank .word-pill{
  padding:10px 12px;
  font-size:15px;
}

/* individual clickable word chips */
.word-pill{
  background: transparent;
  border:1px solid rgba(30,30,40,0.06);
  padding:8px 10px;
  border-radius:999px;
  font-size:14px;
  color:#1b1430;
  cursor:pointer;
  transition: transform 140ms ease, box-shadow 140ms;
  background: linear-gradient(180deg,#ffffff,#f7f7fb);
  box-shadow: 0 6px 18px rgba(30,20,60,0.04);
}

.word-pill:active{ transform: translateY(1px) scale(0.99) }
.word-pill:focus{ outline:2px solid rgba(120,80,160,0.14); outline-offset:2px }

/* Compact the word bank on very small screens */
@media (max-width:480px){
  .word-bank{ top:-86px; padding:8px 10px; gap:6px }
  .word-pill{ padding:6px 8px; font-size:13px }
}

/* keep phone notch visible above bank when needed */
.phone::before{ z-index:13; position:relative; }
  border-radius:34px;
  padding:18px;
  box-shadow: 0 40px 110px rgba(2,6,10,0.7), inset 0 1px 0 rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 10px auto;
}

/* scale down Instagram inside the phone, let it fill phone inner area */
.phone .instagram{
  width:100%;
  height:880px;
  max-height:92vh;
  border-radius:20px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background: linear-gradient(180deg, #fff, #fbfbff);
  border:none;
  box-shadow:none;
  margin:0;
}

/* add a notch / status area */
.phone::before{
  content: "";
  display:block;
  width:160px;
  height:10px;
  background:rgba(0,0,0,0.2);
  border-radius:8px;
  margin-bottom:8px;
  align-self:center;
  opacity:0.6;
}

/* adjust IG header and messages to fit phone dimensions */
.phone .ig-header{ padding:12px 14px; }
.phone .ig-messages{ padding:12px; gap:10px; overflow:auto; font-size:15px; max-height: calc(100% - 76px); }

/* make bubbles a touch-friendly size on the phone */
.phone .ig-bubble{ font-size:15px; padding:12px 14px; border-radius:14px; max-width:82%; }

/* ensure phone is responsive and larger on wide viewports */
@media (min-width:900px){
  .phone{ width:520px; }
  .phone .instagram{ height:960px; }
}