/* ==========================================================================
   AIツイン デザイン基盤
   モック（2026-08 AIツイン MockHost）のインライン style からトークンを抽出したもの。
   3-B 以降の画面もこのファイルを参照する。値を直接書かずトークンを使うこと。
   ========================================================================== */

:root {
  /* 基調色 */
  --at-primary: #1F86D0;
  --at-primary-hover: #146AAE;
  --at-primary-deep: #175FA0;
  --at-primary-soft: #EAF4FC;

  /* 面 */
  --at-bg: #EEF5FB;
  --at-surface: #FFFFFF;
  --at-surface-alt: #F8FBFE;
  --at-surface-input: #FBFDFF;

  /* 文字 */
  --at-text: #1B2B3A;
  --at-text-strong: #33485C;
  --at-text-muted: #64798C;
  --at-text-faint: #7B8EA0;
  --at-text-dim: #93A6B6;

  /* 枠線 */
  --at-border: #E1EBF4;
  --at-border-input: #D8E4EF;
  --at-border-accent: #9CC9EA;

  /* 角丸 */
  --at-radius-sm: 12px;
  --at-radius-md: 18px;
  --at-radius-lg: 20px;
  --at-radius-pill: 999px;

  /* 影 */
  --at-shadow-btn: 0 8px 18px rgba(31, 134, 208, 0.28);
  --at-shadow-card: 0 14px 30px rgba(27, 43, 58, 0.09);
  --at-focus-ring: 0 0 0 4px rgba(31, 134, 208, 0.12);

  /* エラー */
  --at-danger: #C0392B;
  --at-danger-bg: #FDECEA;
  --at-danger-border: #F5C6C0;

  /* 成功 */
  --at-success: #5B9A32;
  --at-success-bg: #EEF7E8;
  --at-success-border: #CFE6BC;
}

/* --------------------------------------------------------------------------
   ベース
   -------------------------------------------------------------------------- */

.at-page,
.at-page body {
  margin: 0;
  padding: 0;
}

.at-page body {
  /* Noto Sans JP が取得できなくても崩れないよう sans-serif を必ず並べる */
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
  color: var(--at-text);
  background: var(--at-bg);
}

.at-page *,
.at-page *::before,
.at-page *::after {
  box-sizing: border-box;
}

.at-page a {
  color: var(--at-primary);
  text-decoration: none;
}

.at-page a:hover {
  color: var(--at-primary-hover);
  text-decoration: underline;
}

.at-page input,
.at-page button,
.at-page textarea,
.at-page select {
  font-family: inherit;
}

/* --------------------------------------------------------------------------
   共通部品
   -------------------------------------------------------------------------- */

/* 入力欄（ラベル＋入力の縦積み） */
.at-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.at-field-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--at-text-strong);
}

