/* ==========================================================================
   My Travel Planner — Widget Styles
   All tokens are defined in design-tokens.css (loaded via WP dependency).
   ========================================================================== */

/* ── Container ──────────────────────────────────────────────────────────── */

.mtp-planner-widget {
    font-family:      var(--mtp-font);
    background:       var(--mtp-bg);
    border:           1px solid var(--mtp-border);
    border-radius:    var(--mtp-radius);
    box-shadow:       var(--mtp-shadow);
    display:          flex;
    flex-direction:   column;
    overflow:         hidden;
    color:            var(--mtp-text);
    max-width:        780px;
    margin:           0 auto;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.mtp-widget-header {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          12px 16px;
    background:       var(--mtp-bg-secondary);
    border-bottom:    1px solid var(--mtp-border);
    flex-shrink:      0;
}

.mtp-widget-title {
    font-size:    15px;
    font-weight:  600;
    display:      flex;
    align-items:  center;
    gap:          8px;
    color:        var(--mtp-text);
}

.mtp-icon {
    font-size: 18px;
}

/* ── Agent Tabs ─────────────────────────────────────────────────────────── */

.mtp-agent-tabs {
    display:       flex;
    gap:           var(--mtp-space-1);
    overflow-x:    auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.mtp-agent-tabs::-webkit-scrollbar { display: none; }

.mtp-agent-tab {
    display:        flex;
    align-items:    center;
    gap:            var(--mtp-space-1);
    padding:        6px 12px;
    border-radius:  var(--mtp-radius-full);
    border:         none;
    background:     var(--mtp-surface-3);
    color:          var(--mtp-text-2);
    font:           var(--mtp-text-label);
    cursor:         pointer;
    white-space:    nowrap;
    transition:     all var(--mtp-duration-base) ease;
    min-height:     32px;
    font-family:    var(--mtp-font-body);
}

.mtp-agent-tab:hover {
    background: var(--mtp-border);
    color:      var(--mtp-text);
}

.mtp-agent-tab.mtp-active {
    background: var(--agent-accent, var(--mtp-primary));
    color:      var(--mtp-text-inverse);
    font-weight: 600;
}

.mtp-agent-tab-label { pointer-events: none; }

/* ── Messages Container ─────────────────────────────────────────────────── */

.mtp-messages {
    flex:       1;
    overflow-y: auto;
    padding:    16px;
    display:    flex;
    flex-direction: column;
    gap:        16px;
    scroll-behavior: smooth;
}

/* ── Message Bubbles ────────────────────────────────────────────────────── */

.mtp-message {
    display:    flex;
    gap:        10px;
    max-width:  100%;
}

.mtp-message--user {
    flex-direction: row-reverse;
}

.mtp-message-avatar {
    width:          34px;
    height:         34px;
    border-radius:  50%;
    background:     var(--mtp-primary);
    color:          white;
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      16px;
    flex-shrink:    0;
    align-self:     flex-start;
}

.mtp-message--user .mtp-message-avatar {
    background: var(--mtp-bg-tertiary);
    color:      var(--mtp-text);
    font-size:  13px;
}

.mtp-message-content {
    background:   var(--mtp-surface-2);
    border-radius: 18px;
    padding:      12px 16px;
    font:         var(--mtp-text-body);
    color:        var(--mtp-text);
    max-width:    80%;
    word-break:   break-word;
    animation:    mtp-message-in var(--mtp-duration-moderate) var(--mtp-ease-decelerate) both;
}

.mtp-message--user .mtp-message-content {
    background:   var(--mtp-primary);
    color:        var(--mtp-text-inverse);
    border-radius: 18px 18px 4px 18px;
    max-width:    72%;
}

.mtp-message--assistant .mtp-message-content {
    border-radius: 18px 18px 18px 4px;
}

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

/* Markdown-style content within assistant messages */
.mtp-message-content p      { margin: 0 0 8px; }
.mtp-message-content p:last-child { margin-bottom: 0; }
.mtp-message-content ul,
.mtp-message-content ol     { margin: 6px 0; padding-left: 20px; }
.mtp-message-content li     { margin: 2px 0; }
.mtp-message-content strong { font-weight: 600; }
.mtp-message-content em     { font-style: italic; }
.mtp-message-content code   { background: var(--mtp-bg-tertiary); padding: 1px 4px; border-radius: 3px; font-size: 12px; font-family: monospace; }

/* ── Place Hotlinks ─────────────────────────────────────────────────────── */

.mtp-place-link {
    color:           var(--mtp-accent);
    text-decoration: underline;
    cursor:          pointer;
    font-weight:     500;
}

.mtp-place-link:hover {
    color: var(--mtp-primary);
}

/* ── "Add to Itinerary" Button in Messages ─────────────────────────────── */

.mtp-itinerary-prompt {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--mtp-border);
}

.mtp-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--mtp-space-2);
    padding:       10px 20px;
    border-radius: var(--mtp-radius-md);
    font:          var(--mtp-text-btn);
    border:        none;
    cursor:        pointer;
    transition:    background var(--mtp-duration-base) ease, transform 0.1s ease;
    font-family:   var(--mtp-font-body);
    min-height:    44px;
}

