/* css/tinky-buddy.css — Tinky Buddy companion. Brand blue/purple, warm. */
.tb-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 9998;
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, #1976D2, #7B1FA2); color: #fff; font-size: 26px;
  box-shadow: 0 8px 22px rgba(25,118,210,.45);
}
.tb-fab:hover { transform: translateY(-2px); }

.tb-buddy-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(17,24,39,.5); display: flex; align-items: flex-end; justify-content: flex-end; padding: 16px; }
.tb-buddy { background: #fff; width: min(420px,100%); height: min(640px,90vh); border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.4); }
.tb-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #eef0f3; background: linear-gradient(135deg, rgba(25,118,210,.1), rgba(123,31,162,.08)); flex-wrap: wrap; }
.tb-title { font-weight: 800; color: #111827; font-size: .95rem; flex: 1; display: flex; align-items: center; gap: 6px; }
.tb-proto { font-size: .55rem; font-weight: 700; background: #7B1FA2; color: #fff; padding: 2px 6px; border-radius: 999px; }
.tb-mode { display: flex; gap: 4px; background: #f1f5f9; border-radius: 999px; padding: 3px; }
.tb-mode-btn { border: none; background: transparent; cursor: pointer; font-size: .72rem; font-weight: 700; color: #475569; padding: 4px 9px; border-radius: 999px; }
.tb-mode-btn[aria-selected="true"] { background: #1976D2; color: #fff; }
.tb-x { border: none; background: transparent; font-size: 1.05rem; color: #6b7280; cursor: pointer; width: 32px; height: 32px; border-radius: 8px; }
.tb-x:hover { background: #f3f4f6; }

.tb-thread { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #fafbfc; }
.tb-msg { max-width: 84%; padding: 10px 13px; border-radius: 16px; font-size: .92rem; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.tb-buddy-overlay .tb-buddy .tb-thread .tb-msg.tb-buddy { align-self: flex-start; background: #eef2f7; color: #111827; border-bottom-left-radius: 5px; }
.tb-msg.tb-user { align-self: flex-end; background: #1976D2; color: #fff; border-bottom-right-radius: 5px; }

.tb-input { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid #eef0f3; }
.tb-mic { border: none; background: #f1f5f9; width: 44px; height: 44px; border-radius: 50%; font-size: 19px; cursor: pointer; flex-shrink: 0; }
.tb-mic-on { background: #ef4444; color: #fff; animation: tb-pulse 1s infinite; }
@keyframes tb-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.5); } 50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); } }
.tb-input input { flex: 1; border: 1px solid #d1d5db; border-radius: 22px; padding: 10px 14px; font-size: .95rem; }
.tb-input input:focus { outline: none; border-color: #1976D2; }
.tb-send { border: none; background: #1976D2; color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 18px; cursor: pointer; flex-shrink: 0; }
.tb-send:hover { background: #0D47A1; }

@media (max-width: 480px) { .tb-buddy-overlay { padding: 0; } .tb-buddy { height: 100%; width: 100%; border-radius: 0; } }