/* ═══════════════════════════════════════════════════════════
   Gmail Communication Tab — B01 Mockup Faithful Translation
   Scoped under .comm-gmail to avoid conflicts with legacy CSS.
   Aesthetic: Refined utilitarian — Superhuman × Linear × Gmail
   ═══════════════════════════════════════════════════════════ */

/* ── Custom Properties (supplement tokens.css) ─────────── */
.comm-gmail {
  --cg-brand: #487A7B;
  --cg-brand-dark: #3A6465;
  --cg-brand-light: #6B9A9A;
  --cg-brand-wash: rgba(72,122,123,0.06);
  --cg-brand-subtle: rgba(72,122,123,0.10);
  --cg-brand-glow: rgba(72,122,123,0.18);

  --cg-bg-page: #F6F7F9;
  --cg-bg-panel: #F0F2F5;
  --cg-bg-surface: #FFFFFF;
  --cg-bg-hover: rgba(0,0,0,0.025);
  --cg-bg-inbound: #F4FAFA;

  --cg-text-1: #111827;
  --cg-text-2: #4B5563;
  --cg-text-3: #9CA3AF;
  --cg-text-4: #D1D5DB;

  --cg-border: #E5E7EB;
  --cg-border-light: #F3F4F6;

  --cg-success: #10B981;
  --cg-success-wash: rgba(16,185,129,0.08);
  --cg-warning: #F59E0B;
  --cg-warning-wash: rgba(245,158,11,0.08);
  --cg-error: #EF4444;
  --cg-info: #3B82F6;
  --cg-info-wash: rgba(59,130,246,0.08);
  --cg-accent: #F68D2E;
  --cg-accent-wash: rgba(246,141,46,0.08);

  --cg-type-group: #3B82F6;
  --cg-type-direct: #10B981;
  --cg-type-private: #F59E0B;
  --cg-type-system: #8B5CF6;

  --cg-font-display: 'Outfit', 'Inter', -apple-system, sans-serif;
  --cg-font-body: 'Inter', -apple-system, sans-serif;
  --cg-font-mono: 'JetBrains Mono', 'Consolas', monospace;

  --cg-s-1: 4px; --cg-s-2: 8px; --cg-s-3: 12px; --cg-s-4: 16px;
  --cg-s-5: 20px; --cg-s-6: 24px; --cg-s-8: 32px; --cg-s-10: 40px;

  --cg-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --cg-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --cg-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --cg-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --cg-shadow-brand: 0 4px 14px rgba(72,122,123,0.18);
  --cg-shadow-reply: 0 -2px 8px rgba(0,0,0,0.04);

  --cg-r-sm: 6px; --cg-r-md: 8px; --cg-r-lg: 12px; --cg-r-xl: 16px; --cg-r-full: 9999px;
  --cg-t-fast: 120ms ease; --cg-t-base: 200ms ease; --cg-t-slow: 300ms ease-out;
}

/* ── Layout Container ─────────────────────────────────────── */
.comm-gmail {
  display: flex;
  flex-direction: column;
  margin: calc(-1 * var(--detail-pad, 24px)) calc(-1 * var(--detail-pad, 32px));
  height: calc(100vh - 200px);
  min-height: 600px;
  font-family: var(--cg-font-body);
  color: var(--cg-text-2);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Sender Strip ──────────────────────────────────────────── */
.cg-sender-strip {
  display: flex;
  align-items: center;
  padding: var(--cg-s-3) var(--cg-s-6);
  background: var(--cg-bg-surface);
  border-bottom: 1px solid var(--cg-border);
  flex-shrink: 0;
}
.cg-gmail-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 12px var(--cg-font-display);
  color: var(--cg-success);
}
.cg-gmail-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cg-success);
  box-shadow: 0 0 6px rgba(16,185,129,0.4);
  animation: cgPulse 2.5s ease-in-out infinite;
}
@keyframes cgPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(16,185,129,0.4); }
  50% { box-shadow: 0 0 12px rgba(16,185,129,0.6); }
}
.cg-sender-divider {
  width: 1px;
  height: 18px;
  background: var(--cg-border);
  margin: 0 var(--cg-s-3);
}
.cg-sender-address {
  font: 400 13px var(--cg-font-body);
  color: var(--cg-text-2);
}
.cg-sender-address strong {
  font-weight: 600;
  color: var(--cg-text-1);
}
.cg-compose-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--cg-brand);
  color: white;
  border: none;
  border-radius: var(--cg-r-md);
  font: 600 13px var(--cg-font-display);
  cursor: pointer;
  transition: all var(--cg-t-fast);
  box-shadow: var(--cg-shadow-sm);
}
.cg-compose-btn:hover {
  background: var(--cg-brand-dark);
  box-shadow: var(--cg-shadow-brand);
  transform: translateY(-1px);
}
.cg-compose-btn:active { transform: translateY(0); }
.cg-compose-btn i { width: 15px; height: 15px; }

