/**
 * Premier Cloud SDR Agent — visual layer.
 * Tokens sourced from the Premier Cloud Design System
 * (github.com/alexs-glitch/premier-cloud-design-system, tokens/colors.css +
 * tokens/typography.json) — exact hex/spacing/radius/motion values, not
 * approximations. Google Sans is a licensed Google typeface with no
 * redistributable font files (flagged by the design system itself); Roboto
 * is loaded as the nearest real fallback for staff without it installed.
 */

:root {
  /* Brand */
  --pc-deep-blue: #1E66AB;
  --pc-sky-blue: #38B4E7;
  --pc-canvas: #F8F9FA;

  /* Extended blue family */
  --pc-blue-deepest: #0944A1;
  --pc-blue-mid: #2C6AB1;
  --pc-blue-link: #1A73E8;

  /* Gradients */
  --pc-gradient-dark: linear-gradient(135deg, #033552 0%, #000000 100%);
  --pc-gradient-blue: linear-gradient(135deg, #38B4E7 0%, #1E66AB 100%);

  /* Tinted surfaces */
  --pc-tint-lavender: #E6EAF8;
  --pc-tint-pale: #F3F6FC;
  --pc-tint-50: #E8F0FE;

  /* Neutrals */
  --pc-text: #202124;
  --pc-text-2: #5F6368;
  --pc-text-body: #3C4043;
  --pc-on-dark-2: #BDC1C6;
  --pc-border: #DADCE0;
  --pc-surface: #E8EAED;
  --pc-surface-2: #F1F3F4;
  --pc-white: #FFFFFF;

  /* Semantic */
  --pc-positive: #34A853;
  --pc-positive-bg: #E6F4EA;
  --pc-negative: #D93025;
  --pc-negative-bg: #FCE8E6;
  --pc-warning: #9A7400;
  --pc-warning-bg: #FEF7E0;

  /* Type */
  --pc-font: 'Google Sans', 'Google Sans Text', Roboto, Arial, sans-serif;
  --pc-font-logo: 'Syncopate', sans-serif;

  /* Spacing scale (4/8-based) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 56px; --sp-9: 72px;

  /* Radii */
  --r-sm: 6px;
  --r-card: 18px;
  --r-panel: 28px;
  --r-pill: 999px;

  /* Elevation — two levels only, low-blur/low-opacity per the design system */
  --shadow-resting: 0 1px 3px rgba(32,33,36,.08), 0 1px 6px rgba(32,33,36,.06);
  --shadow-hover: 0 2px 6px rgba(32,33,36,.10), 0 8px 24px rgba(32,33,36,.08);

  /* Motion */
  --ease: cubic-bezier(.2,0,0,1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
}

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  font-family:var(--pc-font);
  background:var(--pc-canvas);
  color:var(--pc-text);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--pc-deep-blue);text-decoration:none}
a:hover{text-decoration:underline}

.material-symbols-outlined{
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20;
  font-size:20px;line-height:1;vertical-align:middle;
}

/* ---------------------------------------------------------------- shell */
.app-shell{display:flex;min-height:100vh}

.sidebar{
  width:272px;flex-shrink:0;background:var(--pc-gradient-dark);
  background-image:radial-gradient(560px 320px at 30% -10%, rgba(56,180,231,.22), transparent 65%), var(--pc-gradient-dark);
  border-right:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;padding:var(--sp-5) var(--sp-4);
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sidebar-brand{display:flex;align-items:center;gap:11px;margin-bottom:var(--sp-6)}
.sidebar-icon{width:34px;height:34px;flex-shrink:0}
.sidebar-brand-name{
  font-family:var(--pc-font-logo);font-size:12.5px;font-weight:400;letter-spacing:.04em;
  text-transform:uppercase;color:#fff;line-height:1.3;
}
.sidebar-tagline{
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--pc-sky-blue);margin:2px 0 0;
}
.new-search-btn{width:100%;justify-content:center;margin-bottom:var(--sp-6);border-radius:var(--r-sm)}

.sidebar-section-label{
  display:flex;align-items:center;
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--pc-on-dark-2);margin:0 0 var(--sp-3);padding:0 var(--sp-1);
}
input[type=text].history-search{
  width:100%;padding:8px 12px 8px 34px;margin-bottom:var(--sp-4);border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06) url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23BDC1C6%22 stroke-width=%222%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%228%22/%3E%3Cline x1=%2221%22 y1=%2221%22 x2=%2216.65%22 y2=%2216.65%22/%3E%3C/svg%3E') no-repeat 11px center;
  background-size:14px;color:#fff;font-size:12.5px;
}
/* input[type=text] (forms section, below) sets a white background + dark
   text for the main-content forms — those rules have equal-or-higher
   specificity than a bare .history-search class, so they were winning here.
   The [type=text] repeated above is what actually wins the tiebreak. */
