* {
	--background: #F7F7F7;
	--white: #FFFFFF;
	--black: #000000;
	--logisz-amber: #FFBF00;
}

[x-cloak] { display: none !important; }
[x-on\:click] { cursor: pointer; }

body {overflow-y: scroll;}

html, body { height: 100%; line-height: 24px; min-height: 100%; margin: 0; padding: 0; background-color: var(--background); font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 300; font-display: optional;}

h1 {padding-bottom: 12px; line-height: 54px; font-size: 48px; font-weight: 900; text-transform: uppercase;}

p.button.back a span, 
button.button.back, 
button[type=submit].back {padding: 10px 18px 10px 38px; background-color: transparent; border: 2px solid var(--black);}

p.button.back a span::after, 
button.button.back::after, 
button[type=submit].back::after {top: 13px; left: 20px; right: unset; width: 10px; height: 18px; display: inline-block; background-position: -96px -48px; content: ""; position: absolute; transition: all linear 125ms; opacity: 1;}

p.button.back a span::before, 
button.button.back::before, 
button[type=submit].back::before {top: 13px; right: -20px; left: unset; width: 10px; height: 18px; display: inline-block; background-position: -96px -48px; content: ""; position: absolute; transition: all linear 125ms; opacity: 0;}

p.button.back:hover a span::after, 
button.button.back:hover::after, 
button[type=submit].back:hover::after {left: -20px; right: unset; opacity: 0;}

p.button.back:hover a span::before, 
button.button.back:hover::before, 
button[type=submit].back:hover::before {right: 20px; left: unset; opacity: 1;}

p.button.back:hover a span, 
button.button.back:hover, 
button[type=submit].back:hover {padding: 10px 38px 10px 18px;}

#logisz-version { border-bottom: dotted black 1px; }