/* ── 2-Panel Grid ──────────────────────────────────────────── */
.cg-content-area {
  flex: 1;
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 0;
  overflow: hidden;
}

/* ── Thread Panel (Left) ──────────────────────────────────── */
.cg-thread-panel {
  background: var(--cg-bg-panel);
  border-right: 1px solid var(--cg-border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Thread search */
.cg-thread-search-wrap {
  padding: var(--cg-s-4) var(--cg-s-3) var(--cg-s-2);
  flex-shrink: 0;
}
.cg-thread-search {
  position: relative;
}
.cg-thread-search input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border: 1.5px solid var(--cg-border);
  border-radius: var(--cg-r-md);
  font: 400 13px var(--cg-font-body);
  color: var(--cg-text-1);
  background: var(--cg-bg-surface);
  transition: all var(--cg-t-fast);
  outline: none;
}
.cg-thread-search input::placeholder { color: var(--cg-text-4); }
.cg-thread-search input:focus {
  border-color: var(--cg-brand);
  box-shadow: 0 0 0 3px var(--cg-brand-glow);
}
.cg-thread-search .cg-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cg-text-3);
  pointer-events: none;
}
.cg-thread-search .cg-search-icon i { width: 15px; height: 15px; }

/* Thread list */
.cg-thread-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--cg-s-2) var(--cg-s-2);
}
.cg-thread-list::-webkit-scrollbar { width: 4px; }
.cg-thread-list::-webkit-scrollbar-track { background: transparent; }
.cg-thread-list::-webkit-scrollbar-thumb { background: var(--cg-text-4); border-radius: 2px; }

/* Thread item */
.cg-thread-item {
  display: flex;
  gap: var(--cg-s-3);
  padding: var(--cg-s-3);
  border-radius: var(--cg-r-md);
  cursor: pointer;
  transition: all var(--cg-t-fast);
  margin-bottom: 2px;
  border-left: 3px solid transparent;
  position: relative;
  animation: cgSlideIn 0.25s ease both;
}
.cg-thread-item:nth-child(2) { animation-delay: 30ms; }
.cg-thread-item:nth-child(3) { animation-delay: 60ms; }
.cg-thread-item:nth-child(4) { animation-delay: 90ms; }
.cg-thread-item:nth-child(5) { animation-delay: 120ms; }

@keyframes cgSlideIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.cg-thread-item:hover {
  background: rgba(0,0,0,0.035);
}
.cg-thread-item.active {
  background: var(--cg-brand-wash);
  border-left-color: var(--cg-brand);
  box-shadow: inset 0 0 0 1px rgba(72,122,123,0.06);
}

/* Thread avatar */
.cg-t-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.cg-t-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--cg-r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 12px var(--cg-font-display);
  color: white;
}