.at-field input {
  height: 50px;
  padding: 0 15px;
  font-size: 15px;
  color: var(--at-text);
  border: 1.5px solid var(--at-border-input);
  border-radius: var(--at-radius-sm);
  background: var(--at-surface-input);
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.at-field input:focus {
  border-color: var(--at-primary);
  background: var(--at-surface);
  box-shadow: var(--at-focus-ring);
}

.at-field-error {
  font-size: 12.5px;
  color: var(--at-danger);
}

/* 主ボタン */
.at-btn-primary {
  height: 52px;
  border: none;
  border-radius: var(--at-radius-sm);
  background: var(--at-primary);
  color: #fff;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--at-shadow-btn);
  transition: background 0.15s, transform 0.15s;
}

.at-btn-primary:hover {
  background: var(--at-primary-hover);
  transform: translateY(-1px);
}

.at-btn-primary:active {
  transform: translateY(0);
}

/* ピル（4ブロックの表示など） */
.at-pill {
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: var(--at-radius-pill);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* エラー帯 */
.at-error {
  padding: 12px 14px;
  border-radius: var(--at-radius-sm);
  background: var(--at-danger-bg);
  border: 1px solid var(--at-danger-border);
  color: var(--at-danger);
  font-size: 13px;
  line-height: 1.7;
}

.at-error:empty {
  display: none;
}

/* --------------------------------------------------------------------------
   アニメーション
   -------------------------------------------------------------------------- */

@keyframes at-chai-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.at-chai-float {
  animation: at-chai-float 5.5s ease-in-out infinite;
}

@keyframes at-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

.at-shake {
  animation: at-shake 0.4s ease-in-out;
}

/* --------------------------------------------------------------------------
   ログイン画面（2ペイン）
   -------------------------------------------------------------------------- */

.at-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

/* 左：ブランド面 */
.at-login-brand {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #2E96DC 0%, #1F7BC4 55%, var(--at-primary-deep) 100%);
  padding: 64px 72px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
}

/* 背景の装飾円 */
.at-login-brand::before,
.at-login-brand::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.at-login-brand::before {
  width: 620px;
  height: 620px;
  background: rgba(255, 255, 255, 0.07);
  top: -220px;
  right: -200px;
}

.at-login-brand::after {
  width: 380px;
  height: 380px;
  background: rgba(255, 255, 255, 0.06);
  bottom: -140px;
  left: -120px;
}

.at-login-logo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.at-login-logo img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.at-login-logo-name {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.at-login-logo-sub {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.8;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  padding-left: 12px;
}

.at-login-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 520px;
}

.at-login-copy h1 {
  margin: 0;
  font-size: 40px;
  line-height: 1.35;
  font-weight: 900;
  text-wrap: pretty;
}

.at-login-copy p {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.9);
  text-wrap: pretty;
}

.at-login-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.at-login-brand-foot {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.at-login-brand-foot span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.9;
}

.at-login-brand-foot img {
  width: 168px;
  height: 168px;
  object-fit: contain;
  margin-bottom: -14px;
}

/* 右：フォーム面 */
.at-login-pane {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  background: var(--at-surface);
}

.at-login-form {
  width: 100%;
  max-width: 396px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.at-login-head h2 {
  margin: 0;
  font-size: 25px;
  font-weight: 900;
}

.at-login-head p {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--at-text-muted);
  line-height: 1.8;
}

.at-login-fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.at-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #4A5F72;
  cursor: pointer;
}

.at-remember input {
  width: 17px;
  height: 17px;
  accent-color: var(--at-primary);
  cursor: pointer;
}

/* 狭い画面でだけ出す小さなロゴ */
.at-login-logo-compact {
  display: none;
  align-items: center;
  gap: 10px;
}

.at-login-logo-compact img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.at-login-logo-compact span {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: var(--at-text);
}

@media (max-width: 900px) {
  .at-login {
    grid-template-columns: 1fr;
  }

  .at-login-brand {
    display: none;
  }

  .at-login-logo-compact {
    display: flex;
  }
}

/* --------------------------------------------------------------------------
   共通部品（3-B2 で追加）
   -------------------------------------------------------------------------- */

.at-card {
  background: var(--at-surface);
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius-md);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow 0.15s, transform 0.15s;
}

.at-card:hover {
  box-shadow: var(--at-shadow-card);
  transform: translateY(-2px);
}

.at-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  background: #F0F5FA;
  color: var(--at-text-faint);
}

.at-badge-simple {
  background: var(--at-success-bg);
  color: var(--at-success);
}

.at-badge-advanced {
  background: #EEF1FD;
  color: #4A5BC4;
}

@keyframes at-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.at-fade-up {
  animation: at-fade-up 0.4s ease both;
}

/* --------------------------------------------------------------------------
   共通レイアウト
   -------------------------------------------------------------------------- */

.at-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.at-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--at-border);
}

.at-header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  height: 66px;
  display: flex;
  align-items: center;
  gap: 24px;
  /* 狭い画面でナビを直下に垂らすための基準 */
  position: relative;
}

