/* ── COMPASS Philanthropy Planner — page-specific styles ── */

  /* Shell */
  .chat-shell {
    background: var(--oatmeal);
    padding: 48px 0 72px;
    min-height: 70vh;
  }

  /* Two-column grid: chat | sidebar */
  .chat-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 28px;
    align-items: start;
  }
  @media (max-width: 960px) { .chat-grid { grid-template-columns: 1fr; } }

  /* ── Chat window ── */
  .chat-window {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(15,23,42,.09);
    display: flex;
    flex-direction: column;
  }

  .chat-topbar {
    background: var(--forest);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
  }
  .agent-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--accent));
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
  }
  .agent-info h3 {
    font-family: var(--font-head);
    color: var(--oatmeal);
    font-size: 1rem;
    margin: 0 0 3px;
    letter-spacing: 0;
  }
  .agent-status {
    font-size: .72rem;
    color: rgba(247,242,234,.58);
    display: flex; align-items: center; gap: 6px;
    line-height: 1.4;
  }
  .status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #4ade80;
    flex-shrink: 0;
    animation: pulse-green 2s infinite;
  }
  @keyframes pulse-green {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .6; transform: scale(.75); }
  }

  /* Messages */
  .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 28px 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 400px;
    max-height: 540px;
    scroll-behavior: smooth;
  }
  .msg-row { display: flex; gap: 10px; align-items: flex-end; }
  .msg-row.user { flex-direction: row-reverse; }

  .msg-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .82rem; font-weight: 700;
  }
  .msg-avatar.agent-av { background: linear-gradient(135deg, var(--gold), var(--accent)); color: var(--premium); }
  .msg-avatar.user-av  { background: var(--forest); color: var(--oatmeal); }

  .msg-bubble {
    max-width: 80%;
    padding: 12px 16px;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--charcoal);
    border-radius: 16px;
  }
  .msg-row.agent .msg-bubble {
    background: var(--oatmeal-deep);
    border-radius: 4px 16px 16px 16px;
    border: 1px solid var(--line);
  }
  .msg-row.user .msg-bubble {
    background: var(--forest);
    color: var(--oatmeal);
    border-radius: 16px 4px 16px 16px;
  }
  .msg-row.user .msg-bubble strong { color: var(--gold); }
  .msg-time {
    font-size: .66rem; color: var(--charcoal-soft);
    margin-top: 5px; padding: 0 5px;
  }
  .msg-row.user .msg-time { text-align: right; }

  /* Typing indicator */
  .typing-indicator { display: flex; gap: 10px; align-items: flex-end; }
  .typing-dots {
    background: var(--oatmeal-deep);
    border: 1px solid var(--line);
    border-radius: 4px 16px 16px 16px;
    padding: 14px 18px;
    display: flex; gap: 5px; align-items: center;
  }
  .typing-dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--charcoal-soft);
    animation: bounce 1.3s infinite ease-in-out;
  }
  .typing-dots span:nth-child(2) { animation-delay: .18s; }
  .typing-dots span:nth-child(3) { animation-delay: .36s; }
  @keyframes bounce {
    0%,80%,100% { transform: translateY(0); }
    40%          { transform: translateY(-7px); }
  }

  /* Quick replies */
  .quick-replies {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 0 22px 16px;
  }
  .qr-btn {
    background: var(--white);
    border: 1.5px solid var(--line);
    border-radius: 100px;
    padding: 8px 18px;
    font-size: .83rem;
    font-family: var(--font-body);
    color: var(--charcoal);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
  }
  .qr-btn:hover {
    border-color: var(--gold);
    background: #fdf8ee;
    color: var(--premium);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212,160,23,.18);
  }

  /* Chat input */
  .chat-input-bar {
    border-top: 1px solid var(--line);
    padding: 14px 18px;
    display: flex; gap: 10px; align-items: center;
    background: var(--white);
  }
  .chat-input {
    flex: 1;
    border: 1.5px solid var(--line);
    border-radius: 100px;
    padding: 10px 20px;
    font-family: var(--font-body);
    font-size: .9rem;
    background: var(--oatmeal);
    color: var(--charcoal);
    outline: none;
    transition: border-color .15s, background .15s;
  }
  .chat-input:focus { border-color: var(--forest); background: var(--white); }
  .chat-input:disabled { opacity: .5; cursor: not-allowed; }

  .send-btn {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--forest);
    border: none; color: var(--oatmeal);
    cursor: pointer; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .15s;
    flex-shrink: 0;
  }
  .send-btn:hover { background: var(--premium); transform: scale(1.05); }
  .send-btn:disabled { opacity: .4; cursor: not-allowed; }

  /* ── Right sidebar ── */
  .progress-sidebar { position: sticky; top: 90px; }
  .sidebar-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 22px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(15,23,42,.05);
  }
  .sidebar-card h3 {
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--charcoal-soft);
    margin: 0 0 16px;
  }

  /* Phase track */
  .phase-track { display: flex; flex-direction: column; gap: 8px; }
  .phase-item {
    display: flex; align-items: center; gap: 12px;
    font-size: .85rem; color: var(--charcoal-soft);
    padding: 6px 0;
    border-radius: 8px;
    transition: color .2s;
  }
  .phase-icon {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--oatmeal-deep);
    border: 2px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700;
    flex-shrink: 0;
    transition: all .3s;
  }
  .phase-item.done .phase-icon {
    background: #d1fae5; border-color: #059669;
    color: #059669; font-size: .9rem;
  }
  .phase-item.active {
    color: var(--forest); font-weight: 600;
  }
  .phase-item.active .phase-icon {
    background: var(--gold); border-color: var(--accent);
    color: var(--premium);
    animation: pulse-gold 1.8s infinite;
  }
  @keyframes pulse-gold {
    0%,100% { box-shadow: 0 0 0 0 rgba(212,160,23,.4); }
    50%      { box-shadow: 0 0 0 6px rgba(212,160,23,.0); }
  }

  /* Persona summary */
  .persona-summary { font-size: .8rem; }
  .persona-row {
    display: flex; justify-content: space-between;
    padding: 6px 0; border-bottom: 1px solid var(--line);
    gap: 8px;
  }
  .persona-row:last-child { border-bottom: none; }
  .persona-row .pk { color: var(--charcoal-soft); }
  .persona-row .pv { font-weight: 600; color: var(--charcoal); text-align: right; }

  /* ── Plan document ── */
  .plan-document {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    margin-top: 24px;
    box-shadow: 0 8px 40px rgba(15,23,42,.09);
  }
  .plan-header {
    background: linear-gradient(135deg, var(--premium) 0%, #1b3d5c 60%, var(--forest) 100%);
    padding: 44px 44px 36px;
    color: var(--oatmeal);
  }
  .plan-org {
    font-size: .72rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 10px;
  }
  .plan-header h2 {
    font-family: var(--font-head);
    font-size: clamp(1.6rem,3vw,2.2rem);
    color: var(--oatmeal); margin: 0 0 8px;
    line-height: 1.2;
  }
  .plan-meta { font-size: .8rem; color: rgba(247,242,234,.55); }
  @media (max-width:600px) { .plan-header { padding: 28px 22px; } }

  .plan-body { padding: 40px 44px; }
  @media (max-width:600px) { .plan-body { padding: 24px 20px; } }

  .plan-section { margin-bottom: 40px; }
  .plan-section h3 {
    font-family: var(--font-head);
    font-size: 1.2rem; color: var(--forest);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--oatmeal-deep);
    display: flex; align-items: center; gap: 10px;
  }
  .plan-section p {
    font-size: .9rem; line-height: 1.75;
    color: var(--charcoal); max-width: none;
    margin: 0 0 12px;
  }

  /* Philosophy quote */
  .philosophy-block {
    background: var(--forest);
    color: var(--oatmeal);
    border-radius: 12px;
    padding: 28px 32px;
    font-family: var(--font-head);
    font-size: 1.05rem;
    line-height: 1.65;
    font-style: italic;
    margin-bottom: 16px;
    position: relative;
  }
  .philosophy-block::before {
    content: '"';
    position: absolute;
    top: -10px; left: 24px;
    font-size: 5rem;
    color: var(--gold);
    opacity: .3;
    font-family: var(--font-head);
    line-height: 1;
  }

  /* Cause cards */
  .cause-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
    gap: 14px; margin-bottom: 16px;
  }
  .cause-card {
    background: var(--oatmeal-deep);
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 18px;
    transition: border-color .2s, transform .2s;
  }
  .cause-card:hover { border-color: var(--gold); transform: translateY(-2px); }
  .cause-card .cc-icon { font-size: 1.5rem; margin-bottom: 8px; }
  .cause-card .cc-title { font-weight: 700; font-size: .88rem; color: var(--forest); margin-bottom: 5px; }
  .cause-card .cc-why { font-size: .78rem; color: var(--charcoal-soft); line-height: 1.5; }
  .cause-card .cc-alloc { margin-top: 10px; font-size: .82rem; font-weight: 700; color: var(--accent); }

  /* Giving vehicles */
  .vehicle-row {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 16px 0; border-bottom: 1px solid var(--line);
  }
  .vehicle-row:last-child { border-bottom: none; }
  .vehicle-icon {
    width: 42px; height: 42px; border-radius: 10px;
    background: var(--oatmeal-deep);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
    border: 1px solid var(--line);
  }
  .vehicle-body h4 { font-size: .92rem; font-weight: 700; color: var(--charcoal); margin: 0 0 4px; }
  .vehicle-body p { font-size: .82rem; color: var(--charcoal-soft); margin: 0; line-height: 1.55; max-width: none; }
  .vehicle-tag {
    display: inline-block;
    background: #d1fae5; color: #065f46;
    border-radius: 100px; padding: 2px 10px;
    font-size: .7rem; font-weight: 700; margin-top: 6px;
  }

  /* Roadmap */
  .roadmap-year {
    border: 1.5px solid var(--line);
    border-radius: 12px; overflow: hidden;
    margin-bottom: 16px;
    transition: border-color .2s;
  }
  .roadmap-year:hover { border-color: var(--accent); }
  .roadmap-year-header {
    background: var(--oatmeal-deep);
    padding: 13px 20px;
    font-weight: 700; font-size: .9rem;
    color: var(--forest);
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--line);
  }
  .roadmap-qtr {
    padding: 13px 20px;
    border-bottom: 1px solid var(--line);
    font-size: .85rem; color: var(--charcoal); line-height: 1.65;
  }
  .roadmap-qtr:last-child { border-bottom: none; }
  .qtr-label {
    font-weight: 700; color: var(--charcoal-soft);
    font-size: .72rem; text-transform: uppercase;
    letter-spacing: .07em; margin-bottom: 5px;
  }

  /* Organisations grid */
  .orgs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
    gap: 10px;
  }
  .org-item {
    background: var(--oatmeal-deep);
    border-radius: 10px; padding: 14px 16px;
    border: 1px solid var(--line);
    transition: border-color .2s, transform .2s;
  }
  .org-item:hover { border-color: var(--gold); transform: translateY(-1px); }
  .org-name { font-weight: 700; font-size: .86rem; color: var(--forest); margin-bottom: 3px; }
  .org-type { font-size: .73rem; color: var(--charcoal-soft); }

  /* Impact metrics */
  .impact-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
    gap: 12px; margin-bottom: 16px;
  }
  .metric-box {
    background: var(--oatmeal-deep);
    border-radius: 12px; padding: 18px;
    text-align: center;
    border: 1.5px solid var(--line);
    transition: border-color .2s, transform .2s;
  }
  .metric-box:hover { border-color: var(--accent); transform: translateY(-2px); }
  .metric-box .m-icon { font-size: 1.6rem; margin-bottom: 8px; }
  .metric-box .m-label {
    font-size: .7rem; color: var(--charcoal-soft);
    text-transform: uppercase; letter-spacing: .06em;
    font-weight: 700; margin-bottom: 4px;
  }
  .metric-box .m-val { font-family: var(--font-head); font-size: 1.3rem; color: var(--forest); font-weight: 600; }

  /* Next steps */
  .next-steps-list { list-style: none; padding: 0; margin: 0; }
  .next-steps-list li {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 14px 0; border-bottom: 1px solid var(--line);
    font-size: .9rem; color: var(--charcoal); line-height: 1.65;
  }
  .next-steps-list li:last-child { border-bottom: none; }
  .step-num-badge {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--forest); color: var(--oatmeal);
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700; flex-shrink: 0; margin-top: 2px;
  }

  /* Plan actions */
  .plan-actions {
    display: flex; gap: 12px; flex-wrap: wrap;
    padding: 22px 44px;
    border-top: 1px solid var(--line);
    background: var(--white);
  }
  @media (max-width:600px) { .plan-actions { padding: 18px 20px; } }

  .btn-plan {
    padding: 11px 22px; border-radius: var(--radius);
    font-family: var(--font-body); font-weight: 600;
    font-size: .88rem; cursor: pointer; border: none;
    transition: all .15s; text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .btn-plan.primary { background: var(--forest); color: var(--oatmeal); }
  .btn-plan.primary:hover { background: var(--premium); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(15,23,42,.18); }
  .btn-plan.ghost { background: transparent; border: 1.5px solid var(--line); color: var(--charcoal); }
  .btn-plan.ghost:hover { border-color: var(--charcoal-soft); background: var(--oatmeal); }

  /* Plan footer */
  .plan-footer {
    background: var(--oatmeal-deep);
    border-top: 1px solid var(--line);
    padding: 18px 44px;
    font-size: .75rem; color: var(--charcoal-soft);
    line-height: 1.7;
  }
  @media (max-width:600px) { .plan-footer { padding: 16px 20px; } }

  /* AI advisor */
  .ai-advisor {
    background: linear-gradient(135deg, var(--forest), var(--premium));
    border-radius: 12px; padding: 26px; margin-bottom: 16px; color: var(--oatmeal);
  }
  .ai-advisor h3 { font-family: var(--font-head); font-size: 1.1rem; color: var(--oatmeal); margin: 0 0 6px; }
  .ai-sub { font-size: .8rem; color: rgba(247,242,234,.6); margin: 0 0 16px; }
  .ai-response { font-size: .88rem; line-height: 1.72; color: rgba(247,242,234,.9); min-height: 60px; }
  .ai-btn {
    background: var(--gold); color: var(--premium);
    border: none; padding: 10px 22px; border-radius: var(--radius);
    font-family: var(--font-body); font-weight: 700;
    font-size: .88rem; cursor: pointer; margin-top: 14px;
    transition: all .15s;
  }
  .ai-btn:hover { background: var(--accent); transform: translateY(-1px); }
  .ai-btn:disabled { opacity: .5; cursor: not-allowed; }

  /* Disclaimer */
  .disclaimer {
    background: var(--oatmeal-deep);
    border: 1px solid var(--line);
    border-left: 4px solid var(--clay);
    border-radius: var(--radius);
    padding: 18px 22px; font-size: .78rem;
    color: var(--charcoal-soft); line-height: 1.7;
    margin-bottom: 16px;
  }
  .disclaimer p { margin: 0 0 8px; max-width: none; }
  .disclaimer p:last-child { margin: 0; }

  /* Results CTA */
  .results-cta {
    background: linear-gradient(135deg, var(--gold), var(--accent));
    border-radius: 12px; padding: 28px;
    text-align: center; margin-top: 24px;
  }
  .results-cta h3 { font-family: var(--font-head); color: var(--premium); margin: 0 0 8px; font-size: 1.3rem; }
  .results-cta p { font-size: .88rem; color: rgba(15,23,42,.75); margin: 0 0 16px; max-width: none; }

  .hidden { display: none !important; }