:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #152033;
  background: #f4f6f9;
  --blue: #1769e0;
  --navy: #10213c;
  --line: #e2e7ef;
  --muted: #6a768b;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 0 0, #eaf2ff 0, transparent 28rem), #f4f6f9; }
button, textarea { font: inherit; }
.shell { min-height: 100vh; max-width: 1180px; margin: 0 auto; padding: 28px clamp(18px, 4vw, 54px); display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 18px; }
.topbar { display: flex; align-items: center; justify-content: space-between; }
.eyebrow { margin: 0 0 2px; color: var(--blue); letter-spacing: .18em; font-size: 11px; font-weight: 800; }
h1 { margin: 0; font-size: clamp(26px, 4vw, 38px); letter-spacing: -.04em; color: var(--navy); }
.icon-button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: white; color: var(--navy); cursor: pointer; font-size: 22px; box-shadow: 0 8px 22px rgba(16,33,60,.06); }
.contact-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid var(--line); background: rgba(255,255,255,.9); border-radius: 16px; box-shadow: 0 14px 40px rgba(31,47,75,.07); }
.avatar { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #1a73e8, #0b4fac); font-weight: 800; }
.contact-card strong, .contact-card span { display: block; }
.contact-card strong { font-size: 15px; }
#contact-email { color: var(--muted); font-size: 13px; margin-top: 3px; }
.connection { padding: 7px 10px; border-radius: 999px; background: #fff5d8; color: #8a6200; font-size: 12px; font-weight: 700; }
.connection.ok { background: #e5f8ef; color: #08794e; }
.connection.error { background: #ffeaec; color: #b32234; }
.tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.tab { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.7); color: #48566d; padding: 10px 14px; border-radius: 12px; cursor: pointer; white-space: nowrap; font-weight: 700; }
.tab.active { border-color: #9fc3f6; color: #0c55b8; background: #fff; box-shadow: 0 8px 22px rgba(23,105,224,.11); }
.channel-icon { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 6px; color: white; font-size: 12px; font-weight: 900; }
.channel-icon.linkedin { background: #0a66c2; }
.channel-icon.whatsapp { background: #18a957; }
.channel-icon.instantly { background: #ff6c45; }
.count { min-width: 20px; padding: 2px 6px; border-radius: 999px; background: #edf1f7; color: #627086; font-size: 11px; text-align: center; }
.timeline { min-height: 340px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.83); padding: 26px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; box-shadow: 0 18px 50px rgba(31,47,75,.06); }
.empty { margin: auto; max-width: 390px; text-align: center; color: var(--muted); }
.empty-mark { width: 58px; height: 58px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 18px; background: #eaf2ff; color: #0a66c2; font-weight: 900; font-size: 21px; }
.empty h2 { color: var(--navy); font-size: 18px; margin: 0 0 6px; }
.empty p { margin: 0; line-height: 1.55; font-size: 14px; }
.loading-state { margin: auto; display: flex; gap: 7px; align-items: center; justify-content: center; }
.loading-state span { width: 9px; height: 9px; border-radius: 50%; background: #8fb8ee; animation: loading-pulse .9s infinite ease-in-out; }
.loading-state span:nth-child(2) { animation-delay: .12s; }
.loading-state span:nth-child(3) { animation-delay: .24s; }
@keyframes loading-pulse { 0%, 100% { opacity: .28; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
.message { max-width: min(72%, 680px); border: 1px solid var(--line); border-radius: 16px 16px 16px 5px; padding: 13px 15px; background: #fff; box-shadow: 0 7px 18px rgba(31,47,75,.05); }
.message.outbound { align-self: flex-end; border-radius: 16px 16px 5px 16px; background: #eaf3ff; border-color: #cfe2fb; }
.message-head { display: flex; gap: 12px; justify-content: space-between; margin-bottom: 7px; font-size: 11px; color: var(--muted); }
.message-head strong { color: #33435a; }
.subject { font-weight: 800; margin-bottom: 6px; }
.body { font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.composer { border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 13px; box-shadow: 0 18px 48px rgba(31,47,75,.08); }
.composer-label { display: flex; justify-content: space-between; gap: 12px; margin: 0 4px 9px; color: var(--muted); font-size: 11px; }
.composer-label span:first-child { color: var(--blue); font-weight: 800; }
#send-channel { display: none; width: 100%; margin: 0 0 9px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: #fff; color: #33435a; }
#send-channel.visible { display: block; }
.composer-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
textarea { min-height: 64px; resize: vertical; border: 1px solid var(--line); border-radius: 11px; padding: 12px; background: #f7f9fc; color: #152033; }
.composer button { align-self: end; border: 0; border-radius: 10px; padding: 12px 20px; background: var(--blue); color: white; font-weight: 800; cursor: pointer; }
.composer button:disabled, .composer textarea:disabled { cursor: not-allowed; opacity: .62; }
.composer-status-error { color: #b32234 !important; }
@media (max-width: 620px) { .shell { padding: 18px 12px; } .contact-card { grid-template-columns: auto 1fr; } .connection { grid-column: 1 / -1; width: fit-content; } .message { max-width: 88%; } .composer-label span:last-child { display: none; } }

.inline-mode {
  min-height: 100%;
  background: #f7f9fd;
}

.inline-mode .shell {
  min-height: 100vh;
  max-width: none;
  margin: 0;
  padding: 0;
  display: block;
}

.inline-mode .topbar,
.inline-mode .contact-card,
.inline-mode .tabs {
  display: none;
}

.inline-mode .shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
}

.inline-mode .timeline {
  min-height: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #f7f9fd;
  padding: 24px;
}

.inline-mode .composer {
  border-width: 1px 0 0;
  border-radius: 0;
  box-shadow: 0 -8px 24px rgba(31,47,75,.06);
  padding: 12px 16px;
}