/* /frontend/styles.css — mobile-first */
:root{
  --bg:#0b0f14;
  --card:#101826;
  --text:#e8eef7;
  --muted:#8aa0b8;
  --border:rgba(255,255,255,.10);
  --accent:#2b6cb0;
  --accent-soft:rgba(43,108,176,.25);
  --bubble-them:#1a2434;
  --bubble-me:#2b6cb0;
  --input-bg:rgba(9,14,20,.55);
  --bar-bg:rgba(16,24,38,.9);
  --overlay:rgba(0,0,0,.25);
  --link:#93c5fd;
  --danger:#dc2626;
  --ok:#16a34a;
  --warn:#f59e0b;
  --radius:16px;
  /* set from JS (visualViewport) so the iOS keyboard doesn't cover the composer */
  --app-height:100dvh;
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f4f6fa;
    --card:#ffffff;
    --text:#17202b;
    --muted:#5c6f84;
    --border:rgba(15,23,42,.12);
    --bubble-them:#e8edf4;
    --bubble-me:#2b6cb0;
    --input-bg:#ffffff;
    --bar-bg:rgba(255,255,255,.92);
    --overlay:rgba(15,23,42,.06);
    --link:#1d4ed8;
  }
}

*{ box-sizing:border-box; }
html{ height:100%; }
body{
  margin:0;
  height:100%;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg);
  color:var(--text);
  overflow:hidden;               /* only .messages scrolls */
  -webkit-text-size-adjust:100%;
  touch-action:manipulation;      /* kill double-tap zoom delay */
}

.app{
  height:var(--app-height);
  max-height:100dvh;
  display:flex;
  flex-direction:column;
  /* respect notch / home-indicator */
  padding-top:env(safe-area-inset-top);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}

/***********************
 * HEADER
 ***********************/