/* Thread content */
.cg-t-content { flex: 1; min-width: 0; }
.cg-t-top-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cg-s-2);
  margin-bottom: 1px;
}
.cg-t-sender {
  font: 600 13px var(--cg-font-display);
  color: var(--cg-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cg-t-time {
  font: 400 11px var(--cg-font-mono);
  color: var(--cg-text-3);
  flex-shrink: 0;
}
.cg-t-subject {
  font: 500 12px var(--cg-font-body);
  color: var(--cg-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 1px;
}
.cg-t-preview {
  font: 400 12px var(--cg-font-body);
  color: var(--cg-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: var(--cg-s-1);
}
.cg-t-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cg-t-msg-count {
  font: 500 10px var(--cg-font-mono);
  color: var(--cg-text-3);
  background: rgba(0,0,0,0.05);
  padding: 1px 6px;
  border-radius: var(--cg-r-full);
}
.cg-t-direction {
  font: 600 9px var(--cg-font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: var(--cg-r-full);
}
.cg-t-direction.outbound { color: var(--cg-brand); background: var(--cg-brand-wash); }
.cg-t-direction.inbound { color: var(--cg-info); background: var(--cg-info-wash); }

/* Thread panel empty state */
.cg-thread-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--cg-s-10) var(--cg-s-4);
  text-align: center;
}
.cg-thread-empty i { width: 32px; height: 32px; color: var(--cg-text-4); margin-bottom: var(--cg-s-3); }
.cg-thread-empty .cg-empty-title {
  font: 500 13px var(--cg-font-display);
  color: var(--cg-text-3);
}

/* ── Conversation Panel (Right) ───────────────────────────── */
.cg-conv-panel {
  display: flex;
  flex-direction: column;
  background: var(--cg-bg-surface);
  min-height: 0;
  overflow: hidden;
}

/* Conversation header */
.cg-conv-header {
  padding: var(--cg-s-5) var(--cg-s-8);
  border-bottom: 1px solid var(--cg-border-light);
  display: flex;
  align-items: flex-start;
  gap: var(--cg-s-4);
  background: var(--cg-bg-surface);
  flex-shrink: 0;
}
.cg-conv-header-info { flex: 1; min-width: 0; }
.cg-conv-subject {
  font: 700 17px/1.3 var(--cg-font-display);
  color: var(--cg-text-1);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.cg-conv-meta {
  font: 400 12px var(--cg-font-body);
  color: var(--cg-text-3);
}
.cg-conv-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  margin-top: 2px;
}
.cg-conv-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-r-md);
  background: var(--cg-bg-surface);
  font: 500 12px var(--cg-font-display);
  color: var(--cg-text-2);
  cursor: pointer;
  transition: all var(--cg-t-fast);
}
.cg-conv-action-btn:hover {
  border-color: var(--cg-brand);
  color: var(--cg-brand);
  background: var(--cg-brand-wash);
}
.cg-conv-action-btn i { width: 14px; height: 14px; }

/* Messages area */
.cg-conv-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--cg-s-6) var(--cg-s-8);
}
.cg-conv-messages::-webkit-scrollbar { width: 5px; }
.cg-conv-messages::-webkit-scrollbar-track { background: transparent; }
.cg-conv-messages::-webkit-scrollbar-thumb { background: var(--cg-text-4); border-radius: 3px; }

/* Date separator */
.cg-date-sep {
  display: flex;
  align-items: center;
  gap: var(--cg-s-3);
  margin: var(--cg-s-6) 0 var(--cg-s-5);
}
.cg-date-sep:first-child { margin-top: 0; }
.cg-date-sep .cg-line { flex: 1; height: 1px; background: var(--cg-border-light); }
.cg-date-sep .cg-label {
  font: 600 10px/1 var(--cg-font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cg-text-3);
  white-space: nowrap;
}

/* ── Message Card ─────────────────────────────────────────── */
.cg-msg-card {
  padding: var(--cg-s-5) var(--cg-s-6);
  border-radius: var(--cg-r-lg);
  margin-bottom: var(--cg-s-4);
  border: 1px solid var(--cg-border);
  transition: box-shadow var(--cg-t-base);
  animation: cgMsgIn 0.3s ease both;
}
.cg-msg-card:hover { box-shadow: var(--cg-shadow-xs); }
.cg-msg-card.outbound { background: var(--cg-bg-surface); }
.cg-msg-card.inbound {
  background: var(--cg-bg-inbound);
  border-color: #DBE9EA;
}
.cg-msg-card:nth-child(3) { animation-delay: 60ms; }
.cg-msg-card:nth-child(5) { animation-delay: 120ms; }
.cg-msg-card:nth-child(7) { animation-delay: 180ms; }

