/* ── Spin animation ─────────────────────────────────────── */
@keyframes gc-spin { to { transform: rotate(360deg); } }
.ri-spin { display: inline-block; animation: gc-spin .8s linear infinite; }

/* ══════════════════════════════════════════════════════════
   LAYOUT FIX
   app-chat.css uses calc(100vh - 11.7rem) which assumes the
   standard Materialize layout has content-wrapper padding +
   footer. Our chat page has neither, so we chain height:100%
   through the DOM instead of relying on that calc.
══════════════════════════════════════════════════════════ */

body.gc-chat-page {
    height: 100vh;
    overflow: hidden;
}

body.gc-chat-page .layout-wrapper,
body.gc-chat-page .layout-container {
    height: 100%;
    min-height: 0;
}

body.gc-chat-page .layout-page {
    min-height: 0;
}

body.gc-chat-page .content-wrapper {
    padding: 0 !important;
    min-height: 0;
}

body.gc-chat-page .content-wrapper > .flex-grow-1 {
    min-height: 0;
}

/* app-chat fills its container instead of using calc(100vh - 11.7rem) */
body.gc-chat-page .app-chat {
    block-size: 100% !important;
}

body.gc-chat-page .app-chat .app-chat-contacts,
body.gc-chat-page .app-chat .app-chat-conversation,
body.gc-chat-page .app-chat .app-chat-history,
body.gc-chat-page .app-chat .app-chat-sidebar-left,
body.gc-chat-page .app-chat .app-chat-sidebar-right {
    block-size: 100% !important;
}

/* Contacts sidebar: flex column so sidebar-body fills remaining height */
body.gc-chat-page .app-chat .app-chat-contacts {
    display: flex !important;
    flex-direction: column !important;
}


body.gc-chat-page .app-chat .app-chat-contacts .sidebar-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    block-size: auto !important;
    overflow: hidden !important;
}

/* History panel: CSS grid so body fills the 1fr slot between header and footer */
body.gc-chat-page .app-chat .app-chat-history .chat-history-wrapper {
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
    height: 100% !important;
}

body.gc-chat-page .app-chat .app-chat-history .chat-history-body {
    block-size: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR — LOCK TO ICON-ONLY (no hover expansion)
══════════════════════════════════════════════════════════ */

/* Force icon-only width always, regardless of hover */
body.gc-chat-page #layout-menu {
    inline-size: var(--bs-menu-collapsed-width) !important;
    transition: none !important;
    overflow: visible !important; /* tooltips escape the sidebar */
}
body.gc-chat-page #layout-menu .menu-inner > .menu-item {
    inline-size: var(--bs-menu-collapsed-width) !important;
}

/* Always hide text labels (Materialize only hides them on :not(:hover)) */
body.gc-chat-page #layout-menu .menu-inner > .menu-item div:not(.badge) {
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    overflow: hidden !important;
    flex: 0 !important;
}

/* Center icon since text is gone */
body.gc-chat-page #layout-menu .menu-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-inline: 0 !important;
}

/* Active item: solid primary background around icon */
body.gc-chat-page #layout-menu .menu-item.active > .menu-link {
    background: rgba(var(--bs-primary-rgb), 0.15) !important;
    box-shadow: none !important;
}
body.gc-chat-page #layout-menu .menu-item.active > .menu-link .menu-icon {
    color: var(--bs-primary) !important;
}

/* Hover (non-active) */
body.gc-chat-page #layout-menu .menu-item:not(.active) > .menu-link:hover {
    background: var(--bs-menu-hover-bg) !important;
}

/* Kill the box-shadow that appears on sidebar hover */
body.gc-chat-page #layout-menu:hover {
    box-shadow: none !important;
}

