/* DELAD UR style.css (KAN-388 CSS-3): rad 3092-3501, byte-exakt; Svarsfält och åtgärder. Laddas direkt efter föregående del i index.html. */

/* === Quill Reply Editor (Svarsrutor) - Slimmad version === */
.composer-quill-wrap.reply-quill-wrap .ql-editor {
min-height: 44px !important;   /* Matchar din gamla textarea exakt */
max-height: 280px !important;
padding: 8px 12px !important;
line-height: 1.4 !important;
}

/* Tar bort marginaler som gör rutan onödigt hög */
.reply-quill-wrap .ql-editor p {
margin-bottom: 0 !important;
}

.internal-select {
transition: all 0.14s ease;
border-radius: 8px;
}
.internal-select.selected, .internal-select:focus, .internal-select:hover {
box-shadow: 0 6px 18px rgba(0,0,0,0.45);
border: 1px solid var(--accent-primary) !important;
background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
}

.action-icon-btn svg,
.footer-icon-btn svg {
width: 18px !important;
height: 18px !important;
stroke: currentColor !important;
fill: none !important;
}

.footer-icon-btn {
width: 38px !important;
height: 38px !important;
border-radius: 8px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: rgba(255, 255, 255, 0.75);
transition: color 0.15s ease, transform 0.15s ease, filter 0.15s ease !important;
}

.footer-icon-btn:hover {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
color: #fff;
transform: scale(1.08) !important;
filter: drop-shadow(0 0 4px color-mix(in srgb, currentColor 50%, transparent)) !important;
}

.footer-icon-btn[style*="color:#ff453a"] svg,
.footer-icon-btn.danger svg {
fill: currentColor !important;
stroke: none !important;
}

.admin-save-icon-btn {
width: 32px;
height: 28px;
min-width: 32px;
padding: 0 !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
border-radius: 7px;
background: transparent !important;
border: none !important;
color: var(--status-success, #4cd964);
line-height: 1;
cursor: pointer;
transition: color 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}

.admin-save-icon-btn svg {
width: 16px;
height: 16px;
stroke: currentColor;
flex-shrink: 0;
}

.admin-save-icon-btn:hover {
background: transparent !important;
transform: scale(1.1);
filter: drop-shadow(0 0 6px rgba(76,217,100,0.65));
}

/* VARIANTER (RÖD) */
.footer-icon-btn.danger,
#archive-delete-btn {
background: transparent !important;
color: #ff4757 !important;
border-color: transparent !important;
box-shadow: none !important;
}
.footer-icon-btn.danger:hover,
#archive-delete-btn:hover {
background: transparent !important;
border-color: transparent !important;
color: #ff6b6b !important;
transform: scale(1.08) !important;
filter: drop-shadow(0 0 7px #ff4757) !important;
}

/* === MALL-GENERATOR AI-STRIP === */
.template-ai-strip {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 20px;
border-bottom: 1px solid rgba(255,255,255,0.06);
background: rgba(165,94,234,0.04);
flex-shrink: 0;
}

#template-editor-form #template-ai-desc {
flex: 1;
min-width: 0;
height: 34px;
box-sizing: border-box;
padding: 7px 10px !important;
font-size: 12.5px !important;
font-family: inherit;
background: rgba(0,0,0,0.18);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 7px;
color: rgba(255,255,255,0.75);
resize: none;
line-height: 18px !important;
transition: border-color 0.15s ease;
overflow: hidden;
}

#template-ai-desc:focus {
outline: none;
border-color: rgba(165,94,234,0.4);
}

#template-ai-desc::placeholder {
color: rgba(255,255,255,0.22);
}

#template-ai-gen-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 0 11px;
height: 30px;
border-radius: 7px;
background: rgba(165,94,234,0.08);
border: 1px solid rgba(165,94,234,0.22);
color: rgba(165,94,234,0.75);
font-size: 12px;
font-weight: 500;
font-family: inherit;
white-space: nowrap;
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
}

#template-ai-gen-btn svg {
flex-shrink: 0;
stroke: currentColor;
}

#template-ai-gen-btn:hover:not(:disabled) {
background: rgba(165,94,234,0.14);
border-color: rgba(165,94,234,0.4);
color: rgba(165,94,234,0.95);
filter: drop-shadow(0 0 5px rgba(165,94,234,0.3));
}

#template-ai-gen-btn:disabled {
opacity: 0.38;
cursor: not-allowed;
}

button[disabled].ai-guarded {
opacity: 0.4 !important;
cursor: not-allowed !important;
}

/* VARIANTER (LILA) */
#btn-ai-draft {
background: transparent !important;
color: #a55eea !important;
border-color: transparent !important;
box-shadow: none !important;
}
#btn-ai-draft:hover {
background: transparent !important;
border-color: transparent !important;
color: #c79cff !important;
filter: drop-shadow(0 0 7px rgba(165, 94, 234, 0.75)) !important;
transform: scale(1.08) !important;
}

/* VARIANTER (GULD — AI Sammanfattning) */
#btn-summarize {
background: transparent !important;
color: #ffc400 !important;
border-color: transparent !important;
box-shadow: none !important;
}
#btn-summarize:hover {
background: transparent !important;
border-color: transparent !important;
color: #ffd85a !important;
transform: scale(1.08) !important;
filter: drop-shadow(0 0 7px rgba(255, 196, 0, 0.75)) !important;
}

