/**
 * Parallel Inline Chat Widget Styles v2.1
 * Pixel-perfect implementation from Figma spec.
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600&display=swap');

/* ============================================================================
   Inline Card Container
   ============================================================================ */

.parallel-inline-card {
  margin: 3rem auto;
  max-width: 360px;
  width: 100%;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #1A1A1A;
  transition: opacity 0.5s ease-in-out;
}

/* ============================================================================
   Minimal View (hidden — auto-expands)
   ============================================================================ */

.parallel-inline-minimal {
  display: none;
}

/* ============================================================================
   Expanded View — outer shell
   Figma: 360×546px, white, shadow, 10px radius
   ============================================================================ */

.parallel-inline-expanded {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  height: 546px;
  max-height: 80vh;
  animation: expand-in 0.3s ease-out;
}

@keyframes expand-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* ============================================================================
   Chat Header
   Figma: 360×56px, #111111, border-radius 10 10 0 0, padding 0 16px, gap 10px
   ============================================================================ */

.parallel-inline-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 16px;
  gap: 10px;
  height: 56px;
  min-height: 56px;
  background: #111111;
  border-radius: 10px 10px 0px 0px;
  flex-shrink: 0;
}

/* Left side: avatar + text */
.parallel-inline-header-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

/* Avatar circle — Figma: 36×36, #ECF15D, radius 18px */
.parallel-inline-logo {
  width: 36px;
  height: 36px;
  background: #ECF15D;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Name + status block */
.parallel-inline-header-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
}

/* "Parallel" — Figma: DM Sans SemiBold, 14px, 16.8px, opsz 14, #FFFFFF */
.parallel-inline-header-info strong {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 16.8px;
  color: #FFFFFF;
  white-space: nowrap;
  font-variation-settings: 'opsz' 14;
}

/* "Usually replies instantly" — Figma: DM Sans 400, 11px, normal, opsz 9, #888888 */
.parallel-inline-header-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: normal;
  color: #888888;
  font-variation-settings: 'opsz' 9;
}

/* Right side: action icons — Figma: gap 10px, 86×24px total */
.parallel-inline-header-actions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  overflow: visible;
  position: relative;
  z-index: 20;
}

/* Download + refresh icon buttons — transparent, white icon */
.parallel-inline-header-btn {
  background: none;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: opacity 0.15s ease;
  line-height: 1;
}

.parallel-inline-header-btn:hover {
  opacity: 0.65;
}

/* Close button — Figma: 24×24 self-contained SVG (white circle + black border + black ×) */
.parallel-inline-header-btn[data-action="close"] {
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
}

.parallel-inline-header-btn[data-action="close"]:hover {
  opacity: 0.8;
}

/* ============================================================================
   Chat Body — contains messages + quick replies + input
   Figma: Chat Field — padding 14px, background #FFFFFF
   ============================================================================ */

.parallel-inline-chat-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px;
  background: #FFFFFF;
  overflow: hidden;
}

/* ============================================================================
   Messages Container
   Figma: frame 4 — flex column, gap 12px between message groups
   ============================================================================ */

/* ============================================================================
   Context Tag — Figma: ContextTag — pinned above messages, shows trigger question
   ============================================================================ */

.parallel-inline-context-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 5px 10px;
  margin-bottom: 10px;
  background: #ECF15D;
  border-radius: 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  flex-shrink: 0;
}

.parallel-inline-context-tag-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.parallel-inline-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
}

/* Minimal scrollbar */
.parallel-inline-messages::-webkit-scrollbar { width: 4px; }
.parallel-inline-messages::-webkit-scrollbar-track { background: transparent; }
.parallel-inline-messages::-webkit-scrollbar-thumb { background: #DDDDDD; border-radius: 2px; }

/* ============================================================================
   Message Bubbles
   ============================================================================ */

.parallel-inline-message {
  display: flex;
  flex-direction: column;
  animation: message-appear 0.25s ease-out;
  /* 12px gap below each message group (bubble + footer) */
  margin-bottom: 12px;
}

.parallel-inline-message:last-child {
  margin-bottom: 0;
}

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

.parallel-inline-message-user {
  align-self: flex-end;
  align-items: flex-end;
}

.parallel-inline-message-assistant {
  align-self: flex-start;
  align-items: flex-start;
}

/* Base bubble — Figma: DM Sans 400, 14px, 22px, padding 12px 14px */
.parallel-inline-message-content {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  padding: 12px 14px;
  word-wrap: break-word;
  max-width: 232px;
}

/* Bot bubble — Figma: #F4F4F2, radius 10 10 10 2px, color #1A1A1A */
.parallel-inline-message-assistant .parallel-inline-message-content {
  background: #F4F4F2;
  color: #1A1A1A;
  border-radius: 10px 10px 10px 2px;
}

/* User bubble (typed) — Figma: #111111, radius 6px, color #FFFFFF */
.parallel-inline-message-user .parallel-inline-message-content {
  background: #111111;
  color: #FFFFFF;
  border-radius: 6px;
}

/* Option chip (quick reply selected) — Figma: #ECF15D, radius 6px, DM Sans 600 13px, #000 */
.parallel-inline-message-user.is-option-chip .parallel-inline-message-content {
  background: #ECF15D;
  color: #000000;
  border: 1px solid #ECF15D;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  line-height: 20px;
  min-height: 48px;
  padding: 0 14px;
  display: flex;
  align-items: center;
}

/* ============================================================================
   Message Footer — action icon row below each bubble
   Figma: Icon Row — padding 4px, gap 2px; each btn 28×28, radius 4px
   ============================================================================ */

.parallel-inline-msg-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 4px;
  gap: 2px;
}