input[type=text].history-search::placeholder{color:var(--pc-on-dark-2)}
input[type=text].history-search:focus{outline:none;border-color:var(--pc-sky-blue);background-color:rgba(255,255,255,.1)}
.history-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;overflow-y:auto;max-height:280px}
.history-list li{position:relative}
.history-empty{color:var(--pc-on-dark-2);font-size:12.5px;padding:var(--sp-2) var(--sp-1)}
.history-item{
  display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-2);
  border-radius:var(--r-sm);color:#fff;text-decoration:none;
  transition:background var(--dur-base) var(--ease);
}
.history-item:hover{background:rgba(255,255,255,.1);text-decoration:none}
.history-item .material-symbols-outlined{
  font-size:17px;color:var(--pc-on-dark-2);margin-top:2px;flex-shrink:0;
}
.history-item.status-mail .material-symbols-outlined{color:var(--pc-sky-blue)}
.history-item.is-active,.history-item.is-active:hover{
  background:rgba(255,255,255,.14);box-shadow:inset 3px 0 0 var(--pc-sky-blue);
}
.history-item.is-active .material-symbols-outlined{color:var(--pc-sky-blue)}
.history-item .h-body{min-width:0;flex:1}
.history-item .h-company{
  font-size:13px;font-weight:500;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:20px;
}
.history-item .h-meta{font-size:11px;color:var(--pc-on-dark-2);margin-top:1px}
.history-delete{
  position:absolute;top:6px;right:4px;width:22px;height:22px;border-radius:var(--r-sm);
  border:0;background:transparent;color:var(--pc-on-dark-2);cursor:pointer;
  display:none;align-items:center;justify-content:center;
}
.history-list li:hover .history-delete{display:flex}
.history-delete:hover{background:rgba(217,48,37,.25);color:#fff}
.history-delete .material-symbols-outlined{font-size:15px;margin:0;color:inherit}

.sidebar-user{
  display:flex;align-items:center;gap:var(--sp-3);padding-top:var(--sp-4);
  margin-top:var(--sp-4);border-top:1px solid rgba(255,255,255,.1);
}
.sidebar-user .avatar{
  width:30px;height:30px;border-radius:var(--r-pill);flex-shrink:0;overflow:hidden;
  background:var(--pc-gradient-blue);color:#fff;display:grid;place-items:center;
  font-size:12px;font-weight:700;
}
.sidebar-user .avatar-photo{object-fit:cover;display:block}
.sidebar-user .u-name{
  font-size:12.5px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sidebar-user .u-email{
  font-size:11px;color:var(--pc-on-dark-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;
}
.sidebar-user .u-signout{font-size:11.5px;color:var(--pc-on-dark-2)}
.sidebar-user .u-signout:hover{color:var(--pc-sky-blue)}

.main{flex:1;min-width:0;padding:var(--sp-6) var(--sp-5) var(--sp-9)}
.wrap{max-width:720px;margin:0 auto}

/* ---------------------------------------------------------------- hero (landing) */
.hero{max-width:560px;margin:0 auto;padding-top:min(9vh, 88px)}
.hero-greeting{text-align:center;margin-bottom:var(--sp-6)}
.hero-title-row{display:flex;align-items:center;justify-content:center;gap:var(--sp-3)}
.hero-icon{width:32px;height:32px;flex-shrink:0}
.hero-title{font-size:30px;font-weight:700;letter-spacing:-.015em;margin:0;color:var(--pc-deep-blue)}
@supports (background-clip: text) or (-webkit-background-clip: text){
  .hero-title{background:var(--pc-gradient-blue);-webkit-background-clip:text;background-clip:text;color:transparent}
}
.hero-sub{color:var(--pc-text-2);font-size:14px;max-width:420px;margin:var(--sp-3) auto 0}
.hero-card{margin-bottom:0}

/* ---------------------------------------------------------------- stepper */
.stepper{display:flex;align-items:center;margin-bottom:var(--sp-6)}
.step{display:flex;align-items:center;gap:var(--sp-2)}
.step-circle{
  width:26px;height:26px;border-radius:var(--r-pill);flex-shrink:0;overflow:hidden;
  display:grid;place-items:center;font-size:12px;font-weight:700;
  background:var(--pc-surface-2);color:var(--pc-text-2);background-clip:padding-box;
  border:1.5px solid transparent;transition:all var(--dur-base) var(--ease);
}
.step-label{font-size:12px;font-weight:600;color:var(--pc-text-2);white-space:nowrap}
.step-line{flex:1;height:1.5px;background:var(--pc-border);margin:0 var(--sp-2);min-width:16px}
.step.is-done .step-circle{background:var(--pc-deep-blue);color:#fff}
.step.is-done .step-label{color:var(--pc-text)}
.step.is-current .step-circle{background:#fff;border-color:var(--pc-deep-blue);color:var(--pc-deep-blue)}
.step.is-current .step-label{color:var(--pc-deep-blue)}

/* ---------------------------------------------------------------- cards */
.card{
  background:#fff;border:1px solid var(--pc-border);border-radius:var(--r-card);
  padding:var(--sp-6);box-shadow:var(--shadow-resting);margin-bottom:var(--sp-5);
}
h1{font-size:22px;margin:0 0 var(--sp-1);font-weight:700;letter-spacing:-.01em}
h2{font-size:17px;margin:0 0 var(--sp-4);font-weight:500}
.sub{color:var(--pc-text-2);font-size:13.5px;margin-bottom:var(--sp-5)}
.eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--pc-deep-blue);margin-bottom:var(--sp-2);
}

/* ---------------------------------------------------------------- forms */
label{
  font-size:11.5px;color:var(--pc-text-2);font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;display:block;margin-bottom:var(--sp-2);
}
input[type=text],input[type=email],textarea,select{
  width:100%;padding:11px 14px;border:1px solid var(--pc-border);border-radius:var(--r-sm);
  font-size:14px;font-family:inherit;margin-bottom:var(--sp-4);color:var(--pc-text);background:#fff;
  transition:border-color var(--dur-base) var(--ease);
}
textarea{min-height:190px;resize:vertical;line-height:1.6}
input:focus,textarea:focus,select:focus{
  outline:2px solid var(--pc-sky-blue);outline-offset:2px;border-color:var(--pc-deep-blue);
}
.field-hint{margin-top:calc(-1 * var(--sp-4) + 2px);margin-bottom:var(--sp-4);font-size:11.5px;color:var(--pc-text-2)}

/* One shared keyboard-focus treatment for every other interactive element —
   previously only form fields (above) had one, so tabbing through the
   sidebar, refine-pills, or command palette fell back to the bare browser
   default. :focus-visible (not :focus) so it only shows for keyboard
   navigation, not a mouse click. */
.btn:focus-visible,.sidebar-nav-link:focus-visible,.history-item:focus-visible,
.history-delete:focus-visible,.history-entry-delete:focus-visible,.cmdk-item:focus-visible,
.refine-pill:focus-visible,.ask-suggestion:focus-visible{
  outline:2px solid var(--pc-sky-blue);outline-offset:2px;
}

/* ---------------------------------------------------------------- buttons */
.btn{
  border:0;border-radius:var(--r-pill);padding:11px 24px;font-weight:500;cursor:pointer;
  font-family:inherit;font-size:14px;display:inline-flex;align-items:center;gap:var(--sp-2);
  text-decoration:none;
  transition:background var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease), color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.985)}
.btn.primary{background:var(--pc-gradient-blue);color:#fff;box-shadow:0 1px 2px rgba(9,68,161,.25)}
.btn.primary:hover{background:linear-gradient(135deg,#3CB5E8 0%,#2C6AB1 100%);box-shadow:0 2px 8px rgba(9,68,161,.3)}
.btn.ghost{background:#fff;color:var(--pc-deep-blue);border:1px solid var(--pc-border)}
.btn.ghost:hover{background:var(--pc-tint-50)}
.btn:disabled{opacity:.55;cursor:default;pointer-events:none}

/* ---------------------------------------------------------------- contacts */
.contact{
  display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4) 0;
  border-bottom:1px solid var(--pc-surface-2);
}
.contact:last-child{border-bottom:0}
.contact input[type=checkbox]{margin-top:14px;width:16px;height:16px;accent-color:var(--pc-deep-blue)}
.contact-avatar{
  width:38px;height:38px;border-radius:var(--r-pill);flex-shrink:0;margin-top:2px;overflow:hidden;
  background:var(--pc-gradient-blue);color:#fff;display:grid;place-items:center;
  font-size:13px;font-weight:700;
}
.name{font-weight:500}
.contact .title{color:var(--pc-text-2);font-size:12.5px;margin-top:1px}
.contact .meta{font-size:12px;color:var(--pc-text-2);margin-top:var(--sp-2);display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap}
.contact .meta a{display:inline-flex;align-items:center;gap:3px}
.contact .meta a .material-symbols-outlined{font-size:14px}

.pill{
  display:inline-flex;align-items:center;gap:4px;padding:3px 11px;border-radius:var(--r-pill);
  overflow-wrap:anywhere;
  font-size:11px;font-weight:600;background:var(--pc-tint-50);color:var(--pc-deep-blue);
}
.pill.amber{background:var(--pc-warning-bg);color:var(--pc-warning)}
.pill.positive{background:var(--pc-positive-bg);color:var(--pc-positive)}

/* ---------------------------------------------------------------- misc */
.err{
  display:flex;gap:var(--sp-2);align-items:flex-start;color:var(--pc-negative);font-size:13px;
  margin-bottom:var(--sp-4);background:var(--pc-negative-bg);padding:12px 14px;border-radius:var(--r-sm);
}
.err[hidden]{display:none}
.err.warn{color:var(--pc-warning);background:var(--pc-warning-bg)}
.note{color:var(--pc-text-2);font-size:12.5px;margin-top:var(--sp-3)}
.success-icon{
  width:56px;height:56px;border-radius:var(--r-pill);background:var(--pc-positive-bg);color:var(--pc-positive);
  display:grid;place-items:center;font-size:28px;margin:0 auto var(--sp-4);
}
.demo-flag{
  display:inline-flex;align-items:center;gap:6px;background:var(--pc-warning-bg);color:var(--pc-warning);
  font-size:11px;font-weight:700;padding:4px 11px;border-radius:var(--r-sm);text-transform:uppercase;
  letter-spacing:.03em;margin-bottom:var(--sp-4);
}
.divider{border:0;border-top:1px solid var(--pc-surface-2);margin:var(--sp-5) 0}
.empty-state{text-align:center;padding:var(--sp-8) var(--sp-4);color:var(--pc-text-2)}
.empty-state .material-symbols-outlined{font-size:40px;color:var(--pc-border);margin-bottom:var(--sp-3)}

/* spinner shown on submit, driven by a tiny inline script per-form */
.btn .spinner{
  width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;animation:spin .7s linear infinite;display:none;
}
.btn.ghost .spinner{border-color:rgba(30,102,171,.25);border-top-color:var(--pc-deep-blue)}
.btn.is-loading .spinner{display:inline-block}
.btn.is-loading .btn-label{opacity:.85}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------- sidebar nav links */
.sidebar-nav-link{
  display:flex;align-items:center;gap:var(--sp-3);padding:9px var(--sp-2);border-radius:var(--r-sm);
  color:#fff;font-size:13px;font-weight:500;margin-bottom:2px;
  transition:background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.sidebar-nav-link:hover{background:rgba(255,255,255,.1);text-decoration:none}
.sidebar-nav-link .material-symbols-outlined{font-size:19px;color:var(--pc-sky-blue)}
.sidebar-nav-link.is-active,.sidebar-nav-link.is-active:hover{
  background:rgba(255,255,255,.14);color:#fff;font-weight:700;
  box-shadow:inset 3px 0 0 var(--pc-sky-blue);
}
.sidebar-nav-link.is-active .material-symbols-outlined{color:#fff}
.nav-badge{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--pc-gradient-blue);color:#fff;font-size:10.5px;font-weight:700;
  border-radius:var(--r-pill);padding:1px 7px;min-width:18px;text-align:center;overflow:hidden;
}
.kbd-hint{
  font-family:inherit;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);
  color:var(--pc-on-dark-2);font-size:10px;padding:1px 6px;border-radius:4px;margin-left:6px;
}
/* ---------------------------------------------------------------- toasts */
.toast-stack{
  position:fixed;bottom:var(--sp-5);right:var(--sp-5);z-index:200;
  display:flex;flex-direction:column;gap:var(--sp-2);max-width:340px;
}
.toast{
  display:flex;align-items:center;gap:var(--sp-2);background:var(--pc-text);color:#fff;
  padding:12px 16px;border-radius:var(--r-sm);box-shadow:var(--shadow-hover);font-size:13px;
  animation:toast-in var(--dur-slow) var(--ease);
}
.toast .material-symbols-outlined{font-size:18px;color:var(--pc-positive);flex-shrink:0}
.toast.toast-out{animation:toast-out var(--dur-slow) var(--ease) forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes toast-out{to{opacity:0;transform:translateY(8px)}}

/* ---------------------------------------------------------------- command palette */
.cmdk-backdrop{
  display:none;position:fixed;inset:0;background:rgba(3,53,82,.45);z-index:300;
  align-items:flex-start;justify-content:center;padding:12vh 20px 20px;backdrop-filter:blur(2px);
  box-sizing:border-box;
}
.cmdk-backdrop.is-open{display:flex}
.cmdk{
  background:#fff;border-radius:var(--r-panel);box-shadow:var(--shadow-hover);
  width:100%;max-width:520px;max-height:60vh;overflow:hidden;display:flex;flex-direction:column;
}
.cmdk-input-row{
  display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--pc-surface-2);
}
.cmdk-input-row .material-symbols-outlined{color:var(--pc-text-2)}
.cmdk-input-row input{
  flex:1;border:0;font-size:15px;font-family:inherit;outline:none;margin:0;padding:0;color:var(--pc-text);
}
.cmdk-input-row .kbd-hint{background:var(--pc-surface-2);border-color:var(--pc-border);color:var(--pc-text-2)}
.cmdk-results{overflow-y:auto;padding:var(--sp-2)}
.cmdk-group{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--pc-text-2);padding:var(--sp-2) var(--sp-3) 4px;
}
.cmdk-item{
  display:flex;align-items:center;gap:var(--sp-3);padding:9px var(--sp-3);border-radius:var(--r-sm);
  color:var(--pc-text);font-size:13.5px;
}
.cmdk-item:hover,.cmdk-item.is-active{background:var(--pc-tint-50);text-decoration:none}
.cmdk-item .material-symbols-outlined{font-size:18px;color:var(--pc-deep-blue)}
.cmdk-empty{padding:var(--sp-5);text-align:center;color:var(--pc-text-2);font-size:13px}

/* ---------------------------------------------------------------- confirm modal */
.confirm-backdrop{
  display:none;position:fixed;inset:0;background:rgba(3,53,82,.45);z-index:300;
  align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px);
}
.confirm-backdrop.is-open{display:flex}
.confirm-modal{
  background:#fff;border-radius:var(--r-panel);box-shadow:var(--shadow-hover);
  width:100%;max-width:400px;padding:var(--sp-6);text-align:center;
}
.confirm-modal-icon{
  width:48px;height:48px;border-radius:var(--r-pill);background:var(--pc-negative-bg);color:var(--pc-negative);
  display:grid;place-items:center;margin:0 auto var(--sp-4);
}
.confirm-modal-icon .material-symbols-outlined{font-size:24px}
.confirm-modal-text{font-size:14.5px;color:var(--pc-text);line-height:1.5;margin-bottom:var(--sp-5)}
.confirm-modal-actions{display:flex;gap:var(--sp-3);justify-content:center}
.confirm-modal-actions .btn{flex:1;justify-content:center}
.confirm-danger-btn{background:var(--pc-negative) !important}
.confirm-danger-btn:hover{background:#b7261a !important}
.confirm-modal-icon.is-caution{background:var(--pc-warning-bg);color:var(--pc-warning)}

/* ---------------------------------------------------------------- ask gemini chat */
.ask-chat-card{display:flex;flex-direction:column;padding:0;overflow:hidden}
.ask-messages{flex:1;overflow-y:auto;padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4);min-height:280px;max-height:52vh}
.ask-empty{margin:auto;text-align:center;color:var(--pc-text-2);max-width:360px}
.ask-empty .material-symbols-outlined{font-size:32px;color:var(--pc-sky-blue);margin-bottom:var(--sp-2)}
.ask-suggestions{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-3);align-items:center}
.ask-suggestion{
  background:var(--pc-tint-50);color:var(--pc-deep-blue);border:1px solid transparent;border-radius:var(--r-pill);
  padding:8px 16px;font-size:12.5px;font-weight:500;cursor:pointer;font-family:inherit;
  transition:background var(--dur-base) var(--ease);
}
.ask-suggestion:hover{background:var(--pc-tint-lavender)}

.ask-msg{display:flex;gap:var(--sp-3);max-width:88%}
.ask-msg-user{align-self:flex-end;flex-direction:row-reverse}
.ask-msg-assistant{align-self:flex-start}
.ask-avatar{width:26px;height:26px;border-radius:var(--r-pill);flex-shrink:0;background:var(--pc-tint-50);display:grid;place-items:center;padding:4px;margin-top:2px}
.ask-avatar img{width:100%;height:100%}
.ask-bubble{padding:11px 15px;border-radius:var(--r-card);font-size:13.5px;line-height:1.55;overflow-wrap:anywhere}
.ask-bubble strong{font-weight:700}
.ask-bubble ul{margin:6px 0;padding-left:20px}
.ask-bubble li{margin-bottom:4px}
.ask-bubble li:last-child{margin-bottom:0}
.ask-msg-user .ask-bubble{background:var(--pc-gradient-blue);color:#fff;border-radius:var(--r-card) var(--r-card) 4px var(--r-card)}
.ask-msg-assistant .ask-bubble{background:var(--pc-surface-2);color:var(--pc-text);border-radius:var(--r-card) var(--r-card) var(--r-card) 4px}

.ask-typing{display:inline-flex;gap:4px;align-items:center;padding:2px 0}
.ask-typing span{width:6px;height:6px;border-radius:50%;background:var(--pc-text-2);animation:ask-bounce 1.1s infinite ease-in-out}
.ask-typing span:nth-child(2){animation-delay:.15s}
.ask-typing span:nth-child(3){animation-delay:.3s}
@keyframes ask-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

.ask-clear-row{display:flex;justify-content:center;padding:var(--sp-2) var(--sp-5);border-top:1px solid var(--pc-surface-2)}
.ask-clear-row[hidden]{display:none}
.ask-input-row{display:flex;gap:var(--sp-3);align-items:flex-end;padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--pc-surface-2);background:var(--pc-canvas)}
.ask-input-row textarea{flex:1;margin:0;resize:none;max-height:140px;min-height:44px}
.ask-send-btn{border-radius:var(--r-pill);width:44px;height:44px;padding:0;justify-content:center;flex-shrink:0}
.ask-send-btn .material-symbols-outlined{font-size:20px}

/* ---------------------------------------------------------------- draft cards */
.draft-card-actions{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-2)}
.save-indicator{font-size:11.5px;color:var(--pc-text-2);min-width:40px}
.save-indicator.is-error{color:var(--pc-negative);font-weight:500}

