/* Hive Chat Module - v1.0.0 */

/* ============================================================
   Hidden-attribute fix
   Elements like .hive-mini-panel use display:flex, which overrides
   the HTML [hidden] attribute (so .hidden = true did nothing and the
   panel could not be closed). This makes [hidden] win for Hive elements.
   ============================================================ */
[id^="hive"][hidden],
[class^="hive"][hidden],
.hive-mini-panel[hidden],
.hive-mini-chat[hidden],
.hive-bubble__icon[hidden],
.hive-bubble__badge[hidden] {
  display: none !important;
}

/* ============================================================
   Variables
   ============================================================ */
:root {
  --hive-accent:        #6986e8;
  --hive-accent-hover:  #5572d4;
  --hive-accent-light:  #eef0fd;
  --hive-bg:            #ffffff;
  --hive-bg-sidebar:    #f8f9fa;
  --hive-bg-hover:      #f0f2f5;
  --hive-bg-input:      #f5f6f8;
  --hive-border:        #e2e5ea;
  --hive-text:          #1a1a2e;
  --hive-text-muted:    #6b7280;
  --hive-text-faint:    #9ca3af;
  --hive-bubble-mine:   #6986e8;
  --hive-bubble-theirs: #f0f2f5;
  --hive-online:        #22c55e;
  --hive-away:          #f59e0b;
  --hive-busy:          #ef4444;
  --hive-offline:       #9ca3af;
  --hive-radius-sm:     6px;
  --hive-radius-md:     10px;
  --hive-radius-lg:     16px;
  --hive-shadow:        0 2px 12px rgba(0,0,0,0.08);
  --hive-shadow-lg:     0 8px 32px rgba(0,0,0,0.12);
  --hive-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================
   App layout
   ============================================================ */
.hive-app {
  display: flex;
  height: calc(100vh - 60px);
  font-family: var(--hive-font);
  font-size: 13px;
  color: var(--hive-text);
  background: var(--hive-bg);
  border: 1px solid var(--hive-border);
  border-radius: var(--hive-radius-md);
  overflow: hidden;
  position: relative;
}

/* ============================================================
   Sidebar
   ============================================================ */
.hive-sidebar {
  width: 300px;
  min-width: 300px;
  height: 100%;
  background: var(--hive-bg-sidebar);
  border-right: 1px solid var(--hive-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Profile */
.hive-sidebar__profile {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--hive-border);
  flex-shrink: 0;
  position: relative;
}

.hive-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hive-profile__avatar-wrap {
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}

.hive-profile__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--hive-border);
  display: block;
}

.hive-profile__info {
  flex: 1;
  min-width: 0;
}

.hive-profile__name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--hive-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hive-profile__status {
  display: block;
  font-size: 11px;
  color: var(--hive-text-muted);
  margin-top: 1px;
}

/* Status picker dropdown */
.hive-status-picker {
  position: absolute;
  top: calc(100% + 4px);
  left: 14px;
  background: var(--hive-bg);
  border: 1px solid var(--hive-border);
  border-radius: var(--hive-radius-md);
  box-shadow: var(--hive-shadow);
  padding: 4px 0;
  z-index: 200;
  min-width: 130px;
}

.hive-status-picker__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: transparent;
  font-size: 12px;
  color: var(--hive-text);
  cursor: pointer;
  text-align: left;
  font-family: var(--hive-font);
  transition: background 0.1s;
}

.hive-status-picker__item:hover {
  background: var(--hive-bg-hover);
}

/* Status dots */
.hive-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--hive-bg-sidebar);
  flex-shrink: 0;
  display: inline-block;
}

.hive-status-dot--online  { background: var(--hive-online); }
.hive-status-dot--away    { background: var(--hive-away); }
.hive-status-dot--busy    { background: var(--hive-busy); }
.hive-status-dot--offline { background: var(--hive-offline); }

/* On avatars */
.hive-contact__avatar-wrap .hive-status-dot,
.hive-profile__avatar-wrap .hive-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  border-color: var(--hive-bg-sidebar);
}

