/* RetroChat — CSS 2.1, no flex/grid, works on Safari iOS 1+ */
* { margin: 0; padding: 0; }
html { height: 100%; }
body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; background: #f0f0f0; color: #222; height: 100%; overflow-x: hidden; }

#wrap { width: 100%; height: 100%; }

/* Header */
#header { background: #2a5db0; color: #fff; padding: 6px 10px; }
#logo { font-size: 16px; font-weight: bold; }
#header-user { margin-left: 10px; font-size: 13px; }
.btn-logout { background: #1a4a9a; color: #fff; border: 1px solid #fff; padding: 2px 8px; font-size: 12px; cursor: pointer; }

/* Layout */
#content { height: 100%; }
#layout { width: 100%; border-collapse: collapse; table-layout: fixed; }
#sidebar { width: 90px; vertical-align: top; background: #e8e8e8; border-right: 1px solid #ccc; }
#main { vertical-align: top; background: #fff; }

/* Login */
#login-box { width: 260px; margin: 40px auto; background: #fff; border: 1px solid #ccc; padding: 16px; }
#login-box h2 { text-align: center; margin-bottom: 12px; color: #2a5db0; }

/* Inputs */
.inp { width: 140px; border: 1px solid #aaa; padding: 4px; font-size: 14px; }
.inp-small { width: 58px; border: 1px solid #aaa; padding: 3px; font-size: 11px; }
.inp-msg { width: 100%; border: 1px solid #aaa; padding: 4px; font-size: 14px; }
.inp-file { font-size: 10px; max-width: 100%; }

/* Buttons */
.btn { background: #2a5db0; color: #fff; border: none; padding: 6px 14px; font-size: 14px; cursor: pointer; }
.btn-sec { background: #888; color: #fff; border: none; padding: 6px 14px; font-size: 14px; cursor: pointer; }
.btn-small { background: #2a5db0; color: #fff; border: none; padding: 3px 5px; font-size: 11px; cursor: pointer; }
.btn-send { background: #2a5db0; color: #fff; border: none; padding: 5px 10px; font-size: 16px; font-weight: bold; cursor: pointer; width: 40px; }
.btn-sec-small { background: #888; color: #fff; border: none; padding: 3px 6px; font-size: 10px; cursor: pointer; margin-top: 3px; }

/* New dialog */
#new-dialog { padding: 4px; border-bottom: 1px solid #ccc; }

/* Dialog list */
#dialog-list { overflow: auto; }
a.dialog-item { display: block; padding: 4px 5px; border-bottom: 1px solid #ddd; text-decoration: none; color: #222; overflow: hidden; }
a.dialog-item.active { background: #2a5db0; color: #fff; }
a.dialog-item.active .dlast { color: #ccd; }
.dname { display: block; font-weight: bold; font-size: 12px; overflow: hidden; }
.dlast { display: block; font-size: 10px; color: #666; overflow: hidden; }

/* Chat header */
#chat-header { background: #e0e8f8; border-bottom: 1px solid #ccc; padding: 5px 8px; font-weight: bold; font-size: 13px; overflow: hidden; }

/* Messages — высота задаётся JS, 180px как запасной вариант */
#messages { height: 180px; overflow: auto; padding: 6px; background: #fafafa; }
.msg { margin-bottom: 8px; max-width: 95%; padding: 5px 8px; word-wrap: break-word; }
.msg-mine { background: #dcf8c6; margin-left: auto; text-align: right; }
.msg-their { background: #fff; border: 1px solid #ddd; text-align: left; }
.msg-time { display: block; font-size: 10px; color: #999; margin-top: 2px; }
.msg-img { max-width: 100%; display: block; }

/* Send area */
#send-area { border-top: 1px solid #ccc; padding: 4px 6px; background: #f5f5f5; }
.btn-attach { display: inline-block; background: #2a5db0; color: #fff; font-size: 18px; font-weight: bold; line-height: 28px; width: 26px; text-align: center; cursor: pointer; }
.inp-file-js { display: block; font-size: 10px; max-width: 100%; }
#attach-info { font-size: 11px; color: #555; padding: 2px 4px; background: #eef; border-bottom: 1px solid #ccd; }
.msg-text { display: block; margin-bottom: 4px; }

/* Load older */
.load-older { text-align: center; padding: 4px; border-bottom: 1px solid #eee; margin-bottom: 4px; font-size: 12px; }
.load-older a { color: #2a5db0; text-decoration: none; }

/* No dialog */
#no-dialog { padding: 20px; color: #888; text-align: center; }

/* Misc */
.error { color: #c00; padding: 6px; background: #fee; border: 1px solid #fcc; margin-bottom: 8px; font-size: 13px; }
.hint { color: #999; font-size: 12px; padding: 8px; }

/* Более широкие экраны */
@media screen and (min-width: 481px) {
  #sidebar { width: 180px; }
  .inp-small { width: 110px; font-size: 12px; }
  .btn-small { font-size: 12px; padding: 3px 6px; }
  .dname { font-size: 13px; }
  .dlast { font-size: 11px; }
  #new-dialog { padding: 6px; }
  a.dialog-item { padding: 6px; }
  #login-box { width: 300px; }
  .inp { width: 180px; }
  #chat-header { font-size: 14px; padding: 6px 10px; }
  .btn-sec-small { font-size: 11px; }
}