/* =======================================
   Sidebar Panel
   Right-side panel with word stories and
   example sentences. Light theme matching
   the word story Onigiri Chat UI.
   ======================================= */

/* ========== Sidebar Container ========== */
.icon-rail-sidebar {
    position: fixed;
    right: 16px;
    top: 80px;
    max-height: calc(100vh - 160px);
    width: 340px;
    z-index: 900;
    display: none;
    flex-direction: row;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.icon-rail-sidebar.open {
    display: flex;
}

/* 🔧 REFINED: Sidebar content (和の感性 — Section 4)
   Semi-transparent to acknowledge scenic background, connecting it to immersive environment
   rather than feeling like jarring overlay. Minimal annotation layer aesthetic. */
.sidebar-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    min-width: 0;
}

/* ========== Header ========== */
.sb-header {
    background: #f5f5f4;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

/* 🔧 REFINED: Sidebar header (和の感性 — Section 4)
   Smaller, lighter, grayer. The header labels panel type, but content matters more than label. */
.sb-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    color: #9ca3af;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sb-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff7ed;
    border: 1.5px solid rgba(194, 65, 12, 0.12);
}

.sb-avatar img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.sb-contact-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sb-contact-name {
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #292524;
}

.sb-contact-status {
    font-size: 0.75rem;
    color: var(--status-online-text);
    display: flex;
    align-items: center;
    gap: 5px;
}

.sb-status-dot {
    width: 7px;
    height: 7px;
    background: var(--status-online);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(var(--status-online-rgb), 0.3);
    display: inline-block;
}

.sb-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sb-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.6);
}

/* ========== Stories + Examples Body ========== */
.stories-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 18px 48px;
    background: #fafaf9;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.stories-empty {
    text-align: center;
    color: #9ca3af;
    padding: 40px 20px;
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
}

.stories-empty .empty-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

/* ========== Chat Bubble Typography (Sidebar) ========== */
.sb-user-word,
.sb-sentence-japanese {
    font-family: 'Klee One', 'Noto Sans JP', sans-serif;
}

.sb-sentence-romaji {
    font-family: 'Inter', sans-serif;
    font-style: italic;
}

/* ========== Onigiri Message ========== */
.onigiri-msg {
    align-self: flex-start;
    max-width: 88%;
    display: flex;
    gap: 10px;
    align-items: flex-end;
    animation: sidebarBubbleIn 0.3s ease forwards;
    opacity: 0;
}

@keyframes sidebarBubbleIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.mini-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff7ed;
    border: 1.5px solid rgba(194, 65, 12, 0.12);
    margin-bottom: 4px;
}

.mini-avatar img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* ========== Chat Bubbles ========== */
.chat-bubble {
    padding: 14px 18px;
    border-radius: 20px 20px 20px 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* 🔧 REFINED: Section headers (和の感性 — Section 4)
   Keep emoji for semantic clarity (small wayfinding icons) but reduce prominence.
   Uppercase label becomes quiet category marker, not a shout. */
.bubble-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.bubble-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.55;
}

.bubble-text strong { font-weight: 600; }

/* Bubble color variants — unified quiet surface, type indicated by label icon */
.bubble-tip,
.bubble-warn,
.bubble-culture,
.bubble-memory {
    background: #FAFAF7;
    color: #44403c;
}

.bubble-tip .bubble-label,
.bubble-warn .bubble-label,
.bubble-culture .bubble-label,
.bubble-memory .bubble-label {
    color: #78716c;
}

.bubble-tip strong,
.bubble-warn strong,
.bubble-culture strong,
.bubble-memory strong {
    color: #292524;
}

/* 🔧 REFINED: Progressive Disclosure (和の感性 — Section 4)
   Collapse/expand animation timing: 0.25s ease-out.
   Fast enough to feel responsive, slow enough to be perceptible.
   Grid mode uses similar timings. */
.onigiri-msg.collapsed .bubble-text {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    transition: max-height 0.25s ease-out, opacity 0.2s ease-out;
}

.onigiri-msg:not(.collapsed) .bubble-text {
    max-height: 500px;
    opacity: 1;
    transition: max-height 0.25s ease-out, opacity 0.2s ease-out;
}

.onigiri-msg.collapsed .chat-bubble {
    padding: 10px 16px;
    cursor: pointer;
}

.onigiri-msg.collapsed .chat-bubble:hover {
    filter: brightness(0.97);
}

.expand-hint {
    font-size: 0.6rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.4);
    margin-left: 6px;
    font-style: italic;
}

/* ========== Example Sentences ========== */
.examples-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.examples-header:hover { opacity: 0.8; }