.parallel-inline-message-user .parallel-inline-msg-footer {
  justify-content: flex-end;
}

.parallel-inline-message-assistant .parallel-inline-msg-footer {
  justify-content: flex-start;
  padding-left: 0;
}

/* Figma: 28×28, radius 4px */
.parallel-inline-msg-action {
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  padding: 0;
  color: #AAAAAA;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}

.parallel-inline-msg-action:hover {
  color: #333333;
  background: #F0F0F0;
}

/* ============================================================================
   Typing Indicator
   ============================================================================ */

.parallel-inline-typing .parallel-inline-message-content {
  display: flex;
  gap: 5px;
  padding: 12px 14px;
}

.parallel-inline-typing .parallel-inline-message-content span {
  width: 7px;
  height: 7px;
  background: #AAAAAA;
  border-radius: 50%;
  animation: typing-bounce 1.4s infinite ease-in-out;
}

.parallel-inline-typing .parallel-inline-message-content span:nth-child(1) { animation-delay: 0s; }
.parallel-inline-typing .parallel-inline-message-content span:nth-child(2) { animation-delay: 0.2s; }
.parallel-inline-typing .parallel-inline-message-content span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* ============================================================================
   Quick Reply Buttons (unselected)
   Figma: height 48px, padding 0 14px, radius 6px, DM Sans 400 14px, border #E0E0E0
   ============================================================================ */

.parallel-inline-quick-replies {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0 0;
  flex-shrink: 0;
  background: #FFFFFF;
}

/* Safety net: if somehow shown while empty, take up no space */
.parallel-inline-quick-replies:empty {
  display: none !important;
  padding: 0;
}

.parallel-inline-quick-reply-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 14px;
  height: 48px;
  background: #FFFFFF;
  color: #000000;
  border: 1px solid #D9D9D9;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  text-align: left;
  width: 100%;
}

.parallel-inline-quick-reply-button:hover {
  background: #F5FAE0;
  border-color: #ECF15D;
}

.parallel-inline-quick-reply-button:active {
  background: #F4F4F2;
}

/* ============================================================================
   Slot Picker — rendered inside an assistant bubble
   ============================================================================ */

.parallel-inline-slots-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 12px 14px;
  max-width: 232px;
}

.parallel-inline-slot-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #444444;
  margin: 0 0 10px;
  font-weight: 500;
}

.parallel-inline-slot-btn {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 10px 14px;
  background: #FFFFFF;
  border: 1.5px solid #111111;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #111111;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.parallel-inline-slot-btn:last-child { margin-bottom: 0; }

.parallel-inline-slot-btn:hover {
  background: #111111;
  color: #ECF15D;
}

.parallel-inline-slot-btn:active { transform: scale(0.98); }

/* ============================================================================
   Calendar Slot Picker (pcal-*)
   Figma: node 341:1403 — #F4F4F2 bg, 340px wide, radius 2px 10px 10px 10px
   ============================================================================ */

/* Strip default padding from the message-content wrapper used by calendar.
   Override max-width so the calendar fills the full messages container width. */
.pcal-message-content {
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 10px 10px 10px 2px;
  overflow: hidden;
}

/* Make the assistant message row itself full-width when it holds a calendar */
.parallel-inline-message-assistant:has(.pcal-message-content) {
  width: 100%;
}

.pcal-root {
  display: flex;
  flex-direction: column;
  background: #F4F4F2;
  border-radius: 2px 10px 10px 10px;
  padding: 14px 12px 12px;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

/* Intro line — DM Sans 400 14px #1A1A1A */
.pcal-intro {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #1A1A1A;
  margin: 0 0 2px;
  font-variation-settings: 'opsz' 9;
}

/* Month nav row */
.pcal-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}

.pcal-month-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  color: #0A0A0A;
  flex: 1;
  text-align: center;
}

/* Chevron nav buttons — 28×28 */
.pcal-nav-btn {
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  padding: 0;
  color: #0A0A0A;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.12s ease;
  flex-shrink: 0;
}

.pcal-nav-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
}

.pcal-nav-btn:disabled {
  color: #CCCCCC;
  cursor: default;
}

/* Day-of-week header row — 7 columns */
.pcal-day-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.pcal-day-hdr {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 10px;
  line-height: 14px;
  color: #888888;
  text-align: center;
}

