/* ═══════════════════════════════════════════════════
   CHAPPIE PERSONAL — Premium Dark-Mode UI
   Complete rewrite: Fixed layout, mobile, SVG icons
   ═══════════════════════════════════════════════════ */

/* ─── Variables ─── */
.personal-area {
  --p-brand: #075780;
  --p-accent: #0A9FD4;
  --p-success: #10B981;
  --p-warning: #F59E0B;
  --p-danger: #EF4444;
  --p-bg: #060D14;
  --p-bg2: #0A1628;
  --p-surface: rgba(7, 87, 128, 0.08);
  --p-elevated: rgba(7, 87, 128, 0.15);
  --p-text: #F1F5F9;
  --p-text2: #94A3B8;
  --p-muted: #64748B;
  --p-border: rgba(7, 87, 128, 0.25);
  --p-border-h: rgba(7, 87, 128, 0.5);
  --p-shadow: 0 4px 12px rgba(7,87,128,0.15);
  --p-shadow-lg: 0 8px 24px rgba(7,87,128,0.25);
  --p-radius: 12px;
  --p-radius-sm: 8px;
  --p-radius-lg: 16px;
  --p-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --p-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Main 3-Panel Layout (Flex, no position:fixed) ─── */
.personal-area {
  display: flex;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--p-bg);
  color: var(--p-text);
  font-family: 'Inter', sans-serif;
  position: relative;
}

/* ─── LEFT: Sidebar (64px → 220px on hover) ─── */
.personal-sidebar {
  width: 64px;
  min-width: 64px;
  height: 100vh;
  background: var(--p-bg2);
  border-right: 1px solid var(--p-border);
  display: flex;
  flex-direction: column;
  z-index: 20;
  flex-shrink: 0;
  position: relative;
  transition: width var(--p-normal), min-width var(--p-normal);
  overflow: hidden;
}
.personal-sidebar:hover {
  width: 220px;
  min-width: 220px;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 4px 0 20px rgba(0,0,0,0.4);
}
.personal-sidebar .sidebar-logo {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  white-space: nowrap;
  color: var(--p-accent);
  border-bottom: 1px solid var(--p-border);
  cursor: pointer;
  flex-shrink: 0;
  height: 56px;
  box-sizing: border-box;
}
.personal-sidebar .sidebar-logo .logo-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.personal-sidebar .sidebar-logo .logo-icon svg { width: 24px; height: 24px; }
.personal-sidebar .sidebar-logo .logo-text {
  opacity: 0;
  transition: opacity var(--p-normal);
  overflow: hidden;
}
.personal-sidebar:hover .logo-text { opacity: 1; }

/* ─── Menu Items ─── */
.personal-sidebar .sidebar-menu {
  flex: 1;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
}
.personal-sidebar .menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--p-radius-sm);
  cursor: pointer;
  transition: all 200ms;
  white-space: nowrap;
  color: var(--p-text2);
  position: relative;
}
.personal-sidebar .menu-item:hover {
  background: var(--p-elevated);
  color: var(--p-text);
}
.personal-sidebar .menu-item.active {
  background: rgba(10, 159, 212, 0.12);
  color: var(--p-accent);
  border-left: 3px solid var(--p-accent);
  padding-left: 11px;
}
.personal-sidebar .menu-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.personal-sidebar .menu-icon svg { width: 20px; height: 20px; }
.personal-sidebar .menu-label {
  opacity: 0;
  transition: opacity var(--p-normal);
  font-size: 0.9rem;
  font-weight: 500;
}
.personal-sidebar:hover .menu-label { opacity: 1; }
.personal-sidebar .sidebar-back {
  padding: 12px 8px;
  border-top: 1px solid var(--p-border);
  flex-shrink: 0;
}
.personal-sidebar .sidebar-back .menu-item { color: var(--p-muted); font-size: 0.85rem; }

/* ─── MIDDLE: Content Area ─── */
.personal-content {
  flex: 1;
  min-width: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 32px 36px;
  background: var(--p-bg);
}
.personal-content::-webkit-scrollbar { width: 6px; }
.personal-content::-webkit-scrollbar-track { background: transparent; }
.personal-content::-webkit-scrollbar-thumb { background: var(--p-border); border-radius: 3px; }

/* ─── RIGHT: Chatbot Panel ─── */
.personal-chatbot {
  width: 380px;
  min-width: 380px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--p-bg2);
  border-left: 1px solid var(--p-border);
  flex-shrink: 0;
}

/* ─── Content Header ─── */
.personal-content .content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  gap: 16px;
}
.content-header h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--p-text);
  margin: 0;
}
.content-header .header-actions { display: flex; gap: 10px; }

