:root{
  --bg:            #0a0a09;
  --bg-panel:      #131110;
  --charcoal:      #1c1a17;
  --hairline:      rgba(201,164,104,0.16);
  --hairline-soft: rgba(237,233,224,0.08);
  --white:         #ede9e0;
  --white-dim:     #a9a49b;
  --white-faint:   #6f6a62;
  --gold:          #c9a468;
  --gold-bright:   #e6c586;
  --gold-dim:      #8a6f45;
  --danger:        #d9776a;
  --success:       #7fbf7f;
  --serif: 'Fraunces', 'Iowan Old Style', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ background:var(--bg); }
html.auth-pending body{ visibility:hidden; }

body{
  background:var(--bg);
  color:var(--white);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

::selection{ background:var(--gold); color:var(--bg); }
:focus-visible{ outline:1px solid var(--gold-bright); outline-offset:4px; border-radius:2px; }

/* ---------- Auth pages (login / forgot / reset) ---------- */
.auth-shell{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:32px;
}
.auth-card{
  width:100%; max-width:420px;
  border:1px solid var(--hairline);
  border-radius:6px;
  background:var(--bg-panel);
  box-shadow:0 40px 100px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.02) inset;
  padding:40px 36px;
}
.auth-logotype{
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.18em;
  color:var(--white); font-weight:500; text-align:center; margin-bottom:34px;
}
.auth-logotype b{ color:var(--gold); font-weight:500; }
.auth-heading{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:24px; color:var(--white); text-align:center; margin-bottom:8px;
}
.auth-sub{
  font-size:13.5px; color:var(--white-dim); text-align:center;
  margin-bottom:30px; line-height:1.6;
}
.field{ margin-bottom:18px; }
.field label{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--white-faint); margin-bottom:8px;
}
.field input{
  width:100%; background:transparent; border:1px solid var(--hairline-soft);
  border-radius:4px; padding:13px 16px; color:var(--white); font-size:14.5px;
  font-family:var(--sans); transition:border-color .3s var(--ease);
}
.field input::placeholder{ color:var(--white-faint); }
.field input:focus{ border-color:var(--gold-dim); outline:none; }

.btn{
  width:100%; padding:14px; border-radius:4px; font-size:14px; letter-spacing:0.03em;
  font-weight:500; border:1px solid var(--gold); background:var(--gold); color:#100d09;
  transition:background .3s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
}
.btn:hover:not(:disabled){ background:var(--gold-bright); transform:translateY(-1px); }
.btn:disabled{ opacity:0.55; cursor:not-allowed; }

.form-error{
  font-size:13px; color:var(--danger); margin-bottom:16px; min-height:16px; line-height:1.5;
}
.form-status{
  font-size:13px; color:var(--gold-bright); margin-bottom:16px; min-height:16px; line-height:1.5;
}

.auth-links{
  display:flex; justify-content:space-between; margin-top:22px;
  font-size:12.5px; color:var(--white-faint);
}
.auth-links a{ color:var(--gold); transition:color .25s var(--ease); }
.auth-links a:hover{ color:var(--gold-bright); }