.mtp-btn--primary {
    background: var(--mtp-primary);
    color:      var(--mtp-text-inverse);
}

.mtp-btn--primary:hover         { background: var(--mtp-primary-dark); }
.mtp-btn--primary:active        { transform: scale(0.98); }
.mtp-btn--primary:focus-visible { outline: none; box-shadow: var(--mtp-shadow-focus); }

.mtp-btn--secondary {
    background: var(--mtp-surface-3);
    color:      var(--mtp-text);
    border:     1px solid var(--mtp-border);
}

.mtp-btn--secondary:hover { background: var(--mtp-border); }

.mtp-btn:disabled {
    opacity: 0.5;
    cursor:  not-allowed;
}

/* ── Typing Indicator ───────────────────────────────────────────────────── */

.mtp-typing-indicator {
    display:     flex;
    gap:         6px;
    padding:     12px 16px;
    align-items: center;
}

.mtp-typing-indicator span {
    width:         6px;
    height:        6px;
    background:    var(--mtp-text-muted);
    border-radius: 50%;
    animation:     mtp-typing-pulse 600ms ease-in-out infinite;
}

.mtp-typing-indicator span:nth-child(1) { animation-delay: 0ms; }
.mtp-typing-indicator span:nth-child(2) { animation-delay: 150ms; }
.mtp-typing-indicator span:nth-child(3) { animation-delay: 300ms; }

@keyframes mtp-typing-pulse {
    0%, 60%, 100% { transform: scale(1); opacity: 0.4; }
    30%            { transform: scale(1.3); opacity: 1; }
}

/* ── Error Banner ───────────────────────────────────────────────────────── */

.mtp-error-banner {
    margin:        8px 16px;
    padding:       10px 14px;
    background:    var(--mtp-error-bg);
    color:         var(--mtp-error);
    border-radius: var(--mtp-radius-sm);
    font-size:     13px;
    border:        1px solid var(--mtp-error);
}

/* ── Input Area ─────────────────────────────────────────────────────────── */

.mtp-input-area {
    padding:       12px 16px;
    background:    var(--mtp-bg-secondary);
    border-top:    1px solid var(--mtp-border);
    flex-shrink:   0;
}

.mtp-chat-form {
    display:       flex;
    gap:           8px;
    align-items:   flex-end;
}

.mtp-chat-input {
    flex:          1;
    resize:        none;
    border:        1.5px solid var(--mtp-border);
    border-radius: var(--mtp-radius-xl);
    padding:       10px 48px 10px 16px;
    font:          var(--mtp-text-body);
    background:    var(--mtp-surface);
    color:         var(--mtp-text);
    font-family:   var(--mtp-font-body);
    transition:    border-color var(--mtp-duration-base) ease;
    max-height:    120px;
    min-height:    44px;
    overflow-y:    auto;
    outline:       none;
}

.mtp-chat-input:focus {
    border-color: var(--mtp-primary);
    box-shadow:   0 0 0 3px rgba(15,111,255,0.15);
}

.mtp-chat-input::placeholder {
    color: var(--mtp-text-muted);
}

.mtp-send-btn {
    width:         44px;
    height:        44px;
    border-radius: var(--mtp-radius-md);
    background:    var(--mtp-primary);
    color:         var(--mtp-text-inverse);
    border:        none;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    transition:    background var(--mtp-duration-base) ease, transform 0.1s ease;
}

.mtp-send-btn:hover         { background: var(--mtp-primary-dark); }
.mtp-send-btn:active        { transform: scale(0.96); }
.mtp-send-btn:focus-visible { outline: none; box-shadow: var(--mtp-shadow-focus); }
.mtp-send-btn:disabled      { background: var(--mtp-border); cursor: not-allowed; }