/* Search */
.hive-sidebar__search {
  padding: 8px 12px;
  border-bottom: 1px solid var(--hive-border);
  flex-shrink: 0;
}

.hive-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--hive-bg-input);
  border: 1px solid var(--hive-border);
  border-radius: var(--hive-radius-md);
  padding: 0 10px;
  height: 32px;
}

.hive-search__icon {
  width: 14px;
  height: 14px;
  color: var(--hive-text-faint);
  flex-shrink: 0;
}

.hive-search__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--hive-text);
  outline: none;
  font-family: var(--hive-font);
}

.hive-search__input::placeholder { color: var(--hive-text-faint); }

/* Tabs */
.hive-tabs {
  display: flex;
  border-bottom: 1px solid var(--hive-border);
  flex-shrink: 0;
  padding: 0 4px;
}

.hive-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 9px 4px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--hive-text-muted);
  cursor: pointer;
  font-family: var(--hive-font);
  transition: color 0.15s, border-color 0.15s;
}

.hive-tab svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
}

.hive-tab:hover { color: var(--hive-accent); }

.hive-tab--active {
  color: var(--hive-accent);
  border-bottom-color: var(--hive-accent);
}

/* Contact list */
.hive-sidebar__contacts {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--hive-border) transparent;
}

.hive-sidebar__contacts::-webkit-scrollbar { width: 3px; }
.hive-sidebar__contacts::-webkit-scrollbar-thumb { background: var(--hive-border); }

.hive-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--hive-font);
  transition: background 0.12s;
  position: relative;
}

.hive-contact:hover { background: var(--hive-bg-hover); }
.hive-contact--active { background: var(--hive-bg-hover); }

.hive-contact__avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.hive-contact__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.hive-contact__meta {
  flex: 1;
  min-width: 0;
}

.hive-contact__name {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--hive-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hive-contact__preview {
  display: block;
  font-size: 11px;
  color: var(--hive-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* Unread badge */
.hive-badge {
  background: var(--hive-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hive-badge--hidden { display: none; }

/* ============================================================
   Main content area
   ============================================================ */
.hive-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: var(--hive-bg);
}

/* Empty state */
.hive-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--hive-text-muted);
  padding: 40px;
  text-align: center;
}

.hive-empty__icon {
  width: 56px;
  height: 56px;
  color: var(--hive-border);
  margin-bottom: 16px;
}

.hive-empty h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--hive-text-muted);
  margin: 0 0 6px;
}

.hive-empty p {
  font-size: 13px;
  color: var(--hive-text-faint);
  margin: 0;
}

/* ============================================================
   Chat area
   ============================================================ */
.hive-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

/* Header */
.hive-chat__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  height: 60px;
  min-height: 60px;
  border-bottom: 1px solid var(--hive-border);
  flex-shrink: 0;
  background: var(--hive-bg);
}

.hive-chat__header-info {
  flex: 1;
  min-width: 0;
}

.hive-chat__header-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--hive-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hive-chat__header-sub {
  display: block;
  font-size: 11px;
  color: var(--hive-text-muted);
  margin-top: 1px;
}

.hive-chat__header-actions {
  display: flex;
  gap: 4px;
}

/* Icon button */
.hive-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--hive-radius-sm);
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hive-text-muted);
  transition: background 0.12s, color 0.12s;
  text-decoration: none;
}

.hive-icon-btn svg { width: 16px; height: 16px; }
.hive-icon-btn:hover { background: var(--hive-bg-hover); color: var(--hive-accent); }

/* Messages */
.hive-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 0 8px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--hive-border) transparent;
}

.hive-messages::-webkit-scrollbar { width: 3px; }
.hive-messages::-webkit-scrollbar-thumb { background: var(--hive-border); }

.hive-messages__loader {
  display: flex;
  justify-content: center;
  padding: 12px;
}

.hive-messages__load-more {
  text-align: center;
  padding: 8px;
}

