/* BusTop v2.2.0 — responsive polish, mobile parity, brand identity */
:root{
  --bt-app-max: 1180px;
  --bt-content-max: 720px;
  --bt-dvh: 1vh;
  --bt-safe-top: env(safe-area-inset-top, 0px);
  --bt-safe-bottom: env(safe-area-inset-bottom, 0px);
  --bt-brand-1:#165DFF;
  --bt-brand-2:#3B82F6;
  --bt-brand-3:#0EA5E9;
  --bt-ink:#0f172a;
  --bt-surface:#ffffff;
  --bt-surface-2:#f8fafc;
  --bt-line:#dbe4f0;
  --bt-shadow:0 10px 30px rgba(15,23,42,.08);
  --font-display:'Outfit','Inter',system-ui,sans-serif;
}
html,body{overflow-x:hidden;}
body{font-family:var(--font, 'Inter', system-ui, sans-serif);}
.brand-wordmark,.ig-sidebar-logo span,.mob-topbar-brand{font-family:var(--font-display); letter-spacing:-.02em;}
.brand-wordmark{font-weight:800;}
.container{width:min(calc(100% - 24px), var(--bt-app-max));}
.card,.vitrin-feed-card,.clip-card,.dm-layout,.mk-card,.job-card,.listing-card{box-shadow:var(--bt-shadow);}
.btn,button,.vfa,.clip-action,.vf-follow-btn,.mk-chip{touch-action:manipulation;}
.btn,.vf-follow-btn,.dm-send-btn,.vitrin-composer-post-btn{min-height:44px;}
a,img,button{ -webkit-tap-highlight-color: transparent; }
img{max-width:100%;}

/* Better top bars */
.topbar,.mob-topbar{backdrop-filter:saturate(180%) blur(14px);}
.mob-topbar{padding-top: max(8px, var(--bt-safe-top));}
.mobile-bottom-nav{padding-bottom:max(8px,var(--bt-safe-bottom));}
.ig-sidebar-logo img,.brand img,.mob-topbar-brand img{border-radius:12px;box-shadow:0 8px 24px rgba(22,93,255,.16);}

/* General responsive guardrails */
.card, .vitrin-feed-card, .clip-card, .mk-card, .job-card, .listing-card, .dm-conv-item, .dm-chat-area, .dm-conv-list {min-width:0;}
.vitrin-feed-text,.vitrin-feed-title,.mk-card-title,.dm-bubble-text,.clip-title,.clip-body{overflow-wrap:anywhere;word-break:break-word;}
.vitrin-filter-scroll,.mk-chip-row,.chips-row{scrollbar-width:none; -ms-overflow-style:none;}
.vitrin-filter-scroll::-webkit-scrollbar,.mk-chip-row::-webkit-scrollbar,.chips-row::-webkit-scrollbar{display:none;}