/* ---------- Protected app shell ---------- */
.app-shell{ min-height:100vh; }
.app-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; border-bottom:1px solid var(--hairline);
  background:rgba(10,10,9,0.9); position:sticky; top:0; z-index:10;
  flex-wrap:wrap; gap:16px;
}
.app-logotype{
  font-family:var(--mono); font-size:12px; letter-spacing:0.16em;
  color:var(--white); font-weight:500;
}
.app-logotype b{ color:var(--gold); font-weight:500; }
.app-nav-links{ display:flex; gap:4px; flex-wrap:wrap; }
.app-nav-links a{
  font-size:13px; color:var(--white-dim); padding:8px 14px; border-radius:4px;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.app-nav-links a:hover{ color:var(--gold-bright); background:rgba(201,164,104,0.06); }
.app-nav-links a.active{ color:var(--gold-bright); background:rgba(201,164,104,0.1); }
.app-nav-right{ display:flex; align-items:center; gap:14px; }
.app-owner-email{
  font-family:var(--mono); font-size:11.5px; color:var(--white-faint);
}
.app-logout-btn{
  border:1px solid var(--hairline); background:none; color:var(--white-dim);
  padding:8px 16px; border-radius:4px; font-size:12.5px; letter-spacing:0.03em;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.app-logout-btn:hover{ border-color:var(--gold); color:var(--gold-bright); }

.app-content{ max-width:960px; margin:0 auto; padding:64px 32px 100px; }
.app-eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:0.2em; color:var(--gold-dim);
  text-transform:uppercase; margin-bottom:16px;
}
.app-h1{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(24px,3.4vw,34px); color:var(--white); margin-bottom:18px;
}
.app-placeholder{
  border:1px solid var(--hairline); border-radius:6px; background:var(--bg-panel);
  padding:40px 32px; color:var(--white-dim); font-size:14.5px; line-height:1.7;
}

@media (max-width:640px){
  .auth-card{ padding:32px 24px; }
  .app-content{ padding:48px 20px 80px; }
}

/* ---------- Profile management page ---------- */
.profile-loading, .profile-error{
  border:1px solid var(--hairline); border-radius:6px; background:var(--bg-panel);
  padding:40px 32px; color:var(--white-dim); font-size:14.5px; text-align:center;
}
.profile-error{ color:var(--danger); }
.profile-error .btn{ width:auto; padding:10px 22px; margin-top:16px; display:inline-block; }

.profile-form{ display:flex; flex-direction:column; gap:28px; }

.form-section{
  border:1px solid var(--hairline); border-radius:6px; background:var(--bg-panel);
  padding:32px;
}
.form-section h2{
  font-family:var(--serif); font-style:italic; font-weight:400; font-size:19px;
  color:var(--white); margin-bottom:4px;
}
.form-section .section-sub{
  font-size:13px; color:var(--white-faint); margin-bottom:24px; line-height:1.6;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-row.single{ grid-template-columns:1fr; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }

.field-help{ font-size:11.5px; color:var(--white-faint); margin-top:6px; line-height:1.5; }
.field-error{ font-size:11.5px; color:var(--danger); margin-top:6px; min-height:14px; }
.field.has-error input, .field.has-error textarea, .field.has-error select{
  border-color:var(--danger);
}
.field textarea{
  width:100%; background:transparent; border:1px solid var(--hairline-soft);
  border-radius:4px; padding:13px 16px; color:var(--white); font-size:14.5px;
  font-family:var(--sans); resize:vertical; line-height:1.6; transition:border-color .3s var(--ease);
}
.field textarea:focus{ border-color:var(--gold-dim); outline:none; }
.field select{
  width:100%; background:var(--charcoal); border:1px solid var(--hairline-soft);
  border-radius:4px; padding:13px 16px; color:var(--white); font-size:14.5px;
  font-family:var(--sans); transition:border-color .3s var(--ease);
}
.field select:focus{ border-color:var(--gold-dim); outline:none; }
.char-count{ font-size:11px; color:var(--white-faint); text-align:right; margin-top:4px; }

.repeatable{ display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.repeatable-row{ display:flex; gap:10px; align-items:flex-start; }
.repeatable-row .repeatable-input,
.repeatable-row input, .repeatable-row textarea{
  flex:1; background:transparent; border:1px solid var(--hairline-soft);
  border-radius:4px; padding:11px 14px; color:var(--white); font-size:14px;
  font-family:var(--sans); resize:vertical;
}
.repeatable-row.social-row{ gap:10px; }
.repeatable-row.social-row input:first-child{ flex:0 0 160px; }
.remove-btn{
  flex-shrink:0; width:38px; height:38px; border-radius:4px; border:1px solid var(--hairline-soft);
  background:none; color:var(--white-faint); font-size:16px; line-height:1;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.remove-btn:hover{ border-color:var(--danger); color:var(--danger); }
.add-btn{
  align-self:flex-start; border:1px dashed var(--hairline); background:none; color:var(--gold);
  padding:9px 18px; border-radius:4px; font-size:12.5px; letter-spacing:0.03em;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.add-btn:hover{ border-color:var(--gold); background:rgba(201,164,104,0.06); }

.status-toggle{ display:flex; align-items:center; gap:14px; }
.toggle-switch{
  position:relative; width:46px; height:26px; border-radius:13px;
  background:var(--charcoal); border:1px solid var(--hairline-soft); cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease); flex-shrink:0;
}
.toggle-switch::after{
  content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:var(--white-faint); transition:transform .25s var(--ease), background .25s var(--ease);
}
.toggle-switch.on{ background:rgba(201,164,104,0.15); border-color:var(--gold-dim); }
.toggle-switch.on::after{ transform:translateX(20px); background:var(--gold-bright); }
.status-label{ font-size:13.5px; color:var(--white-dim); }
.status-label b{ color:var(--white); }

.form-actions{
  display:flex; align-items:center; gap:18px; position:sticky; bottom:0;
  background:linear-gradient(to top, var(--bg) 60%, transparent); padding:20px 0 4px;
}
.form-actions .btn{ width:auto; padding:14px 34px; }
.save-status{ font-size:13px; color:var(--white-faint); }
.save-status.success{ color:var(--success); }
.save-status.error{ color:var(--danger); }

.toast{
  position:fixed; top:24px; right:24px; z-index:100;
  background:var(--bg-panel); border:1px solid var(--hairline); border-radius:6px;
  padding:14px 20px; font-size:13.5px; color:var(--white);
  box-shadow:0 20px 60px -20px rgba(0,0,0,0.6);
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.show{ opacity:1; transform:translateY(0); }
.toast.error{ border-color:rgba(217,119,106,0.4); color:var(--danger); }

/* ---------- Knowledge Base ---------- */
.kb-toolbar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  margin-bottom:24px;
}
.kb-search{
  flex:1 1 240px; min-width:200px;
  background:transparent; border:1px solid var(--hairline-soft); border-radius:4px;
  padding:11px 16px; color:var(--white); font-size:14px; font-family:var(--sans);
}
.kb-search:focus{ border-color:var(--gold-dim); outline:none; }
.kb-select{
  background:var(--charcoal); border:1px solid var(--hairline-soft); border-radius:4px;
  padding:11px 14px; color:var(--white-dim); font-size:13px; font-family:var(--sans);
}
.kb-select:focus{ border-color:var(--gold-dim); outline:none; }
.kb-new-btn{
  margin-left:auto; border:1px solid var(--gold); background:var(--gold); color:#100d09;
  padding:11px 20px; border-radius:4px; font-size:13.5px; font-weight:500;
  transition:background .25s var(--ease);
}
.kb-new-btn:hover{ background:var(--gold-bright); }

.kb-count{ font-size:12px; color:var(--white-faint); margin-bottom:16px; }

.kb-list{ display:flex; flex-direction:column; gap:10px; }
.kb-row{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border:1px solid var(--hairline); border-radius:6px; background:var(--bg-panel);
  padding:18px 20px; transition:border-color .25s var(--ease);
}
.kb-row:hover{ border-color:var(--hairline-soft); }
.kb-row-main{ flex:1 1 260px; min-width:0; }
.kb-row-title{ font-size:15px; color:var(--white); margin-bottom:6px; font-weight:500; }
.kb-row-meta{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:11.5px; color:var(--white-faint); }
.kb-badge{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase;
  padding:3px 9px; border-radius:3px; border:1px solid var(--hairline-soft); color:var(--white-dim);
}
.kb-badge.category{ color:var(--gold); border-color:rgba(201,164,104,0.3); }
.kb-badge.status-active{ color:var(--success); border-color:rgba(127,191,127,0.35); }
.kb-badge.status-inactive{ color:var(--white-faint); }
.kb-row-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.kb-icon-btn{
  border:1px solid var(--hairline-soft); background:none; color:var(--white-dim);
  padding:8px 14px; border-radius:4px; font-size:12.5px;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.kb-icon-btn:hover{ border-color:var(--gold); color:var(--gold-bright); }
.kb-icon-btn.danger:hover{ border-color:var(--danger); color:var(--danger); }
.kb-mini-toggle{
  position:relative; width:36px; height:20px; border-radius:10px;
  background:var(--charcoal); border:1px solid var(--hairline-soft); cursor:pointer; flex-shrink:0;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.kb-mini-toggle::after{
  content:''; position:absolute; top:1px; left:1px; width:16px; height:16px; border-radius:50%;
  background:var(--white-faint); transition:transform .25s var(--ease), background .25s var(--ease);
}
.kb-mini-toggle.on{ background:rgba(201,164,104,0.15); border-color:var(--gold-dim); }
.kb-mini-toggle.on::after{ transform:translateX(16px); background:var(--gold-bright); }

.kb-state{
  border:1px solid var(--hairline); border-radius:6px; background:var(--bg-panel);
  padding:56px 32px; text-align:center; color:var(--white-dim); font-size:14px;
}
.kb-state .btn{ width:auto; padding:10px 22px; margin-top:16px; display:inline-block; }
.kb-skeleton-row{
  height:64px; border-radius:6px; background:linear-gradient(90deg, var(--bg-panel) 25%, var(--charcoal) 37%, var(--bg-panel) 63%);
  background-size:400% 100%; animation:kb-shimmer 1.4s ease infinite;
}
@keyframes kb-shimmer{ 0%{background-position:100% 0;} 100%{background-position:0 0;} }

/* Drawer */
.drawer-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:40;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.drawer-backdrop.show{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(520px, 100vw); z-index:50;
  background:var(--bg-panel); border-left:1px solid var(--hairline);
  transform:translateX(100%); transition:transform .35s var(--ease);
  display:flex; flex-direction:column;
}
.drawer.show{ transform:translateX(0); }
.drawer-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 28px; border-bottom:1px solid var(--hairline);
}
.drawer-header h2{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:19px; color:var(--white); }
.drawer-close{ border:none; background:none; color:var(--white-faint); font-size:20px; padding:4px 8px; }
.drawer-close:hover{ color:var(--gold-bright); }
.drawer-body{ flex:1; overflow-y:auto; padding:24px 28px; }
.drawer-footer{
  display:flex; align-items:center; gap:14px; padding:20px 28px; border-top:1px solid var(--hairline);
}
.drawer-footer .btn{ width:auto; padding:12px 26px; }

/* Confirm dialog */
.confirm-dialog{
  position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  padding:24px; opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
}
.confirm-dialog.show{ opacity:1; pointer-events:auto; }
.confirm-dialog-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.65); }
.confirm-card{
  position:relative; width:100%; max-width:380px; background:var(--bg-panel);
  border:1px solid var(--hairline); border-radius:6px; padding:28px;
}
.confirm-card h3{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:18px; color:var(--white); margin-bottom:10px; }
.confirm-card p{ font-size:13.5px; color:var(--white-dim); line-height:1.6; margin-bottom:22px; }
.confirm-actions{ display:flex; gap:12px; justify-content:flex-end; }
.confirm-actions .btn{ width:auto; padding:10px 20px; }
.confirm-actions .btn-cancel{
  background:none; border:1px solid var(--hairline-soft); color:var(--white-dim);
}
.confirm-actions .btn-danger{ background:var(--danger); border-color:var(--danger); color:#100d09; }
.confirm-actions .btn-danger:hover{ opacity:0.9; }

/* ---------- Dashboard ---------- */
.stat-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:16px; margin-bottom:36px;
}
.stat-card{
  border:1px solid var(--hairline); border-radius:6px; background:var(--bg-panel);
  padding:22px 24px;
}
.stat-card .stat-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--white-faint); margin-bottom:10px;
}
.stat-card .stat-value{
  font-family:var(--serif); font-style:italic; font-weight:400; font-size:32px; color:var(--white);
}
.stat-card .stat-sub{ font-size:11.5px; color:var(--white-faint); margin-top:6px; }

.dash-section-title{
  font-family:var(--serif); font-style:italic; font-weight:400; font-size:19px;
  color:var(--white); margin:0 0 16px;
}
.dash-columns{ display:grid; grid-template-columns:1.4fr 1fr; gap:24px; align-items:start; }
@media (max-width:840px){ .dash-columns{ grid-template-columns:1fr; } }

.activity-list{ display:flex; flex-direction:column; gap:2px; }
.activity-row{
  display:flex; justify-content:space-between; gap:14px; align-items:center;
  padding:14px 4px; border-bottom:1px solid var(--hairline-soft); font-size:13.5px;
}
.activity-row:last-child{ border-bottom:none; }
.activity-main{ color:var(--white-dim); min-width:0; flex:1; }
.activity-main b{ color:var(--white); font-weight:500; }
.activity-time{ color:var(--white-faint); font-size:11.5px; white-space:nowrap; flex-shrink:0; }

/* ---------- Conversations / Bookings shared list ---------- */
.list-toolbar{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:20px; }
.list-count{ font-size:12px; color:var(--white-faint); margin-bottom:16px; }

.data-row{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border:1px solid var(--hairline); border-radius:6px; background:var(--bg-panel);
  padding:16px 20px; cursor:pointer; transition:border-color .25s var(--ease);
}
.data-row:hover{ border-color:var(--gold-dim); }
.data-row-main{ flex:2 1 220px; min-width:0; }
.data-row-name{ font-size:14.5px; color:var(--white); margin-bottom:4px; font-weight:500; }
.data-row-sub{ font-size:12.5px; color:var(--white-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.data-row-meta{ flex:1 1 140px; font-size:12px; color:var(--white-faint); display:flex; flex-direction:column; gap:4px; }
.data-row-badges{ display:flex; gap:8px; flex-shrink:0; }

.load-more-wrap{ text-align:center; margin-top:24px; }
.load-more-btn{
  border:1px solid var(--hairline-soft); background:none; color:var(--white-dim);
  padding:11px 26px; border-radius:4px; font-size:13px;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.load-more-btn:hover{ border-color:var(--gold); color:var(--gold-bright); }
.load-more-btn:disabled{ opacity:0.5; cursor:not-allowed; }

/* Transcript / details drawer content */
.transcript-meta{
  display:flex; flex-wrap:wrap; gap:16px; font-size:12.5px; color:var(--white-faint);
  padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--hairline-soft);
}
.transcript-meta b{ color:var(--white-dim); }
.message-bubble{
  border-radius:6px; padding:12px 16px; font-size:13.5px; line-height:1.6; margin-bottom:10px;
  max-width:88%;
}
.message-bubble.role-user{
  background:var(--charcoal); color:var(--white); margin-right:auto;
}
.message-bubble.role-assistant{
  background:rgba(201,164,104,0.08); border:1px solid rgba(201,164,104,0.18);
  color:var(--white); margin-left:auto;
}
.message-role{
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--white-faint); margin-bottom:5px;
}

.detail-grid{ display:flex; flex-direction:column; gap:16px; }
.detail-item{ display:flex; flex-direction:column; gap:4px; }
.detail-item .detail-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--white-faint);
}
.detail-item .detail-value{ font-size:14px; color:var(--white); }