/* ─── Stats Cards ─── */
.p-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}
.p-stat-card {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  padding: 22px;
  backdrop-filter: blur(10px);
  transition: transform var(--p-fast), box-shadow var(--p-fast);
}
.p-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--p-shadow);
}
.p-stat-card .stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.p-stat-card .stat-icon svg { width: 22px; height: 22px; }
.p-stat-card .stat-icon.income { background: rgba(16,185,129,0.12); color: #10B981; }
.p-stat-card .stat-icon.expense { background: rgba(239,68,68,0.12); color: #EF4444; }
.p-stat-card .stat-icon.balance { background: rgba(10,159,212,0.12); color: #0A9FD4; }
.p-stat-card .stat-icon.tasks { background: rgba(139,92,246,0.12); color: #8B5CF6; }
.p-stat-card .stat-icon.events { background: rgba(245,158,11,0.12); color: #F59E0B; }
.p-stat-card .stat-icon.goals { background: rgba(236,72,153,0.12); color: #EC4899; }
.p-stat-card .stat-label {
  font-size: 0.78rem;
  color: var(--p-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.p-stat-card .stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--p-text);
  margin: 6px 0;
  font-family: 'Outfit', sans-serif;
}

/* ─── Charts ─── */
.p-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}
.p-chart-card {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  padding: 22px;
}
.p-chart-card h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  margin: 0 0 14px 0;
}

/* ─── Tables ─── */
.p-table-wrap {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  overflow: hidden;
  margin-bottom: 24px;
}
.p-table { width: 100%; border-collapse: collapse; }
.p-table th {
  text-align: left;
  padding: 12px 16px;
  color: var(--p-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  border-bottom: 1px solid var(--p-border);
  background: rgba(7,87,128,0.04);
}
.p-table td {
  padding: 13px 16px;
  border-bottom: 1px solid rgba(7,87,128,0.08);
  color: var(--p-text);
  font-size: 0.9rem;
}
.p-table tr:last-child td { border-bottom: none; }
.p-table tr:hover { background: rgba(7,87,128,0.04); }
.amount-income { color: var(--p-success); font-weight: 600; }
.amount-expense { color: var(--p-danger); font-weight: 600; }

/* ─── Quick Actions ─── */
.p-quick-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.p-quick-btn {
  padding: 9px 18px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: 24px;
  color: var(--p-text);
  cursor: pointer;
  font-size: 0.86rem;
  transition: all 200ms;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Inter', sans-serif;
}
.p-quick-btn:hover {
  background: var(--p-elevated);
  border-color: var(--p-accent);
  transform: translateY(-1px);
}

/* ═══════ CHATBOT PANEL ═══════ */
.p-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--p-border);
  flex-shrink: 0;
}
.p-chat-header .chat-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p-brand), var(--p-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
}
.p-chat-header .chat-avatar svg { width: 20px; height: 20px; }
.p-chat-header .chat-info { flex: 1; }
.p-chat-header .chat-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--p-text);
}
.p-chat-header .chat-status {
  font-size: 0.72rem;
  color: var(--p-success);
  display: flex;
  align-items: center;
  gap: 4px;
}
.p-chat-header .chat-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--p-success);
  animation: pPulse 2s infinite;
}
.p-chat-header .chat-clear {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  color: var(--p-muted);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 200ms;
  font-size: 0.78rem;
  font-family: 'Inter', sans-serif;
  display: flex;
  align-items: center;
  gap: 4px;
}
.p-chat-header .chat-clear svg { width: 14px; height: 14px; }
.p-chat-header .chat-clear:hover {
  background: rgba(239,68,68,0.1);
  border-color: rgba(239,68,68,0.3);
  color: var(--p-danger);
}

/* ─── Chat Messages ─── */
.p-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.p-chat-messages::-webkit-scrollbar { width: 5px; }
.p-chat-messages::-webkit-scrollbar-track { background: transparent; }
.p-chat-messages::-webkit-scrollbar-thumb { background: var(--p-border); border-radius: 3px; }

