.form-head-container { border: none; }
    .form-head-container:hover { border: none; box-shadow: unset; }

.form-container .form-table-container { border: none; padding-top: 20px; }
.form-container {  border-radius:18px;}


    

#respond-main { display: flex; width: 100%; height: calc(100vh - 64px); /* matcher respond-top */ }

#respond-application { flex: 1; position: relative; min-height: 100vh; padding: 0; background: linear-gradient( to bottom, rgba(195, 224, 235, 0.45) 0%, rgba(195, 224, 235, 0.25) 60%, rgba(195, 224, 235, 0.08) 80%, rgba(195, 224, 235, 0.00) 99% ); }


#respond-tools { width: 22%; min-width: 220px; /* god praksis */ background: rgba(245,247,249,1); border-left: 1px solid rgba(0,0,0,.08); box-shadow: inset 1px 0 0 rgba(255,255,255,.6), -4px 0 14px rgba(0,0,0,.05); }

.form-tools { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; }

.tools-card { border: 1px solid rgba(0,0,0,.12); border-radius: 14px; background: rgba(255,255,255,.88); box-shadow: 0 6px 18px rgba(0,0,0,.08); padding: 14px; backdrop-filter: blur(6px); }

.tools-title { margin: 0 0 6px 0; font-size: 14px; font-weight: 700; letter-spacing: .2px; }

.tools-text { margin: 0 0 10px 0; font-size: 13px; line-height: 1.35; color: rgba(0,0,0,.82); }

.tools-muted { color: rgba(0,0,0,.60); }

.tools-link { font-size: 13px; text-decoration: none; color: rgba(15, 90, 170, .95); }

.tools-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.tools-pill { font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.7); }
    .tools-pill.small { padding: 4px 8px; font-size: 11px; }

/* Progress bar */
.progress { height: 10px; border-radius: 999px; background: rgba(0,0,0,.08); overflow: hidden; margin: 10px 0 12px; }
.progress-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(70,140,200,.95), rgba(120,190,160,.95)); }

/* Submit */
.btn-submit { width: 100%; border: 1px solid rgba(0,0,0,.12); border-radius: 12px; padding: 12px 12px; font-weight: 800; cursor: pointer; background: linear-gradient(180deg, rgba(40, 160, 120, .95), rgba(20, 120, 95, .95)); color: #fff; box-shadow: 0 10px 22px rgba(0,0,0,.12); }
    .btn-submit:active { transform: translateY(1px); }

.tools-hint { margin: 10px 0 0 0; font-size: 12px; color: rgba(0,0,0,.58); }


.file-list { list-style: none; padding: 0; margin: 12px 0 0 0; display: flex; flex-direction: column; gap: 8px; }
    .file-list li { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.7); }
.file-badge { font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: 999px; background: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.10); }
.file-name { font-size: 13px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-x { border: 0; background: transparent; cursor: pointer; opacity: .7; }
    .file-x:hover { opacity: 1; }

/* Live chat + AI chat */
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(40, 190, 120, .95); box-shadow: 0 0 0 3px rgba(40,190,120,.18); }

.chat-box, .ai-box { border: 1px solid rgba(0,0,0,.10); border-radius: 12px; background: rgba(255,255,255,.72); padding: 10px; max-height: 180px; overflow: auto; }

.chat-msg { display: flex; margin: 8px 0; }
.chat-me { justify-content: flex-end; }
.chat-bubble { max-width: 85%; padding: 9px 10px; border-radius: 12px; font-size: 13px; line-height: 1.35; border: 1px solid rgba(0,0,0,.10); background: rgba(0,0,0,.04); }
.chat-me .chat-bubble { background: rgba(70,140,200,.10); }

.chat-input-row { display: flex; gap: 8px; margin-top: 10px; }
.chat-input { flex: 1; border: 1px solid rgba(0,0,0,.12); border-radius: 12px; padding: 10px 12px; outline: none; background: rgba(255,255,255,.85); }
.chat-send { width: 42px; border-radius: 12px; border: 1px solid rgba(0,0,0,.12); background: rgba(0,0,0,.05); cursor: pointer; font-weight: 900; }

/* AI */
.ai-msg { display: flex; gap: 10px; align-items: flex-start; }
.ai-label { font-size: 11px; font-weight: 900; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(0,0,0,.10); background: rgba(0,0,0,.04); }
.ai-bubble { font-size: 13px; line-height: 1.35; padding: 9px 10px; border-radius: 12px; border: 1px solid rgba(0,0,0,.10); background: rgba(120,190,160,.10); }

.ai-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.btn-ghost { border: 1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.7); border-radius: 999px; padding: 8px 10px; cursor: pointer; font-size: 12px; font-weight: 700; }

/* Responsive */
@media (max-width: 980px) {
    .form-layout { grid-template-columns: 1fr; }
    .form-tools { position: static; }
}

.download-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.7); transition: background .15s ease, box-shadow .15s ease; }

    .download-item:hover { background: rgba(255,255,255,.92); box-shadow: 0 4px 12px rgba(0,0,0,.08); }

.download-badge { min-width: 42px; text-align: center; font-size: 11px; font-weight: 800; padding: 5px 8px; border-radius: 999px; border: 1px solid rgba(0,0,0,.12); background: rgba(0,0,0,.04); }

    /* File type accents */
    .download-badge.pdf { background: rgba(200,60,60,.12); }
    .download-badge.doc { background: rgba(70,120,200,.12); }
    .download-badge.xls { background: rgba(60,160,120,.14); }