/* App layout parity */
.is-app .app-shell,.is-app .ig-app-layout{gap:24px;}
.vitrin-page-layout,.clips-header,.clips-feed,.dm-page .dm-layout,.mk-page-layout{width:min(100%,var(--bt-app-max)); margin-inline:auto;}
.vitrin-main-col{max-width:var(--bt-content-max); width:100%;}
.vitrin-page-layout{display:grid;grid-template-columns:minmax(0,var(--bt-content-max)) minmax(260px,320px);gap:24px;align-items:start;}
.vitrin-feed-stream{display:grid;gap:18px;}
.vitrin-feed-card{border-radius:22px;overflow:hidden;border:1px solid var(--bt-line);}
.vitrin-feed-content{padding:0 18px 16px;}
.vitrin-feed-header{padding:16px 18px 12px;align-items:flex-start;gap:12px;}
.vitrin-feed-header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.vf-follow-btn{border:none;border-radius:999px;background:var(--primary);color:#fff;font-weight:700;padding:10px 16px;cursor:pointer;box-shadow:0 10px 22px rgba(29,78,216,.16);}
.vf-follow-btn.following{background:var(--primary-light);color:var(--primary);}
.vitrin-feed-user{min-width:0;display:flex;gap:12px;align-items:center;text-decoration:none;}
.vitrin-feed-userinfo{min-width:0;}
.vitrin-feed-username,.vitrin-feed-usermeta{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vitrin-feed-title a{text-decoration:none;color:inherit;}
.read-more-link{font-weight:700;white-space:nowrap;}

/* Vitrin media — Instagram-like */
.vitrin-feed-img-wrap,.vitrin-detail-gallery,.vitrin-media-stage{position:relative;border-radius:0;overflow:hidden;background:#e9eef6;}
.vitrin-feed-img-wrap img,.vitrin-detail-gallery img,.vitrin-media-stage img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#eef2f7;}
.vitrin-feed-img-wrap video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#0b1020;}
.vitrin-feed-actions{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding-top:10px;}
.vfa,.like-btn,.comment-btn,.save-btn,.share-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:10px 12px;border-radius:14px;background:var(--bg);border:1px solid var(--border);color:var(--text);text-decoration:none;font-weight:600;}
.vfa:hover,.like-btn:hover,.comment-btn:hover,.save-btn:hover,.share-btn:hover{transform:translateY(-1px);background:var(--primary-light);border-color:var(--primary-mid);text-decoration:none;}

/* Composer */
.vitrin-composer-card{position:sticky;top:12px;z-index:2;}
.vitrin-composer-top{display:flex;gap:12px;align-items:center;}
.vitrin-composer-input{min-height:52px;display:flex;align-items:center;padding:0 16px;flex:1;text-decoration:none;}
.vitrin-composer-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px;}
.vitrin-composer-btn,.vitrin-composer-post-btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;text-decoration:none;padding:12px 10px;border-radius:14px;}
.vitrin-composer-btn{background:var(--bg);border:1px solid var(--border);color:var(--text-2);font-weight:700;}
.vitrin-composer-post-btn{border-radius:14px;}