code { background: #0000000a; padding: 0 6px; border-radius: 3px; font-size: 14px; }

.text-center { text-align: center; }
.line-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.page.domain {  }
.page.domain .project-wrapper { margin-top: 48px; }
.page.domain .project-wrapper .title-wrapper { display: flex; flex-direction: column; }
.page.domain .project-wrapper .title-wrapper .title { display: flex; align-items: center; }
.page.domain .project-wrapper .title-wrapper .title-info-wrapper { display: flex; align-items: center; gap: 8px; }
.page.domain .project-wrapper .title-wrapper .title-info-wrapper > span { font-size: 11px; font-weight: 100; color: #0000008c; line-height: 10px; }
.page.domain .project-wrapper > .action-bar .toggle-wrapper { display: flex; justify-content: space-between; align-items: center; }
.page.domain .project-wrapper > .action-bar .toggle-wrapper .toggle { cursor:pointer; height: 48px; text-align: center; line-height: 48px; flex: 0 0 48px; }
.page.domain .inlink { font-size: 12px; font-family: Consolas; background: #00000015; padding: 2px 6px; border-radius: 3px; margin-left: 4px; }
.page.domain .inlink-host { font-size: 12px; }

/* Table Styling */
table { width: 100%; border-radius: 12px; background: #fff; overflow: hidden; }
table thead tr { background: #FFBF00; }
table tbody tr:nth-child(2n+1) { background: unset; }
table tbody tr { background: #0000000d; }
table tr th,
/*table tr td { padding: 12px 20px; }*/
table tr td { padding: 3px 8px; font-size: 14px; }
table tr td.empty-row { padding: 18px; text-align: center; font-size: 16px; }

.blade-editor-wrapper .blade-editor {  }
.blade-editor-wrapper .blade-editor.small .blade { width: 300px; }
.blade-editor-wrapper .blade-editor.medium .blade { width: 500px; }
.blade-editor-wrapper .blade-editor.big .blade { width: 60%; }
.blade-editor-wrapper .blade-editor .blade { height: 100%; overflow-y: scroll; width: 40vw; top: 50%; transition: all .3s; position: fixed; right: 0; z-index: 2; background: var(--background); width: 40%; max-width: 100%; transform: translate(100%, -50%); }
.blade-editor-wrapper .blade-editor .blade .blade-head { font-weight: bold; font-size: 20px; padding: 16px; width: 100%; background: #fff; }
.blade-editor-wrapper .blade-editor .blade .blade-body { padding: 16px; width: 100%; max-height: calc(100vh - 56px); overflow-y: auto; }
.blade-editor-wrapper .blade-editor .blade .blade-body section { margin-bottom: 24px; }
.blade-editor-wrapper .blade-editor .blade .blade-body section .section-title { font-weight: bold; font-size: 18px; padding-bottom: 12px; }
.blade-editor-wrapper .blade-editor .backdrop { transition: all .2s; opacity: 0; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background: #000; }
.blade-editor-wrapper .blade-editor.expand .blade { transform: translate(0%, -50%); }
.blade-editor-wrapper .blade-editor.expand .backdrop { opacity: .5; }
.blade-editor-wrapper .blade-editor .blade .scroll-section { max-height: 500px; overflow-y: auto; padding-bottom: 24px; }
.blade-editor-wrapper .blade-editor .blade .scroll-section .checkbox-list .form-group { padding-bottom: unset; }
.blade-editor-wrapper .blade-editor .info-description { font-size: 12px; line-height: 20px; padding: 12px; border-left: solid #FFBF00 4px; margin-bottom: 12px; background: #fff; border-radius: 5px; }
.blade-editor-wrapper .blade-editor .info-description code { font-size: 12px; line-height: 20px; }
.blade-editor-wrapper .blade-editor .info-description p { padding-bottom: 12px; }
.blade-editor-wrapper .blade-editor .info-description p:first-of-type { padding-bottom: 0; }
.blade-editor-wrapper .blade-editor .info-description p:last-of-type { padding-bottom: 0; }
.blade-editor-wrapper .blade-editor .info-description p:first-of-type + ul { margin-top: 12px; }
.blade-editor-wrapper .blade-editor .info-description ul { padding-left: 16px; }

.text-list-section { display: flex; flex-direction: column; }
.text-list-section .text-list-title { font-weight: bold; font-size: 16px; padding: 8px; padding-bottom: 0; } 
.text-list-section .text-list-item { display: flex; flex-direction: column; padding: 8px; border-bottom: solid #00000017 1px; font-size: 14px; line-height: 16px; }
.text-list-section .text-list-item:last-of-type { border-bottom: unset; }
.text-list-section .text-list-item .text-list-head { opacity: .5; }

.ckeditor {  }
.ckeditor.big .ck-editor__editable_inline {height: 400px;}

.paging { width: 100%; display: flex; justify-content: space-between; }
.paging > span { display: inline-block; padding: 0 8px; display: flex; justify-content: center; flex-direction: column; }
.paging .pager {  }
.paging .pager ul { gap: 1px; display: flex; list-style: none; margin: 0; padding: 0; }
.paging .pager ul li { user-select: none; transition: background .3s; cursor: pointer; margin: 0; padding: 0; background: #fff; line-height: 36px; text-align: center; width: 36px; height: 36px; display: inline-block }
.paging .pager ul li:hover:not(.locked), 
.paging .pager ul li.active { background: var(--logisz-amber); }
.paging .pager ul li.locked {  }
.paging .pager ul li:first-child { border-radius: 5px 0 0 5px; }
.paging .pager ul li:last-child { border-radius: 0 5px 5px 0; }

.action-bar { margin-bottom: 24px; gap: 12px; display:flex; justify-content: space-between; align-items: center;}
.action-bar p.button, .action-bar button.button {margin: 0;}
.action-bar input[type=text] { border-radius: 9999px; text-indent: 20px; height: 48px; display: inline-block; border: none; outline: none; background: #0000000d; padding: 0; }
.action-bar.right { justify-content: end; }
.action-bar.left { justify-content: start; }
.action-bar.small-margin { margin-bottom: 12px; }
.action-bar.bottom { margin-bottom: 0; margin-top: 24px; }
.action-bar .title { margin: 0; padding: 0; }
.action-bar .action-bar-label { font-size: 12px; font-weight: 100; color: #0000008c; }
.action-bar .action-sub-bar { display: flex; align-items: center; gap: 12px; }
.action-bar.form {  }
.action-bar.form .form-group { padding: 0; }
.action-bar.form.small .form-group { display: flex; gap: 4px; align-items: center; }
.action-bar.form.small .form-group label { font-size: 12px; }
.action-bar.inactive-visiblity { opacity: .2; transition: opacity .3s; }
.action-bar.inactive-visiblity:hover { opacity: 1; }

.tags { display:flex; gap: 6px; flex-wrap: wrap; }
.tags .tag { padding: 0 6px; font-size: 12px; border: solid var(--logisz-amber) 1px; border-radius: 5px; color: var(--logisz-amber); white-space: nowrap; }
.tags .tag > span/*:not([x-text])*/ { color: var(--logisz-amber); }
.tags .tag.solid {background-color: var(--logisz-amber); color: var(--black);}
.tags .tag.solid > span/*:not([x-text])*/ { color: var(--black); }
.tags .tag:hover {  }
.tags .tag > span.red { color: #c32323; font-weight: bold; }
.tags .tag > span.green { color: #37dd2e; font-weight: bold; }

.list-actions { display: flex; gap: 6px; justify-content: end; }
.list-actions.left { display: flex; gap: 6px; justify-content: start; }
.list-actions .icon { cursor: pointer; width: 32px; height: 32px; border: 2px solid var(--black); border-radius: 9999px; align-items: center; justify-content: center; display: flex; content: ""; transition: background-color linear 125ms;}
.list-actions .icon:hover {background-color: var(--black); color: var(--white);}
.list-actions .icon.view {}
.list-actions .icon.view::after {width: 16px; height: 13px; background-image: url(../images/sprite.svg); background-repeat: no-repeat; background-size: 186px 66px; background-color: transparent; background-position: -138px -48px; border: 0; content: ""; display: inline-block; cursor: pointer;}
.list-actions .icon.view:hover::after {background-position: -106px -48px; }
.list-actions .hidden-action-wrapper { opacity: 0; transition: all .15s; }
.list-actions.small {  }
.list-actions.small .icon { width: unset; height: unset; display: unset; border: unset; border: none; }
.list-actions.small .icon:hover { background: none; color: inherit; }
.list-actions.inline { display: inline-block; }
.contains-action-wrapper:hover .hidden-action-wrapper { opacity: 1; }
.contains-action-wrapper .hidden-action-wrapper { display: flex; gap: 4px; }


.form {height: 100%;}
.form .form-group {padding-bottom: 24px;}
.form .form-group:last-of-type {padding-bottom: 0;}
/*.form .row .sf_colsIn .form-group {padding-bottom: 24px;}*/
.form .form-group label {margin: 0; padding: 0; font-size: 12px; text-transform: uppercase; display: block;}
.form .form-group input[type=text], .form-group input[type=email], .form-group select {width: 100%; margin: 0; padding: 0; line-height: 32px; height: 32px; background-color: transparent; border: 0; border-bottom: 1px solid #000000; font-weight: 300; outline: none;}
.form .form-group input[type=text].input-validation-error, .form-group input[type=email].input-validation-error {background: -moz-linear-gradient(top, rgba(255,0,0,0) 0%, rgba(255,0,0,0.1) 100%); background: -webkit-linear-gradient(top, rgba(255,0,0,0) 0%,rgba(255,0,0,0.1) 100%); background: linear-gradient(to bottom, rgba(255,0,0,0) 0%,rgba(255,0,0,0.1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff0000', endColorstr='#1aff0000',GradientType=0 );}
.form .form-group strong {margin: 0; padding: 0; font-size: 12px; font-weight: normal; text-transform: uppercase; display: block;}
.form .form-group textarea {width: 100%; height: 100px; line-height: 32px; margin: 0; padding: 0; background-color: transparent; border: 0; border-bottom: 1px solid #000000; font-weight: 300; outline: none;}
.form .form-group textarea.input-validation-error {background-image: -moz-linear-gradient(top, transparent, rgba(255,0,0,0.1) 31px, #000000 0px); background-image: -webkit-linear-gradient(top, transparent, rgba(255,0,0,0.1) 31px, #000000 0);}
.form .form-group input[type=checkbox] + label {font-size: inherit; text-transform: none; display: inline-block;}
.form .form-group button {margin-bottom: 0;}
.form .sfContentBlock em {font-size: 12px; font-style: italic;}

.no-items-wrapper { max-width: 50vw; margin: 124px auto; }

/**/

main {width: 100%; min-height: calc(100% - 48px); max-width: 2560px; margin: 0 auto; background-color: #FFFFFF;}

section {}
section.section {position: relative; overflow: hidden;}
section.section::before {-webkit-mask-image: url(/Images/circle.svg); -webkit-mask-size: 8192px 8192px; -webkit-mask-position: bottom center; -webkit-mask-repeat: no-repeat; mask-image: url(/Images/circle.svg); mask-size: 8192px 8192px; mask-position: bottom center; mask-repeat: no-repeat; display: block; content: ""; pointer-events: none;}

section.section.section-black {}
section.section.section-black .placeholder {top: -16px; max-height: 215px; display: flex; flex-direction: row; align-items: center; position: relative;}
section.section.section-black .placeholder .logo {top: 0; left: -37px; position: relative; z-index: 1;}
section.section.section-black .placeholder .logo img {height: 240px;}
section.section.section-black .placeholder .content {position: relative; z-index: 1;}
section.section.section-black .placeholder .content h1 {line-height: 36px; font-size: 36px;}

section.section.section-black.to-white {background-color: var(--white);}
section.section.section-black.to-white .inner-wrapper {box-sizing: border-box; position: relative;}
section.section.section-black.to-white .inner-wrapper.radial {margin-bottom: 0 !important; background: rgb(0, 46, 49); background: -moz-radial-gradient(center, ellipse cover, rgba(0, 46, 49, 1) 0%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 1) 75%); background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 46, 49, 1) 0%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 1) 75%); background: radial-gradient(ellipse at center, rgba(0, 46, 49, 1) 0%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 1) 75%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002e31', endColorstr='#000000',GradientType=1 ); position: relative;}
section.section.section-black.to-white .inner-wrapper.radial::after {top: 0; right: 0; bottom: -1px; left: 0; background-image: url(/images/clipping-circle.svg); background-position: bottom center; background-size: 8192px 8192px; background-repeat: no-repeat; content: ""; display: block; position: absolute; z-index: 0;}

section.section.section-white {}
section.section.section-white .inner-wrapper {padding: 80px 24px 104px 24px; max-width: 1920px; margin: 0 auto;}

section.section.section-white.to-grey {background-color: #F7F7F7;}
section.section.section-white.to-grey::before {background-color: var(--white);}

section.section.section-grey.to-white .inner-wrapper {padding: 60px 0 84px 0;}

footer {background-color: var(--white); font-size: 12px; text-align: center;}

section.section .container .logout { z-index: 1; }
section.section .container .logout .button { height: auto; }

/*
	Logout
*/
  .logout-wrapper {
    z-index: 1;
    display: inline-flex;         
    align-items: center;
    gap: 12px;                     
    font-family: system-ui, sans-serif;
  }

  .logout-ball {
    --ball-size: 28px;             
    --expand-width: 160px;         

    display: flex;
    align-items: center;
    justify-content: center;

    width: var(--ball-size);
    height: var(--ball-size);
    background: #00A0AD;       
    color: #0d0d0d;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;

    border-radius: 999px;
    cursor: pointer;
    user-select: none;

    transition:
      background .25s ease,
      width .35s cubic-bezier(.4,0,.2,1),
      color .2s ease;
    overflow: hidden;
  }

  .logout-ball:hover {
    background: #D60F3C;          
    width: var(--expand-width);   
  }

  .logout-ball i {
    position: absolute;
  }

  .logout-ball:hover i {
    position: absolute;
    opacity: 0;
    width: 0;
    margin: 0;
    overflow: hidden;
    transition: opacity .1s ease, width .2s ease .1s;
  }


  .logout-ball span {
    opacity: 0;
    white-space: nowrap;
    margin-left: 8px;            
    transition: opacity .15s ease;
  }

  .logout-ball:hover span {
    opacity: 1;
  }

  .logout-ball:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }   

  .logout-wrapper sup { top: -1px; }

  .blade-editor-wrapper { }
  .blade-editor-wrapper .blade-editor { overflow: hidden; }
  .blade-editor-wrapper .blade-editor .blade { border-radius: 10px 0px 0px 10px; overflow: hidden; }
  .blade-editor-wrapper .blade-editor .blade { background-color: #F7F7F7; }

  .blade-editor-wrapper .blade-editor .blade .blade-head { background-color: #FFBF00; }
  .blade-editor-wrapper .blade-editor .blade .blade-body {  }
  .blade-editor-wrapper .blade-editor .backdrop {}

   .blade-editor-wrapper .blade-editor .blade .blade-body .blade-actions {
      display: flex;
      gap: 24px;
      font-size: 16px;
      padding: 16px 20px;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
    }

  .blade-editor-wrapper .blade-editor .blade .blade-body .blade-actions .action-link {
     position: relative;
     color: #333;
     text-decoration: none;
     cursor: pointer;
     padding-bottom: 3px;
     overflow: hidden;
   }

  .blade-editor-wrapper .blade-editor .blade .blade-body .blade-actions .action-link::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 2px;
     background: #FFBF00;
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1);
   }

  .blade-editor-wrapper .blade-editor .blade .blade-body .blade-actions .action-link:hover::after {
     transform: scaleX(1);
   }

/*  CK editor*/

.blade-editor-wrapper .blade-editor .blade .form-group.ckeditor {
  position: relative;
  padding-bottom: 6px; 
}

.blade-editor-wrapper .blade-editor .blade .form-group.ckeditor::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 7px;
  width: 99%;
  height: 2px;
  background: #FFBF00;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1);
  pointer-events: none;
  border-radius: 1px;
}

.blade-editor-wrapper .blade-editor .blade .form-group.ckeditor:focus-within::after {
  transform: scaleX(1);
}

.blade-editor-wrapper .blade-editor .blade .form-group.ckeditor label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #444;
  transition: color .3s ease;
}

.blade-editor-wrapper .blade-editor .blade .form-group.ckeditor .ck-editor {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: all .3s ease;
}

.blade-editor-wrapper .blade-editor .blade .ck-editor__editable {
  min-height: 140px;
  padding: 14px 16px;
  background: white !important;
  border-radius: 0 0 12px 12px !important;
  font-size: 15px;
  line-height: 1.6;
}

.blade-editor-wrapper .blade-editor .blade .ck-editor__editable:focus {
  border: 1px solid #D3D3D3;
  outline: none !important;
  box-shadow: none !important;
}

.blade-editor-wrapper .blade-editor .blade .ck-editor__editable ck-focussed {
  border: 1px solid #D3D3D3;
  outline: none !important;
  box-shadow: none !important;
}

.blade-editor-wrapper .blade-editor .blade .ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable){
  border: 1px solid #D3D3D3 !important;
  outline: none !important;
  box-shadow: none !important;
}

.blade-editor-wrapper .blade-editor .blade .ck.ck-toolbar {
  border-bottom: 1px solid #eee !important;
  border-radius: 12px 12px 0 0 !important;
}

.blade-editor-wrapper .blade-editor .blade .ck.ck-button,
.blade-editor-wrapper .blade-editor .blade .ck.ck-button.ck-off {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.blade-editor-wrapper .blade-editor .blade .ck.ck-button:hover,
.blade-editor-wrapper .blade-editor .blade .ck.ck-button.ck-on:hover {
  background: transparent !important;
}

.blade-editor-wrapper .blade-editor .blade .ck.ck-button.ck-on {
  background: transparent !important;
  border-radius: 4px !important;
}

.blade-editor-wrapper .blade-editor .blade .ck.ck-button .ck-icon {
  color: #888 !important;
  transition: color .2s ease;
}

.blade-editor-wrapper .blade-editor .blade .ck.ck-button:hover .ck-icon,
.blade-editor-wrapper .blade-editor .blade .ck.ck-button.ck-on .ck-icon {
  color: #FFBF00 !important;
}

.blade-editor-wrapper .blade-editor .blade .ck.ck-label.ck-voice-label {
    display: none !important;
}

.container .api-keys { padding-bottom: 30px; }
.container .help {}
.container .help p { padding-bottom: 12px; }
.container .help .step {}

.blade-editor-wrapper .blade-editor .blade .blade-body p.title { font-size: 20px; padding-bottom: 0px;}


@keyframes flash {
    0% { background-color: var(--flash-color); }
    100% { background-color: transparent; }
}

@keyframes flash-delete {
    0% { background-color: var(--flash-color); opacity: 1; }
    100% { background-color: var(--flash-color); opacity: 0; }
}


/* Alle animatie-classes delen dezelfde animatie-instellingen */
.animate-new-item, 
.animate-edit-item {
    animation: flash 1s ease-out forwards;
}
.animate-delete-item {
    animation: flash-delete 1s ease-out forwards;
}


/* Specifieke kleuren per class */
.animate-new-item    { --flash-color: lime; }
.animate-edit-item   { --flash-color: orange; }
.animate-delete-item { --flash-color: #f87171; }


/* ═══════════════════════════════════════════════════════════
   CHAT LAYOUT
   ═══════════════════════════════════════════════════════════ */

body.chat-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: #111827;
    font-family: 'Poppins', sans-serif;
}

body.chat-layout main.chat-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    max-width: unset;
    margin: 0;
    background: #f9fafb;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Sidebar ──────────────────────────────────────────────── */

.chat-sidebar {
    width: 272px;
    min-width: 272px;
    transition: width 0.2s ease, min-width 0.2s ease;
    background: #111827;
    color: #d1d5db;
    display: flex;
    flex-direction: column;
    height: 100vh;
    border-right: 1px solid #1f2937;
}

.chat-sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px 14px;
    border-bottom: 1px solid #1f2937;
    flex-shrink: 0;
}

.chat-sidebar-header img {
    border-radius: 6px;
    flex-shrink: 0;
}

.chat-sidebar-brand {
    font-size: 14px;
    font-weight: 600;
    color: #f9fafb;
    letter-spacing: -0.2px;
}

.chat-sidebar-actions {
    padding: 12px 10px 8px;
    flex-shrink: 0;
}

.chat-new-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--logisz-amber);
    color: #111827;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: background .2s ease, transform .1s ease;
}

.chat-new-btn:hover  { background: #e6ac00; }
.chat-new-btn:active { transform: scale(.98); }

.chat-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px 8px;
}

.chat-sidebar-list::-webkit-scrollbar       { width: 4px; }
.chat-sidebar-list::-webkit-scrollbar-track { background: transparent; }
.chat-sidebar-list::-webkit-scrollbar-thumb { background: #374151; border-radius: 2px; }

.chat-sidebar-section-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #4b5563;
    padding: 8px 8px 4px;
}

.chat-sidebar-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    margin-bottom: 1px;
}

.chat-sidebar-item i {
    margin-top: 2px;
    flex-shrink: 0;
    font-size: 12px;
    color: #4b5563;
    transition: color .15s;
}

.chat-sidebar-item:hover            { background: #1f2937; }
.chat-sidebar-item.active           { background: #1f2937; }
.chat-sidebar-item.active i         { color: var(--logisz-amber); }

.chat-sidebar-item-body  { flex: 1; min-width: 0; }

.chat-sidebar-item-title {
    font-size: 13px;
    font-weight: 400;
    color: #d1d5db;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.chat-sidebar-item.active .chat-sidebar-item-title { color: #f9fafb; font-weight: 500; }

.chat-sidebar-item-preview {
    font-size: 11px;
    color: #4b5563;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    margin-top: 1px;
}

.chat-sidebar-empty {
    padding: 16px 8px;
    font-size: 13px;
    color: #4b5563;
    text-align: center;
}

.chat-sidebar-footer {
    padding: 12px;
    border-top: 1px solid #1f2937;
    flex-shrink: 0;
}

.chat-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-sidebar-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: var(--logisz-amber);
    color: #111827;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.chat-sidebar-user-info { flex: 1; min-width: 0; }

.chat-sidebar-user-name {
    font-size: 13px;
    font-weight: 500;
    color: #e5e7eb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-sidebar-user-sub {
    font-size: 11px;
    color: #4b5563;
}

.chat-logout-btn {
    background: none;
    border: none;
    color: #4b5563;
    cursor: pointer;
    padding: 6px 7px;
    border-radius: 6px;
    font-size: 14px;
    transition: color .15s, background .15s;
}

.chat-logout-btn:hover {
    color: #e5e7eb;
    background: #1f2937;
}

/* ── Empty state ──────────────────────────────────────────── */

.chat-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px;
    text-align: center;
}

.chat-empty-state img  { opacity: .4; }

.chat-empty-state h2 {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    text-transform: none;
    padding: 0;
    line-height: 1.3;
}

.chat-empty-state p {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* ── Messages ─────────────────────────────────────────────── */

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 28px 0 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-messages::-webkit-scrollbar       { width: 5px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

.chat-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 840px;
    width: 100%;
    margin: 0 auto;
    padding: 3px 28px;
    box-sizing: border-box;
}

.chat-msg-user  { flex-direction: row-reverse; }
.chat-msg-tool  { padding: 2px 28px 2px 66px; display: block; }

.chat-bubble {
    max-width: 72%;
    padding: 10px 16px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-bubble-user {
    background: var(--logisz-amber);
    color: #111827;
    border-bottom-right-radius: 5px;
    font-weight: 400;
}

.chat-bubble-assistant {
    background: #ffffff;
    color: #111827;
    border-bottom-left-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,.07);
    max-width: 100%;
}

.chat-bubble-assistant p:last-child {
    padding: 0;
}

.chat-msg-avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
    margin-top: 4px;
}

.chat-msg-avatar img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

/* Tool call row */

.chat-tool-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.chat-debug-call-num {
    font-size: 10px;
    color: #6ee7b7;
    font-weight: 400;
    opacity: .8;
}

.chat-tool-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1f2937;
    color: #9ca3af;
    font-size: 12px;
    font-family: 'Consolas', 'Monaco', monospace;
    padding: 4px 10px;
    border-radius: 6px;
    border-left: 3px solid #00A0AD;
    line-height: 1.4;
}

.chat-tool-tag i        { color: #00A0AD; font-size: 11px; }
.chat-tool-tag strong   { color: #e5e7eb; font-weight: 600; }

.chat-tool-input {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    color: #6b7280;
    font-family: 'Consolas', 'Monaco', monospace;
    vertical-align: middle;
}

/* Thinking dots */

.chat-thinking {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 12px 16px;
    background: #ffffff;
    border-radius: 18px;
    border-bottom-left-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,.07);
}

.chat-thinking span {
    width: 7px;
    height: 7px;
    background: #9ca3af;
    border-radius: 50%;
    animation: chat-bounce 1.3s infinite ease-in-out both;
}

.chat-thinking span:nth-child(1) { animation-delay: -.32s; }
.chat-thinking span:nth-child(2) { animation-delay: -.16s; }
.chat-thinking span:nth-child(3) { animation-delay: 0s; }

@keyframes chat-bounce {
    0%, 80%, 100% { transform: scale(.65); opacity: .45; }
    40%           { transform: scale(1);   opacity: 1; }
}

/* Chat notifications */
.chat-notification {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 28px;
    font-size: 12px;
    color: #6b7280;
    opacity: .25;
    transition: opacity .25s;
}
.chat-notification::before,
.chat-notification::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #6b7280;
}
.chat-notification--danger  i { color: #f87171; }
.chat-notification--warning i { color: #fbbf24; }
.chat-notification--info    i { color: #60a5fa; }
.chat-notification:hover {
    opacity: 1;
}

/* Coffee break (rate limit pause) */

.chat-coffee-break {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    background: #ffffff;
    border-radius: 18px;
    border-bottom-left-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,.07);
}

.chat-coffee-cup {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.chat-coffee-cup > i {
    font-size: 26px;
    color: #92400e;
    animation: coffee-tilt 2.4s ease-in-out infinite;
    display: inline-block;
}

@keyframes coffee-tilt {
    0%, 100% { transform: rotate(0deg); }
    20%       { transform: rotate(-10deg) translateY(-2px); }
    40%       { transform: rotate(8deg) translateY(-3px); }
    60%       { transform: rotate(-5deg) translateY(-1px); }
    80%       { transform: rotate(4deg) translateY(-2px); }
}

.chat-coffee-steam {
    display: flex;
    gap: 4px;
    height: 12px;
    align-items: flex-end;
}

.chat-coffee-steam span {
    width: 3px;
    height: 8px;
    background: #d1d5db;
    border-radius: 2px 2px 0 0;
    animation: steam-rise 1.6s ease-in-out infinite;
    transform-origin: bottom center;
}

.chat-coffee-steam span:nth-child(1) { animation-delay: 0s; }
.chat-coffee-steam span:nth-child(2) { animation-delay: .4s; height: 11px; }
.chat-coffee-steam span:nth-child(3) { animation-delay: .2s; height: 6px; }

@keyframes steam-rise {
    0%   { transform: scaleY(1) translateY(0); opacity: .7; }
    50%  { transform: scaleY(1.4) translateY(-4px); opacity: .4; }
    100% { transform: scaleY(.6) translateY(-8px); opacity: 0; }
}

.chat-coffee-text {
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
}

.chat-coffee-countdown {
    font-size: 11px;
    color: #9ca3af;
    font-family: 'Consolas', 'Monaco', monospace;
}

/* Thinking dots */

.chat-thinking-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-thinking-meta {
    font-size: 11px;
    color: #9ca3af;
    font-family: 'Consolas', 'Monaco', monospace;
    line-height: 1;
    white-space: nowrap;
}

.chat-debug-activity {
    margin-top: 5px;
    font-size: 11px;
    color: #b45309;
    font-family: 'Consolas', 'Monaco', monospace;
    line-height: 1;
}

/* ── Input area ───────────────────────────────────────────── */

.chat-input-area {
    flex-shrink: 0;
    padding: 12px 28px 18px;
    background: #f9fafb;
}

.chat-input-row {
    max-width: 840px;
    margin: 0 auto;
}

.chat-input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    padding: 10px 10px 10px 16px;
    transition: border-color .2s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

.chat-input-wrapper.focused { border-color: var(--logisz-amber); }

.chat-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    resize: none;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.55;
    color: #111827;
    max-height: 160px;
    overflow-y: auto;
}

.chat-input::placeholder { color: #9ca3af; }

.chat-send-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    background: var(--logisz-amber);
    color: #111827;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background .2s ease, transform .1s ease;
    flex-shrink: 0;
    align-self: flex-end;
}

.chat-send-btn:hover:not(:disabled)  { background: #e6ac00; }
.chat-send-btn:active:not(:disabled) { transform: scale(.93); }
.chat-send-btn:disabled              { background: #e5e7eb; color: #9ca3af; cursor: not-allowed; }

.chat-input-hint {
    text-align: center;
    font-size: 11px;
    color: #9ca3af;
    margin: 7px 0 0;
}

/* ── Sidebar collapsed ────────────────────────────────────── */

.chat-sidebar.collapsed {
    width: 64px;
    min-width: 64px;
}

.chat-sidebar.collapsed .chat-sidebar-brand,
.chat-sidebar.collapsed .chat-sidebar-item-body,
.chat-sidebar.collapsed .chat-sidebar-user-info,
.chat-sidebar.collapsed .chat-sidebar-section-label,
.chat-sidebar.collapsed .chat-new-btn span,
.chat-sidebar.collapsed .chat-sidebar-empty,
.chat-sidebar.collapsed .chat-logout-btn { display: none; }

.chat-sidebar.collapsed .chat-new-btn {
    justify-content: center;
    padding: 10px;
}

.chat-sidebar.collapsed .chat-sidebar-item {
    justify-content: center;
    padding: 10px 8px;
}

.chat-sidebar.collapsed .chat-sidebar-item i { margin-top: 0; }

.chat-sidebar.collapsed .chat-sidebar-user { justify-content: center; }

.chat-sidebar.collapsed .chat-sidebar-header { justify-content: center; }

.chat-sidebar-toggle {
    margin-left: auto;
    background: none;
    border: none;
    color: #4b5563;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: color .15s, background .15s;
    flex-shrink: 0;
}

.chat-sidebar.collapsed .chat-sidebar-toggle { margin-left: 0; }

.chat-sidebar-toggle:hover { color: #e5e7eb; background: #1f2937; }

/* ── Input meta row ───────────────────────────────────────── */

.chat-input-meta {
    max-width: 840px;
    margin: 6px auto 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.chat-model-select {
    font-size: 11px;
    background: transparent;
    border: 1px solid var(--logisz-amber);
    color: var(--logisz-amber);
    border-radius: 6px;
    padding: 0 8px;
    height: 26px;
    box-sizing: border-box;
    cursor: pointer;
    outline: none;
    transition: background .15s, color .15s;
}

.chat-model-select:hover,
.chat-model-select:focus { background: var(--logisz-amber); color: #111827; }

.chat-model-select option { background: #1f2937; color: #d1d5db; }

.chat-skill-badge {
    font-size: 11px;
    background: #1f2937;
    border: 1px solid #374151;
    color: #9ca3af;
    border-radius: 10px;
    height: 26px;
    padding: 0 9px 0 7px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.chat-skill-badge i { font-size: 9px; color: var(--logisz-amber); }

/* ── Message body wrappers ────────────────────────────────── */

.chat-msg-body {
    flex: 1;
    min-width: 0;
}

.chat-msg-user-body {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* ── Timestamps & usage ───────────────────────────────────── */

.chat-msg-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.chat-ts {
    font-size: 10px;
    margin-top: 6px;
    color: #9ca3af;
    font-family: 'Consolas', 'Monaco', monospace;
    line-height: 1;
}

.chat-usage {
    font-size: 10px;
    color: #9ca3af;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 1px 6px;
    line-height: 1.6;
}

.chat-debug-badge {
    font-size: 10px;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 4px;
    padding: 1px 6px;
    line-height: 1.6;
    font-family: 'Consolas', 'Monaco', monospace;
}

.chat-debug-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    font-size: 10px;
    color: #92400e;
    font-family: 'Consolas', 'Monaco', monospace;
    opacity: .75;
}

.chat-debug-output {
    display: block;
    margin-top: 6px;
    padding: 8px 10px;
    background: #1f2937;
    color: #d1d5db;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    border-radius: 6px;
    max-height: 180px;
    max-width: 680px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.5;
}

/* ── Markdown prose (inside assistant bubble) ─────────────── */

.chat-bubble-assistant { white-space: normal; }

.chat-bubble-assistant h1,
.chat-bubble-assistant h2,
.chat-bubble-assistant h3,
.chat-bubble-assistant h4 {
    font-weight: 600;
    line-height: 1.3;
    margin: 0.75em 0 0.3em;
    color: #111827;
}

.chat-bubble-assistant h1 { font-size: 1.15em; }
.chat-bubble-assistant h2 { font-size: 1.05em; }
.chat-bubble-assistant h3 { font-size: 0.97em; }
.chat-bubble-assistant h4 { font-size: 0.9em; }

.chat-bubble-assistant p          { margin: 0.45em 0; }
.chat-bubble-assistant p:first-child { margin-top: 0; }
.chat-bubble-assistant p:last-child  { margin-bottom: 0; }

.chat-bubble-assistant ul,
.chat-bubble-assistant ol { padding-left: 1.4em; margin: 0.4em 0; }
.chat-bubble-assistant li { margin: 0.2em 0; }

.chat-bubble-assistant strong { font-weight: 600; }
.chat-bubble-assistant em     { font-style: italic; }

.chat-bubble-assistant code {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85em;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    padding: 1px 5px;
    border-radius: 4px;
}

.chat-bubble-assistant pre {
    background: #1f2937;
    color: #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    overflow-x: auto;
    font-size: 0.82em;
    margin: 0.6em 0;
    line-height: 1.55;
}

.chat-bubble-assistant pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

.chat-bubble-assistant blockquote {
    border-left: 3px solid #e5e7eb;
    padding-left: 10px;
    margin: 0.5em 0;
    color: #6b7280;
}

.chat-bubble-assistant a {
    color: #00A0AD;
    text-decoration: underline;
}

.chat-bubble-assistant hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 0.75em 0;
}

.chat-bubble-assistant table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.5em 0;
    font-size: 0.9em;
}

.chat-bubble-assistant th,
.chat-bubble-assistant td {
    padding: 5px 10px;
    border: 1px solid #e5e7eb;
    text-align: left;
}

.chat-bubble-assistant th {
    background: #f9fafb;
    font-weight: 600;
}