/* ============================================================================
   THE RIGHT-HAND PANEL — Sarisara design system
   ----------------------------------------------------------------------------
   Chiran, 30 August 2026:

     > "We have updated all the sections on the left side, but not the right.
     >  The right side contains the chat area... we haven't changed a single
     >  thing there. The whole message body area is dark grey, and the messages
     >  also have grey backgrounds, and they are centre-aligned. They are not
     >  categorised... Rebrand the entire right side according to the new styling
     >  like the inquiry accordions and the trace page. This message-sending
     >  button is still green — it should be our brand colour, violet."

   The panel was the last surface still wearing the 2024 chat look: a grey
   canvas, gold-and-grey bubbles, a green send button. Nothing in it shared a
   token with the itinerary beside it.

   Additive layer, loaded AFTER inquiry-public.css so these win. !important
   throughout because the file it overrides uses !important on every rule.

   Tokens: assets/css/itinerary-ds-reskin.css (--sr-*)
   ============================================================================ */

body.inquiry-page .inquiry-messaging-panel {
    --sr-primary: #7700FF;
    --sr-primary-light: #F0E5FF;
    --sr-primary-ultra: #F8F4FF;
    --sr-primary-dark: #5C00CC;
    --sr-green: #30B300;
    --sr-green-light: #E6F9E0;
    --sr-green-dark: #228A00;
    --sr-gold: #FFB700;
    --sr-gold-light: #FFF5D6;
    --sr-gold-dark: #8A6300;
    --sr-red: #FF0A1F;
    --sr-red-light: #FFE9EB;
    --sr-red-dark: #C1071A;
    --sr-bg: #F8F8F8;
    --sr-surface: #FFFFFF;
    --sr-border: #E8E8EE;
    --sr-border-2: #D8D8E2;
    --sr-text: #090902;
    --sr-text-2: #5A5A6E;
    --sr-text-3: #8E8EA0;
    --sr-r-sm: 8px;
    --sr-r-md: 12px;
    --sr-r-lg: 16px;
    --sr-r-pill: 999px;

    background: var(--sr-surface) !important;
    border: 1px solid var(--sr-border) !important;
    border-radius: var(--sr-r-lg) !important;
    box-shadow: 0 1px 2px rgba(9,9,2,.04), 0 1px 3px rgba(9,9,2,.06) !important;
    overflow: hidden !important;
    font-family: 'Google Sans', system-ui, -apple-system, sans-serif !important;
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */
body.inquiry-page .inquiry-chat-header {
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--sr-border) !important;
    background: var(--sr-surface) !important;
}
body.inquiry-page .chat-partner-info h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--sr-text) !important;
    letter-spacing: -.01em !important;
}
body.inquiry-page .chat-status {
    font-size: 12.5px !important;
    color: var(--sr-text-3) !important;
}
body.inquiry-page .online-indicator { background: var(--sr-green) !important; }

/* ---------------------------------------------------------------------------
   The two tabs
   --------------------------------------------------------------------------- */
body.inquiry-page .inq-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 10px;
    background: var(--sr-bg);
    border-bottom: 1px solid var(--sr-border);
    flex-shrink: 0;
}

body.inquiry-page .inq-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    justify-content: center;
    padding: 9px 12px !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--sr-r-sm) !important;
    font-family: inherit;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--sr-text-3) !important;
    cursor: pointer;
    line-height: 1.3 !important;
    height: auto !important;
    box-shadow: none !important;
    transition: background .15s, color .15s;
}
body.inquiry-page .inq-tab:hover { color: var(--sr-primary) !important; }
body.inquiry-page .inq-tab.is-on {
    background: var(--sr-surface) !important;
    color: var(--sr-primary) !important;
    box-shadow: 0 1px 2px rgba(9,9,2,.06) !important;
}
body.inquiry-page .inq-tab .svgico { width: 15px; height: 15px; flex: 0 0 auto; }
body.inquiry-page .inq-tab__n {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--sr-r-pill);
    background: var(--sr-primary-light);
    color: var(--sr-primary-dark);
}

/* ---------------------------------------------------------------------------
   The conversation
   --------------------------------------------------------------------------- */
/* The base pins these three with `html body.inquiry-page div…` selectors near
   the end of inquiry-public.css (an older override of an older override), so
   matching !important is not enough — the specificity has to match too. */
html body.inquiry-page .inquiry-messaging-panel .inquiry-conversation,
html body.inquiry-page div.inquiry-conversation {
    padding: 18px !important;
    gap: 10px !important;
    background: var(--sr-bg) !important;
}

/* The base sets `display: flex !important` on the conversation, which beats the
   HTML `hidden` attribute — so switching to the Activity tab left the empty
   chat state sitting on top of the trail. */
