/* =============================================================
   app.css — Uberzoot Staff Portal
   Mobile-first. Inherits the Uberzoot design system.
   Cream / ink / monstera. Fraunces + Inter.
   ============================================================= */

:root {
  --cream:#F4EFE8; --bone:#EBE3D7; --sand:#D9CBB5;
  --ink:#1A1614; --espresso:#2B2420;
  --monstera:#4A6B4E; --monstera-deep:#3A5440; --monstera-soft:#6B8F6F;
  --cognac:#A8774D; --cognac-deep:#7A5334;
  --font-display:'Fraunces',Georgia,serif;
  --font-ui:'Inter',system-ui,sans-serif;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; background:var(--cream); font-family:var(--font-ui); color:var(--ink);
  -webkit-font-smoothing:antialiased; overscroll-behavior:none; }
body { overflow:hidden; }
.hidden { display:none !important; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
input { font-family:inherit; }

/* ============================== LOGIN ============================== */
.screen-full { position:fixed; inset:0; background:var(--cream); z-index:100; overflow-y:auto; }
.login-body { min-height:100%; padding:calc(48px + var(--safe-top)) 32px calc(40px + var(--safe-bottom));
  display:flex; flex-direction:column; max-width:430px; margin:0 auto; }
.login-logo { font-family:var(--font-display); font-weight:300; font-size:46px; letter-spacing:0.04em; margin-bottom:4px; }
.login-sub { font-size:11px; font-weight:500; letter-spacing:0.26em; text-transform:uppercase; color:rgba(26,22,20,0.35); margin-bottom:6px; }
.login-divider { width:32px; height:2px; background:var(--monstera); margin-bottom:44px; }
.login-heading { font-family:var(--font-display); font-weight:300; font-style:italic; font-size:30px; line-height:1.25; margin-bottom:36px; }
.login-google { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:17px;
  background:var(--ink); color:var(--cream); font-size:12px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase;
  margin-bottom:20px; transition:background .3s,letter-spacing .3s; }
.login-google:active { background:var(--monstera); letter-spacing:0.26em; }
.login-or { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.login-or-line { flex:1; height:1px; background:rgba(26,22,20,0.1); }
.login-or-text { font-size:11px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:rgba(26,22,20,0.28); }
.login-field { width:100%; padding:16px 18px; border:0.5px solid rgba(26,22,20,0.15); border-radius:14px;
  background:rgba(255,255,255,0.7); font-size:16px; font-weight:300; outline:none; margin-bottom:12px; }
.login-field:focus { border-color:var(--monstera); }
.login-field::placeholder { color:rgba(26,22,20,0.3); }
.login-submit { width:100%; padding:17px; background:var(--monstera); color:var(--cream);
  font-size:12px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; margin-top:4px; transition:background .3s; }
.login-submit:active { background:var(--monstera-deep); }
.login-error { color:#A33; font-size:13px; margin-top:14px; min-height:18px; text-align:center; }
.login-footer { margin-top:auto; padding-top:32px; font-size:12px; color:rgba(26,22,20,0.28); line-height:1.7; text-align:center; }

/* ============================== APP SHELL ============================== */
.app { position:fixed; inset:0; display:flex; flex-direction:column; }
#view { flex:1; display:flex; flex-direction:column; overflow:hidden; }

/* bottom tab bar */
.tabbar { display:flex; background:var(--cream); border-top:0.5px solid rgba(26,22,20,0.1);
  padding-bottom:var(--safe-bottom); flex-shrink:0; }
.tab { flex:1; padding:8px 2px 6px; display:flex; flex-direction:column; align-items:center; gap:2px;
  color:rgba(26,22,20,0.35); font-size:10px; font-weight:500; letter-spacing:0.04em; }
.tab i { font-size:21px; }
.tab.active { color:var(--ink); }
.tab.active i { color:var(--monstera); }

/* ============================== CHANNEL VIEW ============================== */
.ch-head { background:var(--cream); border-bottom:0.5px solid rgba(26,22,20,0.1);
  padding:calc(14px + var(--safe-top)) 18px 12px; flex-shrink:0; }
.ch-head-row { display:flex; align-items:center; justify-content:space-between; }
.ch-title { font-family:var(--font-display); font-weight:300; font-size:24px; }
.ch-head-icons { display:flex; gap:18px; color:rgba(26,22,20,0.45); }
.ch-head-icons i { font-size:22px; }
.ch-count { font-size:12px; color:rgba(26,22,20,0.35); letter-spacing:0.1em; margin-top:3px; }

.pinned { background:var(--ink); padding:13px 18px; flex-shrink:0; }
.pinned-label { font-size:10px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(244,239,232,0.4); margin-bottom:6px; display:flex; align-items:center; gap:5px; }
.pinned-label i { font-size:12px; }
.pinned-text { font-size:15px; font-weight:300; color:var(--cream); line-height:1.5; }
.pinned-meta { font-size:11px; color:rgba(244,239,232,0.3); margin-top:7px; }

.messages { flex:1; overflow-y:auto; padding:14px 14px 8px; display:flex; flex-direction:column; gap:14px;
  -webkit-overflow-scrolling:touch; }
.messages::-webkit-scrollbar { display:none; }

.day-div { display:flex; align-items:center; gap:8px; margin:2px 0; }
.day-line { flex:1; height:0.5px; background:rgba(26,22,20,0.1); }
.day-text { font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:rgba(26,22,20,0.28); }

.msg { display:flex; gap:10px; position:relative; }
.av { width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:500; color:var(--cream); overflow:hidden; margin-top:2px; background:var(--cognac); }
.av img { width:100%; height:100%; object-fit:cover; }
.av.role-owner { background:var(--ink); }
.av.is-polly { background:var(--monstera); }
.msg-body { flex:1; min-width:0; }
.msg-head { display:flex; align-items:baseline; gap:7px; margin-bottom:5px; flex-wrap:wrap; }
.msg-name { font-size:15px; font-weight:500; }
.msg-name.is-polly { color:var(--monstera); }
.owner-tag { font-size:10px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--monstera); }
.msg-time { font-size:11px; color:rgba(26,22,20,0.28); margin-left:auto; }
.bubble { background:rgba(255,255,255,0.9); border:0.5px solid rgba(26,22,20,0.08);
  border-radius:4px 18px 18px 18px; padding:11px 15px; font-size:16px; font-weight:300; color:var(--espresso);
  line-height:1.55; display:inline-block; max-width:100%; word-wrap:break-word; }
.bubble.is-polly { background:rgba(74,107,78,0.09); border-color:rgba(74,107,78,0.2); }
.bubble.ghost { background:transparent; border:0.5px dashed rgba(26,22,20,0.15); color:rgba(26,22,20,0.3);
  font-style:italic; font-size:14px; border-radius:18px; }
.bubble img { max-width:240px; border-radius:12px; margin-top:6px; display:block; }
.bubble .tag { color:var(--monstera); font-weight:500; }
.polly-label { font-size:10px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--monstera-soft); margin-bottom:6px; }

.reactions { display:flex; gap:5px; margin-top:6px; flex-wrap:wrap; }
.react-pill { display:flex; align-items:center; gap:4px; background:rgba(255,255,255,0.85);
  border:0.5px solid rgba(26,22,20,0.12); border-radius:20px; padding:3px 10px 3px 7px; font-size:14px; }
.react-count { font-size:12px; font-weight:500; color:rgba(26,22,20,0.5); }
.react-pill.mine { border-color:rgba(74,107,78,0.4); background:rgba(74,107,78,0.08); }
.react-pill.mine .react-count { color:var(--monstera); }

/* input bar */
.input-area { padding:10px 14px calc(14px + var(--safe-bottom)); border-top:0.5px solid rgba(26,22,20,0.08);
  flex-shrink:0; background:var(--cream); }
.reply-banner { display:flex; align-items:center; gap:8px; padding:6px 14px; margin-bottom:8px;
  background:rgba(74,107,78,0.08); border-left:2px solid var(--monstera); font-size:13px; color:var(--espresso); }
.reply-banner i { cursor:pointer; margin-left:auto; color:rgba(26,22,20,0.4); }
.input-wrap { display:flex; align-items:center; gap:6px; background:rgba(255,255,255,0.9);
  border:0.5px solid rgba(26,22,20,0.12); border-radius:26px; padding:6px 6px 6px 18px; }
.input-wrap input { flex:1; border:none; outline:none; background:transparent; font-size:16px; font-weight:300; padding:8px 0; }
.icon-btn { width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:rgba(26,22,20,0.4); border-radius:50%; }
.icon-btn i { font-size:20px; }
.send-btn { width:36px; height:36px; border-radius:50%; background:var(--ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.send-btn i { font-size:18px; color:var(--cream); }
.priority-toggle { display:flex; align-items:center; gap:6px; padding:6px 14px 0; font-size:12px; color:rgba(26,22,20,0.45); }
.priority-toggle input { width:auto; }

/* context menu (long-press) */
.ctx-overlay { position:fixed; inset:0; z-index:200; background:rgba(26,22,20,0.2); display:flex; align-items:center; justify-content:center; }
.ctx-menu { background:var(--ink); border-radius:14px; overflow:hidden; width:240px; box-shadow:0 8px 32px rgba(0,0,0,0.3); }
.ctx-react { display:flex; justify-content:space-around; padding:10px; border-bottom:0.5px solid rgba(255,255,255,0.08); }
.ctx-react span { font-size:24px; padding:4px; border-radius:8px; }
.ctx-react span:active { background:rgba(255,255,255,0.12); }
.ctx-opt { padding:13px 18px; font-size:15px; font-weight:300; color:var(--cream); display:flex; align-items:center; gap:10px;
  border-bottom:0.5px solid rgba(255,255,255,0.06); }
.ctx-opt:last-child { border-bottom:none; }
.ctx-opt.danger { color:#E07070; }
.ctx-opt i { font-size:17px; opacity:0.7; }

/* ============================== PROFILE ============================== */
.profile-hero { background:var(--ink); padding:calc(32px + var(--safe-top)) 18px 24px; display:flex; flex-direction:column; align-items:center; gap:12px; flex-shrink:0; }
.profile-av-wrap { position:relative; }
.profile-av { width:88px; height:88px; border-radius:50%; background:var(--cognac); display:flex; align-items:center;
  justify-content:center; font-size:28px; font-weight:500; color:var(--cream); border:3px solid rgba(244,239,232,0.15); overflow:hidden; }
.profile-av img { width:100%; height:100%; object-fit:cover; }
.profile-av-edit { position:absolute; bottom:0; right:0; width:28px; height:28px; border-radius:50%; background:var(--monstera);
  border:2px solid var(--ink); display:flex; align-items:center; justify-content:center; }
.profile-av-edit i { font-size:13px; color:var(--cream); }
.profile-name { font-family:var(--font-display); font-weight:300; font-size:26px; color:var(--cream); }
.profile-role { font-size:11px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:rgba(244,239,232,0.35); }
.settings-scroll { flex:1; overflow-y:auto; }
.section-label { font-size:11px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:rgba(26,22,20,0.3); padding:18px 18px 8px; }
.prow { display:flex; align-items:center; padding:16px 18px; border-bottom:0.5px solid rgba(26,22,20,0.07); gap:14px; }
.prow-icon { width:36px; height:36px; border-radius:10px; background:rgba(74,107,78,0.1); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.prow-icon i { font-size:18px; color:var(--monstera); }
.prow-body { flex:1; }
.prow-label { font-size:12px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:rgba(26,22,20,0.35); margin-bottom:3px; }
.prow-value { font-size:16px; font-weight:300; }
.toggle { width:44px; height:26px; border-radius:13px; background:var(--monstera); position:relative; flex-shrink:0; transition:background .2s; }
.toggle.off { background:rgba(26,22,20,0.15); }
.toggle-dot { width:20px; height:20px; border-radius:50%; background:var(--cream); position:absolute; top:3px; right:3px; transition:all .2s; }
.toggle.off .toggle-dot { right:auto; left:3px; }
.signout { margin:20px 18px; padding:16px; border:0.5px solid rgba(26,22,20,0.15); display:flex; align-items:center; justify-content:center; gap:8px; }
.signout i { font-size:18px; color:rgba(26,22,20,0.4); }
.signout span { font-size:12px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:rgba(26,22,20,0.4); }

/* admin entry on profile */
.admin-link { margin:8px 18px 0; padding:14px 16px; background:var(--monstera); color:var(--cream); display:flex; align-items:center; gap:10px; }
.admin-link i { font-size:18px; }
.admin-link span { font-size:13px; font-weight:500; letter-spacing:0.08em; }
.admin-link .chev { margin-left:auto; }

/* ============================== ADMIN ============================== */
.admin-stats { display:flex; gap:10px; padding:16px 18px; flex-shrink:0; }
.astat { flex:1; background:var(--ink); padding:14px; border-radius:14px; }
.astat.green { background:var(--monstera); }
.astat-num { font-family:var(--font-display); font-weight:300; font-size:32px; color:var(--cream); line-height:1; margin-bottom:4px; }
.astat-label { font-size:10px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:rgba(244,239,232,0.3); }
.invite-btn { margin:0 18px 4px; background:var(--monstera); padding:16px 18px; display:flex; align-items:center; gap:12px; }
.invite-icon { width:36px; height:36px; border-radius:50%; background:rgba(244,239,232,0.15); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.invite-icon i { font-size:18px; color:var(--cream); }
.invite-text { flex:1; }
.invite-title { font-size:15px; font-weight:500; color:var(--cream); }
.invite-sub { font-size:12px; font-weight:300; color:rgba(244,239,232,0.55); }
.mrow { display:flex; align-items:center; padding:13px 18px; border-bottom:0.5px solid rgba(26,22,20,0.07); gap:12px; }
.mrow-av { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:500; color:var(--cream); flex-shrink:0; overflow:hidden; background:var(--cognac); }
.mrow-av img { width:100%; height:100%; object-fit:cover; }
.mrow-body { flex:1; }
.mrow-name { font-size:16px; font-weight:400; margin-bottom:2px; }
.mrow-meta { font-size:12px; font-weight:300; color:rgba(26,22,20,0.4); display:flex; align-items:center; gap:6px; }
.dot-on { width:6px; height:6px; border-radius:50%; background:var(--monstera); }
.dot-off { width:6px; height:6px; border-radius:50%; background:rgba(26,22,20,0.2); }
.role-tag { font-size:10px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; padding:3px 8px; border-radius:20px; }
.role-tag.owner { background:rgba(26,22,20,0.08); color:rgba(26,22,20,0.5); }
.role-tag.admin { background:rgba(74,107,78,0.1); color:var(--monstera); }
.mrow-action { font-size:20px; color:rgba(26,22,20,0.25); padding:6px; }

/* ============================== DM LIST ============================== */
.dm-row { display:flex; align-items:center; padding:14px 18px; border-bottom:0.5px solid rgba(26,22,20,0.07); gap:12px; }
.dm-av { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:500; color:var(--cream); flex-shrink:0; position:relative; background:var(--cognac); overflow:hidden; }
.dm-av img { width:100%; height:100%; object-fit:cover; }
.dm-ring { position:absolute; bottom:1px; right:1px; width:12px; height:12px; border-radius:50%; background:var(--monstera); border:2px solid var(--cream); }
.dm-body { flex:1; min-width:0; }
.dm-name-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
.dm-name { font-size:16px; font-weight:500; }
.dm-time { font-size:11px; color:rgba(26,22,20,0.3); }
.dm-preview { font-size:14px; font-weight:300; color:rgba(26,22,20,0.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* DM thread reuses .messages; sender bubbles flip */
.msg.mine { flex-direction:row-reverse; }
.msg.mine .bubble { background:var(--ink); color:var(--cream); border-radius:18px 4px 18px 18px; border-color:var(--ink); }
.msg.mine .msg-head { flex-direction:row-reverse; }

/* ============================== SEARCH ============================== */
.search-head { padding:calc(16px + var(--safe-top)) 18px 12px; border-bottom:0.5px solid rgba(26,22,20,0.1); background:var(--cream); flex-shrink:0; }
.search-row { display:flex; align-items:center; gap:10px; }
.search-row > i { font-size:22px; color:rgba(26,22,20,0.5); }
.search-input-wrap { flex:1; display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.9);
  border:0.5px solid rgba(26,22,20,0.12); border-radius:12px; padding:10px 14px; }
.search-input-wrap i { font-size:18px; color:rgba(26,22,20,0.3); }
.search-input-wrap input { flex:1; border:none; outline:none; background:transparent; font-size:16px; font-weight:300; }
.search-results { flex:1; overflow-y:auto; padding:8px 0; }
.sresult { padding:13px 18px; border-bottom:0.5px solid rgba(26,22,20,0.07); display:flex; gap:10px; }
.sresult-body { flex:1; }
.sresult-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
.sresult-name { font-size:15px; font-weight:500; }
.sresult-time { font-size:11px; color:rgba(26,22,20,0.3); }
.sresult-text { font-size:15px; font-weight:300; color:rgba(26,22,20,0.6); line-height:1.45; }
.sresult-text mark { color:var(--ink); font-weight:500; background:rgba(74,107,78,0.15); padding:0 2px; border-radius:3px; }

/* generic top nav for subpages */
.subnav { display:flex; align-items:center; gap:12px; padding:calc(14px + var(--safe-top)) 18px 12px;
  border-bottom:0.5px solid rgba(26,22,20,0.1); background:var(--cream); flex-shrink:0; }
.subnav i.back { font-size:22px; color:rgba(26,22,20,0.45); }
.subnav-title { font-family:var(--font-display); font-weight:300; font-size:22px; flex:1; }

/* announcement cards */
.ann-card { margin:12px 18px 0; background:rgba(255,255,255,0.8); border:0.5px solid rgba(26,22,20,0.08); border-radius:16px; overflow:hidden; }
.ann-card-head { padding:14px 16px 10px; display:flex; align-items:center; gap:10px; border-bottom:0.5px solid rgba(26,22,20,0.07); }
.ann-card-who { flex:1; }
.ann-card-name { font-size:15px; font-weight:500; }
.ann-card-time { font-size:11px; color:rgba(26,22,20,0.35); }
.ann-badge { font-size:10px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; padding:3px 10px; border-radius:20px; }
.ann-badge.priority { background:rgba(26,22,20,0.08); color:rgba(26,22,20,0.5); }
.ann-badge.info { background:rgba(74,107,78,0.1); color:var(--monstera); }
.ann-card-text { padding:14px 16px; font-size:16px; font-weight:300; color:var(--espresso); line-height:1.6; }

/* empty + loading */
.empty { text-align:center; padding:60px 30px; color:rgba(26,22,20,0.4); }
.empty i { font-size:40px; color:rgba(26,22,20,0.15); margin-bottom:12px; display:block; }
.empty-title { font-family:var(--font-display); font-style:italic; font-size:22px; color:rgba(26,22,20,0.5); margin-bottom:6px; }
.toast { position:fixed; bottom:calc(80px + var(--safe-bottom)); left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--cream); padding:12px 22px; border-radius:24px; font-size:14px; z-index:300; }