@keyframes cgMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Message head */
.cg-msg-head {
  display: flex;
  align-items: center;
  gap: var(--cg-s-3);
  margin-bottom: var(--cg-s-3);
}
.cg-msg-avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--cg-r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 11px var(--cg-font-display);
  color: white;
  flex-shrink: 0;
}
.cg-msg-sender-name {
  font: 600 13px var(--cg-font-display);
  color: var(--cg-text-1);
}
.cg-msg-direction-tag {
  font: 600 9px var(--cg-font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: var(--cg-r-sm);
}
.cg-msg-direction-tag.sent { background: var(--cg-brand-wash); color: var(--cg-brand); }
.cg-msg-direction-tag.received { background: var(--cg-info-wash); color: var(--cg-info); }
.cg-msg-timestamp {
  font: 400 11px var(--cg-font-mono);
  color: var(--cg-text-3);
  margin-left: auto;
}

/* Message recipients */
.cg-msg-recipients {
  font: 400 12px var(--cg-font-body);
  color: var(--cg-text-3);
  margin-left: 46px;
  margin-bottom: var(--cg-s-3);
}

/* Message body */
.cg-msg-body {
  margin-left: 46px;
  font: 400 14px/1.75 var(--cg-font-body);
  color: var(--cg-text-1);
}
.cg-msg-body p { margin-bottom: var(--cg-s-3); }
.cg-msg-body p:last-child { margin-bottom: 0; }
.cg-msg-body .cg-signature {
  margin-top: var(--cg-s-3);
  padding-top: var(--cg-s-3);
  border-top: 1px solid var(--cg-border-light);
  color: var(--cg-text-3);
  font-size: 13px;
}

/* Message footer */
.cg-msg-footer {
  margin-top: var(--cg-s-3);
  margin-left: 46px;
  display: flex;
  align-items: center;
  gap: var(--cg-s-3);
}
.cg-delivery-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 500 10px var(--cg-font-display);
  padding: 2px 8px;
  border-radius: var(--cg-r-full);
}
.cg-delivery-pill.delivered { color: var(--cg-success); background: var(--cg-success-wash); }
.cg-delivery-pill.sent { color: var(--cg-brand); background: var(--cg-brand-wash); }
.cg-delivery-pill.failed { color: #DC2626; background: rgba(220,38,38,0.08); }
.cg-delivery-pill .cg-d-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.cg-template-pill {
  font: 600 9px var(--cg-font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cg-accent);
  background: var(--cg-accent-wash);
  padding: 2px 7px;
  border-radius: var(--cg-r-full);
}

/* Message actions */
.cg-msg-actions {
  margin-top: var(--cg-s-3);
  margin-left: 46px;
  display: flex;
  align-items: center;
  gap: var(--cg-s-2);
  padding-top: var(--cg-s-3);
  border-top: 1px solid var(--cg-border-light);
}
.cg-msg-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-r-md);
  background: var(--cg-bg-surface);
  font: 500 12px var(--cg-font-display);
  color: var(--cg-text-3);
  cursor: pointer;
  transition: all var(--cg-t-fast);
}
.cg-msg-action-btn:hover {
  border-color: var(--cg-brand);
  color: var(--cg-brand);
  background: var(--cg-brand-wash);
}
.cg-msg-action-btn i { width: 13px; height: 13px; }

/* ── Reply Bar ────────────────────────────────────────────── */
.cg-reply-bar {
  border-top: 1px solid var(--cg-border);
  padding: var(--cg-s-3) var(--cg-s-8);
  background: var(--cg-bg-surface);
  box-shadow: var(--cg-shadow-reply);
  flex-shrink: 0;
}

