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

/* ════════════════════════════════════════
   THEME VARIABLES — edit these to restyle
   Override from JS/API: container.style.setProperty('--widg-*', …) on #widgContainer
   ════════════════════════════════════════ */
.widg-container {
    --widg-font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;

    /* colours (primary-dark / secondary-dark match base when themed from API) */
    --widg-primary:        #0f3460;   /* main brand colour  */
    --widg-primary-dark:   #0a2444;   /* defaults: hover; API mirrors --widg-primary */
    --widg-secondary:      #C9A84C;   /* accent colour      */
    --widg-secondary-dark: #92741e;   /* defaults: accent text; API mirrors --widg-secondary */
    --widg-on-primary:     #ffffff;   /* text on primary bg */

    /* logos (raster/SVG URLs — resolved relative to the page loading the widget) */
    --widg-logo-header-url:    url('/logo-jpn.png');
    --widg-logo-launcher-url:  url('/logo-jpn.png');

    /* sizing — change these to scale the whole widget */
    --widg-width:     500px;          /* chat window width      */
    --widg-height:    740px;          /* chat window height     */
    --widg-font-size: 14px;           /* base font size — all text scales from this */
    --widg-bottom:    28px;           /* distance from bottom   */
    --widg-right:     28px;           /* distance from right    */
    --widg-viewport-inset: 16px;       /* min gap from viewport edges when sizing */
}

.widg-container *,.widg-container *::before,.widg-container *::after { box-sizing: border-box; }

/* ── ROOT — variable host only, no layout ── */
.widg-container {
    font-family: var(--widg-font-family);
    font-size: var(--widg-font-size);
}

.widg-btn {
    position: fixed;
    bottom: var(--widg-bottom);
    right: var(--widg-right);
    left: auto;
    z-index: 9999;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0,0,0,.3);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, opacity .2s;
    outline: none;
}

.widg-btn:hover { transform: scale(1.08); box-shadow: 0 8px 24px rgba(0,0,0,.35); }

