/* IC Chat styles (scaffold) */
/* Root card styles are defined via .ic-chat-card and related selectors below */

/* IC Chat general layout */
.ic-chat-card > h2 { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.ic-chat-card .ic-composer { display:grid; grid-template-columns: 200px 1fr auto; gap:8px; align-items:start; }
.ic-chat-card .ic-composer #icChatAlias { width:100%; box-sizing:border-box; height:40px; }
.ic-chat-card .ic-composer #icChatTextarea { width:100%; height:40px; min-height:40px; max-height:40px; resize:none; box-sizing:border-box; }
.ic-chat-card .ic-composer #icChatSendBtn { white-space:nowrap; align-self:start; }
/* Allow copy/select inside IC Chat only (global no-select stays for rest of app) */
#icChatMessages, #icChatMessages *,
.ic-chat-card .ic-msg, .ic-chat-card .ic-bubble { -webkit-user-select: text; -ms-user-select: text; user-select: text; }
/* Mention highlight */
.ic-mention { background: rgba(39,174,96,.15); color: var(--text); padding: 0 3px; border-radius: 3px; }
/* Reactions and actions */
.ic-actions { display:inline-flex; align-items:center; gap:6px; margin-left:8px; }
.ic-actions button { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: 4px; padding: 2px 6px; cursor: pointer; }
.ic-actions button.active { color: var(--accent); border-color: var(--accent); }
.ic-reply { color: var(--text-secondary); }
.ic-react-up.active, .ic-react-down.active { background: rgba(39,174,96,.1); }
/* Toolbar */
.ic-toolbar { display:flex; flex-wrap: wrap; align-items:center; gap:8px; margin-bottom:8px; }
/* IC Chat toolbar and admin controls */
.ic-chat-card .ic-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* Admin panel layout: tidy, consistent sizing */
.ic-toolbar .ic-admin { display:none; width:100%; gap:12px; align-items:stretch; }
.ic-toolbar .ic-admin { display:grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 10px 14px; align-items:end; }
.ic-admin-group { display:grid; grid-template-columns: auto 1fr auto; gap:8px; align-items:end; padding: 6px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--card-hover); }
.ic-admin-group .label { color: var(--text); font-weight: 600; align-self:center; }
.ic-admin-input { height: 32px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text); }
.ic-admin-input.small { width: 72px; text-align: center; }
.ic-toolbar input[type="number"], .ic-toolbar input[type="text"] { height: 32px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text); }
.ic-toolbar button { height: 32px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--card-bg); color: var(--text); cursor: pointer; transition: background 120ms ease, border-color 120ms ease; }
.ic-toolbar button:hover { background: var(--card-hover); border-color: var(--accent); color: var(--accent); }
/* Make action buttons full-width within a group for better tap targets */
.ic-admin-group > button { grid-column: 1 / -1; width: 100%; height: 36px; }
/* Minor caption (like "days", "min") alignment */
.ic-admin-group .unit { color: var(--text-secondary); align-self:center; }
@media (max-width: 640px) {
  .ic-toolbar .ic-admin { grid-template-columns: 1fr; }
  .ic-admin-group { grid-template-columns: 1fr; }
  .ic-admin-input.small { width: 100%; text-align: left; }
}
/* IC Admin Drawer */
.ic-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 10009; display: none; }
.ic-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(380px, 95vw); background: var(--card-bg); border-left: 1px solid var(--border-color); z-index: 10010; transform: translateX(100%); transition: transform 200ms ease; display: flex; flex-direction: column; }
.ic-drawer.open { transform: translateX(0); }
.ic-drawer-header { display:flex; align-items:center; justify-content:space-between; padding: 10px 12px; border-bottom: 1px solid var(--border-color); }
.ic-drawer-title { display:flex; align-items:center; gap:8px; font-weight: 700; color: var(--text); }
.ic-drawer-body { padding: 12px; overflow:auto; display:flex; flex-direction: column; gap: 12px; }
.ic-tool-card { border: 1px solid var(--border-color); border-radius: 10px; background: var(--card-hover); padding: 12px; display:grid; gap:10px; }
.ic-tool-card h3 { margin:0; font-size: 1rem; color: var(--text); display:flex; align-items:center; gap:8px; }
.ic-tool-row { display:grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items:end; }
.ic-tool-row .ic-admin-input.small { width: 84px; text-align: center; }
.ic-tool-card .helper { color: var(--text-secondary); font-size: 0.9rem; }
.ic-drawer-footer { padding: 10px 12px; border-top: 1px solid var(--border-color); display:flex; justify-content:flex-end; }
.ic-danger { background: rgba(229,57,53,.10); border-color: rgba(229,57,53,.35) !important; color: #e53935 !important; }
/* IC Admin Popover */
.ic-popover { position: fixed; z-index: 2147483647; width: min(420px, 95vw); max-height: 90vh; overflow: auto; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.45); padding: 12px; display: none; pointer-events: auto; }
.ic-popover-body { display:flex; flex-direction:column; gap:12px; }
.ic-popover .ic-popover-header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom: 8px; }
.ic-popover .ic-popover-header { cursor: move; }
.ic-popover .ic-popover-title { display:flex; align-items:center; gap:8px; font-weight: 700; color: var(--text); }
.ic-popover .ic-tool-card { border: 1px solid var(--border-color); border-radius: 10px; background: var(--card-hover); padding: 12px; display:grid; gap:10px; }
.ic-popover .ic-tool-card h3 { margin:0; font-size: 1rem; color: var(--text); display:flex; align-items:center; gap:8px; }
.ic-popover .ic-tool-row { display:grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items:end; }
.ic-popover .ic-tool-row .ic-admin-input.small { width: 84px; text-align: center; }
.ic-popover .helper { color: var(--text-secondary); font-size: 0.9rem; }
/* Small icon button (used for popover close "x") */
.ic-icon-btn { width: 28px; height: 28px; display:inline-flex; align-items:center; justify-content:center; background: transparent; border: none; color: var(--text-secondary); border-radius: 6px; cursor: pointer; padding: 0; }
.ic-icon-btn i { font-size: 14px; pointer-events:none; }
.ic-icon-btn:hover { background: var(--card-hover); color: var(--text); }
.ic-toggle { width: 32px; padding: 0; display:inline-flex; align-items:center; justify-content:center; border-radius: 8px; }
.ic-toggle.active { border-color: var(--accent); color: var(--accent); background: rgba(39,174,96,.08); }
/* Modern message layout */
.ic-msg { display: grid; grid-template-columns: 36px 1fr; gap: 10px; margin: 8px 0; align-items: flex-start; }
.ic-avatar { width: 36px; height: 36px; border-radius: 50%; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; user-select:none; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.ic-content { background: var(--card-hover); border: 1px solid var(--border-color); border-radius: 12px; padding: 8px 10px; position: relative; padding-right: 48px; }
.ic-header { display:flex; align-items:center; gap:8px; margin-bottom: 4px; }
.ic-alias { font-weight: 600; color: var(--text); }
/* Admin alias styling in IC Chat */
.ic-alias.admin { color: #e53935; }
.ic-time { color: var(--text-secondary); font-size: 0.8rem; margin-left: auto; }
.ic-text { white-space: pre-wrap; line-height: 1.35; color: var(--text); }
.ic-reactions { display:flex; gap:6px; margin-top:6px; }
.ic-chip { display:inline-flex; align-items:center; gap:6px; padding: 2px 8px; border-radius: 999px; background: var(--card-bg); border:1px solid var(--border-color); color: var(--text-secondary); font-size: 0.85rem; cursor: pointer; }
.ic-chip.active { border-color: var(--accent); color: var(--accent); background: rgba(39,174,96,.08); }
.ic-actions-floating { position: absolute; right: 8px; top: 8px; display: inline-flex; gap: 8px; opacity: 0; visibility: hidden; transition: opacity 120ms ease; z-index: 2; }
.ic-msg:hover .ic-actions-floating { opacity: 1; visibility: visible; }
.ic-actions-floating button { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; }
.ic-actions-floating button:hover { color: var(--text); }
/* Reaction pop-out menu */
.ic-react-menu { position: absolute; top: 34px; right: 8px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: var(--shadow); padding: 6px; display:flex; gap:6px; z-index: 5; }
.ic-react-item { display:inline-flex; align-items:center; gap:6px; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--card-hover); color: var(--text); cursor: pointer; }
.ic-react-item.active { border-color: var(--accent); color: var(--accent); background: rgba(39,174,96,.08); }
/* Own messages: right-aligned styling */
.ic-msg.ic-own { grid-template-columns: 1fr 36px; }
.ic-msg.ic-own .ic-content { background: var(--accent-light); border-color: var(--accent); padding-right: 48px; padding-left: 10px; }
.ic-msg.ic-own .ic-actions-floating { right: 8px; left: auto; }
.ic-msg.ic-own .ic-time { order: -1; margin-left: 0; margin-right: auto; }
.ic-msg.ic-own .ic-avatar { grid-column: 2; }
.ic-msg.ic-own .ic-content { grid-column: 1; }
/* Hide empty reactions by default, reveal on hover */
.ic-reactions.empty { opacity: 0; height: 0; overflow: hidden; margin-top: 0; transition: all 120ms ease; }
.ic-msg:hover .ic-reactions.empty { opacity: 1; height: auto; margin-top: 6px; }
/* Visible focus outlines for IC Chat controls (assist keyboard users) */
.ic-chat-card select:focus,
.ic-chat-card textarea:focus,
.ic-chat-card button:focus { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none !important; }
@media (max-width: 640px) {
  .ic-chat-card .ic-composer { grid-template-columns: 1fr; }
  .ic-chat-card .ic-composer #icChatAlias { grid-column: 1 / -1; }
}
/* IC Chat Modal overrides */
#icChatModal .card.ic-chat-card { width: 100%; margin: 0; border: 0; background: transparent; box-shadow: none; }
#icChatModal .card.ic-chat-card > h2 { display: none; }
#icChatModal #icChatMessages { max-height: none !important; min-height: 38vh !important; }
/* In modal, let the chat card auto-size and its content flex correctly */
#icChatModal .card.ic-chat-card { height: auto !important; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#icChatModal #icChatMessages { flex: 1 1 auto; overflow: auto; min-height: 0; }
/* Horizontal composer: Alias | Textarea | Send */
#icChatModal .ic-composer { display: grid; grid-template-columns: 200px 1fr auto; gap: 8px; align-items: start; margin-top: 8px; }
#icChatModal .ic-composer #icChatAlias { width: 100%; box-sizing: border-box; height:40px; }
#icChatModal .ic-composer #icChatTextarea { width: 100%; height:40px; min-height:40px; max-height:40px; resize: none; box-sizing: border-box; }
#icChatModal .ic-composer #icChatSendBtn { white-space: nowrap; align-self: start; }
/* Keep modal header title on one line */
#icChatModalDialog > div:first-child > div { white-space: nowrap; }
/* Modal help icon */
#icChatModal .modal-help-icon { color: var(--text-secondary); display:flex; align-items:center; justify-content:center; font-size: 1rem; padding: 4px; }
#icChatModal .modal-help-icon i { pointer-events:none; }
#icChatModal .modal-help-icon:hover { color: var(--text); }
/* Move close button further right */
#icChatModalDialog > div:first-child { padding-right: 18px; }
#icChatModalClose { margin-right: -4px; }
/* Responsive: stack on small screens */
@media (max-width: 640px) {
  #icChatModal .ic-composer { grid-template-columns: 1fr; }
  #icChatModal .ic-composer #icChatAlias { grid-column: 1 / -1; }
}

/* Modal overlay and dialog base */
#icChatModal { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.6); align-items: center; justify-content: center; }
#icChatModalDialog { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px; width: min(850px, 80vw); height: 71vh; max-height: 71vh; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
#icChatModalDialog > div:first-child { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border-color); }
/* Critical: allow inner flex children to size properly */
#icChatModalDialog { min-height: 0; }
#icChatModalBody { min-height: 0; display: flex; flex-direction: column; overflow: hidden; flex: 1 1 auto; }

/* Generic badge (used for IC chat unread) */
.ic-badge { display: none; background: var(--danger); color: #fff; border-radius: 10px; padding: 0 6px; margin-left: 6px; font-size: 0.75rem; line-height: 1.4; min-width: 18px; text-align: center; }

/* Default hidden admin tools header button */
#icToolsBtn { display: none; }

/* Error message below composer */
#icChatError { color: var(--danger); font-size: 0.85rem; margin-top: 6px; display: none; }