/* 狭い画面のメニュー開閉ボタン。広い画面では出さない */
.at-nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--at-border);
  border-radius: 10px;
  background: var(--at-surface);
  color: var(--at-text-strong);
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.at-nav-toggle:hover {
  background: var(--at-surface-alt);
}

.at-page .at-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  white-space: nowrap;
  color: var(--at-text);
}

.at-page .at-brand:hover {
  text-decoration: none;
  color: var(--at-text);
}

.at-brand img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.at-brand span {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.at-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}

.at-nav a {
  font-size: 13.5px;
  font-weight: 500;
  color: #5A7086;
  padding: 8px 14px;
  border-radius: 9px;
}

.at-nav a:hover {
  background: #F1F6FA;
  text-decoration: none;
}

.at-nav a.at-nav-active {
  font-weight: 700;
  color: var(--at-primary);
  background: var(--at-primary-soft);
}

.at-header-spacer {
  flex: 1;
}

/* 検索は 3-B2 では作らない。枠だけ確保しておく */
.at-search-slot {
  width: 210px;
  min-width: 120px;
  flex-shrink: 1;
  height: 38px;
  border: 1.5px solid var(--at-border);
  border-radius: 10px;
  background: var(--at-surface-alt);
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 13px;
  color: #A2B4C4;
}

.at-user {
  position: relative;
  flex-shrink: 0;
}

.at-user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px 4px 4px 6px;
  border-radius: var(--at-radius-pill);
}

.at-user-chip:hover {
  background: #F1F6FA;
}

.at-user-initial {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--at-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.at-user-name {
  font-size: 13px;
  color: #4A5F72;
  font-weight: 500;
  white-space: nowrap;
}

.at-user-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 46px;
  min-width: 180px;
  background: var(--at-surface);
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius-sm);
  box-shadow: var(--at-shadow-card);
  padding: 6px;
  z-index: 30;
}

.at-user-menu.at-open {
  display: block;
}

.at-user-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--at-text-strong);
}

.at-user-menu a:hover {
  background: var(--at-surface-alt);
  text-decoration: none;
}

.at-main {
  flex: 1;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 36px 32px 72px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.at-footer {
  border-top: 1px solid var(--at-border);
  background: var(--at-surface);
}

.at-footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: var(--at-text-dim);
}

.at-footer-links {
  display: flex;
  gap: 18px;
}

.at-footer-links span {
  color: var(--at-text-dim);
}

@media (max-width: 900px) {
  .at-search-slot {
    display: none;
  }

  .at-nav-toggle {
    display: flex;
  }

  /* ナビは畳んでボタンで開く。隠したままにすると、狭い画面から
     チャット履歴・ギャラリー・知識ライブラリ・組織設定へ URL 直打ち以外で
     行けなくなる（3-B2 で置き換えを用意しないまま隠していた） */
  .at-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 16px;
    right: 16px;
    z-index: 900;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px;
    background: var(--at-surface);
    border: 1px solid var(--at-border);
    border-radius: var(--at-radius-md);
    box-shadow: var(--at-shadow-card);
  }

  .at-nav.at-open {
    display: flex;
  }

  .at-header-inner,
  .at-main,
  .at-footer-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* --------------------------------------------------------------------------
   ホーム画面
   -------------------------------------------------------------------------- */

.at-home-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.at-stats {
  background: linear-gradient(135deg, #FFFFFF 0%, #F3F9FF 100%);
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius-lg);
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

.at-stats-eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--at-primary);
  letter-spacing: 0.06em;
}

.at-stats h1 {
  margin: 4px 0 0;
  font-size: 27px;
  font-weight: 900;
}

.at-stats p {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--at-text-muted);
  line-height: 1.9;
}

.at-stats-row {
  display: flex;
  gap: 26px;
  margin-top: 18px;
}

.at-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.at-stat-value {
  font-size: 22px;
  font-weight: 900;
  color: var(--at-text);
}

