.information-panel { min-height:0; height:auto; align-self:start; }
.info-detail { padding: 18px; max-height: calc(100vh - 140px); overflow: auto; color: #263c4b; }
.info-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.info-heading h2 { font-size:20px; margin:0 0 12px; }
.info-detail button, .info-detail input, .info-detail select { font:inherit; }
.info-detail button { border:1px solid #bacad4; border-radius:6px; background:#fff; padding:7px 12px; cursor:pointer; }
.info-detail button:disabled, .information-panel button:disabled { opacity:.45; cursor:default; }
.info-compose { display:grid; gap:12px; }
.info-compose > label { display:grid; gap:6px; }
.info-compose input:not([type=checkbox]), .info-compose select { min-width:0; max-width:100%; padding:8px; border:1px solid #bacad4; border-radius:5px; }
.info-recipients { display:grid; gap:8px;  border:1px solid #bacad4; border-radius:5px; }
.info-recipients label { display:flex; gap:8px; align-items:center; }
.info-toolbar { display:grid; grid-template-columns:repeat(7,minmax(0,48px)); gap:10px; align-items:center; }
.info-toolbar button { display:flex; align-items:center; justify-content:center; width:100%; height:58px; padding:0; border:2px solid #c5dae2; border-radius:10px; background:#fff; color:#153451; touch-action:manipulation; }
.info-toolbar button b { font-size:25px; line-height:1; }
.info-color-dot { width:28px; height:28px; border-radius:50%; border:1px solid rgba(0,0,0,.16); }
.info-toolbar button[aria-pressed="true"] { border-color:#6fa9c3; background:#eff8fc; }
.info-toolbar button:focus-visible { outline:3px solid #28759f; outline-offset:2px; }
@media(max-width:480px) { .info-toolbar { gap:6px; } .info-toolbar button { height:48px; } .info-color-dot { width:24px; height:24px; } }
.info-editor { min-height:160px; padding:10px; border:1px solid #9aafbd; border-radius:5px; background:#fff; white-space:pre-wrap; overflow-wrap:anywhere; }
.info-compose .info-send { justify-self:end; background:#276d98; color:white; padding:9px 30px; }
.info-status { margin:0; font-size:14px; color:#8a351c; }
.info-message { border-left:3px solid #d18b13; background:#fff6db; border-radius:6px; padding:12px; margin-bottom:14px; overflow-wrap:anywhere; }
.info-message h3 { font-size:18px; margin:0 0 8px; }
.info-meta,.info-parent { color:#5c707e; font-size:13px; margin:5px 0; }
.info-body { white-space:pre-wrap; overflow-wrap:anywhere; margin:14px 0; }
.info-files { display:grid; gap:6px; margin-bottom:10px; }
.info-files a { color:#1565c0; }
.info-placeholder { text-align:center; color:#738795; padding:40px 0; }
.information-panel .notice-list { min-width:0; grid-template-columns:minmax(0,1fr); }
.information-panel button.notice-item { min-width:0; max-width:100%; width:100%; text-align:left; cursor:pointer; font-family:inherit; gap:8px; }
.information-panel .notice-item time { flex-shrink:0; }
.information-panel .notice-item span { flex:1 1 auto; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.information-panel .notice-item.is-selected { border-color:#28759f; background:#eaf6fd; }
@media(max-width:840px) { .info-detail { max-height:none; padding:12px; } }

[data-recipient-options] { display:grid; gap:10px; }
.info-staff-list { max-height:220px; overflow:auto; display:grid; gap:8px; padding:8px; background:#f7fafc; }
.info-staff-list[hidden] { display:none; }
.info-recipients .info-corporation { display:grid; gap:6px; }

.info-read-status { margin-top:12px; border:1px solid #bacad4; border-radius:6px; background:#fff; }
.info-read-status summary { padding:10px 12px; cursor:pointer; font-weight:600; }
.info-read-status-content { padding:0 12px 12px; font-size:14px; }
.info-read-table-wrap { max-height:300px; overflow:auto; }
.info-read-status table { width:100%; border-collapse:collapse; text-align:left; }
.info-read-status th,.info-read-status td { padding:8px 6px; border-bottom:1px solid #dce5eb; }
.info-read-status th { background:#f0f6fa; }
.info-read-status td:nth-child(2) { white-space:nowrap; }

/* Keep the mobile INFORMATION heading and its controls on one row. */
@media (max-width: 420px) {
  .information-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 4px;
  }
  .information-header .pager-buttons {
    grid-column: auto;
  }
  .information-header .information-icon {
    width: 22px;
    height: 25px;
    margin-right: 4px;
  }
  .information-header h1 {
    font-size: clamp(12px, 4vw, 17px);
  }
  .information-header .new-button {
    width: 76px;
  }
}

/* Match the suggestion-box controls, including the visible button artwork. */
@media (max-width: 760px) {
  .information-header .new-button {
    width: 88px;
    height: 32px;
    border: 1px solid #238fbd;
    border-radius: 9px;
    background: #2798c8;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
  }
  .information-header .new-button img { display: none; }
  .information-header .new-button::after { content: '+新規作成'; }
  .information-header .pager-buttons { gap: 5px; }
  .information-header .pager-buttons button { width: 33px; height: 33px; }
}

.info-message.is-own:not(.is-latest) { background:#d9f1fc; border-left-color:#298fbd; }
.info-message.is-latest { background:transparent; border:0; border-radius:0; padding:12px 0; }
.info-latest-label { display:inline-block; margin-right:8px; padding:2px 8px; border-radius:4px; background:#216d94; color:#fff; font-size:13px; vertical-align:middle; }

.info-files .info-image-link { justify-self:start; max-width:100%; padding:0; border:0; background:none; color:#1565c0; text-align:left; text-decoration:underline; overflow-wrap:anywhere; }
.info-image-preview { box-sizing:border-box; width:min(1100px,96vw); max-width:96vw; max-height:94vh; padding:16px; border:1px solid #6fa9c3; border-radius:10px; color:#263c4b; }
.info-image-preview::backdrop { background:rgba(0,0,0,.6); }
.info-image-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.info-image-heading strong { overflow-wrap:anywhere; min-width:0; }
.info-image-preview button { font:inherit; padding:7px 12px; border:1px solid #bacad4; border-radius:6px; background:#fff; white-space:nowrap; cursor:pointer; }
.info-image-tools { display:flex; gap:8px; margin:12px 0; }
.info-image-canvas { max-height:68vh; overflow:auto; background:#eef2f5; }
.info-image-canvas img { display:block; max-width:100%; max-height:68vh; margin:auto; object-fit:contain; }
.info-image-canvas img[hidden] { display:none; }
.info-image-canvas img.is-zoomed { max-width:none; max-height:none; margin:0; }

.info-image-tools a { align-self:center; margin-left:auto; color:#1565c0; font-size:14px; white-space:nowrap; }

[data-info-reply]:not(:empty) { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid #bacad4; }