/* Reply compact */
.cg-reply-compact {
  display: flex;
  align-items: center;
  gap: var(--cg-s-3);
  padding: 10px var(--cg-s-4);
  border: 1.5px solid var(--cg-border);
  border-radius: var(--cg-r-lg);
  cursor: pointer;
  transition: all var(--cg-t-fast);
}
.cg-reply-compact:hover {
  border-color: var(--cg-brand);
  box-shadow: var(--cg-shadow-sm);
}
.cg-reply-compact.hidden { display: none; }
.cg-rc-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--cg-r-full);
  background: var(--cg-brand);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 10px var(--cg-font-display);
  flex-shrink: 0;
}
.cg-rc-placeholder {
  flex: 1;
  font: 400 13px var(--cg-font-body);
  color: var(--cg-text-4);
}
.cg-rc-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.cg-rc-action {
  font: 500 12px var(--cg-font-display);
  color: var(--cg-text-3);
  padding: 3px 8px;
  border-radius: var(--cg-r-sm);
  cursor: pointer;
  transition: all var(--cg-t-fast);
  border: none;
  background: none;
}
.cg-rc-action:hover {
  background: var(--cg-bg-hover);
  color: var(--cg-text-2);
}
.cg-rc-sep { color: var(--cg-text-4); font-size: 11px; }

/* Reply expanded */
.cg-reply-expanded {
  display: none;
  border: 1.5px solid var(--cg-border);
  border-radius: var(--cg-r-lg);
  overflow: hidden;
  box-shadow: var(--cg-shadow-md);
  animation: cgReplyOpen 0.2s ease-out;
}
.cg-reply-expanded.visible { display: block; }

@keyframes cgReplyOpen {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.cg-re-field {
  padding: 6px var(--cg-s-4);
  border-bottom: 1px solid var(--cg-border-light);
  display: flex;
  align-items: center;
  gap: var(--cg-s-2);
  font: 400 13px var(--cg-font-body);
}
.cg-re-label {
  font: 500 12px var(--cg-font-display);
  color: var(--cg-text-3);
  min-width: 24px;
}
.cg-re-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}
.cg-re-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px 3px 4px;
  background: var(--cg-bg-page);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-r-md);
  font: 500 12px var(--cg-font-body);
  color: var(--cg-text-1);
}
.cg-re-chip-avatar {
  width: 18px;
  height: 18px;
  border-radius: var(--cg-r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 7px var(--cg-font-display);
  color: white;
}
.cg-re-chip-x {
  margin-left: 2px;
  color: var(--cg-text-3);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  transition: color var(--cg-t-fast);
}
.cg-re-chip-x:hover { color: var(--cg-error); }

.cg-re-textarea-wrap {
  padding: var(--cg-s-2) var(--cg-s-4);
}
.cg-re-textarea-wrap textarea {
  width: 100%;
  min-height: 44px;
  max-height: 200px;
  border: none;
  outline: none;
  resize: none;
  font: 400 13px/1.55 var(--cg-font-body);
  color: var(--cg-text-1);
  overflow-y: auto;
}
.cg-re-textarea-wrap textarea::placeholder { color: var(--cg-text-4); }

.cg-re-toolbar {
  padding: 4px var(--cg-s-3);
  border-top: 1px solid var(--cg-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FAFBFC;
}
.cg-re-tools {
  display: flex;
  gap: 2px;
}
.cg-re-tool {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: none;
  background: transparent;
  border-radius: var(--cg-r-sm);
  font: 500 12px var(--cg-font-display);
  color: var(--cg-text-3);
  cursor: pointer;
  transition: all var(--cg-t-fast);
}
.cg-re-tool:hover {
  background: var(--cg-bg-hover);
  color: var(--cg-text-2);
}
.cg-re-tool i { width: 14px; height: 14px; }

.cg-re-actions {
  display: flex;
  align-items: center;
  gap: var(--cg-s-2);
}
.cg-re-cancel {
  padding: 6px 14px;
  border: none;
  background: transparent;
  font: 500 12px var(--cg-font-display);
  color: var(--cg-text-3);
  cursor: pointer;
  border-radius: var(--cg-r-md);
  transition: all var(--cg-t-fast);
}
.cg-re-cancel:hover { background: var(--cg-bg-hover); color: var(--cg-text-2); }
.cg-re-send {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 20px;
  background: var(--cg-brand);
  color: white;
  border: none;
  border-radius: var(--cg-r-md);
  font: 600 13px var(--cg-font-display);
  cursor: pointer;
  transition: all var(--cg-t-fast);
  box-shadow: var(--cg-shadow-sm);
}
.cg-re-send:hover {
  background: var(--cg-brand-dark);
  box-shadow: var(--cg-shadow-brand);
  transform: translateY(-1px);
}
.cg-re-send:active { transform: translateY(0); }
.cg-re-send i { width: 14px; height: 14px; }
.cg-re-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── Compose Slide-out Panel ─────────────────────────────── */
.cg-compose-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.15);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cg-t-base);
}
.cg-compose-backdrop.open { opacity: 1; pointer-events: all; }