.at-stat-label {
  font-size: 11.5px;
  color: var(--at-text-faint);
}

.at-stat-sep {
  width: 1px;
  background: #E4EDF5;
}

.at-create {
  position: relative;
  overflow: hidden;
  text-align: left;
  border: 1.5px dashed var(--at-border-accent);
  border-radius: var(--at-radius-lg);
  padding: 28px 30px;
  background: var(--at-surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

.at-create img {
  position: absolute;
  right: 8px;
  bottom: -6px;
  width: 118px;
  height: 118px;
  object-fit: contain;
  pointer-events: none;
}

.at-create-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--at-primary);
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.at-create-title {
  font-size: 17px;
  font-weight: 900;
  color: var(--at-text);
  margin-top: 6px;
}

.at-create-desc {
  position: relative;
  font-size: 12.5px;
  color: var(--at-text-muted);
  line-height: 1.8;
  /* キャラクター画像に重ならない幅に留める。モックの 178px をそのまま移植すると
     枠がモックより広いぶん「かん／たん設定」のように単語の途中で折り返す。 */
  max-width: 240px;
}

.at-create:hover {
  border-color: var(--at-primary);
  box-shadow: 0 12px 26px rgba(31, 134, 208, 0.14);
  transform: translateY(-2px);
  text-decoration: none;
}

.at-template-card:hover {
  border-color: var(--at-border-accent);
  background: var(--at-surface-alt);
  text-decoration: none;
}

.at-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.at-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.at-section-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
}

.at-section-note {
  font-size: 12.5px;
  color: var(--at-text-faint);
}

.at-tabs {
  display: flex;
  gap: 4px;
  background: #E6EFF7;
  padding: 3px;
  border-radius: 10px;
}

.at-tab {
  border: none;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  background: transparent;
  color: var(--at-text-muted);
  transition: background 0.15s;
}

.at-tab.at-tab-active {
  background: var(--at-surface);
  color: var(--at-primary);
  box-shadow: 0 1px 3px rgba(27, 43, 58, 0.12);
}

.at-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 18px;
}

.at-grid-templates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.at-card-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.at-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
}

.at-card-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.at-card-desc {
  margin: 0;
  font-size: 12.5px;
  color: #5A7086;
  line-height: 1.85;
  min-height: 46px;
}

.at-card-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.at-card-sep {
  height: 1px;
  background: #EEF3F8;
}

.at-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.at-card-meta {
  font-size: 11.5px;
  color: var(--at-text-dim);
}

.at-card-actions {
  display: flex;
  gap: 8px;
}

.at-page .at-btn-ghost {
  font-size: 12.5px;
  font-weight: 700;
  color: #5A7086;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--at-border);
}

.at-page .at-btn-ghost:hover {
  background: #F5FAFE;
  text-decoration: none;
  color: #5A7086;
}

.at-page .at-btn-chat {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--at-primary);
  padding: 7px 14px;
  border-radius: 8px;
}

.at-page .at-btn-chat:hover {
  background: var(--at-primary-hover);
  text-decoration: none;
  color: #fff;
}

.at-template-card {
  text-align: left;
  background: var(--at-surface);
  border: 1px solid var(--at-border);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.at-template-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--at-text);
}

.at-template-desc {
  font-size: 12px;
  color: var(--at-text-faint);
  line-height: 1.7;
}

.at-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
  color: var(--at-text-muted);
  font-size: 13.5px;
  line-height: 1.9;
}

.at-empty img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

@media (max-width: 900px) {
  .at-home-top {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   AssistantEdit（3-C で追加）
   -------------------------------------------------------------------------- */

.at-form {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.at-form-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.at-form-head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
}

.at-form-section {
  background: var(--at-surface);
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius-md);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.at-form-section h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  color: var(--at-text-strong);
}

.at-form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.at-form-row > label {
  font-size: 13px;
  font-weight: 700;
  color: var(--at-text-strong);
}

.at-form-row input[type="text"],
.at-form-row textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--at-text);
  border: 1.5px solid var(--at-border-input);
  border-radius: var(--at-radius-sm);
  background: var(--at-surface-input);
  outline: none;
  resize: vertical;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.at-form-row input[type="text"]:focus,