.download-meta { flex: 1; min-width: 0; }

.download-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.download-size { font-size: 12px; color: rgba(0,0,0,.55); }

.download-btn { text-decoration: none; font-size: 16px; font-weight: 900; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(0,0,0,.12); background: rgba(0,0,0,.04); color: rgba(0,0,0,.75); }

    .download-btn:hover { background: rgba(0,0,0,.08); }

/* Ensure details behaves consistently */
.tools-accordion { display: block; border: 1px solid rgba(0,0,0,.12); border-radius: 14px; background: rgba(255,255,255,.88); box-shadow: 0 6px 18px rgba(0,0,0,.08); backdrop-filter: blur(6px); overflow: hidden; }

    /* SUMMARY RESET (this is the important part) */
    .tools-accordion > summary { display: flex; /* make it a real flex row */ align-items: center; justify-content: space-between; gap: 12px; padding: 14px; margin: 0; /* kill weird margins */ line-height: 1.2; /* normalize */ cursor: pointer; user-select: none; list-style: none; /* remove marker space in many browsers */ -webkit-appearance: none; appearance: none; }

        /* Remove default marker (Chrome/Safari) */
        .tools-accordion > summary::-webkit-details-marker { display: none; }

        /* Remove default marker (Firefox-ish fallback) */
        .tools-accordion > summary::marker { content: ""; }

    /* If some global CSS makes summary look like a list item */
    .tools-accordion > summary { text-indent: 0; }

        /* Header hover */
        .tools-accordion > summary:hover { background: rgba(255,255,255,.55); }

/* Left group */
.tools-acc-left { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* Icon */
.tools-acc-icon { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.10); font-weight: 900; flex: 0 0 auto; }

/* Title */
.tools-acc-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* Divider when open */
.tools-accordion[open] > summary { border-bottom: 1px solid rgba(0,0,0,.08); }

/* Body spacing */
.tools-acc-body { padding: 12px 14px 14px 14px; }


/* Mode panel */
.tools-mode-panel { padding: 14px; }

/* Button row */
.mode-buttons { display: flex; gap: 8px; margin-top: 8px; }

/* Buttons */
.mode-btn { flex: 1; padding: 10px 0; border-radius: 12px; border: 1px solid rgba(0,0,0,.14); background: rgba(255,255,255,.75); font-size: 13px; font-weight: 800; cursor: pointer; transition: background .15s ease, box-shadow .15s ease, transform .05s ease; }

    /* Hover */
    .mode-btn:hover { background: rgba(255,255,255,.95); }

    /* Active / selected */
    .mode-btn.active { background: linear-gradient( 180deg, rgba(70,140,200,.95), rgba(40,110,180,.95) ); color: #fff; border-color: rgba(40,110,180,.9); box-shadow: 0 6px 14px rgba(0,0,0,.18); }

    /* Press */
    .mode-btn:active { transform: translateY(1px); }

.mode-wrap { margin-top: 8px; }

.mode-desc { margin-top: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.72); color: rgba(0,0,0,.75); font-size: 12px; line-height: 1.35; min-height: 42px; /* layout hopper ikke */ display: flex; align-items: center; transition: background .15s ease, box-shadow .15s ease; }

    .mode-desc.active { background: rgba(255,255,255,.92); box-shadow: 0 4px 12px rgba(0,0,0,.08); }


/* Column heading (not a card) */
.tools-heading { display: flex; align-items: center; gap: 10px; padding: 6px 2px 12px 2px; /* little top padding, more bottom */ margin: 0 2px 6px 2px; /* small spacing from the rest */ border-bottom: 1px solid rgba(0,0,0,.10); }

/* Square logo, max 42px height */
.tools-heading-logo { width: 42px; height: 42px; max-width: 42px; max-height: 42px; object-fit: contain; border-radius: 10px; /* can be 0 if you want sharp */ flex: 0 0 auto; }

/* Text */
.tools-heading-text { display: flex; flex-direction: column; min-width: 0; }

.tools-heading-name { font-size: 14px; font-weight: 900; line-height: 1.15; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tools-heading-tagline { font-size: 12px; color: rgba(0,0,0,.55); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Header layout */
.tools-mode-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Language switch */
.lang-switch { display: flex; gap: 6px; }

.lang-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(0,0,0,.14); background: rgba(255,255,255,.75); font-size: 18px; /* flag size */ cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease, box-shadow .15s ease, transform .05s ease; }

    .lang-btn:hover { background: rgba(255,255,255,.95); }

    .lang-btn.active { background: linear-gradient( 180deg, rgba(70,140,200,.95), rgba(40,110,180,.95) ); box-shadow: 0 4px 10px rgba(0,0,0,.18); }

    .lang-btn:active { transform: translateY(1px); }
.tools-mode-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Language switch – subtle */
.lang-switch.subtle { display: flex; align-items: center; gap: 6px; }

/* Flags */
.lang-flag { font-size: 18px; line-height: 1; cursor: pointer; opacity: .45; transition: opacity .15s ease, transform .1s ease; user-select: none; }

    .lang-flag:hover { opacity: .8; }

    .lang-flag.active { opacity: 1; transform: translateY(-1px); }