.mtp-input-footer {
    display:         flex;
    justify-content: space-between;
    padding:         4px 2px 0;
}

.mtp-char-count,
.mtp-powered-by {
    font-size: 11px;
    color:     var(--mtp-text-muted);
}

/* ── Itinerary Modal ────────────────────────────────────────────────────── */

.mtp-itinerary-modal {
    position:   absolute;
    inset:      0;
    background: rgba(0,0,0,0.6);
    display:    flex;
    align-items: center;
    justify-content: center;
    z-index:    100;
    border-radius: var(--mtp-radius);
}

.mtp-itinerary-modal-inner {
    background:    var(--mtp-bg);
    border-radius: var(--mtp-radius);
    width:         min(600px, calc(100% - 32px));
    max-height:    80vh;
    display:       flex;
    flex-direction: column;
    box-shadow:    var(--mtp-shadow-lg);
    overflow:      hidden;
}

.mtp-itinerary-modal-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         14px 16px;
    border-bottom:   1px solid var(--mtp-border);
    flex-shrink:     0;
}

.mtp-itinerary-modal-title {
    margin:      0;
    font-size:   16px;
    font-weight: 600;
    color:       var(--mtp-text);
}

.mtp-modal-close {
    background: none;
    border:     none;
    font-size:  20px;
    cursor:     pointer;
    color:      var(--mtp-text-muted);
    padding:    2px 6px;
    border-radius: var(--mtp-radius-xs);
    line-height: 1;
}

.mtp-modal-close:hover { color: var(--mtp-text); background: var(--mtp-bg-tertiary); }

.mtp-itinerary-preview {
    overflow-y: auto;
    padding:    16px;
    flex:       1;
}

.mtp-itinerary-modal-footer {
    padding:        12px 16px;
    border-top:     1px solid var(--mtp-border);
    display:        flex;
    justify-content: space-between;
    align-items:    center;
    flex-wrap:      wrap;
    gap:            10px;
    flex-shrink:    0;
}

.mtp-import-mode-label {
    font-size: 13px;
    color:     var(--mtp-text-muted);
    display:   flex;
    align-items: center;
    gap:       8px;
}

.mtp-import-mode-select {
    font-size:     13px;
    border:        1px solid var(--mtp-border);
    border-radius: var(--mtp-radius-xs);
    padding:       4px 8px;
    background:    var(--mtp-bg);
    color:         var(--mtp-text);
    cursor:        pointer;
}

.mtp-itinerary-actions {
    display: flex;
    gap:     8px;
}

/* ── Itinerary Day Preview (in modal) ───────────────────────────────────── */

.mtp-day-preview {
    margin-bottom: 16px;
}