.hive-messages__load-more button {
  font-size: 11px;
  color: var(--hive-accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 999px;
  transition: background 0.12s;
}

.hive-messages__load-more button:hover { background: var(--hive-accent-light); }

/* Date divider */
.hive-date-divider {
  text-align: center;
  font-size: 10px;
  color: var(--hive-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 10px 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
}

.hive-date-divider::before,
.hive-date-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hive-border);
}

/* Message bubble */
.hive-msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 2px 16px;
  position: relative;
}

.hive-msg--mine {
  flex-direction: row-reverse;
}

.hive-msg__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-bottom: 2px;
}

.hive-msg__body {
  display: flex;
  flex-direction: column;
  max-width: 62%;
  min-width: 0;
}

.hive-msg--mine .hive-msg__body {
  align-items: flex-end;
}

.hive-msg__name {
  font-size: 11px;
  color: var(--hive-text-faint);
  margin-bottom: 3px;
  padding-left: 2px;
}

.hive-msg__bubble {
  position: relative;
}

.hive-msg__text {
  margin: 0;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
}

.hive-msg--theirs .hive-msg__text {
  background: var(--hive-bubble-theirs);
  color: var(--hive-text);
  border-bottom-left-radius: 4px;
}

.hive-msg--mine .hive-msg__text {
  background: var(--hive-bubble-mine);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.hive-msg__image-link { display: block; }

.hive-msg__image {
  max-width: 260px;
  max-height: 180px;
  border-radius: var(--hive-radius-md);
  display: block;
  object-fit: cover;
  cursor: pointer;
}

.hive-msg__file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--hive-bg-input);
  border: 1px solid var(--hive-border);
  border-radius: var(--hive-radius-md);
  font-size: 12px;
  color: var(--hive-accent);
  text-decoration: none;
}

.hive-msg__file:hover { background: var(--hive-accent-light); }

.hive-msg__time {
  font-size: 10px;
  color: var(--hive-text-faint);
  margin-top: 3px;
  padding: 0 2px;
}

.hive-msg__actions {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -30px;
}

.hive-msg--mine .hive-msg__actions { right: auto; left: -30px; }
.hive-msg:hover .hive-msg__actions { display: flex; }

.hive-msg__delete {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--hive-bg-hover);
  color: var(--hive-text-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  transition: background 0.12s, color 0.12s;
}

.hive-msg__delete:hover { background: #fee2e2; color: #ef4444; }

/* Typing indicator */
.hive-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 16px 8px;
}

.hive-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hive-text-faint);
  animation: hive-typing 1.2s infinite;
}

.hive-typing span:nth-child(2) { animation-delay: 0.2s; }
.hive-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes hive-typing {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1;   }
}

/* ============================================================
   Composer
   ============================================================ */
.hive-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--hive-border);
  background: var(--hive-bg);
  flex-shrink: 0;
}

.hive-composer__attach {
  width: 30px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hive-text-muted);
  cursor: pointer;
  border-radius: var(--hive-radius-sm);
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}

.hive-composer__attach svg { width: 16px; height: 16px; }
.hive-composer__attach:hover { background: var(--hive-bg-hover); color: var(--hive-accent); }

.hive-composer__input-wrap {
  flex: 1;
  min-width: 0;
}

.hive-composer__input {
  width: 100%;
  min-height: 36px;
  max-height: 120px;
  padding: 8px 12px;
  border: 1px solid var(--hive-border);
  border-radius: var(--hive-radius-md);
  background: var(--hive-bg-input);
  font-size: 13px;
  font-family: var(--hive-font);
  color: var(--hive-text);
  resize: none;
  outline: none;
  line-height: 1.5;
  overflow: hidden;
  transition: border-color 0.15s;
  box-sizing: border-box;
  display: block;
}

.hive-composer__input:focus {
  border-color: var(--hive-accent);
  background: var(--hive-bg);
}

.hive-composer__input::placeholder { color: var(--hive-text-faint); }