/* Stories */
.story-row-wrap{overflow:hidden;}
.story-row{display:flex;gap:16px;overflow:auto;padding-bottom:6px;scrollbar-width:none;}
.story-row::-webkit-scrollbar{display:none;}
.story-item,.story-add-item{min-width:72px;}
.story-item span,.story-add-item span{display:block;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Comments under posts */
.vitrin-comments,.comments-list,.comment-list{display:grid;gap:12px;}
.comment-item,.vitrin-comment-item{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:start;}
.comment-item .avatar,.vitrin-comment-item .avatar,.avatar.xs{width:32px !important;height:32px !important;min-width:32px !important;min-height:32px !important;flex:0 0 32px !important;}
.comment-form,.vitrin-comment-form{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;}
.comment-form input,.vitrin-comment-form input,.comment-form textarea,.vitrin-comment-form textarea{min-width:0;border-radius:16px;}

/* Clips / reels */
.clips-page{padding-bottom:calc(84px + var(--bt-safe-bottom));}
.clips-header{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px;}
.clips-feed{display:grid;gap:18px;max-width:480px;}
.clip-card{position:relative;border:1px solid var(--border);border-radius:24px;overflow:hidden;background:#081120;min-height:min(88vh,860px);}
.clip-video-wrap{position:relative;min-height:min(88vh,860px);background:#000;}
.clip-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;}
.clip-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(to bottom,rgba(0,0,0,.08),rgba(0,0,0,.18));pointer-events:none;opacity:0;transition:opacity .18s ease;}
.clip-card.is-paused .clip-play-overlay{pointer-events:auto;opacity:1;}
.clip-play-btn{width:76px;height:76px;border-radius:999px;background:rgba(255,255,255,.16);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px;border:1px solid rgba(255,255,255,.24);}
.clip-info{position:absolute;inset:auto 0 0 0;z-index:2;padding:20px 16px 18px;background:linear-gradient(to top,rgba(3,7,18,.88),rgba(3,7,18,.52) 45%,rgba(3,7,18,0));color:#fff;display:grid;gap:12px;}
.clip-user{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;min-width:0;}
.clip-user strong,.clip-user small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.clip-user .avatar{border:2px solid rgba(255,255,255,.75);}
.clip-title,.clip-body{margin:0;color:#fff;max-width:calc(100% - 88px);}
.clip-actions{position:absolute;right:12px;bottom:22px;display:grid;gap:10px;z-index:3;}
.clip-action{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);color:#fff;padding:9px 10px;border-radius:999px;text-decoration:none;backdrop-filter:blur(12px);font-weight:700;}
.clip-action.like-btn.liked{background:rgba(239,68,68,.26);}
.clip-no-video{display:flex;align-items:center;justify-content:center;min-height:420px;color:#fff;}

/* Messages */
.dm-page{padding-bottom:calc(84px + var(--bt-safe-bottom));}
.dm-layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:18px;align-items:stretch;min-height:calc(100dvh - 132px);}
.dm-conv-list,.dm-chat-area{background:var(--surface);border:1px solid var(--border);border-radius:22px;overflow:hidden;min-height:0;}
.dm-conv-header,.dm-chat-header{padding:16px 18px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.78);backdrop-filter:blur(12px);}
.dm-conv-scroll{max-height:calc(100dvh - 220px);overflow:auto;}
.dm-conv-item{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 16px;text-decoration:none;color:inherit;border-bottom:1px solid var(--border);}
.dm-conv-item.active{background:var(--primary-light);}
.dm-conv-info,.dm-conv-meta{min-width:0;}
.dm-conv-name,.dm-conv-last{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-chat-area{display:grid;grid-template-rows:auto minmax(0,1fr) auto;}
.dm-chat-messages{min-height:0;overflow:auto;padding:16px;display:grid;gap:10px;background:linear-gradient(180deg,var(--bg),#fff);}
.dm-bubble{max-width:min(82%,520px);padding:10px 12px;border-radius:18px;}
.dm-bubble.mine{justify-self:end;background:var(--primary);color:#fff;border-bottom-right-radius:6px;}
.dm-bubble.theirs{justify-self:start;background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:6px;}
.dm-bubble-img img{max-width:min(240px,56vw);border-radius:14px;display:block;}
.dm-chat-form{padding:12px 14px calc(12px + var(--bt-safe-bottom));border-top:1px solid var(--border);background:var(--surface);}
.dm-form-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:end;}
.dm-textarea{min-height:46px;max-height:140px;padding:12px 14px;border-radius:18px;resize:none;}
.dm-send-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:none;border-radius:16px;background:var(--primary);color:#fff;box-shadow:0 10px 24px rgba(29,78,216,.16);}

/* Marketplace */
.mk-grid,.market-grid,.listings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.mk-card,.listing-card,.job-card{border-radius:20px;overflow:hidden;border:1px solid var(--border);background:var(--surface);}
.mk-card img,.listing-card img,.job-card img{aspect-ratio:4/3;object-fit:cover;background:#eff4ff;}
.mk-card-body,.job-card-body,.listing-card-body{padding:16px;}
.mk-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;}
.mk-chip,.mk-page{min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border-radius:999px;border:1px solid var(--border);background:#fff;text-decoration:none;}
.mk-chip.active,.mk-page.active{background:var(--primary);border-color:var(--primary);color:#fff;}

/* Better forms */
input,select,textarea{width:100%;}
.form-grid,.grid-2,.grid-3,.grid-4{display:grid;gap:14px;}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}

/* Mobile */
@media (max-width: 1180px){
  .vitrin-page-layout{grid-template-columns:minmax(0,1fr);}
  .vitrin-side-col{display:none;}
}
@media (max-width: 960px){
  .mk-grid,.market-grid,.listings-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dm-layout{grid-template-columns:300px minmax(0,1fr);}
}
@media (max-width: 768px){
  .container{width:min(calc(100% - 16px),100%);}
  .topbar .nav-wrap{min-height:68px;}
  .vitrin-page-title,h1{letter-spacing:-.03em;}
  .vitrin-page-sub{font-size:14px;}
  .vitrin-composer-card{position:static;}
  .vitrin-composer-actions{grid-template-columns:repeat(2,minmax(0,1fr));}
  .vitrin-feed-card,.dm-conv-list,.dm-chat-area,.clip-card,.mk-card,.job-card,.listing-card{border-radius:18px;}
  .vitrin-feed-header{padding:14px 14px 10px;}
  .vitrin-feed-content{padding:0 14px 14px;}
  .vitrin-feed-actions{grid-template-columns:repeat(3,minmax(0,1fr));}
  .vfa,.like-btn,.comment-btn,.save-btn,.share-btn{font-size:13px;padding:10px 8px;}
  .clips-header{padding-inline:0;}
  .clips-feed{max-width:none;width:100%;}
  .clip-card,.clip-video-wrap{min-height:calc(var(--bt-dvh) * 100 - 130px);border-radius:18px;}
  .clip-title,.clip-body{max-width:calc(100% - 90px);}
  .clip-actions{right:10px;bottom:18px;}
  .clip-action{padding:10px 11px;font-size:13px;}
  .dm-layout{grid-template-columns:minmax(0,1fr);min-height:auto;gap:12px;}
  .dm-layout.has-active-conv .dm-conv-list{display:none;}
  .dm-layout.no-active-conv .dm-chat-area{display:none;}
  .dm-conv-scroll{max-height:none;}
  .dm-chat-area{min-height:calc(var(--bt-dvh) * 100 - 158px);}
  .dm-bubble{max-width:88%;}
  .mk-grid,.market-grid,.listings-grid{grid-template-columns:minmax(0,1fr);}
  .mk-search,.grid-2,.grid-3,.grid-4,.comment-form,.vitrin-comment-form{grid-template-columns:minmax(0,1fr);}
}
@media (max-width: 480px){
  .brand-wordmark{font-size:1.08rem;}
  .vitrin-filter-chip,.mk-chip{font-size:12px;padding:8px 12px;}
  .vitrin-feed-username{font-size:14px;}
  .vitrin-feed-usermeta,.clip-user small{font-size:11px;}
  .vitrin-feed-title{font-size:22px;line-height:1.22;}
  .vitrin-feed-text,.clip-body{font-size:14px;line-height:1.55;}
  .vitrin-feed-actions{grid-template-columns:repeat(2,minmax(0,1fr));}
  .clip-card,.clip-video-wrap{min-height:calc(var(--bt-dvh) * 100 - 116px);border-radius:16px;}
  .clip-actions{grid-template-columns:1fr;gap:8px;}
  .clip-action{min-width:46px;justify-content:center;}
  .dm-chat-header .btn.small.ghost:last-child{display:none;}
  .dm-conv-item{padding:12px;grid-template-columns:44px minmax(0,1fr) auto;}
  .dm-textarea{font-size:16px;}
}

/* Dark mode refinements */
[data-theme="dark"] .dm-chat-messages{background:linear-gradient(180deg,#101827,#0f172a);}
[data-theme="dark"] .dm-conv-header,[data-theme="dark"] .dm-chat-header{background:rgba(20,27,46,.85);}
[data-theme="dark"] .clip-card{background:#09111f;border-color:#25314a;}
[data-theme="dark"] .vfa,[data-theme="dark"] .like-btn,[data-theme="dark"] .comment-btn,[data-theme="dark"] .save-btn,[data-theme="dark"] .share-btn{background:#121c2e;border-color:#23324c;color:#dbeafe;}
[data-theme="dark"] .mk-chip,[data-theme="dark"] .mk-page{background:#121c2e;border-color:#23324c;color:#e2e8f0;}
[data-theme="dark"] .dm-conv-list,[data-theme="dark"] .dm-chat-area,[data-theme="dark"] .vitrin-feed-card,[data-theme="dark"] .mk-card,[data-theme="dark"] .job-card,[data-theme="dark"] .listing-card{border-color:#24324b;}