.p-msg {
  display: flex;
  gap: 10px;
  animation: pSlideIn 0.3s ease-out;
}
.p-msg.user { flex-direction: row-reverse; }
.p-msg .msg-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-msg .msg-avatar svg { width: 16px; height: 16px; }
.p-msg.assistant .msg-avatar {
  background: linear-gradient(135deg, var(--p-brand), var(--p-accent));
  color: white;
}
.p-msg.user .msg-avatar {
  background: var(--p-elevated);
  color: var(--p-accent);
}
.p-msg .msg-body { max-width: 85%; min-width: 60px; }
.p-msg .msg-content {
  padding: 12px 16px;
  border-radius: var(--p-radius);
  font-size: 0.9rem;
  line-height: 1.65;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.p-msg.assistant .msg-content {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  color: var(--p-text);
  border-top-left-radius: 4px;
}
.p-msg.user .msg-content {
  background: linear-gradient(135deg, var(--p-brand), var(--p-accent));
  color: white;
  border-top-right-radius: 4px;
}
.p-msg .msg-content p { margin: 0 0 8px 0; }
.p-msg .msg-content p:last-child { margin: 0; }
.p-msg .msg-content ul, .p-msg .msg-content ol { padding-left: 18px; margin: 6px 0; }
.p-msg .msg-content li { margin-bottom: 3px; }
.p-msg .msg-content code {
  background: rgba(0,0,0,0.2);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 0.85em;
  font-family: 'JetBrains Mono', monospace;
}
.p-msg .msg-content pre {
  background: rgba(0,0,0,0.3);
  padding: 12px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 8px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.84em;
}
.p-msg .msg-time {
  font-size: 0.68rem;
  color: var(--p-muted);
  margin-top: 4px;
  padding: 0 4px;
}
.p-msg.user .msg-time { text-align: right; }

/* ─── Function Call Indicator ─── */
.p-func-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(10,159,212,0.08);
  border: 1px solid rgba(10,159,212,0.2);
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--p-accent);
  animation: pPulse 1.5s infinite;
}
.p-func-indicator svg { width: 14px; height: 14px; }

/* ─── Typing Indicator ─── */
.p-typing {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 16px;
}
.p-typing .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--p-muted);
  animation: pBounce 1.4s infinite ease-in-out;
}
.p-typing .dot:nth-child(2) { animation-delay: 0.2s; }
.p-typing .dot:nth-child(3) { animation-delay: 0.4s; }