.at-form-row textarea:focus {
  border-color: var(--at-primary);
  background: var(--at-surface);
  box-shadow: var(--at-focus-ring);
}

.at-form-hint {
  font-size: 12px;
  color: var(--at-text-faint);
  line-height: 1.8;
}

.at-form-note {
  font-size: 12.5px;
  color: var(--at-text-muted);
  line-height: 1.8;
  background: var(--at-surface-alt);
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius-sm);
  padding: 12px 14px;
}

.at-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.at-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--at-text-strong);
  cursor: pointer;
}

.at-check input {
  width: 17px;
  height: 17px;
  accent-color: var(--at-primary);
  cursor: pointer;
}

/* 説明を添えて縦に並べる形。ラベル一語では何が変わるのか伝わらないため、
   公開範囲のラジオと同じ見た目に揃える。 */
.at-checks-stacked {
  flex-direction: column;
  gap: 12px;
}

.at-checks-stacked .at-check {
  align-items: flex-start;
}

.at-checks-stacked .at-check input {
  margin-top: 2px;
}

.at-check-desc {
  display: block;
  font-size: 12px;
  color: var(--at-text-faint);
  margin-top: 2px;
}

.at-radios {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.at-radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--at-text);
  cursor: pointer;
}

.at-radio input {
  margin-top: 3px;
  accent-color: var(--at-primary);
  cursor: pointer;
}

.at-radio-desc {
  display: block;
  font-size: 12px;
  color: var(--at-text-faint);
  margin-top: 2px;
}

.at-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.at-page .at-btn-cancel {
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius-sm);
  background: var(--at-surface);
  color: var(--at-text-strong);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.at-page .at-btn-cancel:hover {
  background: var(--at-surface-alt);
  text-decoration: none;
  color: var(--at-text-strong);
}

.at-btn-save {
  height: 44px;
  padding: 0 24px;
  border: none;
  border-radius: var(--at-radius-sm);
  background: var(--at-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--at-shadow-btn);
  transition: background 0.15s, transform 0.15s;
}

.at-btn-save:hover {
  background: var(--at-primary-hover);
  transform: translateY(-1px);
}

.at-delete-form {
  margin-top: 8px;
}

.at-delete-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--at-surface);
  border: 1px solid var(--at-danger-border);
  border-radius: var(--at-radius-md);
  padding: 20px 26px;
}

.at-delete-title {
  font-size: 14px;
  font-weight: 900;
  color: var(--at-danger);
  margin-bottom: 4px;
}

.at-btn-danger {
  height: 40px;
  padding: 0 20px;
  border: 1px solid var(--at-danger-border);
  border-radius: var(--at-radius-sm);
  background: var(--at-danger-bg);
  color: var(--at-danger);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.at-btn-danger:hover {
  background: #F9D9D5;
}

/* --------------------------------------------------------------------------
   一覧系画面の共通部品
   チャット履歴・ギャラリーで使う。3-E（知識ライブラリ）と 3-F（組織設定）も
   一覧画面になるため、画面固有の名前を付けず使い回せる粒度にしてある。
   -------------------------------------------------------------------------- */

.at-page-head h1 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 900;
  color: var(--at-text);
}

.at-page-head p {
  margin: 0;
  font-size: 13.5px;
  color: var(--at-text-muted);
}

/* フィルタ行。項目数が画面ごとに違うので auto-fit で折り返す */
.at-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  align-items: end;
  background: var(--at-surface);
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius-md);
  padding: 20px 22px;
}

.at-filter {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.at-filter > label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--at-text-strong);
}

/* 入力欄と枠線・角丸・フォーカスリングを揃える。
   appearance: none を外すと OS 既定の見た目が勝ってしまう */