/* White disc above pulse; ripple only visible outside this circle */
.widg-btn-face {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.widg-pulse {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 50%;
    background: var(--widg-primary);
    opacity: 0;
    pointer-events: none;
    /* Outward-only ripple under .widg-btn-face */
    animation: widg-pulse-anim 2.85s infinite;
}

@keyframes widg-pulse-anim {
    0% {
        transform: scale(1);
        opacity: 0.4;
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    36% {
        transform: scale(1.58);
        opacity: 0;
    }
    36.01%,
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.widg-avatar { position: relative; display: flex; align-items: center; justify-content: center; }

.widg-launcher-logo-mark {
    width: 40px;
    height: 40px;
    background-image: var(--widg-logo-launcher-url);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}
.widg-close-icon {
    display: none;
    position: absolute;
    color: var(--widg-primary);
    z-index: 2;
    font-style: normal;
    line-height: 0;
}

.widg-btn.widg-open {
    opacity: 0;
    transform: scale(0);
    pointer-events: none;
}

/* ── CHAT WINDOW ── */
.widg-window {
    position: fixed;
    bottom: var(--widg-bottom);
    right: var(--widg-right);
    left: auto;
    z-index: 9998;
    width: min(var(--widg-width), calc(100vw - var(--widg-right) - var(--widg-viewport-inset)));
    height: min(var(--widg-height), calc(100vh - var(--widg-bottom) - var(--widg-viewport-inset)));
    max-width: 100vw;
    max-height: 100vh;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 16px 48px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    font-size: 1em;
    /* grow-from-button animation */
    transform-origin: bottom right;
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
    transition:
        transform .35s cubic-bezier(.34,1.4,.64,1),
        opacity   .25s ease;
}

.widg-window.widg-open {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* ── HEADER ── */
.widg-header {
    border-bottom-right-radius: 18px;
    border-bottom-left-radius: 18px;
    background: var(--widg-primary);
    padding: 12px 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    flex-shrink: 0;
}

.widg-header-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.widg-header-row-actions {
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
}

.widg-header-leading-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.widg-header-row-actions .widg-header-actions {
    margin-left: auto;
}

.widg-header-row-brand {
    align-items: center;
}

.widg-header-row-brand .widg-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.widg-logo {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 5px;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.widg-header-logo-mark {
    width: 100%;
    height: 100%;
    background-image: var(--widg-logo-header-url);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}

.widg-info { flex: 1; min-width: 0; }
.widg-name   { font-size: 1.2em; font-weight: 700; color: var(--widg-on-primary); min-width: 0; line-height: 1.25; }
.widg-module-desc {
    font-size: 0.82em;
    font-weight: 400;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.widg-module-desc[hidden] {
    display: none !important;
}
.widg-name-line {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    min-width: 0;
}
.widg-name-brand {
    flex-shrink: 0;
}
.widg-name-caret {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.82);
    line-height: 0;
}
.widg-name-caret .widg-name-caret-icon {
    width: 1em;
    height: 1em;
    display: block;
}
.widg-name-module {
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.widg-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .78em;
    color: rgba(255,255,255,.75);
    margin-top: 0;
}

.widg-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    flex-shrink: 0;
    position: relative;
}

.widg-status-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #4ade80;
    animation: widg-online-pulse 1.8s ease-in-out infinite;
}

@keyframes widg-online-pulse {
    0%,100% { transform: scale(1);   opacity: .7; }
    50%      { transform: scale(2.2); opacity: 0;  }
}

.widg-status-visual {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.widg-status-online-only {
    display: flex;
    align-items: center;
}

.widg-status-thinking-only {
    display: none;
    align-items: center;
    gap: 2px;
}

.widg-status.widg-status-busy .widg-status-online-only {
    display: none;
}

.widg-status.widg-status-busy .widg-status-thinking-only {
    display: flex;
}

.widg-status-mini-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.78);
    animation: widg-header-mini-bounce 1.15s ease-in-out infinite;
}

.widg-status-mini-dot:nth-child(2) {
    animation-delay: 0.15s;
}

.widg-status-mini-dot:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes widg-header-mini-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30%          { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
    .widg-status-mini-dot {
        animation: none;
        opacity: 0.9;
    }
}

.widg-header-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin: 0; padding: 0; }

/* Header icon buttons: shared layout */
.widg-header .widg-menu-btn,
.widg-header-leading-actions button,
.widg-header-actions button {
    flex-shrink: 0;
    cursor: pointer;
    transition: background .2s;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* Hamburger + the four actions right of title: ghost on primary (not red — reserved for close-new) */
.widg-header .widg-menu-btn,
.widg-header-leading-actions button:not(.widg-close-new),
.widg-header-actions button:not(.widg-close-new) {
    background: none;
    border: none;
    color: var(--widg-on-primary);
    border-radius: 7px;
    padding: 4px;
    width: auto;
    height: auto;
}

.widg-header .widg-menu-btn:hover,
.widg-header-leading-actions button:not(.widg-close-new):hover,
.widg-header-actions button:not(.widg-close-new):hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Close + new chat: red destructive control */
.widg-header-actions .widg-close-new {
    background: rgba(220, 38, 38, 0.75) !important;
    border: none !important;
    border-radius: 7px !important;
    color: var(--widg-on-primary) !important;
    padding: 4px !important;
    width: auto !important;
    height: auto !important;
}

.widg-header-actions .widg-close-new:hover {
    background: rgba(220, 38, 38, 0.92) !important;
}

/* Top-row header icons: compact tap target */
.widg-header .widg-menu-btn svg,
.widg-header-leading-actions button svg,
.widg-header-actions button svg {
    display: block;
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}

.widg-menu-btn { flex-shrink: 0; }

/* ── MODULE LAUNCHER ── */
.widg-launcher {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.widg-launcher.widg-hidden { display: none; }

.widg-launcher-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
}

.widg-launcher-title {
    font-size: 1.06em;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.3;
}

/* Match header / trash icon control: 6px padding, 8px radius, 22×22 SVG */
.widg-back-btn {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: background .2s, color .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}

.widg-back-btn:hover { background: #f3f4f6; color: #1a1a2e; }

.widg-back-btn svg {
    display: block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.widg-module-grid {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.widg-module-grid::-webkit-scrollbar { width: 4px; }
.widg-module-grid::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 2px; }

.widg-module-card {
    background: #f8fafc;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: border-color .2s, box-shadow .2s;
}

.widg-module-card:hover { border-color: var(--widg-secondary); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.widg-module-card-body { display: flex; align-items: center; gap: 10px; }

.widg-module-card-icon {
    font-size: 26px;
    line-height: 1;
    flex-shrink: 0;
}
.widg-module-card-name { font-size: 1.02em; font-weight: 700; color: #1a1a2e; }
.widg-module-card-desc { font-size: 0.86em; color: #6b7280; margin-top: 2px; line-height: 1.45; }

.widg-module-open-btn {
    background: var(--widg-primary);
    color: var(--widg-on-primary);
    border: none;
    border-radius: 7px;
    padding: 7px 16px;
    font-size: 0.92em;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
    flex-shrink: 0;
    font-family: inherit;
}

.widg-module-open-btn:hover { background: var(--widg-primary-dark); }

/* ── CONVERSATION ── */
.widg-conversation {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.widg-conversation.widg-hidden { display: none; }

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

.widg-messages::-webkit-scrollbar { width: 4px; }
.widg-messages::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 2px; }

/* ── MESSAGES ── */
.widg-message { display: flex; flex-direction: column; max-width: 84%; }
.widg-message.widg-bot  { align-self: flex-start; }
.widg-message.widg-user { align-self: flex-end; }

.widg-bubble {
    font-size: .93em;
    line-height: 1.6;
    padding: 10px 13px;
    border-radius: 14px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.widg-bubble.widg-bubble-enter {
    animation: widg-bubble-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: bottom left;
}

.widg-message.widg-user .widg-bubble.widg-bubble-enter {
    transform-origin: bottom right;
}

.widg-bubble-main {
    min-width: 0;
}

.widg-message.widg-bot  .widg-bubble {
    background: #f1f5f9;
    color: #1a1a2e;
    border-bottom-left-radius: 4px;
    border: 1.5px solid #e5e7eb;
}
.widg-message.widg-user .widg-bubble { background: var(--widg-primary); color: var(--widg-on-primary); border-bottom-right-radius: 4px; }

.widg-bubble .widg-time {
    align-self: flex-end;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    font-size: .71em;
    line-height: 1.2;
    color: #94a3b8;
    flex-shrink: 0;
}

.widg-message.widg-user .widg-bubble .widg-time {
    align-self: flex-start;
    color: rgba(255, 255, 255, 0.72);
}

.widg-sources { display: none; }

.widg-sources.widg-sources-visible {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.widg-source-link {
    font-size: 0.74em;
    color: var(--widg-primary);
    text-decoration: underline;
    word-break: break-all;
    max-width: 100%;
}

/* ── FEEDBACK ── */
.widg-feedback {
    display: flex;
    gap: 5px;
    margin-top: 6px;
    padding: 0 2px;
}

.widg-feedback-btn {
    background: #f1f5f9;
    border: 1.5px solid #e5e7eb;
    border-radius: 6px;
    padding: 3px 7px;
    font-size: 1em;
    cursor: pointer;
    transition: all .2s;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
}

.widg-feedback-btn svg {
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Icons use fill="currentColor"; default neutral above — green/red only when selected */

.widg-feedback-btn:hover {
    border-color: var(--widg-secondary);
    background: #fef9ee;
    color: #475569;
}

.widg-feedback-btn.widg-selected.widg-feedback-up {
    color: #16a34a;
}

.widg-feedback-btn.widg-selected.widg-down.widg-feedback-down {
    color: #dc2626;
}

.widg-feedback-btn.widg-selected {
    border-color: #16a34a;
    background: #dcfce7;
}

.widg-feedback-btn.widg-selected.widg-down {
    border-color: #dc2626;
    background: #fee2e2;
}

.widg-feedback-btn.widg-copy-btn.widg-copied {
    color: #16a34a;
    border-color: #86efac;
    background: #dcfce7;
}

.widg-feedback-comment {
    display: none;
    margin-top: 6px;
    align-items: center;
    gap: 6px;
}

.widg-feedback-comment.widg-show { display: flex; }

.widg-feedback-success {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #16a34a;
    font-size: 0.86em;
    line-height: 1.35;
    flex: 1;
    min-width: 0;
}

.widg-feedback-success-text {
    min-width: 0;
}

.widg-feedback-sent-check {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: block;
}

.widg-feedback-comment input {
    flex: 1;
    min-width: 0;
    border: 1.5px solid #e5e7eb;
    border-radius: 22px;
    padding: 7px 12px;
    font-size: 0.82em;
    font-family: inherit;
    outline: none;
    transition: border-color .2s, background .2s;
    background: #f8fafc;
    color: #1a1a2e;
}

.widg-feedback-comment input:focus {
    border-color: var(--widg-primary);
    background: #fff;
}

.widg-feedback-send-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--widg-primary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    line-height: 0;
    transition: transform .15s, box-shadow .15s;
    font-family: inherit;
}

.widg-feedback-send-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.widg-feedback-send-btn svg {
    width: 13px;
    height: 13px;
    color: var(--widg-on-primary);
    display: block;
}

/* ── QUICK ACTIONS ── */
.widg-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.widg-quick-action-btn {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: .86em;
    font-weight: 500;
    color: var(--widg-primary);
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    font-family: inherit;
}

.widg-quick-action-btn:hover { background: var(--widg-primary); border-color: var(--widg-primary); color: var(--widg-on-primary); }

/* Quick module chips under welcome + shared pill style */
.widg-module-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
    align-self: flex-start;
    max-width: 100%;
}

.widg-shortcut-btn {
    background: #fff;
    border: 1.5px solid var(--widg-secondary);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: .86em;
    font-weight: 600;
    color: var(--widg-secondary-dark);
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    font-family: inherit;
}

.widg-shortcut-btn:hover { background: var(--widg-secondary); border-color: var(--widg-secondary); color: #fff; }

/* Dashed border only; same sizing as other .widg-shortcut-btn pills */
.widg-module-shortcuts .widg-shortcut-btn.widg-module-quick-view-all {
    border: 1.5px dashed var(--widg-secondary);
}

.widg-module-shortcuts .widg-shortcut-btn.widg-module-quick-view-all:hover {
    border-style: dashed;
}

/* ── TYPING INDICATOR ── */
.widg-typing {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 14px 13px;
    min-height: 44px;
    box-sizing: border-box;
    background: #f1f5f9;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
    width: fit-content;
}

.widg-dot {
    width: 7px;
    height: 7px;
    background: #9ca3af;
    border-radius: 50%;
    animation: widg-typing-bounce 1.2s ease-in-out infinite;
}

.widg-dot:nth-child(2) { animation-delay: .2s; }
.widg-dot:nth-child(3) { animation-delay: .4s; }

@keyframes widg-typing-bounce {
    0%,60%,100% { transform: translateY(0); }
    30%          { transform: translateY(-5px); }
}

@keyframes widg-bubble-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── INPUT ── */
.widg-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #f3f4f6;
    background: #fff;
    flex-shrink: 0;
}

.widg-input input {
    flex: 1;
    border: 1.5px solid #e5e7eb;
    border-radius: 22px;
    padding: 9px 14px;
    font-size: .93em;
    font-family: inherit;
    outline: none;
    transition: border-color .2s;
    background: #f8fafc;
    color: #1a1a2e;
}

.widg-input input:focus { border-color: var(--widg-primary); background: #fff; }

.widg-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--widg-primary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .15s, box-shadow .15s;
}

.widg-send-btn:hover { transform: scale(1.08); box-shadow: 0 3px 10px rgba(0,0,0,.2); }
.widg-send-btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.widg-send-btn svg { width: 16px; height: 16px; color: var(--widg-on-primary); display: block; }

.widg-input input:disabled { background: #f1f5f9; color: #9ca3af; cursor: not-allowed; border-color: #e5e7eb; }

/* ── POWERED BY ── */
.widg-powered-by {
    text-align: center;
    font-size: .75em;
    color: #9ca3af;
    padding: 7px 12px 9px;
    background: transparent;
    border-top: 1px solid #f3f4f6;
    flex-shrink: 0;
    letter-spacing: .01em;
}

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

/* ── HISTORY PANEL (offcanvas) ── */
.widg-history-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
}

.widg-history-overlay.widg-history-open {
    pointer-events: auto;
}

.widg-history-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.widg-history-overlay.widg-history-open .widg-history-backdrop {
    opacity: 1;
}

.widg-history-panel {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(320px, 92%);
    max-width: 400px;
    background: #fff;
    /* Shadow only when open — otherwise it bleeds into the chat while translated off-screen */
    box-shadow: none;
    display: flex;
    flex-direction: column;
    border-right: none;
    transform: translateX(-100%);
    transition:
        transform 0.34s cubic-bezier(0.32, 0.72, 0, 1),
        box-shadow 0.28s ease;
}

.widg-history-overlay.widg-history-open .widg-history-panel {
    transform: translateX(0);
    box-shadow: 8px 0 28px rgba(0, 0, 0, 0.14);
    border-right: 1px solid #e5e7eb;
}

@media (prefers-reduced-motion: reduce) {
    .widg-history-backdrop,
    .widg-history-panel {
        transition-duration: 0.01ms;
    }

    .widg-bubble.widg-bubble-enter {
        animation: none;
    }
}

.widg-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
}

.widg-history-title {
    font-weight: 700;
    font-size: 1.38em;
    color: #1a1a2e;
    line-height: 1.2;
}

/* Match .widg-header icon buttons (4px pad, 7px radius, 19×19 SVG) */
.widg-history-clear {
    font-family: inherit;
    color: #dc2626;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 7px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.widg-history-clear:hover {
    background: #fef2f2;
}

.widg-history-clear svg {
    display: block;
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}

.widg-history-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.widg-history-list::-webkit-scrollbar { width: 4px; }
.widg-history-list::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 2px; }

.widg-history-empty {
    padding: 24px 12px;
    text-align: center;
    font-size: 0.86em;
    color: #9ca3af;
    line-height: 1.45;
}

.widg-history-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px solid #e5e7eb;
    background: #f8fafc;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.widg-history-item:hover {
    border-color: var(--widg-secondary);
    background: #fff;
}

.widg-history-item-active {
    border-color: var(--widg-primary);
    background: #eff6ff;
}

/* Match .widg-bubble / .widg-time so history rows match chat message typography */
.widg-history-item-preview {
    font-size: 0.93em;
    color: #1a1a2e;
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
}

.widg-history-item-time {
    font-size: 0.71em;
    color: #9ca3af;
}