/* Hub v51: futuristic assistant status panel and visual cleanup. */
.page-hub {
  background:
    linear-gradient(rgba(22, 51, 91, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 51, 91, .035) 1px, transparent 1px),
    radial-gradient(circle at 84% 4%, rgba(47, 113, 244, .16), transparent 31rem),
    var(--bg);
  background-size: 34px 34px, 34px 34px, auto, auto;
}

.page-hub .shell { width: min(1280px, calc(100% - 24px)); }
.page-hub .hero { padding-bottom: 8px; }

.hub-status-assistant {
  --assistant-accent: #36a2ff;
  --assistant-soft: rgba(54, 162, 255, .2);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 215px minmax(330px, .95fr) minmax(480px, 1.4fr);
  align-items: center;
  gap: 24px;
  min-height: 226px;
  margin: 10px 0 18px;
  padding: 22px 24px 22px 10px;
  overflow: hidden;
  border: 1px solid rgba(113, 169, 255, .35);
  border-radius: 26px;
  background:
    radial-gradient(circle at 9% 130%, var(--assistant-soft), transparent 42%),
    linear-gradient(128deg, #07162d 0%, #0b2348 55%, #102c58 100%);
  box-shadow: 0 18px 44px rgba(6, 22, 47, .2);
  color: #f8fbff;
  transition: border-color .24s ease, box-shadow .24s ease, background .24s ease;
}

.hub-status-assistant::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .18;
  background-image:
    linear-gradient(rgba(116, 180, 255, .25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116, 180, 255, .25) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg, transparent, #000 46%, #000);
}

.hub-status-assistant::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -155px;
  top: -188px;
  z-index: -1;
  border: 34px solid var(--assistant-soft);
  border-radius: 50%;
}