/* Mobile sidebar toggle button */
body.gc-chat-page .gc-menu-toggle-btn {
    position: fixed;
    top: 0.625rem;
    left: 0.625rem;
    z-index: 1050;
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR USER SECTION (pinned to bottom)
══════════════════════════════════════════════════════════ */

.gc-sidebar-user {
    padding: 0.625rem;
    margin-top: auto;
    display: flex;
    justify-content: center;
}

.gc-sidebar-user-btn {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    border-radius: 50%;
    line-height: 1;
    transition: opacity .15s;
}
.gc-sidebar-user-btn:hover { opacity: 0.8; }

/* Green online status dot */
.gc-status-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #28a745;
    border: 2px solid var(--bs-paper-bg, #fff);
}

/* ══════════════════════════════════════════════════════════
   USER CARD POPUP
══════════════════════════════════════════════════════════ */

.gc-user-card {
    position: fixed;
    left: var(--bs-menu-collapsed-width);
    bottom: 0.75rem;
    width: 240px;
    background: var(--bs-paper-bg, #fff);
    border-radius: 0.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
    border: 1px solid var(--bs-border-color);
    z-index: 1100;
    overflow: hidden;
}

.gc-user-card-header {
    padding: 0.875rem 1rem;
}

.gc-user-card-body { }

.gc-user-card-link {
    display: flex;
    align-items: center;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--bs-body-color);
    text-decoration: none;
    transition: background .12s;
    cursor: pointer;
}
.gc-user-card-link:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
.gc-user-card-link.text-danger:hover { color: var(--bs-danger) !important; }

/* ══════════════════════════════════════════════════════════
   CHANNEL ICON CIRCLES (used in chat header)
══════════════════════════════════════════════════════════ */

.gc-ch-icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.gc-ch-icon i { font-size: 18px; }
.gc-ch-icon-sm { width: 32px; height: 32px; }
.gc-ch-icon-sm i { font-size: 14px; }

/* ══════════════════════════════════════════════════════════
   CONVERSATION LIST ITEMS
   Materialize's app-chat.css handles: padding, border-radius,
   active (primary bg + white text), and time colour.
   We only add: hover state, and white-out for secondary text
   when the item is active.
══════════════════════════════════════════════════════════ */

/* Hover (app-chat.css has no hover rule) */
.app-chat .app-chat-contacts .sidebar-body
.chat-contact-list li.chat-contact-list-item:not(.active):hover {
    background-color: var(--bs-tertiary-bg);
}

/* When active, secondary text should also turn white */
.app-chat .app-chat-contacts .sidebar-body
.chat-contact-list li.chat-contact-list-item.active .chat-contact-last-msg,
.app-chat .app-chat-contacts .sidebar-body
.chat-contact-list li.chat-contact-list-item.active .gc-channel-badge,
.app-chat .app-chat-contacts .sidebar-body
.chat-contact-list li.chat-contact-list-item.active .badge {
    color: rgba(255,255,255,.85) !important;
    background-color: rgba(255,255,255,.2) !important;
}

/* ══════════════════════════════════════════════════════════
   ACTIVE BTN (chat header)
══════════════════════════════════════════════════════════ */

.gc-btn-active { font-size: 12px; padding: 4px 14px !important; height: auto; }

/* ══════════════════════════════════════════════════════════
   COMPOSER TAB BAR
══════════════════════════════════════════════════════════ */

.gc-compose-tabs {
    display: flex;
    border-bottom: 1px solid var(--bs-border-color);
    padding-top: 4px;
}
.gc-compose-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 6px 14px;
    font-size: 13px; font-weight: 500;
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: color .15s, border-color .15s;
    line-height: 1.4;
    margin-bottom: -1px;
}
.gc-compose-tab:hover { color: var(--bs-body-color); }
.gc-compose-tab.active { color: var(--bs-primary); border-bottom-color: var(--bs-primary); }

/* ══════════════════════════════════════════════════════════
   TEXTAREA
══════════════════════════════════════════════════════════ */

.message-input {
    resize: none;
    max-height: 100px;
    font-size: 14px;
    line-height: 1.5;
}
.gc-note-mode { background: rgba(253, 230, 138, .15) !important; }

/* ══════════════════════════════════════════════════════════
   CHANNEL BADGE PILLS
══════════════════════════════════════════════════════════ */

.gc-channel-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px; font-weight: 600;
    color: #fff;
    white-space: nowrap; flex-shrink: 0;
}
.gc-badge-facebook  { background: #1877F2; }
.gc-badge-instagram { background: #E1306C; }
.gc-badge-line      { background: #06C755; }
.gc-badge-whatsapp  { background: #25D366; }
.gc-badge-portal    { background: #6366f1; }
.gc-badge-default   { background: var(--bs-secondary-color, #6b7280); }