/* H.A.N.K. canonical responsive/device layer.
   Behaviour breakpoints: 1100 compact workspace, 720 phone navigation,
   480 narrow composer, 500px short-height workspace. */

:root {
  --hank-touch-target: 44px;
  --hank-content-max: 1200px;
  --hank-content-gutter: clamp(12px, 3vw, 32px);
  --hank-focus-ring: #ffdd57;
  --hank-safe-top: env(safe-area-inset-top, 0px);
  --hank-safe-right: env(safe-area-inset-right, 0px);
  --hank-safe-bottom: env(safe-area-inset-bottom, 0px);
  --hank-safe-left: env(safe-area-inset-left, 0px);
  --hank-viewport-height: 100dvh;
}

@supports not (height: 100dvh) {
  :root { --hank-viewport-height: 100vh; }
}

html {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body, .hank-device-shell { min-width: 0; max-width: 100%; }

.hank-device-shell {
  min-height: var(--hank-viewport-height);
  padding-left: var(--hank-safe-left);
  padding-right: var(--hank-safe-right);
}

.hank-device-content {
  width: min(var(--hank-content-max), 100%);
  min-width: 0;
  margin-inline: auto;
}

.hank-scroll-region {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

img, svg, video, canvas { max-width: 100%; height: auto; }

.hank-content-wrap,
.hank-content-wrap :where(p, li, a, code, pre),
.hank-message-text {
  overflow-wrap: anywhere;
  word-break: normal;
}

.hank-content-wrap :where(pre), .hank-message-text pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
}

:where(button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--hank-focus-ring);
  outline-offset: 3px;
}

:where(input, select, textarea) { font-size: max(16px, 1em); }

.hank-touch-target,
.hank-mobile-nav :where(button, a),
.hank-chat-app :where(button, [role="button"]) {
  min-width: var(--hank-touch-target);
  min-height: var(--hank-touch-target);
}

button.hank-tile {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.hank-responsive-actions { min-width: 0; }

.hank-mobile-nav {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.hank-mobile-nav button {
  padding: 7px 10px;
  border: 1px solid #2b3948;
  border-radius: 10px;
  background: #111a22;
  color: #dce7f3;
}

body.hank-chat-mode .hank-blue-page {
  height: var(--hank-viewport-height);
  min-height: 0;
  padding: var(--hank-safe-top) var(--hank-safe-right) 0 var(--hank-safe-left);
}

.hank-chat-main { grid-template-rows: minmax(50px, auto) minmax(0, 1fr) auto; }

.hank-chat-sidebar, .hank-chat-messages {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.hank-chat-sidebar { overflow-y: auto; }

.hank-chat-messages {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.hank-chat-composer {
  height: auto;
  min-height: calc(72px + var(--hank-safe-bottom));
  padding-bottom: max(10px, var(--hank-safe-bottom));
}

.hank-chat-sidebar { padding-bottom: max(14px, var(--hank-safe-bottom)); }

.hank-chat-input[data-hank-autogrow] {
  height: auto;
  min-height: var(--hank-touch-target);
  max-height: min(30vh, 10rem);
}

.hank-message-text :where(code, pre) { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

@media (max-width: 720px) {
  .hank-logo {
    width: min(560px, calc(100vw - (2 * var(--hank-content-gutter))));
    margin-inline: auto;
    transform: none;
  }

  .hank-logo img { width: 100%; }

  .hank-question {
    max-width: calc(100% - (2 * var(--hank-content-gutter)));
    font-size: clamp(24px, 8vw, 32px);
    text-align: center;
  }

  .hank-tile-row { gap: 16px; }

  .hank-top-actions {
    width: calc(100% - (2 * var(--hank-content-gutter)));
    align-items: stretch;
    flex-direction: column;
  }

  .hank-top-buttons { justify-content: flex-start; }

  .hank-auth-panel, .hank-profile-panel {
    width: calc(100% - (2 * var(--hank-content-gutter)));
  }

  .hank-mobile-nav { display: flex; }

  .hank-chat-sidebar {
    position: fixed;
    z-index: 1200;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(320px, 88vw);
    height: var(--hank-viewport-height);
    max-height: 100dvh;
    padding-top: max(14px, var(--hank-safe-top));
    padding-left: max(14px, var(--hank-safe-left));
    transform: translateX(calc(-100% - 8px));
    visibility: hidden;
    pointer-events: none;
    transition: transform 180ms ease, visibility 0s linear 180ms;
    box-shadow: 12px 0 28px rgba(0, 0, 0, .42);
  }

  body.hank-mobile-chats-open .hank-chat-sidebar {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .hank-chat-sidebar .hank-sidebar-thread-list {
    flex: 1 1 auto;
  }

  .hank-mobile-chat-close {
    display: block;
    width: 100%;
    min-height: var(--hank-touch-target);
    border: 1px solid #34475b;
    border-radius: 10px;
    background: #17283e;
    color: #dce7f3;
    font: inherit;
    cursor: pointer;
  }

  .hank-mobile-chat-backdrop {
    display: block;
    position: fixed;
    z-index: 1190;
    inset: 0;
    width: 100%;
    height: var(--hank-viewport-height);
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, .48);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 0s linear 180ms;
  }

  body.hank-mobile-chats-open .hank-mobile-chat-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .hank-chat-composer {
    grid-template-columns: var(--hank-touch-target) minmax(0, 1fr) var(--hank-touch-target) 80px;
  }

  .hank-chat-topbar { gap: 8px; padding-inline: 10px; }

  .hank-chat-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hank-message { max-width: 94%; }
  .hank-chat-messages { padding: 14px 12px; }
}

@media (max-width: 480px) {
  .hank-chat-title { display: none; }
  .hank-mobile-nav {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }
  .hank-mobile-nav button { padding-inline: 7px; }

  .hank-chat-composer {
    grid-template-columns: var(--hank-touch-target) var(--hank-touch-target) minmax(72px, 1fr);
    grid-template-rows: auto auto auto;
    gap: 7px;
    padding: 8px 8px max(8px, var(--hank-safe-bottom));
  }

  .hank-chat-input {
    grid-column: 1 / -1;
    grid-row: 1;
    height: auto;
    min-height: var(--hank-touch-target);
    max-height: min(30vh, 7.5rem);
  }

  .hank-plus-button { grid-column: 1; grid-row: 2; }
  .hank-audio-button { grid-column: 2; grid-row: 2; }
  .hank-send-button { grid-column: 3; grid-row: 2; }

  .hank-microphone-status {
    position: static;
    grid-column: 1 / -1;
    grid-row: 3;
    min-width: 0;
    line-height: 16px;
  }
}

@media (max-height: 500px) and (min-width: 721px) {
  .hank-chat-sidebar { gap: 8px; padding-block: 8px; }
  .hank-sidebar-bottom { margin-top: 0; }
  .hank-chat-status-panel { padding-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}