/* Inkorgens snabbsvar-knapp (hover glow) */
/* AI Förslag-knapp i inkorg — lila, transparent box, glow hover */
#btn-quick-reply-ai {
background: transparent !important;
color: #a55eea !important;
border-color: transparent !important;
box-shadow: none !important;
}
#btn-quick-reply-ai:hover {
background: transparent !important;
border-color: transparent !important;
color: #c79cff !important;
filter: drop-shadow(0 0 7px rgba(165, 94, 234, 0.75)) !important;
transform: scale(1.08) !important;
}

#btn-quick-reply-send {
transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
}
#btn-quick-reply-send:hover {
filter: brightness(1.2) !important;
box-shadow: 0 0 10px color-mix(in srgb, var(--accent-primary) 35%, transparent) !important;
transform: translateY(-1px) scale(1.05) !important;
}
#btn-quick-reply-send:active {
transform: scale(0.95) !important;
}

.pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.7);
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}

.pill:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); }

.detail-pills-container::-webkit-scrollbar {
display: none;
}

/* =============================================================================
LAYOUT & HEADER ACTIONS
============================================================================= */
#new-chat-btn-header,
#new-mail-btn-my-tickets,
.new-mail-header-btn,
.header-icon-only {
width: 42px !important;
height: 42px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 12px !important;
background: transparent !important;
border: none !important;
color: var(--text-primary) !important;
cursor: pointer;
transition: color 0.2s ease, transform 0.18s ease, filter 0.18s ease !important;
/* Säkerställ klickbarhet och synlighet */
position: relative !important;
z-index: 50 !important;
pointer-events: auto !important;
box-shadow: none !important;
}

#new-chat-btn-header:hover,
#new-mail-btn-my-tickets:hover,
.new-mail-header-btn:hover,
.header-icon-only:hover {
background: transparent !important;
border-color: transparent !important;
color: #fff !important;
transform: scale(1.06);
box-shadow: none !important;
filter: drop-shadow(0 0 7px currentColor) !important;
}

/* 2. Själva info-knappen (ihopslagen och städad) */
.info-icon-trigger {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
cursor: pointer;
transition: color 0.2s ease, opacity 0.2s ease, transform 0.18s ease, filter 0.18s ease;
opacity: 1;
color: var(--text-secondary);
background: transparent;
border: none;
box-shadow: none;
/* TVINGA LÄNGST TILL HÖGER */
order: 99 !important;
/* Säkerställ klickbarhet */
pointer-events: auto !important;
position: relative;
z-index: 10;
}

.info-icon-trigger:hover {
background: transparent;
border-color: transparent;
opacity: 1;
color: var(--text-primary);
transform: scale(1.06);
filter: drop-shadow(0 0 4px color-mix(in srgb, currentColor 50%, transparent));
}

.info-icon-svg { width: 18px; height: 18px; stroke-width: 2px; }

/* =============================================================================
SEKTIONS-TOOLTIP (.sh-tip) — liten i-ikon bredvid rubriker i admin-vyer
Tooltip-bubblan positioneras dynamiskt av JS (admin-core.js)
============================================================================= */
.sh-tip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--text-secondary, rgba(255,255,255,0.35)) 45%, transparent);
font-size: var(--text-badge-min-size);
color: var(--text-secondary, rgba(255,255,255,0.35));
cursor: help;
margin-left: 7px;
vertical-align: middle;
transition: border-color 0.18s, color 0.18s, background 0.18s;
flex-shrink: 0;
font-family: serif;
font-style: italic;
line-height: 1;
user-select: none;
}
.sh-tip:hover {
border-color: color-mix(in srgb, var(--text-primary, rgba(255,255,255,0.85)) 55%, transparent);
color: var(--text-primary, rgba(255,255,255,0.85));
background: color-mix(in srgb, var(--text-secondary, rgba(255,255,255,0.07)) 10%, transparent);
}

/* Shared tooltip-bubbla — skapas och positioneras av JS */
#atlas-sh-tooltip {
position: fixed;
z-index: 99999;
width: 230px;
background: rgba(14,14,24,0.97);
border: 1px solid rgba(255,255,255,0.11);
border-radius: 9px;
padding: 9px 13px;
font-size: 11.5px;
line-height: 1.58;
color: rgba(255,255,255,0.8);
box-shadow: 0 8px 28px rgba(0,0,0,0.6);
pointer-events: none;
white-space: normal;
text-transform: none;
font-weight: normal;
letter-spacing: 0;
font-style: normal;
opacity: 0;
transition: opacity 0.13s;
display: none;
}

/* ================================================================
PC-LAYOUT MINIMUM WIDTHS (tillagd för att förhindra "långsmal" layout)
Aktiveras enbart när skärmen är ≥ 769px (mobil-override sker i mobile.css).
Gäller: split-view list-container och editor-container.
Om skärmen är för liten → tillåt horisontell scroll istället för komprimering.
================================================================ */
@media screen and (min-width: 769px) {
.layout-split .template-list-container {
min-width: 300px !important;
}

.layout-split .template-editor-container {
min-width: 400px !important;
}

/* Tillåt horisontell scroll om allt inte får plats */
.layout-split .templates-container {
overflow-x: auto !important;
min-width: 0 !important;
}
}