/* AI-sessie: werkplaats met gesprek en live voorbeeld */
body.sessie { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
[hidden] { display: none !important; }

.s-top {
  flex: none; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(3,11,18,.9), rgba(3,11,18,.6)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.s-tools { display: flex; align-items: center; gap: 8px; }
.s-timer { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font: 600 13px "JetBrains Mono", monospace; color: var(--turq); background: rgba(46,230,214,.1); border: 1px solid rgba(46,230,214,.3); }
.s-timer svg { width: 15px; height: 15px; }
.s-timer.laag { color: var(--flamingo); background: rgba(255,111,145,.1); border-color: rgba(255,111,145,.35); }
.s-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--edge-2); background: var(--panel); color: var(--text); font: 600 14px Inter, sans-serif; cursor: pointer; }
.s-btn:disabled { opacity: .4; cursor: default; }
.s-btn svg { width: 16px; height: 16px; }

/* Code- en betaalschermen */
.s-scherm { flex: 1; display: grid; place-items: center; padding: 24px 16px; overflow: auto; }
.s-kaart { width: min(520px, 100%); padding: 28px; display: grid; gap: 16px; }
.s-kaart h1 { font-size: clamp(28px, 6vw, 40px); }
.s-kaart form { display: grid; gap: 12px; }
.s-code-in { width: 100%; min-height: 56px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--edge-2); background: rgba(0,0,0,.3); color: var(--text); font: 600 20px "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.s-code-in:focus { outline: 2px solid var(--turq); outline-offset: 2px; }
.s-fout { color: #ff9fb6; min-height: 1.2em; }
.s-koop { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--edge); color: var(--soft); }
.s-codebox { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-radius: 14px; background: rgba(46,230,214,.08); border: 1px dashed rgba(46,230,214,.5); }
.s-codebox code { font: 700 clamp(18px, 5vw, 24px) "JetBrains Mono", monospace; color: var(--turq); letter-spacing: .06em; word-break: break-all; }

/* Werkplaats */
.s-werk { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
.s-tabs { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.06); }
.s-tabs button { flex: 1; min-height: 40px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--soft); font: 600 15px Inter, sans-serif; cursor: pointer; position: relative; }
.s-tabs button.on { background: var(--panel-2); color: var(--text); border-color: var(--edge); }
.s-stip { position: absolute; top: 8px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--flamingo); box-shadow: 0 0 10px var(--flamingo); }
.s-chat, .s-preview { min-height: 0; display: flex; flex-direction: column; padding: 0; }
.s-werk:not(.toon-preview) .s-preview { display: none; }
.s-werk.toon-preview .s-chat { display: none; }
@media (min-width: 800px) {
  .s-werk { grid-template-columns: minmax(340px, 1fr) 1.15fr; grid-template-rows: auto 1fr; }
  .s-balk { grid-column: 1 / -1; }
  .s-tabs { display: none; }
  .s-werk .s-chat, .s-werk .s-preview { display: flex !important; }
  .s-chat { border-right: 1px solid rgba(255,255,255,.07); }
}

