@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root {
  --ink: #191817;
  --muted: #696660;
  --paper: #f7f5ef;
  --white: #ffffff;
  --line: #e7e3da;
  --accent: #236a4b;
  --accent-dark: #174934;
  --accent-soft: #e3f2ea;
  --danger: #b42318;
  --warning: #9a6700;
  --shadow: 0 20px 70px rgba(38, 35, 29, 0.12);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { height: 100%; background: var(--paper); }
body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 0%, rgba(35, 106, 75, 0.08), transparent 28rem),
    var(--paper);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
a { color: inherit; }
:focus-visible { outline: 3px solid rgba(35, 106, 75, .3); outline-offset: 2px; }

.public-shell { min-height: 100dvh; display: grid; place-items: center; padding: 18px; }
.chat-card {
  width: min(100%, 740px);
  height: min(860px, calc(100dvh - 36px));
  min-height: 560px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(231, 227, 218, .9);
  border-radius: 30px;
  box-shadow: var(--shadow);
}
.chat-identity { display: flex; align-items: center; gap: 13px; padding: 22px 24px 16px; }
.avatar {
  width: 50px; height: 50px; flex: 0 0 50px; display: grid; place-items: center;
  border-radius: 17px; color: white; background: var(--ink);
  font-family: Manrope, sans-serif; font-weight: 800; font-size: 19px;
}
.identity-name { font-family: Manrope, sans-serif; font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.identity-status { color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 7px; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #26a269; box-shadow: 0 0 0 4px #e6f6ed; }
.messages { overflow-y: auto; padding: 10px 24px 28px; scroll-behavior: smooth; }
.message-row { display: flex; margin: 13px 0; animation: rise .24s ease both; }
.message-row.user { justify-content: flex-end; }
.bubble { max-width: min(86%, 580px); padding: 15px 18px; border-radius: 20px; font-size: 18px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant .bubble { background: #f0eee8; border-bottom-left-radius: 7px; }
.user .bubble { color: #fff; background: var(--accent); border-bottom-right-radius: 7px; }
.typing { display: inline-flex; align-items: center; gap: 5px; min-width: 62px; }
.typing i { display:block; width:7px; height:7px; border-radius:50%; background:#8d8982; animation:blink 1s infinite; }
.typing i:nth-child(2) { animation-delay:.15s; }.typing i:nth-child(3) { animation-delay:.3s; }
.composer-wrap { padding: 14px 20px max(20px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(255,255,255,.96) 18%); }
.email-form, .composer { display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 18px; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: 0 8px 30px rgba(30,27,22,.07); }
.email-form input, .composer textarea { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 18px; }
.composer textarea { resize: none; max-height: 130px; min-height: 30px; line-height: 1.45; padding: 7px 0; }
.send-button { border: 0; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 15px; display: grid; place-items: center; color: white; background: var(--accent); transition: transform .16s, background .16s; }
.send-button:hover { transform: translateY(-1px); background: var(--accent-dark); }
.send-button svg { width: 22px; height: 22px; }
.privacy { color: var(--muted); text-align: center; font-size: 12px; margin: 10px 0 0; }
.error-note { color: var(--danger); font-size: 14px; text-align: center; margin: 7px 0 0; }
@keyframes rise { from { opacity:0; transform: translateY(6px); } }
@keyframes blink { 0%,70%,100%{opacity:.3;transform:translateY(0)}35%{opacity:1;transform:translateY(-2px)} }

.admin-body { background: #f6f5f1; font-size: 16px; }
.admin-login { min-height: 100dvh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(100%, 430px); padding:36px; background:white; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); }
.login-mark { width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:var(--ink);color:white;font:800 20px Manrope;margin-bottom:24px; }
h1,h2,h3 { font-family: Manrope, sans-serif; letter-spacing:-.035em; line-height:1.18; }
h1 { font-size:30px; margin:0 0 8px; } h2 { font-size:23px; margin:0; } h3 { font-size:17px; margin:0; }
.muted { color:var(--muted); }
.field { display:grid; gap:7px; margin-top:18px; }
.field label { font-weight:700; font-size:14px; }
.input, .textarea, .select { width:100%; border:1px solid #dcd8ce; border-radius:12px; padding:12px 14px; background:white; color:var(--ink); outline:0; }
.textarea { min-height:110px; resize:vertical; }
.input:focus,.textarea:focus,.select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(35,106,75,.1); }
.btn { border:0; border-radius:12px; padding:12px 16px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn-primary { background:var(--accent); color:white; }.btn-primary:hover{background:var(--accent-dark)}
.btn-secondary { color:var(--ink); background:#ece9e2; }.btn-secondary:hover{background:#dfdbd1}
.btn-ghost { border:1px solid var(--line); background:white; }.btn-danger { color:var(--danger); }
.btn-full { width:100%; margin-top:22px; }
.admin-app { min-height:100dvh; display:grid; grid-template-columns:250px 1fr; }
.sidebar { position:sticky; top:0; height:100dvh; padding:26px 18px; background:#181817; color:white; display:flex; flex-direction:column; }
.side-brand { display:flex; gap:11px; align-items:center; padding:0 8px 27px; font:800 18px Manrope; }
.side-brand .avatar { background:white; color:var(--ink); width:38px;height:38px;flex-basis:38px;border-radius:12px;font-size:15px; }
.nav-button { width:100%; border:0; border-radius:11px; background:transparent; color:#c7c5c0; display:flex; align-items:center; gap:10px; padding:11px 12px; text-align:left; font-weight:600; }
.nav-button:hover,.nav-button.active { color:white; background:#302f2c; }
.nav-button svg { width:18px;height:18px; }
.sidebar-bottom { margin-top:auto; }
.admin-main { padding:34px clamp(22px,4vw,60px) 70px; min-width:0; }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:27px; }
.page-head p { margin:7px 0 0; }
.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; margin-bottom:24px; }
.stat-card { background:white; border:1px solid var(--line); border-radius:17px; padding:19px; }
.stat-label { color:var(--muted); font-size:13px; font-weight:700; }
.stat-value { font:800 30px Manrope; margin-top:8px; letter-spacing:-.04em; }
.stat-note { color:var(--muted); font-size:12px; margin-top:3px; }
.panel { background:white; border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.panel-pad { padding:22px; }
.toolbar { padding:15px; display:flex; gap:10px; flex-wrap:wrap; border-bottom:1px solid var(--line); }
.toolbar .input { flex:1; min-width:220px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; white-space:nowrap; }
th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; text-align:left; background:#faf9f6; }
th,td { padding:13px 15px; border-bottom:1px solid #efede8; }
tr[data-id] { cursor:pointer; } tr[data-id]:hover td { background:#faf9f6; }
.person-cell { font-weight:700; }.person-email { color:var(--muted);font-size:13px;font-weight:400; }
.badge { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 9px; font-size:12px; font-weight:700; }
.badge.complete,.badge.synced { color:#166534;background:#dcfce7; }.badge.incomplete,.badge.pending { color:#854d0e;background:#fef3c7; }.badge.error { color:#991b1b;background:#fee2e2; }
.dot { width:6px;height:6px;border-radius:50%;background:currentColor; }
.progress { width:90px;height:7px;background:#e7e4dd;border-radius:10px;overflow:hidden; }.progress i{display:block;height:100%;background:var(--accent);border-radius:10px;}
.empty { padding:50px 25px;text-align:center;color:var(--muted); }
.view { display:none; }.view.active{display:block;}
.two-col { display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:20px; }
.upload-zone { border:1.5px dashed #bbb6aa;border-radius:15px;padding:26px;text-align:center;background:#faf9f6; }
.upload-zone input { width:100%; margin-top:12px; }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:0 14px; }.form-grid .wide{grid-column:1/-1;}
.evidence { color:var(--muted);font-size:12px;margin-top:5px;padding-left:2px; }
.notice { padding:13px 15px;border-radius:12px;margin:14px 0;font-size:14px; }.notice.info{background:#e8f2ee;color:#174934}.notice.warn{background:#fff4d6;color:#734c00}.notice.error{background:#fee9e7;color:#8a1c14}
.detail-grid { display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:20px; }
.transcript { max-height:620px;overflow:auto;padding:16px;background:#faf9f6;border-radius:15px; }
.mini-message { max-width:90%;padding:10px 12px;border-radius:12px;margin:9px 0;font-size:14px;white-space:pre-wrap; }.mini-message.assistant{background:#e9e6df}.mini-message.user{margin-left:auto;background:#dff0e7}.mini-time{display:block;color:var(--muted);font-size:10px;margin-top:4px}
.missing-list { display:flex;flex-wrap:wrap;gap:7px;margin:14px 0; }.missing-chip { background:#fff3d3;color:#74510b;padding:6px 9px;border-radius:999px;font-size:12px;font-weight:700; }
.modal { position:fixed;inset:0;background:rgba(16,16,15,.5);display:none;align-items:center;justify-content:center;padding:20px;z-index:30; }.modal.open{display:flex}.modal-card{width:min(100%,1000px);max-height:92dvh;overflow:auto;background:#f8f7f3;border-radius:22px;padding:24px;box-shadow:var(--shadow)}
.modal-head { display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:18px; }.icon-btn{border:0;background:#e8e5dd;width:38px;height:38px;border-radius:11px;font-size:22px;}
.toast { position:fixed;right:22px;bottom:22px;z-index:50;background:#1d1d1b;color:white;padding:13px 17px;border-radius:12px;box-shadow:var(--shadow);transform:translateY(20px);opacity:0;pointer-events:none;transition:.2s; }.toast.show{transform:translateY(0);opacity:1}.toast.error{background:#8f241b}
.mobile-admin-head { display:none; }
code { background:#eeece6;border-radius:6px;padding:2px 5px; }

@media(max-width:1000px){.stats-grid{grid-template-columns:1fr 1fr}.two-col,.detail-grid{grid-template-columns:1fr}.admin-app{grid-template-columns:210px 1fr}}
@media(max-width:720px){
  body{font-size:17px}.public-shell{padding:0}.chat-card{height:100dvh;min-height:100dvh;border-radius:0;border:0}.chat-identity{padding:18px 17px 12px}.messages{padding:8px 16px 22px}.bubble{font-size:18px;max-width:91%;padding:14px 16px}.composer-wrap{padding:12px 12px max(14px,env(safe-area-inset-bottom))}.email-form,.composer{border-radius:18px;padding-left:14px}.privacy{font-size:11px}
  .admin-app{display:block}.sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;z-index:20;padding:6px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));border-top:1px solid rgba(255,255,255,.1);flex-direction:row}.sidebar nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%}.side-brand,.sidebar-bottom{display:none}.nav-button{width:100%;min-width:0;min-height:56px;flex-direction:column;justify-content:center;font-size:10px;line-height:1.15;gap:3px;padding:6px 4px;white-space:nowrap}.nav-button svg{width:20px;height:20px}.admin-main{padding:20px 14px calc(88px + env(safe-area-inset-bottom))}.mobile-admin-head{display:flex;align-items:center;gap:10px;margin-bottom:20px;font:800 18px Manrope}.mobile-admin-head .avatar{width:36px;height:36px;flex-basis:36px;border-radius:11px;font-size:14px}.page-head{align-items:center}.page-head p{display:none}.page-head h1{font-size:25px}.page-head .btn{padding:10px 12px}.stats-grid{gap:9px}.stat-card{padding:14px}.stat-value{font-size:25px}.stat-note{display:none}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.login-card{padding:26px 20px}.modal{padding:0}.modal-card{height:100dvh;max-height:none;border-radius:0;padding:18px}.toolbar .input{min-width:100%}th,td{padding:12px}.hide-mobile{display:none}
}