.cg-compose-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 520px;
  max-width: 90vw;
  background: var(--cg-bg-surface);
  border-left: 1px solid var(--cg-border);
  box-shadow: -8px 0 30px rgba(0,0,0,0.10);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.cg-compose-panel.open { transform: translateX(0); }

.cg-compose-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cg-s-5) var(--cg-s-6);
  border-bottom: 1px solid var(--cg-border);
  flex-shrink: 0;
}
.cg-compose-header-title {
  font: 700 16px var(--cg-font-display);
  color: var(--cg-text-1);
  letter-spacing: -0.01em;
}
.cg-compose-header-close {
  width: 32px;
  height: 32px;
  border-radius: var(--cg-r-md);
  border: 1px solid var(--cg-border);
  background: var(--cg-bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--cg-text-3);
  transition: all var(--cg-t-fast);
}
.cg-compose-header-close:hover { border-color: var(--cg-text-3); color: var(--cg-text-2); }
.cg-compose-header-close i { width: 16px; height: 16px; }

/* Compose sender */
.cg-compose-sender {
  padding: var(--cg-s-3) var(--cg-s-6);
  border-bottom: 1px solid var(--cg-border-light);
  display: flex;
  align-items: center;
  gap: var(--cg-s-2);
  background: var(--cg-bg-page);
}
.cg-compose-sender-label {
  font: 500 12px var(--cg-font-display);
  color: var(--cg-text-3);
  min-width: 36px;
}
.cg-compose-sender-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 4px;
  background: var(--cg-bg-surface);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-r-full);
}
.cg-compose-sender-avatar {
  width: 22px;
  height: 22px;
  border-radius: var(--cg-r-full);
  background: var(--cg-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 8px var(--cg-font-display);
  color: white;
}
.cg-compose-sender-text {
  font: 500 12px var(--cg-font-body);
  color: var(--cg-text-1);
}

/* Compose fields */
.cg-compose-field {
  padding: var(--cg-s-3) var(--cg-s-6);
  border-bottom: 1px solid var(--cg-border-light);
  display: flex;
  align-items: center;
  gap: var(--cg-s-2);
}
.cg-compose-field-label {
  font: 500 12px var(--cg-font-display);
  color: var(--cg-text-3);
  min-width: 56px;
}
.cg-compose-field-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}
.cg-compose-field input[type="text"] {
  flex: 1;
  min-width: 100px;
  border: none;
  outline: none;
  font: 400 13px var(--cg-font-body);
  color: var(--cg-text-1);
  background: transparent;
}
.cg-compose-field input[type="text"]::placeholder { color: var(--cg-text-4); }