.examples-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #78716c;
}

.sentences-list {
    margin-left: 36px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

/* Collapsible examples - match refined timing */
.examples-section.collapsed .sentences-list {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transition: max-height 0.25s ease-out, opacity 0.2s ease-out;
}

.examples-section:not(.collapsed) .sentences-list {
    max-height: 1000px;
    opacity: 1;
    transition: max-height 0.25s ease-out, opacity 0.2s ease-out;
}

.sentence-quote {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    animation: sidebarBubbleIn 0.3s ease forwards;
    opacity: 0;
}

.quote-number {
    width: 22px;
    height: 22px;
    background: #3D5A80;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
    margin-top: 2px;
}

.quote-content {
    flex: 1;
    background: #ffffff;
    border-left: 3px solid #3D5A80;
    padding: 12px 16px;
    border-radius: 0 10px 10px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.quote-jp {
    font-family: 'Klee One', 'Noto Sans JP', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: #1c1917;
    margin-bottom: 6px;
    line-height: 1.55;
}

/* Target word highlight in example sentences — underline only, quiet */
.sentence-word-highlight {
    background: none;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 3px;
    text-decoration-thickness: 0.5px;
}

.quote-romaji {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: #a8a29e;
    font-style: italic;
    letter-spacing: 0.02em;
    margin-bottom: 5px;
}

.quote-en {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: #44403c;
    font-weight: 500;
}

/* Inline romaji in word stories */
.inline-romaji {
    font-family: 'Inter', sans-serif;
    font-style: italic;
    color: #a16207;
    opacity: 0.85;
}

/* Kanji styling in stories */
.kanji-term { font-weight: 600; }
.kanji-meaning { font-size: 0.85em; opacity: 0.8; }
.pitch-drop { color: #dc2626; font-weight: 700; }
.bullet-item { padding-left: 1em; text-indent: -0.6em; margin-top: 4px; }
.bullet-item::before { content: '\2022 '; }


/* ========== Related Words (list view, reuses grid .rel-* classes) ========== */
.related-words {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    animation: sidebarBubbleIn 0.3s ease forwards;
    opacity: 0;
}

/* Sidebar-scoped size adjustments (grid drawer targets wider cards) */
.related-words .rel-row-kanji {
    font-size: 17px;
}

.related-words .rel-row {
    padding: 5px 4px;
}

.related-words .rel-row--inactive {
    opacity: 0.45;
    cursor: default;
}

.related-words .rel-row--inactive:hover {
    background: transparent;
}

/* ========== Scrollbar ========== */
.stories-body::-webkit-scrollbar { width: 4px; }
.stories-body::-webkit-scrollbar-track { background: transparent; }
.stories-body::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.08); border-radius: 4px; }
.stories-body::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.15); }

/* ========== Visibility Rules ========== */
/* Hide sidebar on mobile, video mode, revision mode */
@media (max-width: 768px) {
    .icon-rail-sidebar { display: none !important; }
}

body.video-mode .icon-rail-sidebar,
body.revision-mode .icon-rail-sidebar {
    display: none !important;
}