.mtp-day-preview-header {
    font-size:   13px;
    font-weight: 700;
    color:       var(--mtp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.mtp-item-preview {
    display:       flex;
    gap:           10px;
    padding:       8px 10px;
    background:    var(--mtp-bg-secondary);
    border-radius: var(--mtp-radius-sm);
    margin-bottom: 4px;
    font-size:     13px;
}

.mtp-item-preview-icon {
    font-size: 15px;
    width:     20px;
    flex-shrink: 0;
}

.mtp-item-preview-name {
    font-weight: 600;
    color:       var(--mtp-text);
}

.mtp-item-preview-meta {
    color:   var(--mtp-text-muted);
    font-size: 12px;
}

/* ── Welcome message styling ────────────────────────────────────────────── */

.mtp-welcome .mtp-message-content ul {
    list-style: none;
    padding:    0;
}

.mtp-welcome .mtp-message-content li::before {
    content: "→ ";
    color:   var(--mtp-accent);
    font-weight: 600;
}

/* ── Utility ────────────────────────────────────────────────────────────── */

.mtp-hidden { display: none !important; }

.mtp-planner-widget * { box-sizing: border-box; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Compact (phones) */
@media (max-width: 480px) {
    .mtp-widget-header         { padding: var(--mtp-space-2) var(--mtp-space-3); }
    .mtp-messages              { padding: var(--mtp-space-3); }
    .mtp-input-area            { padding: var(--mtp-space-2) var(--mtp-space-3); }
    .mtp-message-content       { font: var(--mtp-text-body-sm); max-width: 88%; }
    .mtp-message--user .mtp-message-content { max-width: 80%; }
    .mtp-empty-state__illustration { width: 120px; }
}

/* Wide (tablets / half-screen) */
@media (min-width: 768px) {
    .mtp-planner-widget { max-width: 880px; }
    .mtp-message-content { max-width: 65%; }
}

/* Extra-wide (full desktop) */
@media (min-width: 1024px) {
    .mtp-planner-widget { max-width: 960px; }
}

/* ── Header actions (SIWA + sync indicator) ─────────────────────────────── */

.mtp-header-actions {
    margin-left: auto;
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-shrink: 0;
}

/* Sign in with Apple button */
.mtp-siwa-btn {
    display:         flex;
    align-items:     center;
    gap:             6px;
    padding:         5px 12px;
    background:      #000;
    color:           #fff;
    border:          none;
    border-radius:   8px;
    font-size:       12.5px;
    font-weight:     500;
    cursor:          pointer;
    white-space:     nowrap;
    transition:      background 0.15s;
    font-family:     -apple-system, system-ui, sans-serif;
}

.mtp-siwa-btn:hover   { background: #1a1a1a; }
.mtp-siwa-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.mtp-dark .mtp-siwa-btn {
    background: #fff;
    color:      #000;
}

.mtp-dark .mtp-siwa-btn:hover { background: #f0f0f0; }

/* CloudKit sync status button */
.mtp-sync-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           28px;
    height:          28px;
    background:      transparent;
    border:          1px solid var(--mtp-border);
    border-radius:   50%;
    cursor:          pointer;
    transition:      background 0.15s, border-color 0.15s;
    padding:         0;
}

.mtp-sync-btn:hover { background: var(--mtp-surface-hover); }

.mtp-sync-icon {
    font-size:  13px;
    line-height: 1;
    display:    block;
    transition: color 0.2s;
}

.mtp-sync-ok      { color: #10b981; }
.mtp-sync-pending { color: #f59e0b; }
.mtp-sync-error   { color: #ef4444; }
.mtp-sync-off     { color: var(--mtp-text-muted); }

.mtp-sync-syncing {
    animation: mtpSpin 1s linear infinite;
    display:   inline-block;
}

@keyframes mtpSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Fade-in animation (shared) */
@keyframes mtpFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── SVG Icon Utilities ────────────────────────────────────────────────── */

.mtp-icon-sm  { width: 16px; height: 16px; flex-shrink: 0; }
.mtp-icon-md  { width: 20px; height: 20px; flex-shrink: 0; }
.mtp-icon-lg  { width: 24px; height: 24px; flex-shrink: 0; }
.mtp-icon-xl  { width: 32px; height: 32px; flex-shrink: 0; }

/* ── Empty State Component ─────────────────────────────────────────────── */

.mtp-empty-state {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    text-align:     center;
    gap:            var(--mtp-space-4);
    padding:        var(--mtp-space-12) var(--mtp-space-4);
    color:          var(--mtp-text-2);
}

.mtp-empty-state__illustration {
    width:   160px;
    height:  auto;
    opacity: 0.9;
}

.mtp-empty-state__title {
    font:  var(--mtp-text-h3);
    color: var(--mtp-text);
    margin: 0;
}

.mtp-empty-state__description {
    font:      var(--mtp-text-body-sm);
    max-width: 300px;
    color:     var(--mtp-text-muted);
    margin:    0;
}

.mtp-empty-state__action {
    margin-top: var(--mtp-space-2);
}

/* ── Agent Avatar ──────────────────────────────────────────────────────── */

.mtp-agent-avatar {
    width:          40px;
    height:         40px;
    border-radius:  var(--mtp-radius-lg);
    display:        flex;
    align-items:    center;
    justify-content: center;
    flex-shrink:    0;
    background:     var(--agent-accent, var(--mtp-primary));
    color:          var(--mtp-text-inverse);
}

.mtp-agent-avatar svg { width: 20px; height: 20px; }

/* ── Focus Visible ─────────────────────────────────────────────────────── */

.mtp-planner-widget :focus-visible {
    outline:        none;
    box-shadow:     var(--mtp-shadow-focus);
    border-radius:  var(--mtp-radius-sm);
}

/* ── Reduced Motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .mtp-planner-widget *,
    .mtp-planner-widget *::before,
    .mtp-planner-widget *::after {
        animation-duration:  0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior:     auto !important;
    }
}