html body.inquiry-page .inquiry-conversation[hidden],
html body.inquiry-page div.inquiry-conversation[hidden] { display: none !important; }

/* Own messages: violet, the brand's voice. Was gold-on-black. */
html body.inquiry-page .inquiry-message.message-own .message-bubble,
html body.inquiry-page div.inquiry-message.message-own div.message-bubble {
    background: var(--sr-primary) !important;
    color: #fff !important;
    border-radius: 14px 14px 4px 14px !important;
    padding: 10px 14px !important;
    box-shadow: none !important;
}

/* Theirs: white on the grey canvas, so the two are told apart by side AND
   colour rather than two shades of the same grey. */
html body.inquiry-page .inquiry-message.message-other .message-bubble,
html body.inquiry-page div.inquiry-message.message-other div.message-bubble,
html body.inquiry-page .inquiry-message.message-traveler .message-bubble,
html body.inquiry-page .inquiry-message.message-guide .message-bubble {
    background: var(--sr-surface) !important;
    color: var(--sr-text) !important;
    border: 1px solid var(--sr-border) !important;
    border-radius: 14px 14px 14px 4px !important;
    padding: 10px 14px !important;
    box-shadow: none !important;
}

body.inquiry-page .message-bubble {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
}

body.inquiry-page .message-time,
body.inquiry-page .message-meta { font-size: 11.5px !important; color: var(--sr-text-3) !important; }
body.inquiry-page .inquiry-message.message-own .message-time { color: var(--sr-text-3) !important; }

body.inquiry-page .message-date-separator span {
    background: var(--sr-surface) !important;
    border: 1px solid var(--sr-border) !important;
    border-radius: var(--sr-r-pill) !important;
    color: var(--sr-text-3) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    padding: 3px 12px !important;
}

body.inquiry-page .read-receipt { color: var(--sr-primary) !important; }

/* ---------------------------------------------------------------------------
   The Activity trail
   --------------------------------------------------------------------------- */
body.inquiry-page .inq-activity {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    background: var(--sr-bg);
    scrollbar-width: thin;
    scrollbar-color: var(--sr-border-2) transparent;
}
body.inquiry-page .inq-activity[hidden] { display: none; }
body.inquiry-page .inq-activity::-webkit-scrollbar { width: 6px; }
body.inquiry-page .inq-activity::-webkit-scrollbar-thumb { background: var(--sr-border-2); border-radius: 3px; }

/* Day heading — the same device the chat uses, so the two tabs feel like one
   place (Chiran: "like WhatsApp"). */
body.inquiry-page .inq-act-day__label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px 0 12px;
}
body.inquiry-page .inq-act-day + .inq-act-day .inq-act-day__label { margin-top: 20px; }
body.inquiry-page .inq-act-day__label span {
    background: var(--sr-surface);
    border: 1px solid var(--sr-border);
    border-radius: var(--sr-r-pill);
    padding: 3px 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--sr-text-3);
}

body.inquiry-page .inq-act {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 13px;
    background: var(--sr-surface);
    border: 1px solid var(--sr-border);
    border-radius: var(--sr-r-md);
    margin-bottom: 8px;
}

body.inquiry-page .inq-act__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--sr-bg);
    color: var(--sr-text-3);
}
body.inquiry-page .inq-act__ico .svgico { width: 15px; height: 15px; }

/* The tone says what KIND of change it was, at a glance — money, a status
   step, something that moved, something that needs attention. */
body.inquiry-page .inq-act--change .inq-act__ico { background: var(--sr-primary-light); color: var(--sr-primary); }
body.inquiry-page .inq-act--status .inq-act__ico { background: var(--sr-bg);           color: var(--sr-text-2); }
body.inquiry-page .inq-act--money  .inq-act__ico { background: var(--sr-green-light);  color: var(--sr-green-dark); }
body.inquiry-page .inq-act--warn   .inq-act__ico { background: var(--sr-red-light);    color: var(--sr-red-dark); }
body.inquiry-page .inq-act--warn { border-color: #F7C4C9; }

body.inquiry-page .inq-act__body { flex: 1 1 auto; min-width: 0; }

body.inquiry-page .inq-act__title {
    margin: 0 !important;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sr-text);
    line-height: 1.4;
}
body.inquiry-page .inq-act__detail {
    margin: 2px 0 0 !important;
    font-size: 12.5px;
    color: var(--sr-primary-dark);
    font-weight: 600;
    line-height: 1.45;
}
body.inquiry-page .inq-act--status .inq-act__detail,
body.inquiry-page .inq-act--money .inq-act__detail { color: var(--sr-text-2); font-weight: 500; }