.at-select {
  height: 40px;
  padding: 0 34px 0 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--at-text);
  border: 1.5px solid var(--at-border-input);
  border-radius: var(--at-radius-sm);
  background-color: var(--at-surface-input);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364798C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  appearance: none;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.at-select:focus {
  border-color: var(--at-primary);
  box-shadow: var(--at-focus-ring);
}

/* フィルタ行に並べる小さめのボタン。.at-btn-primary は高さ52pxで大きすぎる */
.at-btn-sm {
  height: 40px;
  padding: 0 20px;
  border: none;
  border-radius: var(--at-radius-sm);
  background: var(--at-primary);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.at-btn-sm:hover {
  background: var(--at-primary-hover);
}

.at-count {
  font-size: 13px;
  color: var(--at-text-muted);
}

.at-count strong {
  color: var(--at-text-strong);
}

/* 一覧の表。3-F2a で追加。横スクロールは表の中に閉じる（本文を横に流さない） */
.at-table-wrap {
  overflow-x: auto;
  background: var(--at-surface);
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius-md);
}

.at-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.at-table th {
  padding: 13px 16px;
  text-align: left;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--at-text-strong);
  background: var(--at-surface-alt);
  border-bottom: 1px solid var(--at-border);
  white-space: nowrap;
}

.at-table td {
  padding: 13px 16px;
  color: var(--at-text);
  border-bottom: 1px solid var(--at-border);
  vertical-align: middle;
}

.at-table tbody tr:last-child td {
  border-bottom: none;
}

.at-table tbody tr:hover td {
  background: var(--at-surface-alt);
}

/* 長い本文を列の幅で切る。title 属性で全文を出す前提 */
.at-table-clip {
  display: block;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.at-table-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* 保存結果の帯。案内の .at-info とは別に、成功とエラーの色を持つ */
.at-alert {
  padding: 14px 18px;
  border-radius: var(--at-radius-md);
  font-size: 13.5px;
  border: 1px solid transparent;
}

.at-alert-ok {
  background: var(--at-success-bg);
  border-color: var(--at-success-border);
  color: var(--at-success);
}

.at-alert-ng {
  background: var(--at-danger-bg);
  border-color: var(--at-danger-border);
  color: var(--at-danger);
}

/* asp-validation-summary は、エラーが無くても要素そのものは描かれ、
   validation-summary-valid が付くだけである。.at-alert は余白と背景を持つので、
   そのままだと中身の無い赤い帯が画面の上に居座る。 */
.at-alert.validation-summary-valid {
  display: none;
}

/* フィルタ行のテキスト入力。.at-select を使い回すと矢印の背景画像まで
   付いてしまうため、高さと枠線だけ .at-select に揃えた専用の指定を置く。 */
.at-filters input[type="text"] {
  height: 40px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--at-text);
  border: 1.5px solid var(--at-border-input);
  border-radius: var(--at-radius-sm);
  background: var(--at-surface-input);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.at-filters input[type="text"]:focus {
  border-color: var(--at-primary);
  box-shadow: var(--at-focus-ring);
}

/* 「該当がありません」の案内帯 */
.at-info {
  padding: 18px 20px;
  border-radius: var(--at-radius-md);
  background: var(--at-primary-soft);
  border: 1px solid var(--at-border-accent);
  color: var(--at-primary-deep);
  font-size: 13.5px;
}

/* --------------------------------------------------------------------------
   チャット履歴
   -------------------------------------------------------------------------- */

.at-logs {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.at-log {
  background: var(--at-surface);
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius-md);
  overflow: hidden;
}

.at-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--at-surface-alt);
  border-bottom: 1px solid var(--at-border);
}

.at-log-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--at-text-strong);
}

.at-log-model {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 400;
  color: var(--at-text-dim);
}

.at-log-time {
  font-size: 12px;
  color: var(--at-text-dim);
  white-space: nowrap;
}