.hub-status-assistant[data-tone="success"] { --assistant-accent: #36dda0; --assistant-soft: rgba(54, 221, 160, .2); border-color: rgba(54, 221, 160, .46); }
.hub-status-assistant[data-tone="waiting"] { --assistant-accent: #b693ff; --assistant-soft: rgba(182, 147, 255, .2); border-color: rgba(182, 147, 255, .48); }
.hub-status-assistant[data-tone="operations"] { --assistant-accent: #4dd7ed; --assistant-soft: rgba(77, 215, 237, .2); border-color: rgba(77, 215, 237, .46); }
.hub-status-assistant[data-tone="attention"] { --assistant-accent: #ffd45b; --assistant-soft: rgba(255, 212, 91, .22); border-color: rgba(255, 212, 91, .5); }
.hub-status-assistant[data-tone="critical"] { --assistant-accent: #ff6678; --assistant-soft: rgba(255, 102, 120, .23); border-color: rgba(255, 102, 120, .58); box-shadow: 0 18px 48px rgba(158, 20, 45, .22); }

.assistant-visual {
  position: relative;
  align-self: stretch;
  min-height: 182px;
}

.assistant-visual img {
  position: absolute;
  left: 0;
  bottom: -79px;
  width: 208px;
  height: auto;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .32));
  transform-origin: 52% 76%;
  animation: assistant-float 3.6s ease-in-out infinite;
}

.assistant-status-symbol {
  position: absolute;
  top: 7px;
  right: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid color-mix(in srgb, var(--assistant-accent) 70%, #fff);
  border-radius: 50%;
  background: rgba(7, 20, 43, .9);
  box-shadow: 0 0 24px var(--assistant-soft);
  color: var(--assistant-accent);
  font-size: 22px;
  font-weight: 950;
}

.hub-status-assistant[data-tone="critical"] .assistant-visual img { animation: assistant-alert 1.2s ease-in-out infinite; }

.assistant-copy,
.assistant-action {
  font-family: "Leelawadee UI", "Noto Sans Thai", Tahoma, sans-serif;
}
.assistant-copy { min-width: 0; }
.assistant-copy .eyebrow { margin: 0 0 8px; color: var(--assistant-accent); font-size: 12px; font-weight: 900; letter-spacing: .14em; }
.assistant-copy h2 { margin: 0; color: #fff; font-size: clamp(29px, 2.55vw, 39px); font-weight: 900; line-height: 1.12; letter-spacing: -.025em; }
.assistant-copy > p:not(.eyebrow) { margin: 10px 0 15px; color: #d1def0; font-size: 16px; font-weight: 650; line-height: 1.55; }

.assistant-meta { display: flex; align-items: center; gap: 12px; color: #a8bad2; font-size: 12px; font-weight: 700; }
.assistant-meta span { display: inline-flex; align-items: center; gap: 7px; }
.assistant-meta i { width: 8px; height: 8px; border-radius: 50%; background: var(--assistant-accent); box-shadow: 0 0 10px var(--assistant-accent); }
.assistant-meta button { padding: 7px 10px; border: 1px solid rgba(180, 204, 236, .24); border-radius: 9px; background: rgba(255, 255, 255, .06); color: #eef6ff; font: inherit; font-weight: 850; cursor: pointer; }
.assistant-meta button:hover { border-color: var(--assistant-accent); background: var(--assistant-soft); }
.assistant-meta button:disabled { opacity: .55; cursor: wait; }

.assistant-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.assistant-action {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 148px;
  align-content: center;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(162, 192, 231, .18);
  border-radius: 17px;
  background: rgba(255, 255, 255, .065);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.assistant-action:hover { transform: translateY(-2px); border-color: var(--assistant-accent); background: rgba(255, 255, 255, .11); }
.assistant-action span { overflow: hidden; color: #c0cee1; font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.assistant-action b { margin: 7px 0 5px; color: #fff; font-size: 40px; font-weight: 900; line-height: 1; }
.assistant-action small { color: var(--assistant-accent); font-size: 12px; font-weight: 850; }
.assistant-action::after { content: "→"; position: absolute; right: 9px; bottom: 8px; color: var(--assistant-accent); font-weight: 950; }
.assistant-action.is-loading::after { content: ""; }
.assistant-action.is-loading { grid-column: 1 / -1; min-height: 108px; }

.page-hub .primary-heading,
.page-hub .secondary-heading { position: relative; padding-left: 11px; }
.page-hub .primary-heading::before,
.page-hub .secondary-heading::before { content: ""; position: absolute; inset: 3px auto 3px 0; width: 3px; border-radius: 99px; background: linear-gradient(#2f71f4, #5dbce8); }
.page-hub .primary-card { backdrop-filter: blur(10px); }
.page-hub .primary-card .primary-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 8px 18px rgba(9, 36, 79, .08); }
.page-hub .secondary-grid > a { backdrop-filter: blur(8px); }

html[data-dark="true"] .page-hub { background-color: #071124; }

@keyframes assistant-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-5px) rotate(1deg); }
}
@keyframes assistant-alert {
  0%, 100% { transform: translateX(0) rotate(-1deg); }
  35% { transform: translateX(-2px) rotate(-2deg); }
  65% { transform: translateX(2px) rotate(2deg); }
}

@media (max-width: 960px) {
  .hub-status-assistant { grid-template-columns: 155px minmax(250px, 1fr) minmax(300px, 1.2fr); gap: 16px; min-height: 190px; padding: 18px 20px 18px 8px; }
  .assistant-visual { min-height: 154px; }
  .assistant-visual img { left: -4px; width: 158px; bottom: -59px; }
  .assistant-copy h2 { font-size: clamp(25px, 3.2vw, 32px); }
  .assistant-copy > p:not(.eyebrow) { font-size: 14px; }
  .assistant-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assistant-action:nth-child(3) { display: none; }
  .assistant-action { min-height: 124px; padding: 15px; }
  .assistant-action b { font-size: 34px; }
}

@media (max-width: 700px) {
  .page-hub .shell { width: min(100% - 16px, 1280px); }
  .hub-status-assistant { grid-template-columns: 122px minmax(0, 1fr); gap: 13px; min-height: 0; padding: 16px; border-radius: 21px; }
  .assistant-visual { min-height: 128px; }
  .assistant-visual img { left: -18px; width: 142px; bottom: -48px; }
  .assistant-status-symbol { top: 0; right: -2px; width: 34px; height: 34px; font-size: 16px; }
  .assistant-copy .eyebrow { font-size: 10px; }
  .assistant-copy h2 { font-size: 24px; }
  .assistant-copy > p:not(.eyebrow) { font-size: 13px; line-height: 1.45; }
  .assistant-meta { font-size: 11px; }
  .assistant-actions { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .assistant-action, .assistant-action.is-loading { min-height: 96px; padding: 12px; }
  .assistant-action:nth-child(3) { display: grid; }
  .assistant-action span { font-size: 11px; }
  .assistant-action b { font-size: 29px; }
  .assistant-action small { font-size: 10px; }
}

/* The pre-login news board is intentionally generous: staff must be able to
   read announcements before entering the shared workspace. */
.hub-access-layout {
  grid-template-columns: minmax(340px, 400px) minmax(650px, 1fr);
  width: min(1420px, 100%);
}

.hub-access-news {
  padding: 32px !important;
}

.hub-access-news .news-board-head {
  gap: 28px;
}

.hub-access-news .news-board-head .eyebrow {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: .18em;
}

.hub-access-news .news-board-head h2 {
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.hub-access-news .news-board-head > div > p:last-child {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.5;
}

.hub-access-news .news-list {
  gap: 15px;
  max-height: 500px;
  margin-top: 22px;
}

.hub-access-news .news-card {
  min-height: 168px;
  padding: 20px 22px;
  border-radius: 18px;
}

.hub-access-news .news-card .news-kind {
  font-size: 11px;
}

.hub-access-news .news-card h3 {
  margin: 9px 0 8px;
  overflow: visible;
  font-size: 22px;
  line-height: 1.25;
  text-overflow: clip;
  white-space: normal;
}

.hub-access-news .news-card p {
  overflow: visible;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  text-overflow: clip;
  white-space: pre-line;
}

.hub-access-news .news-card time {
  display: block;
  margin-top: 12px;
  font-size: 12px;
}

.hub-access-news .news-empty {
  padding: 34px;
  font-size: 17px;
  font-weight: 750;
}

.hub-access-news .news-manage {
  min-height: 44px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 900;
}

@media (max-width: 980px) {
  .hub-access-layout { grid-template-columns: 1fr; width: min(760px, 100%); }
  .hub-access-news { padding: 26px !important; }
  .hub-access-news .news-list { grid-template-columns: 1fr; max-height: none; }
}

@media (max-width: 580px) {
  .hub-access-news { padding: 22px 18px !important; }
  .hub-access-news .news-board-head h2 { font-size: 29px; }
  .hub-access-news .news-board-head > div > p:last-child { font-size: 14px; }
  .hub-access-news .news-card { min-height: 0; padding: 18px; }
  .hub-access-news .news-card h3 { font-size: 20px; }
  .hub-access-news .news-card p { font-size: 15px; }
}

@media (max-width: 470px) {
  .assistant-actions { grid-template-columns: 1fr; }
  .assistant-action { min-height: 72px; grid-template-columns: 1fr auto; column-gap: 10px; }
  .assistant-action span, .assistant-action small { grid-column: 1; }
  .assistant-action b { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding-right: 17px; }
  .assistant-action::after { top: 50%; bottom: auto; transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .assistant-visual img { animation: none !important; }
}