.hive-composer__send {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: var(--hive-radius-md);
  border: none;
  background: var(--hive-accent);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}

.hive-composer__send svg { width: 16px; height: 16px; }
.hive-composer__send:hover { background: var(--hive-accent-hover); }
.hive-composer__send:focus { outline: none; }

/* ============================================================
   Spinner
   ============================================================ */
.hive-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--hive-border);
  border-top-color: var(--hive-accent);
  border-radius: 50%;
  animation: hive-spin 0.7s linear infinite;
}

@keyframes hive-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Floating bubble
   ============================================================ */
.hive-bubble {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--hive-accent);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9990;
  box-shadow: var(--hive-shadow-lg);
  transition: transform 0.2s, background 0.15s;
}

.hive-bubble:hover { transform: scale(1.06); background: var(--hive-accent-hover); }

.hive-bubble__icon { width: 24px; height: 24px; }

.hive-bubble__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  font-family: var(--hive-font);
}

/* ============================================================
   Mini panel
   ============================================================ */
.hive-mini-panel {
  position: fixed;
  bottom: 86px;
  right: 24px;
  width: 320px;
  height: 440px;
  background: var(--hive-bg);
  border: 1px solid var(--hive-border);
  border-radius: var(--hive-radius-lg);
  box-shadow: var(--hive-shadow-lg);
  z-index: 9989;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: hive-panel-in 0.2s ease;
}

@keyframes hive-panel-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hive-mini-panel__header {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hive-border);
  flex-shrink: 0;
}

.hive-mini-panel__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--hive-text);
  flex: 1;
}

.hive-mini-panel__actions {
  display: flex;
  gap: 4px;
}

.hive-mini-panel__body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Mini contacts */
.hive-mini-contacts {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}

.hive-mini-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: var(--hive-font);
  transition: background 0.12s;
}

.hive-mini-contact:hover { background: var(--hive-bg-hover); }

.hive-mini-contact__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--hive-text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hive-mini-contact__preview {
  font-size: 11px;
  color: var(--hive-text-muted);
}

/* Mini chat */
.hive-mini-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.hive-mini-chat__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--hive-border);
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--hive-text);
}

.hive-mini-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0 6px;
}

/* Mini composer */
.hive-mini-composer {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--hive-border);
  flex-shrink: 0;
}

.hive-mini-composer__input {
  flex: 1;
  min-height: 32px;
  max-height: 80px;
  padding: 6px 10px;
  border: 1px solid var(--hive-border);
  border-radius: var(--hive-radius-md);
  background: var(--hive-bg-input);
  font-size: 12px;
  font-family: var(--hive-font);
  color: var(--hive-text);
  resize: none;
  outline: none;
  line-height: 1.5;
  overflow: hidden;
  box-sizing: border-box;
}

.hive-mini-composer__input:focus { border-color: var(--hive-accent); }

.hive-mini-composer__send {
  width: 32px;
  height: 32px;
  border-radius: var(--hive-radius-md);
  border: none;
  background: var(--hive-accent);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}

.hive-mini-composer__send svg { width: 14px; height: 14px; }
.hive-mini-composer__send:hover { background: var(--hive-accent-hover); }

/* ============================================================
   Responsive
   ============================================================ */
@media screen and (max-width: 767px) {
  .hive-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    transform: translateX(0);
    transition: transform 0.2s;
    width: 100%;
  }

  .hive-sidebar--hidden {
    transform: translateX(-100%);
  }

  .hive-main {
    width: 100%;
  }
}

/* ── Client picker intro ──────────────────────────────────────────── */
.hive-client-picker__intro {
  padding: 16px 16px 8px;
  border-bottom: 1px solid var(--hive-border);
}
.hive-client-picker__title {
  font-weight: 600;
  font-size: 15px;
  color: var(--hive-text);
}
.hive-client-picker__sub {
  font-size: 12px;
  color: var(--hive-text-muted);
  margin-top: 2px;
}