/* Compose template picker */
.cg-compose-template-row {
  padding: var(--cg-s-3) var(--cg-s-6);
  border-bottom: 1px solid var(--cg-border-light);
  display: flex;
  align-items: center;
  gap: var(--cg-s-2);
}
.cg-template-dropdown {
  position: relative;
  flex: 1;
}
.cg-template-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1.5px solid var(--cg-border);
  border-radius: var(--cg-r-md);
  background: var(--cg-bg-surface);
  font: 500 13px var(--cg-font-body);
  color: var(--cg-text-2);
  cursor: pointer;
  transition: all var(--cg-t-fast);
  width: 100%;
}
.cg-template-trigger:hover { border-color: var(--cg-brand); }
.cg-template-trigger i { width: 14px; height: 14px; color: var(--cg-text-3); }
.cg-template-trigger .cg-chevron {
  margin-left: auto;
  width: 14px;
  height: 14px;
  color: var(--cg-text-4);
  transition: transform var(--cg-t-fast);
}
.cg-template-trigger.active .cg-chevron { transform: rotate(180deg); }

.cg-template-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--cg-bg-surface);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-r-md);
  box-shadow: var(--cg-shadow-lg);
  z-index: 10;
  display: none;
  max-height: 240px;
  overflow-y: auto;
}
.cg-template-menu.open { display: block; }
.cg-template-menu-item {
  padding: 10px var(--cg-s-4);
  font: 400 13px var(--cg-font-body);
  color: var(--cg-text-2);
  cursor: pointer;
  transition: background var(--cg-t-fast);
  display: flex;
  align-items: center;
  gap: var(--cg-s-2);
  border-bottom: 1px solid var(--cg-border-light);
}
.cg-template-menu-item:last-child { border-bottom: none; }
.cg-template-menu-item:hover { background: var(--cg-brand-wash); color: var(--cg-text-1); }
.cg-template-menu-item i { width: 14px; height: 14px; color: var(--cg-text-3); flex-shrink: 0; }
.cg-template-menu-item .cg-tmpl-name { font-weight: 500; }

/* Compose subject */
.cg-compose-subject {
  padding: var(--cg-s-3) var(--cg-s-6);
  border-bottom: 1px solid var(--cg-border-light);
}
.cg-compose-subject input {
  width: 100%;
  border: none;
  outline: none;
  font: 600 15px var(--cg-font-display);
  color: var(--cg-text-1);
  letter-spacing: -0.01em;
}
.cg-compose-subject input::placeholder { color: var(--cg-text-4); font-weight: 400; }

/* Compose body */
.cg-compose-body {
  flex: 1;
  padding: var(--cg-s-5) var(--cg-s-6);
  overflow-y: auto;
}
.cg-compose-body textarea {
  width: 100%;
  min-height: 200px;
  border: none;
  outline: none;
  resize: none;
  font: 400 14px/1.75 var(--cg-font-body);
  color: var(--cg-text-1);
}
.cg-compose-body textarea::placeholder { color: var(--cg-text-4); }

