/* DELAD UR style.css (KAN-388 CSS-3): rad 2118-2377, byte-exakt; Hjälpbubblor och badges. Laddas direkt efter föregående del i index.html. */

/* =============================================================================
BUBBLOR & CHATTMEDDELANDEN
============================================================================= */

/* =============================================================================
MESSAGE TIMESTAMPS
============================================================================= */
.msg-time {
font-size: 10px;
color: rgba(255, 255, 255, 0.4);
margin-top: 2px;
font-family: 'SF Mono', monospace;
opacity: 0.8;
}

/* AVATARER */
.msg-avatar {
flex-shrink: 0; 
width: 32px; 
height: 32px; 
border-radius: 50%;
display: flex; 
align-items: center; 
justify-content: center; 
font-size: 14px;
border: 1px solid rgba(255,255,255,0.1);
}

/* Synlig, full-bredd footer som matchar Om Atlas-modalen — bryter ut till
   modalens kanter och nederkant via negativa marginaler (boxen har 32px padding).
   Ljus-temakontrast styrs av de delade --atlas-info-*-variablerna. */
.help-footer {
font-size: 11px; color: var(--atlas-info-pill-text) !important;
border-top: 1px solid var(--atlas-info-section-border);
background: var(--atlas-info-footer-bg);
margin: 18px -32px -32px;
padding: 10px 16px;
border-radius: 0 0 14px 14px;
display: flex; align-items: center; justify-content: space-between; gap: 8px;
}

/* Info-/guide-modaler: dölj scrollbaren helt (scroll fungerar ändå) och ta bort
   den reserverade scrollbar-gutter på boxen så innehållet använder full bredd.
   Boxen scrollar aldrig själv — den inre bodyn sköter scroll med dold scrollbar. */
.glass-modal-box.atlas-info-modal-box {
overflow: hidden !important;
scrollbar-gutter: auto !important;
}
.atlas-info-scroll { scrollbar-width: none !important; }
.atlas-info-scroll::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
.atlas-help-overlay #help-content-area.help-content { scrollbar-width: none !important; }
.atlas-help-overlay #help-content-area.help-content::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

/* Help modal bredare än standard glass-modal-box. Flex-kolumn så att header
   och footer står pinnade och endast innehållet scrollar mellan dem (samma
   som vy-guide-modalen). overflow:hidden klipper footer-/header-breakouten. */
.atlas-help-overlay .help-modal-box {
width: 700px !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
max-height: 80vh !important;
}
/* Scrollytan mellan pinnad header och footer. flex-basis:0 + overflow:auto gör
   att min-height beräknas till 0 → ytan krymper och scrollar i stället för boxen. */
.atlas-help-overlay #help-content-area.help-content {
flex: 1 1 auto !important;
overflow-y: auto !important;
min-height: 0 !important;
}
/* Pinnade element ska inte krympas av flex-layouten. */
.atlas-help-overlay .help-modal-box > .help-view-header,
.atlas-help-overlay .help-modal-box > .help-footer {
flex-shrink: 0 !important;
}

/* =============================================
HJÄLP-TRIGGER (placeholder-knapp)
============================================= */
.help-trigger {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 22px;
padding: 7px 18px;
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.22);
background: rgba(255,255,255,0.05);
color: rgba(255,255,255,0.55);
font-size: 12px;
font-family: inherit;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.help-trigger:hover {
border-color: var(--accent-primary);
color: var(--accent-primary);
background: color-mix(in srgb, var(--accent-primary) 9%, transparent);
}

/* =============================================
MANUAL-NEDLADDNINGSKNAPP (help footer)
============================================= */
/* Manual-pills i help-footern — samma stil som Om Atlas-modalens pills,
   kontrast via de delade --atlas-info-pill-*-variablerna (ljus-temasäkra). */