/* ─── Chat Input ─── */
.p-chat-input {
  padding: 14px 18px;
  border-top: 1px solid var(--p-border);
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-shrink: 0;
}
.p-chat-input textarea {
  flex: 1;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  padding: 11px 15px;
  color: var(--p-text);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  resize: none;
  max-height: 120px;
  min-height: 42px;
  outline: none;
  transition: border-color 200ms;
  line-height: 1.5;
}
.p-chat-input textarea:focus { border-color: var(--p-accent); }
.p-chat-input textarea::placeholder { color: var(--p-muted); }
.p-chat-input .btn-send {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p-brand), var(--p-accent));
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 100ms;
  flex-shrink: 0;
}
.p-chat-input .btn-send svg { width: 18px; height: 18px; }
.p-chat-input .btn-send:hover { transform: scale(1.08); }
.p-chat-input .btn-send:active { transform: scale(0.92); }
.p-chat-input .btn-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ─── Badges ─── */
.p-priority { padding: 3px 10px; border-radius: 12px; font-size: 0.73rem; font-weight: 600; display: inline-block; }
.p-priority.low { background: rgba(107,114,128,0.15); color: #9CA3AF; }
.p-priority.medium { background: rgba(245,158,11,0.15); color: #F59E0B; }
.p-priority.high { background: rgba(249,115,22,0.15); color: #F97316; }
.p-priority.urgent { background: rgba(239,68,68,0.15); color: #EF4444; }
.p-status { padding: 3px 10px; border-radius: 12px; font-size: 0.73rem; font-weight: 600; display: inline-block; }
.p-status.todo { background: rgba(107,114,128,0.15); color: #9CA3AF; }
.p-status.in_progress { background: rgba(59,130,246,0.15); color: #3B82F6; }
.p-status.done { background: rgba(16,185,129,0.15); color: #10B981; }
.p-status.cancelled { background: rgba(239,68,68,0.15); color: #EF4444; }
.p-status.income { background: rgba(16,185,129,0.15); color: #10B981; }
.p-status.expense { background: rgba(239,68,68,0.15); color: #EF4444; }

/* ─── Progress Bar ─── */
.p-progress { height: 8px; background: var(--p-surface); border-radius: 4px; overflow: hidden; }
.p-progress .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--p-brand), var(--p-accent));
  border-radius: 4px;
  transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Forms ─── */
.p-form-group { margin-bottom: 16px; }
.p-form-group label {
  display: block;
  font-size: 0.82rem;
  color: var(--p-text2);
  margin-bottom: 6px;
  font-weight: 500;
}
.p-form-group input,
.p-form-group select,
.p-form-group textarea {
  width: 100%;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-sm);
  padding: 10px 14px;
  color: var(--p-text);
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color 200ms;
  box-sizing: border-box;
}
.p-form-group input:focus,
.p-form-group select:focus,
.p-form-group textarea:focus { border-color: var(--p-accent); }
.p-form-group select { cursor: pointer; }
.p-form-group select option { background: var(--p-bg2); }

/* ─── Buttons ─── */
.p-btn {
  padding: 10px 22px;
  border: none;
  border-radius: var(--p-radius-sm);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 200ms;
  font-family: 'Inter', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.p-btn-primary {
  background: linear-gradient(135deg, var(--p-brand), var(--p-accent));
  color: white;
}
.p-btn-primary:hover { transform: translateY(-1px); box-shadow: var(--p-shadow); }
.p-btn-secondary {
  background: var(--p-surface);
  color: var(--p-text);
  border: 1px solid var(--p-border);
}
.p-btn-secondary:hover { border-color: var(--p-accent); }
.p-btn-danger {
  background: rgba(239,68,68,0.1);
  color: #EF4444;
  border: 1px solid rgba(239,68,68,0.2);
}
.p-btn-danger:hover { background: rgba(239,68,68,0.2); }

/* ─── Empty State ─── */
.p-empty {
  text-align: center;
  padding: 50px 20px;
  color: var(--p-muted);
}
.p-empty .empty-icon {
  margin-bottom: 14px;
  opacity: 0.4;
}
.p-empty .empty-icon svg { width: 48px; height: 48px; }
.p-empty p { font-size: 0.92rem; max-width: 300px; margin: 0 auto; line-height: 1.5; }

/* ─── Onboarding Hint ─── */
.p-onboarding-hint {
  background: linear-gradient(135deg, rgba(7,87,128,0.15), rgba(10,159,212,0.1));
  border: 1px solid rgba(10,159,212,0.3);
  border-radius: var(--p-radius);
  padding: 20px 24px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.p-onboarding-hint .hint-icon { flex-shrink: 0; }
.p-onboarding-hint .hint-icon svg { width: 32px; height: 32px; color: var(--p-accent); }
.p-onboarding-hint h3 { font-size: 1rem; margin: 0 0 4px 0; color: var(--p-text); }
.p-onboarding-hint p { font-size: 0.86rem; color: var(--p-text2); margin: 0; }

/* ─── Mobile Toggles ─── */
.p-menu-toggle, .p-chat-toggle, .p-mobile-back {
  display: none;
}
.p-menu-toggle {
  position: fixed;
  top: 14px;
  left: 14px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--p-bg2);
  border: 1px solid var(--p-border);
  color: var(--p-text);
  cursor: pointer;
  z-index: 35;
  align-items: center;
  justify-content: center;
}
.p-menu-toggle svg { width: 20px; height: 20px; }
.p-chat-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p-brand), var(--p-accent));
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(10,159,212,0.4);
  z-index: 30;
  align-items: center;
  justify-content: center;
  transition: transform 200ms;
}
.p-chat-toggle svg { width: 24px; height: 24px; }
.p-chat-toggle:hover { transform: scale(1.1); }
.p-mobile-back {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: 8px;
  padding: 7px 14px;
  color: var(--p-text);
  cursor: pointer;
  z-index: 60;
  font-size: 0.82rem;
  font-family: 'Inter', sans-serif;
  align-items: center;
  gap: 4px;
}
.p-mobile-back svg { width: 14px; height: 14px; }
.personal-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 19;
}

/* ─── Animations ─── */
@keyframes pSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pBounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-5px); }
}
@keyframes pPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — Tablet (<=1024px)
   ═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .personal-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 240px;
    min-width: 240px;
    transform: translateX(-100%);
    z-index: 40;
    box-shadow: none;
  }
  .personal-sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0,0,0,0.4);
  }
  .personal-sidebar.open .menu-label { opacity: 1; }
  .personal-sidebar.open .logo-text { opacity: 1; }
  .personal-sidebar:hover {
    position: fixed;
    box-shadow: none;
  }
  .personal-sidebar-overlay.open { display: block; }

  .personal-chatbot {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    min-width: 100%;
    z-index: 50;
    border-left: none;
  }
  .personal-chatbot.open { display: flex; }

  .personal-content {
    padding: 24px 20px;
    padding-top: 64px;
  }

  .p-charts-grid { grid-template-columns: 1fr; }
  .p-stats-grid { grid-template-columns: 1fr 1fr; }
  .p-menu-toggle { display: flex; }
  .p-chat-toggle { display: flex; }
  .p-mobile-back { display: flex; }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — Mobile (<=640px)
   ═══════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .p-stats-grid { grid-template-columns: 1fr; }
  .p-stat-card { padding: 18px; }
  .p-stat-card .stat-value { font-size: 1.4rem; }
  .personal-content {
    padding: 16px 14px;
    padding-top: 58px;
  }
  .content-header h1 { font-size: 1.3rem; }
  .p-quick-actions { gap: 6px; }
  .p-quick-btn { padding: 7px 12px; font-size: 0.8rem; }
  .p-table th, .p-table td { padding: 10px 10px; font-size: 0.82rem; }
  .p-form-group input, .p-form-group select, .p-form-group textarea {
    font-size: 16px; /* prevents iOS zoom */
  }
  .p-chat-header { padding: 12px 16px; padding-left: 60px; }
}