/* Compose footer */
.cg-compose-footer {
  padding: var(--cg-s-3) var(--cg-s-6);
  border-top: 1px solid var(--cg-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FAFBFC;
  flex-shrink: 0;
}
.cg-compose-footer-tools {
  display: flex;
  gap: 2px;
}
.cg-compose-footer-tool {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: none;
  background: transparent;
  border-radius: var(--cg-r-sm);
  font: 500 12px var(--cg-font-display);
  color: var(--cg-text-3);
  cursor: pointer;
  transition: all var(--cg-t-fast);
}
.cg-compose-footer-tool:hover { background: var(--cg-bg-hover); color: var(--cg-text-2); }
.cg-compose-footer-tool i { width: 14px; height: 14px; }
.cg-compose-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--cg-s-2);
}
.cg-compose-discard {
  padding: 6px 14px;
  border: none;
  background: transparent;
  font: 500 12px var(--cg-font-display);
  color: var(--cg-text-3);
  cursor: pointer;
  border-radius: var(--cg-r-md);
  transition: all var(--cg-t-fast);
}
.cg-compose-discard:hover { background: var(--cg-bg-hover); color: var(--cg-error); }
.cg-compose-send {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 22px;
  background: var(--cg-brand);
  color: white;
  border: none;
  border-radius: var(--cg-r-md);
  font: 600 13px var(--cg-font-display);
  cursor: pointer;
  transition: all var(--cg-t-fast);
  box-shadow: var(--cg-shadow-sm);
}
.cg-compose-send:hover {
  background: var(--cg-brand-dark);
  box-shadow: var(--cg-shadow-brand);
  transform: translateY(-1px);
}
.cg-compose-send:active { transform: translateY(0); }
.cg-compose-send i { width: 14px; height: 14px; }
.cg-compose-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Compose recipient chips (shared with reply) */
.cg-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px 3px 4px;
  background: var(--cg-bg-page);
  border: 1px solid var(--cg-border);
  border-radius: var(--cg-r-md);
  font: 500 12px var(--cg-font-body);
  color: var(--cg-text-1);
}
.cg-chip-avatar {
  width: 18px;
  height: 18px;
  border-radius: var(--cg-r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 7px var(--cg-font-display);
  color: white;
}
.cg-chip-x {
  margin-left: 2px;
  color: var(--cg-text-3);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  transition: color var(--cg-t-fast);
  border: none;
  background: none;
  padding: 0;
}
.cg-chip-x:hover { color: var(--cg-error); }

/* ── Empty States ─────────────────────────────────────────── */
.cg-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: var(--cg-s-10);
  text-align: center;
}
.cg-empty-state .cg-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--cg-r-lg);
  background: var(--cg-bg-page);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--cg-s-4);
}
.cg-empty-state .cg-empty-icon i { width: 24px; height: 24px; color: var(--cg-text-3); }
.cg-empty-state .cg-empty-title {
  font: 600 15px var(--cg-font-display);
  color: var(--cg-text-1);
  margin-bottom: var(--cg-s-2);
}
.cg-empty-state .cg-empty-desc {
  font: 400 13px var(--cg-font-body);
  color: var(--cg-text-3);
  max-width: 280px;
  margin-bottom: var(--cg-s-5);
  line-height: 1.6;
}
.cg-empty-state .cg-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  background: var(--cg-brand);
  color: white;
  border: none;
  border-radius: var(--cg-r-md);
  font: 600 13px var(--cg-font-display);
  cursor: pointer;
  transition: all var(--cg-t-fast);
  box-shadow: var(--cg-shadow-sm);
}
.cg-empty-state .cg-empty-cta:hover {
  background: var(--cg-brand-dark);
  box-shadow: var(--cg-shadow-brand);
  transform: translateY(-1px);
}
.cg-empty-state .cg-empty-cta i { width: 15px; height: 15px; }

/* Gmail not connected state */
.cg-empty-state.not-connected .cg-empty-icon {
  background: var(--cg-warning-wash);
}
.cg-empty-state.not-connected .cg-empty-icon i { color: var(--cg-warning); }
.cg-empty-state .cg-connect-note {
  font: 400 12px var(--cg-font-body);
  color: var(--cg-text-3);
  margin-top: var(--cg-s-3);
  max-width: 280px;
  line-height: 1.5;
}

/* Select thread prompt */
.cg-select-thread {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
}
.cg-select-thread .cg-st-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--cg-r-lg);
  background: var(--cg-bg-page);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--cg-s-4);
}
.cg-select-thread .cg-st-icon i { width: 24px; height: 24px; color: var(--cg-text-4); }
.cg-select-thread .cg-st-title {
  font: 600 15px var(--cg-font-display);
  color: var(--cg-text-2);
  margin-bottom: var(--cg-s-2);
}
.cg-select-thread .cg-st-desc {
  font: 400 13px var(--cg-font-body);
  color: var(--cg-text-3);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .cg-content-area {
    grid-template-columns: 220px 1fr;
  }
}
@media (max-width: 700px) {
  .cg-content-area {
    grid-template-columns: 1fr;
  }
  .cg-thread-panel {
    display: none;
  }
}