.s-berichten { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; }
.s-msg { max-width: 92%; display: grid; gap: 6px; animation: pop .35s var(--ease) both; }
.s-msg.jij { align-self: flex-end; }
.s-msg .wie { font: 600 11.5px "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.s-msg.jij .wie { justify-content: flex-end; }
.s-msg.ai .wie::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--turq); box-shadow: 0 0 10px var(--turq); }
.s-bubbel { padding: 12px 15px; border-radius: 18px; line-height: 1.55; overflow-wrap: anywhere; }
.s-msg.jij .s-bubbel { background: linear-gradient(135deg, #1e5b75, #173f56); border-bottom-right-radius: 6px; }
.s-msg.ai .s-bubbel { background: rgba(255,255,255,.06); border: 1px solid var(--edge); border-bottom-left-radius: 6px; }
.s-bubbel p { margin: 0 0 8px; } .s-bubbel p:last-child { margin: 0; }
.s-bubbel ol, .s-bubbel ul { margin: 6px 0 8px; padding-left: 22px; display: grid; gap: 4px; }
.s-bubbel code { font: 500 .9em "JetBrains Mono", monospace; background: rgba(0,0,0,.3); padding: 1px 5px; border-radius: 5px; }
.s-bubbel a { color: var(--turq); }
.s-bubbel img { max-width: 160px; border-radius: 10px; margin: 4px 4px 0 0; display: inline-block; }
.s-route { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(139,123,255,.14); color: #c3baff; font: 600 10.5px "JetBrains Mono", monospace; letter-spacing: .04em; text-transform: none; }
.s-route b { color: #fff; font-weight: 600; }
.s-info { font-size: 13.5px; color: var(--soft); display: flex; align-items: center; gap: 8px; }
.s-info.ok { color: #8ff0c6; } .s-info.zoek { color: #ffd79a; }
.s-bronnen { font-size: 13px; color: var(--soft); display: grid; gap: 4px; }
.s-bronnen a { color: var(--turq); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.s-grens { padding: 12px 14px; border-radius: 14px; background: rgba(255,196,107,.1); border: 1px solid rgba(255,196,107,.35); color: #ffe2b3; }
.s-laad { display: inline-flex; gap: 5px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid var(--edge); align-self: flex-start; }
.s-laad i { width: 7px; height: 7px; border-radius: 50%; background: var(--turq); animation: blink 1s infinite; }
.s-laad i:nth-child(2) { animation-delay: .15s; } .s-laad i:nth-child(3) { animation-delay: .3s; }

.s-voorbeelden { display: flex; gap: 8px; padding: 0 16px 10px; overflow-x: auto; flex: none; }
.s-voorbeelden .chip { padding: 10px 14px; font-size: 14px; cursor: pointer; color: var(--text); }

.s-invoer { flex: none; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.07); display: grid; gap: 8px; }
.s-bijlagen { display: flex; gap: 8px; flex-wrap: wrap; }
.s-bijlagen:empty { display: none; }
.s-bijlage { position: relative; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; border: 1px solid var(--edge-2); }
.s-bijlage img { width: 100%; height: 100%; object-fit: cover; }
.s-bijlage button { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.7); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
.s-rij { display: flex; align-items: flex-end; gap: 8px; }
.s-rij textarea { flex: 1; min-height: 46px; max-height: 160px; resize: none; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--edge); background: rgba(255,255,255,.05); color: var(--text); font: 400 16px/1.4 Inter, sans-serif; }
.s-rij textarea:focus { outline: 2px solid rgba(46,230,214,.6); outline-offset: 1px; }
.s-icoon { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.05); border: 1px solid var(--edge); color: var(--soft); cursor: pointer; }
.s-icoon svg { width: 20px; height: 20px; }
.s-stuur { background: var(--turq); color: #021614; border: 0; }
.s-stuur:disabled { opacity: .4; cursor: default; }
.s-invoer.sleep { outline: 2px dashed var(--turq); outline-offset: -6px; }

.s-preview-kop { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--edge); font: 600 12.5px "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.s-preview-kop .dots { display: flex; gap: 6px; } .s-preview-kop .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.s-preview-leeg { flex: 1; display: grid; place-items: center; text-align: center; color: var(--dim); padding: 24px; }
#preview { flex: 1; width: 100%; border: 0; background: #fff; }
.s-timer { white-space: nowrap; }
@media (max-width: 480px) {
  .s-top .logo { font-size: 0; gap: 0; }
  .s-btn span { display: none; }
  .s-btn { padding: 0 10px; }
}

.s-vorige { color: var(--soft); font-size: 15px; }
.s-vorige summary { cursor: pointer; color: var(--turq); font-weight: 600; padding: 4px 0; }
.s-vorige p { margin: 6px 0 8px; }
.s-vorige .s-code-in { font-size: 16px; min-height: 48px; }

/* Inloggen */
.s-email-in { width: 100%; min-height: 56px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--edge-2); background: rgba(0,0,0,.3); color: var(--text); font: 500 18px Inter, sans-serif; }
.s-email-in:focus { outline: 2px solid var(--turq); outline-offset: 2px; }
.s-code6 { text-align: center; font-size: 30px; letter-spacing: .4em; }
.s-zacht { color: var(--soft); font-size: 15px; margin: 0; }
.s-link { background: none; border: 0; padding: 4px 0; color: var(--turq); font: 600 15px Inter, sans-serif; cursor: pointer; justify-self: start; }

/* Tijdbalk */
.s-balk { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px; border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(46,230,214,.05); }
.s-tijd { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--turq); min-width: 0; }
.s-tijd svg { width: 17px; height: 17px; flex: none; }
.s-tijd.laag { color: var(--sun); }
.s-tijd.op { color: var(--flamingo); }
.s-koopknop { flex: none; padding: 7px 14px; border-radius: 999px; background: var(--turq); color: #021614; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }

/* Panelen (projecten, account) */
.s-paneel { position: fixed; z-index: 50; top: 68px; right: 12px; width: min(380px, calc(100vw - 24px)); max-height: calc(100dvh - 90px); overflow: auto; padding: 18px; display: grid; gap: 12px; background: rgba(6,22,33,.97); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.s-paneel-kop { display: flex; align-items: center; justify-content: space-between; font-size: 17px; }
.s-sluit { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--edge); background: none; color: var(--text); font-size: 20px; cursor: pointer; }
.s-paneel .btn { justify-content: center; }
.s-paneel form { display: grid; gap: 10px; margin-top: 10px; }
.s-projectlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.s-projectlijst button { width: 100%; text-align: left; display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--edge); background: var(--panel); color: var(--text); font: 600 15px Inter, sans-serif; cursor: pointer; }
.s-projectlijst button small { color: var(--dim); font-weight: 400; font-size: 12.5px; }
.s-projectlijst button.on { border-color: var(--turq); background: rgba(46,230,214,.1); }
[dir="rtl"] .s-projectlijst button { text-align: right; }
[dir="rtl"] .s-paneel { right: auto; left: 12px; }
.s-spam { margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(255,196,107,.12); border: 1px solid rgba(255,196,107,.4); color: #ffe2b3; font-size: 15px; font-weight: 600; }
.s-voorlees { width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid var(--edge); background: none; color: var(--soft); cursor: pointer; padding: 0; }
.s-voorlees svg { width: 15px; height: 15px; }
.s-voorlees.aan { color: #021614; background: var(--turq); border-color: var(--turq); }
.s-geheugen { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--edge); background: var(--panel); }
.s-geheugen ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--soft); font-size: 14.5px; }
.s-geheugen ul:empty { display: none; }