.help-download-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
height: 26px;
border-radius: 6px;
border: 1px solid var(--atlas-info-pill-border);
background: var(--atlas-info-pill-bg);
color: var(--atlas-info-pill-text);
font-size: 10px;
font-family: inherit;
cursor: pointer;
white-space: nowrap;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
flex-shrink: 0;
}
.help-download-btn:hover {
border-color: var(--atlas-info-pill-border);
color: var(--atlas-info-pill-text-hover);
background: var(--atlas-info-pill-bg-hover);
}

/* =============================================================================
CHAT MESSAGE ALIGNMENT (KONSOLIDERAD)
============================================================================= */
/* Hem-vyn (column: avatar ovanpå bubbla) */
.message.user { 
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important; 
align-self: flex-start !important; 
}
.message.atlas { 
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important; 
align-self: flex-end !important; 
}

/* Detaljvyer (row: avatar brevid bubbla) */
.msg-row.user { 
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important; 
justify-content: flex-start !important;
align-self: flex-start !important; 
}
.msg-row.atlas { 
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
justify-content: flex-end !important; 
align-self: flex-end !important; 
}

.message, .msg-row {
position: relative !important; 
flex-shrink: 0 !important;
}

/* =============================================================================
BADGES & NAVIGATION
============================================================================= */
.nav-badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin-left: auto !important;
border-radius: 6px !important;
min-width: 16px !important;
height: 16px !important;
padding: 0 5px !important;
font-size: 10px !important;
font-weight: 500 !important;
background: color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
color: color-mix(in srgb, var(--accent-primary) 75%, var(--text-primary)) !important;
text-shadow: none !important;
}

#badge-inbox {
background: color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
box-shadow: none !important;
border: none !important;
}

/* Inkorgen har TVÅ räknare: nya oplockade (primär, fylld) + plockade/routade
   (sekundär, outline). Gruppen knuffas högerut som helhet; varje badge döljs
   oberoende (display:none vid 0) så den synliga alltid hamnar längst till höger. */
.nav-badge-group {
margin-left: auto !important;
display: inline-flex;
align-items: center;
gap: 7px;
}
.nav-badge-group .nav-badge { margin-left: 0 !important; }
/* Sekundär = plockade/routade: temafärgad outline, så den läses lugnare än
   primär-räknaren som följer agentfärgen via --accent-primary. */
.nav-badge-secondary {
background: color-mix(in srgb, var(--theme-accent-primary, var(--text-secondary)) 8%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--theme-accent-primary, var(--text-secondary)) 34%, transparent) !important;
color: color-mix(in srgb, var(--theme-accent-primary, var(--text-secondary)) 58%, var(--text-primary)) !important;
}

#badge-my-tickets {
background: color-mix(in srgb, var(--accent-primary) 18%, transparent) !important;
box-shadow: none !important;
border: none !important;
color: color-mix(in srgb, var(--accent-primary) 75%, var(--text-primary)) !important;
}

/* Ren text-chip — ingen ram/bakgrund/prick. Färgen bär betydelsen,
   hover-titeln förklarar: grön = AI på, blå = AI-källa, rött = AI av. */
.ai-chip,
.ai-source-chip {
display: inline-flex;
align-items: center;
min-width: 0;
font-size: 10px;
font-weight: 800;
line-height: 1;
letter-spacing: 0.4px;
white-space: nowrap;
flex-shrink: 0;
text-transform: uppercase;
cursor: default;
}

/* AI (token-anrop): grön = på, röd = av */
.ai-chip,
.ai-chip.is-inactive {
color: color-mix(in srgb, var(--danger-text, #ff3b30) 78%, var(--text-primary) 22%);
}

.ai-chip.is-active {
color: color-mix(in srgb, var(--success-text, #34c759) 74%, var(--text-primary) 26%);
}

/* AI-källa (RAG-underlag): blå = AI på, röd = AI av */
.ai-source-chip {
color: color-mix(in srgb, #64d2ff 82%, var(--text-primary));
}

.ai-source-chip.is-inactive {
color: rgba(255, 99, 88, 0.96);
}

.ai-action-glow {
transition: color 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
}

.ai-action-glow:hover:not(:disabled) {
filter: drop-shadow(0 0 7px rgba(100, 210, 255, 0.42));
}