.refine-row{display:flex;flex-direction:column;gap:var(--sp-3);margin:-4px 0 var(--sp-4)}
.refine-label{display:block;font-size:11px;font-weight:600;color:var(--pc-text-2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.refine-pills{display:flex;flex-wrap:wrap;gap:6px}
.refine-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;color:var(--pc-text-2);border:1px solid var(--pc-border);border-radius:var(--r-pill);
  padding:5px 12px;font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;
  transition:background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.refine-pill:hover{border-color:var(--pc-deep-blue);color:var(--pc-deep-blue)}
.refine-pill.is-active{background:var(--pc-gradient-blue);color:#fff;border-color:transparent}

/* ---------------------------------------------------------------- outreach history */
.history-timeline{display:flex;flex-direction:column;gap:var(--sp-4)}
.history-entry{background:var(--pc-canvas);border:1px solid var(--pc-surface-2);border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-4)}
.history-entry-head{display:flex;align-items:center;gap:var(--sp-3)}
.history-entry-head .h-meta{font-size:11.5px;color:var(--pc-text-2)}
.history-subject{font-weight:500;font-size:13.5px;margin-top:var(--sp-2)}
.history-body{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--pc-text-body);font-size:13px;line-height:1.6;margin-top:4px}
.history-entry-delete{
  width:26px;height:26px;border-radius:var(--r-sm);border:0;background:transparent;
  color:var(--pc-text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.history-entry-delete:hover{background:rgba(217,48,37,.1);color:var(--pc-negative)}
.history-entry-delete .material-symbols-outlined{font-size:16px}

@media (max-width: 640px){
  .stepper{overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .step{flex-shrink:0}
  .step-line{flex:0 0 24px}
  .hero{padding-top:var(--sp-6)}
  .hero-title{font-size:23px}
  .hero-icon{width:26px;height:26px}
}

@media (max-width: 860px){
  .sidebar{
    position:static;height:auto;width:auto;border-right:0;border-bottom:1px solid var(--pc-border);
    flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--sp-3);
  }
  .sidebar-brand{margin-bottom:0}
  .sidebar-tagline,.history-list,.sidebar-section-label,.history-search{display:none}
  .new-search-btn{width:auto;margin:0 0 0 auto}
  .sidebar-user{border-top:0;margin:0;padding:0}
  .app-shell{flex-direction:column}
}