/* Retro desktop-stijl, naar https://win98.tpdev.nl/ (TwoPine). */
:root {
  --desktop: #19807f;
  --face: #c0c0c0;
  --light: #dfdfdf;
  --shade: #808080;
  --dark: #000000;
  --ink: #070707;
  --title-from: #000080;
  --title-to: #1084d0;
  /* Logo position and gutter as in tp-maatwerk */
  --gutter: clamp(20px, 4.25vw, 85px);
  --logo-top: clamp(24px, 4.4vw, 88px);
  --logo-w: clamp(110px, 9.4vw, 188px);
  --header-h: calc(var(--logo-top) + var(--logo-w) * .216);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--desktop);
  color: #fff;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 11px;
}

.brand-logo {
  position: absolute;
  top: var(--logo-top);
  left: var(--gutter);
  width: var(--logo-w);
  height: auto;
  display: block;
}

/* Two columns: heading left, window right */
#app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(32px, 5vw, 96px);
  height: 100dvh;
  /* Symmetric: the chat window spans from just below the logo to the same
     distance from the bottom; heading and window stay vertically centred. */
  padding: calc(var(--header-h) + 16px) var(--gutter);
}

#welcome h1 {
  margin: 0;
  max-width: 13em;
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 72px);
  line-height: 1.2;
  letter-spacing: -.005em;
}
#welcome p {
  margin: .9em 0 0;
  font-size: clamp(18px, 1.9vw, 30px);
  line-height: 1.3;
}

/* Window chrome: classic 2px bevels, fixed small metrics */
.window {
  --raised: inset -1px -1px #0a0a0a, inset 1px 1px var(--light), inset -2px -2px var(--shade), inset 2px 2px #fff;
  --sunken: inset -1px -1px #fff, inset 1px 1px var(--shade), inset -2px -2px var(--light), inset 2px 2px #0a0a0a;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 680px;
  min-width: 0;
  padding: 3px;
  background: var(--face);
  color: var(--ink);
  box-shadow: var(--raised);
}
body.chatting .window {
  align-self: stretch;
  min-height: 0;
}

.window .header {
  display: flex;
  align-items: center;
  height: 20px;
  padding: 0 2px 0 4px;
  background: linear-gradient(90deg, var(--title-from), var(--title-to));
  color: #fff;
  cursor: default;
  user-select: none;
  touch-action: none;
}
.window .header h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.button {
  min-height: 23px;
  padding: 3px 12px;
  font-family: inherit;
  font-size: 11px;
  color: var(--ink);
  background: var(--face);
  border: none;
  border-radius: 0;
  box-shadow: var(--raised);
  cursor: pointer;
}
.button:active:not(:disabled) {
  box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px var(--light), inset 2px 2px var(--shade);
  padding: 4px 11px 2px 13px;
}
.button:focus-visible {
  outline: 1px dotted var(--ink);
  outline-offset: -4px;
}
.button:disabled { color: var(--shade); text-shadow: 1px 1px 0 #fff; cursor: default; }

.button-title {
  display: none;
  margin-left: auto;
  width: 16px;
  height: 14px;
  min-height: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
}
.button-title:active:not(:disabled) { padding: 1px 0 0 1px; }
body.chatting .button-title { display: block; }

/* Menu bar */
.menubar {
  display: flex;
  gap: 2px;
  padding: 2px 0;
  border-bottom: 1px solid var(--shade);
  box-shadow: 0 1px 0 #fff;
}
.menubar button,
.menubar a {
  padding: 2px 7px;
  font-family: inherit;
  font-size: 11px;
  color: var(--ink);
  background: none;
  border: none;
  text-decoration: none;
  cursor: default;
}
.menubar button:hover,
.menubar a:hover,
.menubar button:focus-visible,
.menubar a:focus-visible {
  background: var(--title-from);
  color: #fff;
  outline: none;
}

.window .content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 6px;
  padding: 8px;
}

/* Sunken white panels: chat log, input */
#input,
body.chatting #scroll {
  background: #fff;
  border: none;
  box-shadow: var(--sunken);
}

#scroll { display: none; }
body.chatting #scroll {
  display: block;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 10px;
}

/* Chat log */
.msg { margin: 0 0 12px; font-size: 13px; line-height: 1.5; }
.msg:last-child { margin-bottom: 0; }
.msg .who { display: block; font-weight: 700; font-size: 11px; }
.msg.user .who { color: var(--shade); }
.msg.assistant .who { color: var(--title-from); }
.msg .text { display: block; word-wrap: break-word; }
.msg .text strong { font-weight: 700; }

.typing .text { color: var(--shade); font-style: italic; }
.typing .text::after {
  content: '';
  animation: dots 1.2s steps(4) infinite;
}
@keyframes dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}

/* Composer */
#composer { flex: 0 0 auto; }
.prompt-label {
  display: block;
  margin: 2px 0 4px;
  font-size: 11px;
}
body.chatting .prompt-label { display: none; }
#composer .row {
  display: flex;
  gap: 6px;
}
#input {
  flex: 1;
  min-width: 0;
  height: 23px;
  padding: 3px 5px;
  color: var(--ink);
  font-family: inherit;
  font-size: 12px;
  outline: none;
  border-radius: 0;
}
#input::placeholder { color: var(--shade); }
#send { min-width: 75px; }

/* Suggestions as a classic group box */
#suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 0;
  padding: 6px 8px 8px;
  border: 1px solid var(--shade);
  box-shadow: 1px 1px 0 #fff, inset 1px 1px 0 #fff;
}
#suggestions legend { padding: 0 3px; }
body.chatting #suggestions { display: none; }

/* Status bar with resize grip */
.statusbar {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin-top: 2px;
}
.status-field {
  flex: 1;
  padding: 2px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: inset -1px -1px #fff, inset 1px 1px var(--shade);
}
.status-note { flex: 0 1 auto; }
.grip {
  flex: 0 0 auto;
  align-self: flex-end;
  width: 13px;
  height: 13px;
  cursor: nwse-resize;
  touch-action: none;
  background:
    linear-gradient(135deg, transparent 0 45%, #fff 45% 50%, var(--shade) 50% 60%, transparent 60%),
    linear-gradient(135deg, transparent 0 65%, #fff 65% 70%, var(--shade) 70% 80%, transparent 80%),
    linear-gradient(135deg, transparent 0 85%, #fff 85% 90%, var(--shade) 90% 100%);
}

/* Dragged / resized window floats where it was dropped */
.window.floating {
  position: fixed;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  max-width: none;
  height: var(--h, auto);
  z-index: 5;
}
body.chatting .window.floating {
  height: var(--h, max(240px, calc(100dvh - var(--y) - 24px)));
}

/* Win98-style move/resize outline: the window jumps on release */
.drag-outline {
  position: fixed;
  z-index: 20;
  pointer-events: none;
  outline: 2px dotted #fff;
  mix-blend-mode: difference;
}
body.dragging,
body.dragging * { user-select: none; }

/* Mobile: heading on top, window below; no dragging */
@media (max-width: 860px) {
  #app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    row-gap: 28px;
    padding-top: calc(var(--header-h) + 24px);
    padding-bottom: 16px;
  }
  body.chatting #app {
    grid-template-rows: minmax(0, 1fr);
    align-content: stretch;
    padding-bottom: 20px;
  }
  body.chatting #welcome { display: none; }
  .window { max-width: none; }
  .window.floating {
    position: static;
    width: auto;
    height: auto;
  }
  body.chatting .window.floating { height: auto; }
  .grip { cursor: default; visibility: hidden; }
}