.at-log-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.at-log-turn-label {
  margin: 0 0 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--at-primary-deep);
}

/* 改行と長い URL を保つ。pre-wrap でないと本文が1行に潰れる */
.at-log-turn-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--at-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.at-log-tokens {
  padding-top: 12px;
  border-top: 1px dashed var(--at-border);
  font-size: 12px;
  color: var(--at-text-dim);
}

/* --------------------------------------------------------------------------
   ページ送り
   -------------------------------------------------------------------------- */

.at-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.at-page .at-page-link {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius-sm);
  background: var(--at-surface);
  color: var(--at-text-strong);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.at-page .at-page-link:hover {
  background: var(--at-primary-soft);
  border-color: var(--at-border-accent);
  color: var(--at-primary-deep);
}

.at-page .at-page-current {
  background: var(--at-primary);
  border-color: var(--at-primary);
  color: #fff;
}

.at-page .at-page-current:hover {
  background: var(--at-primary);
  border-color: var(--at-primary);
  color: #fff;
}

/* --------------------------------------------------------------------------
   ギャラリー
   -------------------------------------------------------------------------- */

.at-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
}

.at-gallery-card {
  background: var(--at-surface);
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}

.at-gallery-card:hover {
  box-shadow: var(--at-shadow-card);
  transform: translateY(-3px);
}

.at-gallery-thumb {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: var(--at-surface-alt);
}

.at-gallery-meta {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* 1行に収めて省略する。text-overflow は overflow: hidden と対で効く */
.at-gallery-prompt {
  font-size: 12.5px;
  color: var(--at-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.at-gallery-sub {
  font-size: 11.5px;
  color: var(--at-text-dim);
}

/* --------------------------------------------------------------------------
   軽量モーダル
   Bootstrap の JS を読み込まないため自前で持つ。開閉は .at-open の
   付け外しだけで、表示制御はこのファイルに閉じる。
   -------------------------------------------------------------------------- */

.at-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(27, 43, 58, 0.55);
}

.at-modal.at-open {
  display: flex;
}

.at-modal-panel {
  width: 100%;
  max-width: 720px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--at-surface);
  border-radius: var(--at-radius-lg);
  box-shadow: var(--at-shadow-card);
  overflow: hidden;
}

.at-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--at-border);
}

.at-modal-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--at-text);
}

.at-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--at-surface-alt);
  color: var(--at-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.at-modal-close:hover {
  background: var(--at-primary-soft);
  color: var(--at-primary-deep);
}

/* 画像が縦に長くてもパネルからはみ出さないよう、本体だけスクロールさせる */
.at-modal-body {
  padding: 20px;
  overflow-y: auto;
}

/* 入力欄を並べるモーダル（3-F2a で追加）。Gallery の画像プレビューは
   間隔を持たない作りなので、フォームのときだけ縦の間隔を足す */
.at-modal-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.at-modal-img {
  display: block;
  max-width: 100%;
  max-height: 55vh;
  margin: 0 auto 18px;
  border-radius: var(--at-radius-sm);
}

.at-modal-facts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  color: var(--at-text);
}

.at-modal-facts > div {
  display: flex;
  gap: 10px;
}

.at-modal-fact-label {
  flex: 0 0 92px;
  font-weight: 700;
  color: var(--at-text-strong);
}

.at-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--at-border);
  background: var(--at-surface-alt);
}

/* リンクで描画する部品は .at-page を前置する。.at-page a の詳細度(0,1,1)が
   単独クラス(0,1,0)に勝つためで、3-C でチャットボタンの文字が青地に青で
   見えなくなった原因がこれである。前置を消さないこと。 */
.at-page .at-btn-download {
  height: 40px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--at-border-accent);
  border-radius: var(--at-radius-sm);
  background: var(--at-primary-soft);
  color: var(--at-primary-deep);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.at-page .at-btn-download:hover {
  background: var(--at-surface);
}

