/* ASSISTANT_M_V1 (owner-authorized "M" mission, 2026-09-28) - Phase 7.
   Dedicated stylesheet, loaded only when the widget itself is included
   (see templates/assistant/_public_widget.html) - never inlined into
   the shared base.html. Namespaced under .aiw- to avoid colliding with
   any existing operator theme CSS. */

#aiw-root {
  --aiw-primary: var(--tenant-primary, var(--voy-color-primary, #1a73e8));
  --aiw-secondary: var(--tenant-secondary, var(--voy-color-ink, #1a4fba));
}

.aiw-launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--aiw-primary);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.aiw-launcher:focus-visible,
.aiw-panel button:focus-visible,
.aiw-panel textarea:focus-visible,
.aiw-panel input:focus-visible {
  outline: 3px solid var(--aiw-primary);
  outline-offset: 2px;
}

.aiw-panel {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 2147483000;
  width: 340px;
  max-width: calc(100vw - 24px);
  height: 460px;
  max-height: calc(100vh - 120px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  display: none;
  flex-direction: column;
  overflow: hidden;
  font-family: inherit;
}

.aiw-panel.aiw-open {
  display: flex;
}

.aiw-header {
  background: var(--aiw-primary);
  color: #fff;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.aiw-header-title {
  font-weight: 600;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aiw-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
}

/* Owner-authorized visual redesign (2026-09-29): the four real product
   tabs (Flug/Bus/Hotel/Flug+Hotel), styled to match the operator's own
   identity via the same --tenant-primary/--tenant-secondary tokens
   templates/base.html already injects per-operator - never a hardcoded
   blue, and never a font/radius unrelated to the rest of this panel
   (font-family: inherit already cascades from .aiw-panel). */
.aiw-product-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 8px 10px 4px;
  border-bottom: 1px solid #eee;
}

.aiw-product-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.2;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 3px;
  border-radius: 12px;
  border: 1.5px solid transparent;
}

.aiw-product-tab:hover {
  border-color: color-mix(in srgb, var(--aiw-primary) 35%, #dfe3e8);
}

/* A clearly secondary, full-width action - visually distinct from the
   four primary product tabs above it (outlined, not filled), so it
   never reads as a fifth product choice. */
.aiw-agent-action {
  display: block;
  width: calc(100% - 20px);
  margin: 0 10px 8px;
  background: #fff;
  border: 1.5px solid var(--aiw-primary);
  color: var(--aiw-secondary);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.aiw-agent-action:hover {
  background: color-mix(in srgb, var(--aiw-primary) 10%, #fff);
}

.aiw-agent-action:active {
  background: color-mix(in srgb, var(--aiw-primary) 18%, #fff);
}

.aiw-product-tab-icon {
  display: inline-block;
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.aiw-icon-bus {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 16c0 .88.39 1.67 1 2.22V20a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1h8v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1.78c.61-.55 1-1.34 1-2.22V6c0-3.5-3.58-4-8-4s-8 .5-8 4v10zm3.5 1a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm9 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM18 11H6V6h12v5z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 16c0 .88.39 1.67 1 2.22V20a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1h8v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1.78c.61-.55 1-1.34 1-2.22V6c0-3.5-3.58-4-8-4s-8 .5-8 4v10zm3.5 1a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm9 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM18 11H6V6h12v5z'/></svg>");
}

@media (max-width: 340px) {
  .aiw-product-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
}

.aiw-quick-action {
  background: color-mix(in srgb, var(--aiw-primary) 12%, #fff);
  border: none;
  border-radius: 14px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  color: var(--aiw-secondary);
}

.aiw-quick-action:hover {
  background: color-mix(in srgb, var(--aiw-primary) 22%, #fff);
}

.aiw-quick-action:active {
  background: color-mix(in srgb, var(--aiw-primary) 32%, #fff);
}

.aiw-messages {
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aiw-new-message-indicator {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  background: var(--aiw-primary);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.aiw-new-message-indicator[hidden] {
  display: none;
}

.aiw-typing {
  font-style: italic;
  color: #5f6368;
}

.aiw-choices {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.aiw-choice-btn {
  background: #fff;
  border: 1.5px solid var(--aiw-primary);
  color: var(--aiw-secondary);
  border-radius: 14px;
  padding: 5px 12px;
  font-size: 12.5px;
  cursor: pointer;
}

.aiw-choice-btn:hover {
  background: color-mix(in srgb, var(--aiw-primary) 12%, #fff);
}

.aiw-msg {
  max-width: 85%;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.aiw-msg-customer {
  align-self: flex-end;
  background: var(--aiw-primary);
  color: #fff;
  border-bottom-right-radius: 2px;
}

.aiw-msg-assistant,
.aiw-msg-system {
  align-self: flex-start;
  background: #f1f3f4;
  color: #202124;
  border-bottom-left-radius: 2px;
}

/* ASSISTANT_LIVE_FIX_V2: a real human staff reply must never look like
   an automated assistant message - distinct color plus a small label,
   never just relying on a subtle shade difference alone. */
.aiw-msg-staff {
  align-self: flex-start;
  background: #e6f4ea;
  color: #0d652d;
  border: 1px solid #b7e1c3;
  border-bottom-left-radius: 2px;
}

.aiw-msg-staff::before {
  content: attr(data-staff-label);
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #0d652d;
  margin-bottom: 2px;
}

.aiw-msg a {
  color: inherit;
  text-decoration: underline;
}

.aiw-feedback {
  align-self: flex-start;
  display: flex;
  gap: 6px;
  margin-top: -4px;
}

/* ASSISTANT_LIVE_FIX_V4 (owner-reported live defect, 2026-09-28): the
   old rule never set an explicit text color, so on a page whose global
   CSS sets a light/white inherited text color (e.g. a dark-themed
   operator page) these buttons rendered as blank-looking boxes against
   the widget panel's own white background - explicit color everywhere
   now, matching the rest of this panel's own real button palette. */
.aiw-feedback-btn {
  background: #fff;
  color: var(--aiw-secondary);
  border: 1.5px solid #ddd;
  border-radius: 10px;
  font-size: 12.5px;
  padding: 4px 10px;
  cursor: pointer;
}

.aiw-feedback-btn:hover {
  background: color-mix(in srgb, var(--aiw-primary) 12%, #fff);
  border-color: var(--aiw-primary);
}

.aiw-feedback-selected {
  background: var(--aiw-primary);
  color: #fff;
  border-color: var(--aiw-primary);
}

.aiw-feedback-thanks {
  font-size: 12.5px;
  color: #5f6368;
  font-style: italic;
}

.aiw-input-row {
  display: flex;
  border-top: 1px solid #eee;
  padding: 8px;
  gap: 6px;
}

.aiw-input-row textarea {
  flex: 1;
  resize: none;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px;
  font-size: 13.5px;
  font-family: inherit;
  max-height: 70px;
}

.aiw-send {
  background: var(--aiw-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 13.5px;
  cursor: pointer;
}

.aiw-send:hover:not(:disabled) {
  background: color-mix(in srgb, var(--aiw-primary) 85%, black);
}

.aiw-send:active:not(:disabled) {
  background: color-mix(in srgb, var(--aiw-primary) 70%, black);
}

.aiw-send:disabled {
  opacity: 0.6;
  cursor: default;
}

@media (max-width: 480px) {
  .aiw-panel {
    right: 12px;
    left: 12px;
    width: auto;
    bottom: 80px;
  }
  .aiw-launcher {
    right: 14px;
    bottom: 14px;
  }
}