/* MiniSocial v3.6 — fixes iPhone tip cutoff + minor polish */

:root{
  --brand:#0a84ff; --brand-600:#0a6fe0; --brand-700:#095fbe;
  --bg:#f7f8fa; --card:#fff; --text:#0f172a; --muted:#64748b; --border:#e5e7eb;
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 6px 24px rgba(15,23,42,.06);
  --warn:#ffd166;
  --radius:14px; --radius-lg:20px;
  --space-1:clamp(6px,.6vw,8px); --space-2:clamp(10px,1vw,12px);
  --space-3:clamp(14px,1.4vw,16px); --space-4:clamp(18px,1.8vw,20px);
  --space-5:clamp(20px,2vw,24px); --space-6:clamp(24px,2.6vw,32px);
  --fs-12:clamp(12px,1vw,13px); --fs-14:clamp(14px,1.2vw,15px);
  --fs-16:clamp(16px,1.4vw,17px); --fs-18:clamp(17px,1.6vw,18px);
  --fs-20:clamp(18px,1.8vw,20px); --fs-24:clamp(20px,2.2vw,24px);
  --panel-bg:#fbfdff; --panel-inset:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.04);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0f14; --card:#0f141a; --text:#e5e7eb; --muted:#94a3b8; --border:#1e293b;
    --shadow:0 1px 2px rgba(0,0,0,.24), 0 8px 28px rgba(0,0,0,.35);
    --panel-bg:#0c1117; --panel-inset:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.5);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--text);background:var(--bg);
  font:400 var(--fs-16)/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  min-height:100dvh;padding-bottom:calc(env(safe-area-inset-bottom) + var(--space-2));
}

/* Layout */
.container{width:min(980px,100% - clamp(20px,6vw,72px));margin:clamp(12px,2.5vw,28px) auto;display:grid;gap:var(--space-3)}
.auth-grid{display:grid;gap:var(--space-3);grid-template-columns:1fr}
@media (min-width:760px){.auth-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
  padding:calc(var(--space-2) + env(safe-area-inset-top)) clamp(14px,4vw,28px) var(--space-2);
  background:var(--card);border-bottom:1px solid var(--border);box-shadow:var(--shadow);
  overflow:visible; /* important: allow tip to show near edges on iOS */
}
.brand{font-weight:700;font-size:var(--fs-20);display:flex;align-items:center;gap:var(--space-2)}
.topbar .right{display:flex;gap:var(--space-2);align-items:center}

/* Install tip bubble (now fixed-position) */
.install-wrap{position:relative;z-index:100}
.tip-bubble{
  position:fixed; /* fixed so it ignores ancestor clipping on iOS */
  right:12px; top:56px; /* will be overridden by JS */
  z-index:1000;
  width:min(340px, 94vw);
  padding:12px 14px;border-radius:12px;
  background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);
  max-height:60vh;overflow:auto;
}
.tip-bubble:before{
  content:"";position:absolute;right:18px;top:-8px;border:8px solid transparent;border-bottom-color:var(--border)
}
.tip-bubble:after{
  content:"";position:absolute;right:18px;top:-7px;border:7px solid transparent;border-bottom-color:var(--card)
}
.tip-bubble p{margin:0 0 6px;color:var(--muted);font-size:var(--fs-14)}
.tip-bubble ul{margin:0;padding-left:18px}
.tip-bubble li{margin:4px 0}

/* Panel / Buttons / Inputs */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(14px,2vw,22px);box-shadow:var(--shadow)}
.btn{
  --pad-y:11px;--pad-x:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:var(--pad-y) var(--pad-x);min-height:44px;border-radius:var(--radius);
  border:1px solid var(--border);background:#f3f4f6;color:var(--text);
  cursor:pointer;text-decoration:none;transition:transform .06s, box-shadow .2s, background .2s, border-color .2s;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset
}
.btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(180deg,var(--brand),var(--brand-600));color:#fff;border-color:transparent;box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 8px 18px rgba(10,132,255,.28)}
.btn.primary:hover{background:linear-gradient(180deg,var(--brand-600),var(--brand-700))}
.btn.primary:active{box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 4px 10px rgba(10,132,255,.24)}
.btn.ghost{background:transparent;border-color:var(--border)}
.btn.link{border:none;background:none;color:var(--brand);padding:0;min-height:initial}
.btn.small{min-height:36px;padding:6px 10px;font-size:var(--fs-14)} .btn.full{width:100%}

label{display:grid;gap:6px;margin-block:var(--space-2);font-size:var(--fs-14);color:var(--muted)}
input,textarea{
  width:100%;padding:12px 14px;min-height:44px;color:var(--text);
  background:var(--panel-bg);border:1px solid var(--border);border-radius:var(--radius);
  outline:none;box-shadow:var(--panel-inset);transition:border-color .15s, box-shadow .15s
}
textarea{min-height:110px;resize:vertical}
input:focus,textarea:focus{border-color:color-mix(in oklab,var(--brand) 70%, var(--border));box-shadow:0 0 0 3px color-mix(in oklab,var(--brand) 18%, transparent), var(--panel-inset)}

.post header{display:flex;align-items:center;gap:var(--space-2)}
.post .meta{display:grid}.post .name{font-weight:600}.post .time,.muted{color:var(--muted);font-size:var(--fs-14)}
.post .image{margin-top:var(--space-2);overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow)}
.post .image img{display:block;width:100%;height:auto}
.post .reactions{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--space-2)}
.post .reaction{padding:8px 10px;border-radius:999px;background:var(--panel-bg);border:1px solid var(--border);min-height:36px}
.post .reaction[aria-pressed="true"]{outline:2px solid color-mix(in oklab,var(--brand) 65%, transparent);border-color:var(--brand);background:color-mix(in oklab,var(--brand) 8%, var(--panel-bg))}
.post .toolbar{display:flex;gap:10px;align-items:center;margin-top:var(--space-2)}
.post .post-tools{display:flex;gap:8px;margin-top:var(--space-2)}
.composer h2{margin:0 0 var(--space-2);font-size:var(--fs-20)}
.avatar{width:44px;height:44px;border-radius:999px;border:1px solid var(--border);object-fit:cover;background:#e2e8f0}
.avatar.small{width:36px;height:36px}
.list-gap>*+*{margin-top:var(--space-2)}
.banner{padding:var(--space-2);border-radius:var(--radius);border:1px solid var(--border);background:#fff8e1;color:#3b2f0b;box-shadow:var(--shadow)}
@media (prefers-color-scheme: dark){.banner{background:#2a1f08;color:#fff2ce}}
.banner.warn{background:var(--warn);color:#111}

/* Footer */
.footer{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:var(--space-4);color:var(--muted)}
.footer .copyright{text-align:center}
.footer .foot-actions{display:flex;gap:.5rem;justify-content:center;align-items:center;flex-wrap:nowrap;row-gap:.5rem}

/* Links & a11y */
a{color:var(--brand);text-underline-offset:2px} a:hover{text-decoration:underline}
:focus{outline:none}
:focus-visible{outline:3px solid color-mix(in oklab,var(--brand) 70%, transparent);outline-offset:3px;border-radius:10px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}