.topbar{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  background:var(--bar-bg);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.dot{
  flex:none;
  width:10px; height:10px; border-radius:50%;
  background:var(--warn);
  box-shadow:0 0 0 4px rgba(245,158,11,.15);
}
.titles{ min-width:0; }
.title{ font-weight:800; font-size:1rem; letter-spacing:.2px; }
.status-text{
  color:var(--muted);
  font-size:.78rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.top-actions{ display:flex; align-items:center; gap:6px; }

/***********************
 * BUTTONS & INPUTS
 * 44px minimum touch targets, 16px inputs (no iOS zoom)
 ***********************/
.btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  background:var(--accent);
  color:var(--text);
  min-height:44px;
  padding:0 16px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
  font-size:1rem;
}
.btn:active{ filter:brightness(1.12); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn-ghost{ background:transparent; border-color:rgba(255,255,255,.18); }
.btn-big{ width:100%; min-height:50px; }

.iconbtn{
  appearance:none;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  color:var(--text);
  font-size:1.25rem;
  cursor:pointer;
  padding:0;
  line-height:1;
}
.iconbtn:active{ background:rgba(255,255,255,.14); }

input[type="text"], input[type="password"], textarea{
  width:100%;
  min-height:44px;
  border-radius:12px;
  padding:10px 14px;
  border:1px solid var(--border);
  background:var(--input-bg);
  color:var(--text);
  outline:none;
  font-size:16px; /* <16px triggers auto-zoom on iOS */
  font-family:inherit;
}
textarea{
  resize:none;
  line-height:1.35;
  max-height:120px; /* ~4 lines; JS autosizes up to here */
  overflow-y:auto;
}
input:focus, textarea:focus{
  border-color:rgba(43,108,176,.6);
  box-shadow:0 0 0 3px var(--accent-soft);
}

.muted{ color:var(--muted); }

/***********************
 * INFO / DEBUG PANEL
 ***********************/
.info-panel{
  flex:none;
  display:grid;
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  background:var(--overlay);
}
.pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.15);
  min-width:0;
}
.pill .label{ color:var(--muted); font-size:.8rem; flex:none; }
.pill .value{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:.75rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.log{
  margin:0;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(0,0,0,.35);
  border:1px dashed rgba(255,255,255,.12);
  color:rgba(232,238,247,.85);
  max-height:120px;
  overflow:auto;
  font-size:.78rem;
  -webkit-overflow-scrolling:touch;
}

/***********************
 * MAIN
 ***********************/
.main{
  flex:1;
  min-height:0;
  position:relative;
  display:flex;
  flex-direction:column;
}

/***********************
 * AUTH
 ***********************/
.auth{
  position:absolute;
  inset:0;
  display:none; /* app.js switches to grid */
  place-items:center;
  padding:16px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
  overflow:auto;
}
.auth-card{
  width:min(440px, 100%);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-radius:var(--radius);
  padding:20px;
}
.auth-card h1{ margin:0 0 4px; font-size:1.35rem; }
.auth-card p{ margin:0 0 14px; }
.grid{ display:grid; gap:14px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field span{ color:var(--muted); font-size:.9rem; }

/***********************
 * CHAT
 ***********************/
.chat{
  flex:1;
  min-height:0;
  display:none; /* app.js switches to grid */
  grid-template-rows:1fr auto;
}

.messages{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;          /* no pull-to-refresh hijack */
  -webkit-overflow-scrolling:touch;     /* momentum scrolling */
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:12px;
  scrollbar-width:thin;
}

/* Bubbles */
.msg{
  max-width:82%;
  align-self:flex-start;
  margin-top:8px;
}
.msg.me{ align-self:flex-end; }

.msg .meta{
  display:flex;
  gap:8px;
  align-items:baseline;
  color:var(--muted);
  font-size:.72rem;
  margin:0 6px 3px;
}
.msg.me .meta{ justify-content:flex-end; }
.msg .meta .who{ color:var(--text); font-weight:700; font-size:.78rem; }
.msg.me .meta .who{ display:none; } /* it's you — no need for a name */

.msg .body{
  padding:9px 13px;
  border-radius:18px;
  background:var(--bubble-them);
  border:1px solid rgba(255,255,255,.06);
  white-space:pre-wrap;
  line-height:1.4;
  overflow-wrap:anywhere;
  word-break:break-word;
  font-size:.95rem;
}
.msg.me .body{
  background:var(--bubble-me);
  border-color:transparent;
  color:#e8eef7; /* blue bubble keeps light text in both themes */
}
.msg a{ color:var(--link); text-decoration:underline; }
.msg.me a{ color:#dbeafe; }

/* Media bubble: shrink-wraps to the image exactly — no padding or backdrop */
.msg .body.media{
  padding:0;
  background:transparent;
  border:none;
  border-radius:18px;
  overflow:hidden;
  line-height:0; /* no baseline gap below the image */
}
.chatimg{
  display:block;
  max-width:100%;
  max-height:45vh;
  width:auto; height:auto;
  border-radius:18px;
  cursor:pointer;
}
.filemeta{ color:inherit; opacity:.75; font-size:.8rem; margin-top:4px; }

/***********************
 * COMPOSER (pinned bottom, above home indicator)
 ***********************/
.composer{
  flex:none;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  padding-bottom:calc(8px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border);
  background:var(--bar-bg);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.composer textarea{ border-radius:22px; }
.composer input{ flex:1; min-width:0; border-radius:999px; }
.filebtn{ position:relative; overflow:hidden; }
.filebtn input{
  position:absolute; inset:0;
  opacity:0; cursor:pointer;
  font-size:0;
}
.sendbtn{
  background:var(--accent);
  border-color:transparent;
  font-size:1.1rem;
  padding-left:3px; /* optically center the arrow glyph */
}
.sendbtn:active{ filter:brightness(1.15); }

/***********************
 * LARGER SCREENS: center the chat like a column
 ***********************/
@media (min-width: 768px){
  .topbar, .info-panel{ padding-left:20px; padding-right:20px; }
  .messages, .composer{
    width:100%;
    max-width:820px;
    margin:0 auto;
  }
  .messages{ padding:16px 20px; }
  .msg{ max-width:70%; }
  .chatimg{ max-height:340px; }
}

/***********************
 * MESSAGE GROUPING & DAY SEPARATORS
 ***********************/
.msg.grouped{ margin-top:2px; }
.msg.grouped .meta{ display:none; }

.daysep{
  align-self:center;
  margin:14px 0 4px;
  padding:4px 12px;
  border-radius:999px;
  background:var(--overlay);
  border:1px solid var(--border);
  color:var(--muted);
  font-size:.72rem;
  font-weight:700;
}

/***********************
 * PENDING / FAILED SENDS
 ***********************/
.msg.pending .body{ opacity:.55; }
.msg.failed .body{
  opacity:1;
  border:1px solid var(--danger);
}
.msg .sendstate{
  color:var(--muted);
  font-size:.7rem;
  text-align:right;
  margin:2px 6px 0;
}
.msg.failed .sendstate{ color:var(--danger); font-weight:700; cursor:pointer; }

/***********************
 * NEW-MESSAGES PILL
 ***********************/
.jumppill{
  position:absolute;
  right:16px;
  bottom:76px;
  z-index:5;
  appearance:none;
  border:1px solid var(--border);
  border-radius:999px;
  padding:10px 16px;
  min-height:44px;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  font-size:.9rem;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}

/***********************
 * UPLOAD PROGRESS
 ***********************/
.uploadbar{
  flex:none;
  height:3px;
  background:var(--overlay);
}
.uploadfill{
  height:100%;
  width:0%;
  background:var(--accent);
  transition:width .15s linear;
}

/***********************
 * LOADING OLDER SPINNER
 ***********************/
.loadolder{
  align-self:center;
  color:var(--muted);
  font-size:.78rem;
  padding:6px 0;
}

/***********************
 * IMAGE SKELETON + FULLSCREEN VIEWER
 ***********************/
.chatimg{ background:var(--overlay); min-height:80px; }
.chatimg.loaded{ min-height:0; }

.viewer{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.92);
  touch-action:pinch-zoom; /* allow native pinch on the image */
}
.viewer img{
  max-width:100vw;
  max-height:100vh;
  object-fit:contain;
}
.viewer-close{
  position:absolute;
  top:calc(10px + env(safe-area-inset-top));
  right:14px;
  background:rgba(255,255,255,.12);
  color:#fff;
}

/* Respect users who disable animations */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; }
}