.secretary {
  margin: 0 0 36px;
  overflow: hidden;
  border: 1px solid #dfe4e9;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(18, 49, 79, .08);
}
.secretary-heading {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 252px;
  background: linear-gradient(135deg, #eef4f7, #fff0f0);
  padding: 28px 32px;
}
.secretary-portrait { width: 210px; height: 174px; flex: 0 0 auto; object-fit: cover; object-position: 47% center; border-radius: 16px; box-shadow: 0 8px 24px rgba(18,49,79,.16); }
.secretary-heading h1 { margin: 7px 0 13px; color: #0b263f; font-size: clamp(32px, 4vw, 43px); font-weight: 900; line-height: 1.28; }
.secretary-heading p { margin: 0; color: #66717d; font-size: 15px; }
.secretary-heading .eyebrow { margin: 0; background: none; color: #e33e43; font-size: 13px; font-weight: 900; letter-spacing: .14em; }
.secretary-body { padding: 28px 32px; }
.secretary-messages { max-height: 340px; overflow-y: auto; overscroll-behavior-y: auto; }
.secretary-messages--expanded { height: var(--secretary-expanded-height, 600px); max-height: none; }
.secretary-message { position: relative; display: grid; gap: 5px; margin: 0 0 16px; border-radius: 13px; background: #f3f6f8; padding: 14px 17px; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; white-space: pre-wrap; }
.secretary-message strong { color: #12314f; font-size: 11px; }
.secretary-message.assistant { margin-left: 44px; }
.secretary-message.assistant::before { content: ""; position: absolute; top: 5px; left: -44px; width: 34px; height: 34px; border: 2px solid #fff; border-radius: 50%; background: #e9eff4 url("../assets/ai-secretary-headset-v2.jpg") 43% 29% / 190% auto no-repeat; box-shadow: 0 2px 7px rgba(18,49,79,.18); }
.secretary-message--pending { width: fit-content; max-width: calc(100% - 44px); box-shadow: inset 0 0 0 1px rgba(18,49,79,.08); }
.secretary-message--pending strong { display: none; }
.secretary-typing__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.secretary-typing { display: flex; align-items: center; gap: .65em; color: #12314f; font-weight: 700; white-space: nowrap; }
.secretary-typing__dots { display: inline-flex; align-items: center; gap: .16em; height: 1em; }
.secretary-typing__dots span { display: block; font-size: 1.2em; line-height: 1; opacity: .25; animation: secretary-typing-wave 1.2s ease-in-out infinite; }
.secretary-typing__dots span:nth-child(2) { animation-delay: .15s; }
.secretary-typing__dots span:nth-child(3) { animation-delay: .3s; }
@keyframes secretary-typing-wave {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-.22em); }
}
@media (prefers-reduced-motion: reduce) {
  .secretary-typing__dots span { animation: none; opacity: .65; }
}
.secretary-message.user { margin-left: 30px; background: #fff0f0; }
.secretary-prompts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.secretary-prompts button { border: 1px solid rgba(18, 49, 79, .22); border-radius: 100px; background: #fff; color: #12314f; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 8px 13px; }
.secretary-form { display: grid; gap: 10px; }
.secretary-form label { color: #12314f; font-size: 13px; font-weight: 800; }
.secretary-form textarea { width: 100%; min-height: 88px; resize: vertical; border: 1px solid #cbd5dc; border-radius: 9px; background: #fff; color: #0b263f; font: inherit; font-size: 15px; line-height: 1.6; padding: 12px; }
.secretary-form button { min-height: 46px; justify-self: end; border: 0; border-radius: 999px; background: #e33e43; color: #fff; cursor: pointer; font: inherit; font-size: 14px; font-weight: 900; padding: 12px 24px; }
.secretary-form button:hover { background: #c92f34; }
.secretary-form button:disabled { cursor: wait; opacity: .5; }
.secretary-note, .secretary-status { margin: 12px 0 0; color: #66717d; font-size: 11px; line-height: 1.8; }
.secretary-status { min-height: 20px; color: #12314f; }
.secretary a { color: #c92f34; text-underline-offset: 3px; }
.secretary button:focus-visible, .secretary textarea:focus-visible { outline: 3px solid #f6aa00; outline-offset: 2px; }

@media (max-width: 600px) {
  .secretary-heading { gap: 12px; min-height: 205px; padding: 20px 16px; }
  .secretary-portrait { width: 130px; height: 148px; border-radius: 12px; }
  .secretary-heading h1 { font-size: 27px; line-height: 1.26; margin: 5px 0 9px; }
  .secretary-heading p { font-size: 13px; line-height: 1.55; }
  .secretary-heading .eyebrow { font-size: 12px; }
  .secretary-body { padding: 20px 16px; }
  .secretary-message { font-size: 13px; }
  .secretary-form button { width: 100%; }
}
@media (max-width: 380px) {
  .secretary-heading { flex-direction: column; align-items: stretch; padding: 16px; }
  .secretary-portrait { width: 100%; height: 150px; object-position: center 40%; }
  .secretary-heading h1 { font-size: 24px; }
}