/* ========== Sidebar Reopener Tab ========== */
/* Small tab on right edge when sidebar is closed in focus mode */
.sidebar-reopener {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(100%);
    z-index: 899;
    width: 36px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    border-radius: 10px 0 0 10px;
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    font-size: 1.1rem;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.sidebar-reopener.visible {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.sidebar-reopener:hover {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: -2px 0 16px rgba(0, 0, 0, 0.09);
}

/* Hide reopener on mobile, in video/revision mode */
@media (max-width: 768px) {
    .sidebar-reopener { display: none !important; }
}
body.video-mode .sidebar-reopener,
body.revision-mode .sidebar-reopener {
    display: none !important;
}

/* ========== Hide tip button in focus mode on desktop ========== */
/* The sidebar replaces the MORE/tip action button */
@media (min-width: 769px) {
    body.focus-mode .action-group:has(#sentencesBtn) {
        display: none;
    }
}

/* ========== Tablet Adjustment ========== */
@media (min-width: 769px) and (max-width: 1024px) {
    .icon-rail-sidebar { width: 300px; }
}

/* ========== Reduced Motion ========== */
@media (prefers-reduced-motion: reduce) {
    .onigiri-msg,
    .sentence-quote {
        animation: none;
        opacity: 1;
    }
}

/* =======================================
   Legacy chat-* classes (Mobile Bottom-Sheet)
   The mobile sentences panel still uses
   populateSentencesPanel() which generates
   chat-* class HTML. These styles keep it
   working after removal from standard-mode.css.
   ======================================= */

/* Typography */
.chat-user-word,
.chat-sentence-japanese {
    font-family: 'Klee One', 'Noto Sans JP', sans-serif;
}

.chat-sentence-romaji {
    font-family: 'Inter', sans-serif;
    font-style: italic;
}

.chat-user-english,
.chat-contact-name,
.chat-bubble-label,
.chat-bubble-text,
.chat-sentence-english,
.chat-examples-label {
    font-family: 'Inter', sans-serif;
}

/* User message */
.chat-user-message {
    align-self: flex-end;
    background: #3D5A80;
    color: white;
    padding: 14px 20px;
    border-radius: 22px 22px 6px 22px;
    max-width: 70%;
    box-shadow: 0 4px 16px rgba(61, 90, 128, 0.18);
    animation: sidebarBubbleIn 0.3s ease forwards;
}

.chat-user-word { font-size: 1.7rem; font-weight: 700; margin-bottom: 3px; }
.chat-user-english { font-size: 0.9rem; opacity: 0.9; }

/* Onigiri message */
.chat-onigiri-message {
    align-self: flex-start;
    max-width: 88%;
    display: flex;
    gap: 10px;
    align-items: flex-end;
    animation: sidebarBubbleIn 0.3s ease forwards;
    opacity: 0;
}

.chat-mini-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff7ed;
    border: 1.5px solid rgba(194, 65, 12, 0.12);
}

.chat-mini-avatar img { width: 22px; height: 22px; object-fit: contain; }

/* Bubble labels & text */
.chat-bubble-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.chat-bubble-text { font-size: 0.95rem; line-height: 1.55; }
.chat-bubble-text strong { font-weight: 600; }

/* Bubble color variants (chat-* names) */
.chat-bubble-tip { background: #fef9c3; color: #713f12; }
.chat-bubble-tip .chat-bubble-label { color: #a16207; }
.chat-bubble-tip strong { color: #b45309; }

.chat-bubble-warning { background: #fee2e2; color: #7f1d1d; }
.chat-bubble-warning .chat-bubble-label { color: #dc2626; }
.chat-bubble-warning strong { color: #b91c1c; }

.chat-bubble-culture { background: #d1fae5; color: #064e3b; }
.chat-bubble-culture .chat-bubble-label { color: #059669; }
.chat-bubble-culture strong { color: #047857; }

.chat-bubble-memory { background: #e0e7ff; color: #312e81; }
.chat-bubble-memory .chat-bubble-label { color: #2C4A6E; }
.chat-bubble-memory strong { color: #1E3A5F; }

/* Examples section */
.chat-examples-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    animation: sidebarBubbleIn 0.3s ease forwards;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.chat-examples-header:hover { opacity: 0.8; }

.chat-examples-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #78716c;
}

.chat-sentences-list {
    margin-left: 36px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-sentence-quote {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    animation: sidebarBubbleIn 0.3s ease forwards;
    opacity: 0;
}

.chat-quote-number {
    width: 22px;
    height: 22px;
    background: #3D5A80;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
    margin-top: 2px;
}

.chat-quote-content {
    flex: 1;
    background: #ffffff;
    border-left: 3px solid #3D5A80;
    padding: 12px 16px;
    border-radius: 0 10px 10px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.chat-sentence-japanese { font-size: 1.15rem; font-weight: 600; color: #1c1917; margin-bottom: 6px; line-height: 1.55; }
.chat-sentence-romaji { font-size: 0.78rem; color: #a8a29e; margin-bottom: 5px; letter-spacing: 0.02em; }
.chat-sentence-english { font-size: 0.9rem; color: #44403c; font-weight: 500; }

/* Progressive disclosure (chat-* names) */
.chat-onigiri-message.collapsed .chat-bubble-text {
    max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; padding-top: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease;
}

.chat-onigiri-message:not(.collapsed) .chat-bubble-text {
    max-height: 500px; opacity: 1;
    transition: max-height 0.4s ease, opacity 0.3s ease 0.1s;
}

.chat-onigiri-message.collapsed .chat-bubble { padding: 10px 16px; cursor: pointer; }
.chat-onigiri-message.collapsed .chat-bubble:hover { filter: brightness(0.97); }

.chat-examples-section.collapsed .chat-sentences-list {
    max-height: 0; overflow: hidden; opacity: 0; margin-top: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease;
}

.chat-examples-section:not(.collapsed) .chat-sentences-list {
    max-height: 1000px; opacity: 1; margin-top: 12px;
    transition: max-height 0.4s ease, opacity 0.3s ease 0.1s, margin-top 0.2s ease;
}