/* Days grid — 7 columns, 32px row height */
.pcal-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.pcal-day-cell {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  border: none;
  border-radius: 6px;
  cursor: default;
  background: none;
  padding: 0;
}

.pcal-day-empty {
  background: none;
}

/* Available days — solid black, bold, hover highlight */
.pcal-day-avail {
  color: #0A0A0A;
  font-weight: 600;
  cursor: pointer;
}

.pcal-day-avail:hover {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 6px;
}

/* Unavailable / past / confirmed-empty days — light grey, no pointer */
.pcal-day-noavail {
  color: #CCCCCC;
  cursor: default;
}

/* Unknown future days (month not yet fetched) — muted, clickable to try loading */
.pcal-day-future-empty {
  color: #CCCCCC;
  cursor: pointer;
}
.pcal-day-future-empty:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* No-times message when a date has no available slots */
.pcal-no-times {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: #999999;
  text-align: center;
  padding: 6px 0 2px;
  margin: 0;
  font-style: italic;
}

/* Selected day — dark bg, white text */
.pcal-day-selected {
  background: #111111 !important;
  color: #FFFFFF !important;
  cursor: pointer;
}

/* Time-slot grid — 3 columns */
.pcal-times {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 2px;
}

/* Time slot button — unselected */
.pcal-time-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 1;
  color: #1A1A1A;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  padding: 0 4px;
}

.pcal-time-btn:hover {
  border-color: #111111;
}

/* Time slot button — selected */
.pcal-time-selected {
  background: #ECF15D !important;
  border-color: #ECF15D !important;
  font-weight: 600;
}

/* Booking form */
.pcal-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

/* Input field row with icon */
.pcal-field {
  display: flex;
  align-items: center;
  height: 34px;
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 6px;
  padding: 0 10px;
  gap: 8px;
}

.pcal-field-icon {
  flex-shrink: 0;
  display: block;
}

.pcal-field-input {
  flex: 1;
  border: none;
  background: none;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  color: #1A1A1A;
  outline: none;
  min-width: 0;
}

.pcal-field-input::placeholder {
  color: #AAAAAA;
}

/* Confirm button */
.pcal-confirm-btn {
  width: 100%;
  height: 36px;
  background: #111111;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.pcal-confirm-btn:hover:not(:disabled) {
  opacity: 0.85;
}

.pcal-confirm-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ============================================================================
   Input Area
   Figma: 330×52px (within 14px padding), padding 0 14px, gap 8px,
          #FFFFFF, radius 10px
   ============================================================================ */

.parallel-inline-input-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 14px;
  gap: 8px;
  height: 52px;
  min-height: 52px;
  background: #FFFFFF;
  border-radius: 10px;
  border: 2px solid #000000;
  flex-shrink: 0;
  margin-top: 12px;
}

/* Figma: DM Sans 400, 14px, 22px, placeholder #AAAAAA */
.parallel-inline-input {
  flex: 1;
  border: none;
  background: none;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: #1A1A1A;
  outline: none;
  min-width: 0;
}

.parallel-inline-input::placeholder {
  color: #AAAAAA;
}

/* Send button — Figma: 32×32, #000000, radius 6px */
.parallel-inline-send {
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: #000000;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}

.parallel-inline-send:hover { opacity: 0.82; }
.parallel-inline-send:active { transform: scale(0.97); }
.parallel-inline-send svg { display: block; }

/* ============================================================================
   Tooltips — CSS-only, data-tooltip attribute
   ============================================================================ */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  background: #111111;
  color: #FFFFFF;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  padding: 5px 8px;
  border-radius: 4px;
  pointer-events: none;
  visibility: hidden;
  z-index: 2147483647;
}

.parallel-inline-header-btn:hover[data-tooltip]::after,
.parallel-inline-header-btn:focus[data-tooltip]::after {
  visibility: visible;
}

/* Header buttons: tooltip appears below the button (into the white content area) */
.parallel-inline-header-btn[data-tooltip]::after {
  bottom: auto;
  top: calc(100% + 16px);
}

/* JS-driven fixed tooltip for message action buttons (copy, retry, edit).
   Appended to <body> so it is never clipped by the messages container. */
.parallel-inline-msg-tooltip {
  position: fixed;
  background: #111111;
  color: #FFFFFF;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  padding: 5px 8px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 2147483647;
}

/* ============================================================================
   Accessibility
   ============================================================================ */

.parallel-inline-send:focus,
.parallel-inline-input:focus,
.parallel-inline-quick-reply-button:focus,
.parallel-inline-header-btn:focus,
.parallel-inline-msg-action:focus {
  outline: 2px solid #ECF15D;
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .parallel-inline-expanded,
  .parallel-inline-message {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================================
   Responsive — smaller screens
   ============================================================================ */

@media (max-width: 480px) {
  .parallel-inline-card {
    margin: 0;
    max-width: 100%;
    width: 100%;
    border-radius: 0;
  }

  .parallel-inline-expanded {
    height: 100svh;
    border-radius: 0;
    box-shadow: none;
  }

  .parallel-inline-message-content {
    max-width: 220px;
  }
}