/* 給与・勤怠まるごとクラウド 窓口。サイトの色に合わせた紺。暗い表示にも合わせる */
.mg-root {
  --mg-bg: #ffffff; --mg-ink: #18202e; --mg-muted: #5b6577; --mg-line: #dde1e8; --mg-soft: #f2f5f9;
  --mg-brand: #1f5278; --mg-brand-ink: #ffffff; --mg-q: #e8f0f8; --mg-err: #b42318;
  --mg-shadow: 0 10px 30px rgba(15, 25, 45, .22);
  position: fixed; right: 16px; bottom: 16px; z-index: 99990;
  font-family: "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif; font-size: 15px; line-height: 1.7; color: var(--mg-ink);
}
@media (prefers-color-scheme: dark) {
  .mg-root { --mg-bg: #1b212b; --mg-ink: #e6eaf0; --mg-muted: #a1aab8; --mg-line: #343c4a; --mg-soft: #232a36; --mg-brand: #8db7e6; --mg-brand-ink: #0f1520; --mg-q: #24344a; --mg-err: #ffb4a8; --mg-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
}
.mg-root *, .mg-root *::before, .mg-root *::after { box-sizing: border-box; }
.mg-root [hidden] { display: none !important; }
.mg-root p { margin: 0; }
.mg-launch {
  display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
  padding: 12px 18px; border-radius: 999px; background: var(--mg-brand); color: var(--mg-brand-ink);
  font: inherit; font-weight: 700; box-shadow: var(--mg-shadow);
}
.mg-launch-i { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--mg-brand-ink); color: var(--mg-brand); font-weight: 800; }
.mg-open .mg-launch { display: none; }
.mg-panel {
  position: fixed; right: 16px; bottom: 16px; width: 380px; max-width: calc(100vw - 32px); height: min(640px, calc(100vh - 32px));
  display: flex; flex-direction: column; background: var(--mg-bg); border: 1px solid var(--mg-line); border-radius: 14px; box-shadow: var(--mg-shadow); overflow: hidden;
}
@media (max-width: 480px) {
  .mg-panel { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100%; border-radius: 0; }
}
.mg-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; background: var(--mg-brand); color: var(--mg-brand-ink); }
.mg-title { font-weight: 800; font-size: 15px; }
.mg-sub { font-size: 12px; opacity: .85; }
.mg-x { border: 0; background: transparent; color: inherit; font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.mg-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--mg-soft); }
.mg-msg { max-width: 92%; padding: 9px 12px; border-radius: 12px; white-space: pre-wrap; word-break: break-word; }
.mg-a { align-self: flex-start; background: var(--mg-bg); border: 1px solid var(--mg-line); }
.mg-q { align-self: flex-end; background: var(--mg-q); }
.mg-wait { color: var(--mg-muted); }
.mg-note { align-self: center; font-size: 12px; color: var(--mg-muted); }
.mg-msg p a { color: var(--mg-brand); }
.mg-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mg-chips { padding: 8px 12px 0; margin: 0; background: var(--mg-soft); }
.mg-chip {
  display: inline-block; border: 1px solid var(--mg-brand); background: var(--mg-bg); color: var(--mg-brand);
  border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.mg-chip-main { background: var(--mg-brand); color: var(--mg-brand-ink); }
/* テーマのリンクの色より強くする（答えの下の「登録する」が背景と同じ色で見えなくなっていた） */
.mg-panel a.mg-chip { color: var(--mg-brand); text-decoration: none; }
.mg-panel a.mg-chip-main { color: var(--mg-brand-ink); }
.mg-card { align-self: stretch; background: var(--mg-bg); border: 1px solid var(--mg-line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.mg-card-h { font-weight: 800; }
.mg-card label { font-size: 13px; color: var(--mg-muted); }
.mg-card input, .mg-card textarea, .mg-input textarea {
  width: 100%; font: inherit; color: inherit; background: var(--mg-bg); border: 1px solid var(--mg-line); border-radius: 8px; padding: 8px 10px;
}
.mg-quote-row { display: grid; grid-template-columns: 1fr 96px; gap: 8px; align-items: center; }
.mg-quote-total { font-size: 17px; }
.mg-small { font-size: 12px; color: var(--mg-muted); }
.mg-err { color: var(--mg-err); }
.mg-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.mg-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--mg-line); background: var(--mg-bg); }
.mg-input textarea { resize: none; min-height: 42px; max-height: 120px; }
.mg-btn { border: 0; border-radius: 8px; padding: 8px 16px; background: var(--mg-brand); color: var(--mg-brand-ink); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.mg-btn[disabled] { opacity: .55; cursor: default; }
.mg-foot { display: flex; justify-content: space-between; gap: 8px; padding: 0 12px 4px; background: var(--mg-bg); }
.mg-link { border: 0; background: transparent; padding: 0; font: inherit; font-size: 13px; color: var(--mg-brand); text-decoration: underline; cursor: pointer; }
.mg-legal { padding: 2px 12px 10px; background: var(--mg-bg); }
.mg-legal a { color: var(--mg-brand); margin-left: 4px; }
.mg-root :focus-visible { outline: 2px solid var(--mg-brand); outline-offset: 2px; }
@media print { .mg-root { display: none !important; } }