/* Who did it. The whole reason this trail exists. */
body.inquiry-page .inq-act__who {
    margin: 3px 0 0 !important;
    font-size: 11.5px;
    color: var(--sr-text-3);
    line-height: 1.45;
}

body.inquiry-page .inq-act__at {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--sr-text-3);
    font-variant-numeric: tabular-nums;
    padding-top: 1px;
}

body.inquiry-page .inq-activity__empty {
    text-align: center;
    padding: 44px 20px;
    color: var(--sr-text-3);
}
body.inquiry-page .inq-activity__empty .svgico {
    width: 30px; height: 30px;
    color: var(--sr-border-2);
    margin-bottom: 12px;
}
body.inquiry-page .inq-activity__empty h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--sr-text-2);
    margin: 0 0 6px;
}
body.inquiry-page .inq-activity__empty p {
    font-size: 13px;
    line-height: 1.55;
    margin: 0 auto;
    max-width: 32ch;
}

/* ---------------------------------------------------------------------------
   The composer
   --------------------------------------------------------------------------- */
body.inquiry-page .inquiry-composer {
    background: var(--sr-surface) !important;
    border-top: 1px solid var(--sr-border) !important;
    padding: 12px 14px !important;
}
body.inquiry-page .inquiry-composer[hidden] { display: none !important; }

body.inquiry-page .inquiry-composer textarea {
    border: 1.5px solid var(--sr-border-2) !important;
    border-radius: var(--sr-r-md) !important;
    background: var(--sr-bg) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    color: var(--sr-text) !important;
    padding: 10px 13px !important;
}
body.inquiry-page .inquiry-composer textarea:focus {
    outline: none !important;
    border-color: var(--sr-primary) !important;
    background: var(--sr-surface) !important;
    box-shadow: 0 0 0 3px rgba(119,0,255,.10) !important;
}
body.inquiry-page .inquiry-composer textarea::placeholder { color: var(--sr-text-3) !important; }

/* THE SEND BUTTON. Was #00ab45 — a green that belongs to no palette we use. */
body.inquiry-page .btn-send-message {
    background: var(--sr-primary) !important;
    color: #fff !important;
}
body.inquiry-page .btn-send-message:hover { background: var(--sr-primary-dark) !important; }
body.inquiry-page .btn-send-message:disabled { background: var(--sr-border-2) !important; }

/* Admin "send to" pills — Chiran's own values, 31 Aug 2026. */
.admin-mention-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0px 14px;
    border: 1.5px solid #e3d6ff;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #4a4a63;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    user-select: none;
}
.admin-mention-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px 0;
    margin-bottom: 20px;
}
body.inquiry-page .composer-input-row {
    display: flex;
    align-items: center;
    gap: 12px !important;
    background: #f5f5f5 !important;
    border-radius: 24px !important;
    padding: 8px 16px !important;
}

body.inquiry-page .admin-mention-option.is-selected .admin-mention-label,
body.inquiry-page .admin-mention-option.is-selected {
    background: var(--sr-primary-light) !important;
    color: var(--sr-primary-dark) !important;
    border-color: var(--sr-primary) !important;
}

body.inquiry-page .suggestion-chip {
    background: var(--sr-surface) !important;
    border: 1.5px solid var(--sr-border-2) !important;
    border-radius: var(--sr-r-pill) !important;
    color: var(--sr-text-2) !important;
    font-family: inherit !important;
    font-size: 12.5px !important;
    padding: 7px 14px !important;
}
body.inquiry-page .suggestion-chip:hover {
    border-color: var(--sr-primary) !important;
    color: var(--sr-primary) !important;
    background: var(--sr-primary-ultra) !important;
}

body.inquiry-page .inquiry-empty-state .empty-state-icon,
body.inquiry-page .inquiry-empty-state i { color: var(--sr-primary) !important; }
body.inquiry-page .inquiry-empty-state h4 { color: var(--sr-text) !important; }
body.inquiry-page .inquiry-empty-state p { color: var(--sr-text-2) !important; }

@media (max-width: 991px) {
    body.inquiry-page .inq-tab span { font-size: 13px; }
}

/* THE CHAT ICON IS OURS NOW.
   Chiran, 4 September 2026, on the two FontAwesome bubbles sitting above "Say
   hello to your guide": "I am not quite like the chat icon, the two bubbles...
   find out in our Sarisara system what is the icon that we have used for this
   chat conversation." It is sara-chat — one bubble carrying two lines of what
   was said — and it is now drawn on both sides of the conversation, because the
   traveller and the guide read the same panel. */
body.inquiry-page .empty-state-icon .svgico {
    width: 34px !important;
    height: 34px !important;
    stroke-width: 1.3 !important;
    color: var(--sr-primary) !important;
}