.at-btn-close-modal {
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--at-border-input);
  border-radius: var(--at-radius-sm);
  background: var(--at-surface);
  color: var(--at-text-strong);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.at-btn-close-modal:hover {
  background: var(--at-surface-alt);
}

/* --------------------------------------------------------------------------
   資料の管理（知識ライブラリ）
   -------------------------------------------------------------------------- */

.at-drop {
  display: block;
  border: 2px dashed var(--at-border-accent);
  border-radius: var(--at-radius-md);
  background: var(--at-surface-alt);
  padding: 34px 24px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.at-drop:hover,
.at-drop-over {
  background: var(--at-primary-soft);
  border-color: var(--at-primary);
}

.at-drop-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--at-text-strong);
}

.at-drop-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--at-text-faint);
  /* 対応形式は21種あるので、狭い画面では折り返させる */
  line-height: 1.7;
}

/* 反映待ちの注意。ヒントより一段強く見せる */
.at-drop-caution {
  display: inline-block;
  margin-top: 6px;
  color: var(--at-primary-deep);
  font-weight: 700;
}

/* リンクで描くボタン。.at-page a の詳細度(0,1,1)が単独クラス(0,1,0)に
   勝つため .at-page を前置する。3-C で文字が青地に青になった原因がこれである。 */
.at-page a.at-btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
}

.at-page a.at-btn-sm:hover {
  color: #fff;
  text-decoration: none;
}

.at-files {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.at-file {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--at-surface);
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius-md);
}

/* 長いファイル名で行が壊れないよう、名前だけを縮める */
.at-file-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--at-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.at-file-meta {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--at-text-dim);
  white-space: nowrap;
}

.at-file-status {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  background: #FFF4E5;
  color: #A96A16;
}

.at-progress {
  height: 6px;
  border-radius: var(--at-radius-pill);
  background: var(--at-border);
  overflow: hidden;
}

.at-progress-bar {
  height: 100%;
  width: 0;
  background: var(--at-primary);
  transition: width 0.2s;
}

/* --------------------------------------------------------------------------
   tom-select（入力検索つきセレクト）
   3-F2a で追加。default テーマの上に AIツインのトークンを被せる。
   細部までは追わず、枠線・角丸・フォーカスリングだけ .at-select に揃える。
   選択肢が多い画面（SuperAdmin の全法人・全ユーザー）でしか使わない。
   -------------------------------------------------------------------------- */

.at-page .ts-wrapper {
  font-family: inherit;
  font-size: 14px;
}

/* tom-select は初期化のとき元の <select> の class をラッパーへ引き継ぐ。
   at-select が付いたままだと枠線と矢印がラッパーにも当たり、内側の
   .ts-control と二重の枠・二重の矢印になる。
   class を外さず打ち消すのは、CDN に届かず素の <select> のまま残ったときに
   装飾を保つためである。 */
.at-page .ts-wrapper.at-select {
  height: auto;
  padding: 0;
  border: none;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
}

.at-page .ts-control {
  min-height: 40px;
  padding: 0 12px;
  color: var(--at-text);
  border: 1.5px solid var(--at-border-input);
  border-radius: var(--at-radius-sm);
  background: var(--at-surface-input);
  box-shadow: none;
}

.at-page .ts-wrapper.focus .ts-control {
  border-color: var(--at-primary);
  box-shadow: var(--at-focus-ring);
}

.at-page .ts-dropdown {
  margin-top: 4px;
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius-sm);
  background: var(--at-surface);
  box-shadow: var(--at-shadow-card);
}

.at-page .ts-dropdown .option {
  padding: 9px 12px;
  font-size: 13.5px;
  color: var(--at-text);
}

.at-page .ts-dropdown .active {
  background: var(--at-primary-soft);
  color: var(--at-primary-deep);
}

.at-page .ts-dropdown .no-results {
  padding: 9px 12px;
  font-size: 13px;
  color: var(--at-text-faint);
}